with `clip` rather than on with `hidden`. `overflow-x:hidden` computes overflow-y to `auto`, which makes the box a SCROLL CONTAINER — and a scroll container between a position:sticky element and its scrollport silently un-sticks it, which is what `.sticky` (the aside on a two-column page) relies on. `clip` clips the same overflow and creates no scroll container. Header, footer and the mobile bar sit outside

and are fixed anyway. */ main{overflow-x:clip} a{color:inherit;text-decoration:none} img,svg,video{display:block;max-width:100%} img{height:auto} :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px} [id]{scroll-margin-top:calc(var(--hdr-h) + 18px)} h1,h2,h3,h4,h5{margin:0;color:var(--navy);font-weight:700;line-height:1.14;letter-spacing:-.035em} p{margin:0} strong,b{font-weight:700;color:var(--navy)} ::selection{background:rgba(37,99,235,.16)} .wrap{width:min(100% - 2.5rem,var(--max));margin-inline:auto} .wrap-n{width:min(100% - 2.5rem,920px);margin-inline:auto} .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--blue);color:#fff;padding:10px 18px;font-weight:700;border-radius:0 0 8px 0} .skip:focus{left:0} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── brand devices ───────────────────────────────────────────────────── */ .splitbar{height:4px;display:grid;grid-template-columns:1fr 1fr} .splitbar i{display:block;background:var(--blue)} .splitbar i:last-child{background:var(--teal)} .accents{display:flex;gap:5px;margin-top:18px} .accents i{height:4px;border-radius:2px;display:block} .accents i:nth-child(1){width:64px;background:var(--accent)} .accents i:nth-child(2){width:42px;background:var(--teal)} .accents i:nth-child(3){width:22px;background:var(--s300)} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dk)} .eyebrow.on-dark{color:var(--sky)} .eyebrow .sd{width:8px;height:8px;border-radius:50%;background:var(--star);box-shadow:0 0 0 4px rgba(45,212,191,.22);flex:none} .lede{color:var(--s600);font-size:17px;line-height:1.7} .arw{transition:transform .25s var(--ease)} /* Chromium takes a line-break opportunity at an inline-element boundary, so a full stop written after can wrap onto a line of its own. Wrapping the pair in .nb keeps them together. */ .nb{white-space:nowrap} /* ── buttons ─────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:var(--r-sm);font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:-.01em;border:1.5px solid transparent;cursor:pointer;transition:.2s var(--ease);min-height:46px} .btn-b{background:var(--blue);color:#fff;box-shadow:0 8px 20px -10px rgba(37,99,235,.7)} .btn-b:hover{background:var(--blue-dk);transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(37,99,235,.75)} .btn-a{background:var(--accent-dk);color:#fff;box-shadow:0 8px 20px -10px rgba(15,23,42,.45)} .btn-a:hover{background:var(--accent-dk);transform:translateY(-2px)} .btn-o{background:#fff;color:var(--navy);border-color:var(--s200);box-shadow:var(--sh-sm)} .btn-o:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)} .btn-w{background:#fff;color:var(--navy)} .btn-w:hover{background:var(--s100);transform:translateY(-2px)} .btn-gw{border-color:rgba(255,255,255,.3);color:#fff} .btn-gw:hover{border-color:#fff;background:rgba(255,255,255,.1)} .btn-sm{padding:10px 18px;font-size:14px;min-height:40px} /* ── header + mega menu ──────────────────────────────────────────────── */ .hdr{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s} .hdr.on{border-bottom-color:var(--s200);box-shadow:0 4px 20px -14px rgba(15,23,42,.4)} /* Direct child only. As a descendant selector this also matched the .wrap inside .mega, giving the mega panel a 76px flex row with centred items — which made the menu overflow above and below its own panel. */ .hdr>.wrap{display:flex;align-items:center;gap:20px;height:76px} .hdr,.brand,.nav,.btn,.mbtn{-webkit-user-select:none;user-select:none} .brand{display:flex;align-items:center;gap:12px;margin-right:auto} .brand svg{width:42px;height:42px;flex:none} .brand>span{display:flex;flex-direction:column;justify-content:center} .brand b{font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.03em;line-height:1.2} .brand>span>span{font-size:10px;font-weight:600;color:var(--s500);letter-spacing:.02em;line-height:1.3} .nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:600;color:var(--s700)} /* 12px vertical padding takes the hit area to ~42px for touch, while the underline is pulled back inside it so it still sits just under the text. */ .nav>a:not(.btn),.nav .has>button{position:relative;padding:12px 0;background:none;border:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .nav>a:not(.btn)::after,.nav .has>button::after{content:"";position:absolute;left:0;right:100%;bottom:9px;height:2px;background:var(--blue);transition:right .25s var(--ease)} .nav>a:not(.btn):hover,.nav .has>button:hover{color:var(--navy)} .nav>a:not(.btn):hover::after,.nav .has:hover>button::after,.nav .has>button[aria-expanded=true]::after{right:0} .nav a[aria-current=page]{color:var(--blue)} .nav a[aria-current=page]::after{right:0} .chev{width:10px;height:10px;flex:none;transition:transform .22s} .has>button[aria-expanded=true] .chev{transform:rotate(180deg)} /* top:100% rather than a hard 76px, so the panel follows the header height */ .mega{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--s200);border-bottom:1px solid var(--s200);box-shadow:0 26px 44px -30px rgba(15,23,42,.45);padding:26px 0 28px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s var(--ease)} /* guard: the panel's inner .wrap must stay a plain block whatever else matches */ .mega>.wrap{display:block;height:auto;align-items:initial} /* `.hovering` is set by canopus.js and held for ~220ms after the cursor leaves. The CSS states above cover the no-JS case; this one covers the DIAGONAL — a cursor travelling from the trigger to a link at the far end of the panel leaves the trigger sideways, through the 26px gap between two nav items, where nothing is hovered. Without the grace period the panel shuts in the half-second it takes to get there. An interaction delay rather than an animation, deliberately: a transition-delay would do the same job and would be switched off by prefers-reduced-motion, taking the menu with it. */ .has:hover .mega,.mega:hover,.has.hovering .mega,.has>button[aria-expanded=true]+.mega{opacity:1;visibility:visible;transform:none} /* ── the hover bridge ───────────────────────────────────────────────────── Without these the panel is UNREACHABLE WITH A MOUSE, and the failure is total rather than fiddly. The trigger is 48.8px tall and vertically centred in a 77px bar, so its bottom edge sits at y=62.4 while the panel starts at y=77. Moving the cursor from the trigger down to the panel crosses 14.6px belonging to neither: the moment it does, `.has:hover` goes false and the panel becomes `visibility:hidden` — and a hidden element receives no pointer events, so `.mega:hover` can never fire to bring it back. The panel disappears under the cursor and there is no way to re-enter it. Two transparent strips close the gap from both sides, overlapping in the middle so there is no frame where the cursor is over neither: the trigger's y 62.4 → 72.4, and only as wide as "Services", so it sits under nothing else on the bar the panel's y 67 → 77, full width, starting BELOW the other nav links' bottom edge so it never covers one of them Desktop only. Below 1080px the panel is `position: static` and opens on a tap, so there is no gap to bridge and an absolutely positioned strip would have nothing sensible to position against. */ @media(min-width:1081px){ .has>button::before{content:"";position:absolute;left:0;right:0;top:100%;height:10px} .mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px} } .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 20px} .mega a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--s700);transition:.16s} .mega a:hover{background:var(--blue-wash);color:var(--blue)} .mega a span{display:block;font-size:12px;font-weight:500;color:var(--s500);margin-top:2px;line-height:1.45} .mega a:hover span{color:var(--s600)} .mega-h{grid-column:1/-1;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s500);margin:0 0 6px;padding-left:12px} /* the second group heading is separated by links, so :not(:first-child) is the selector that actually matches — .mega-h + .mega-h never does */ .mega-h:not(:first-child){margin-top:20px;padding-top:18px;border-top:1px solid var(--s100)} .mbtn{display:none;border:1px solid var(--s200);border-radius:var(--r-sm);padding:10px 14px;background:#fff;font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer;color:var(--navy);min-height:44px} @media(max-width:1080px){ .mbtn{display:block} .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--s200);padding:8px 1.25rem 24px;box-shadow:var(--sh);max-height:calc(100dvh - 77px);overflow-y:auto;-webkit-overflow-scrolling:touch} .nav.open{display:flex} .has{display:flex;flex-direction:column} .nav>a:not(.btn),.nav .has>button{padding:14px 0;border-bottom:1px solid var(--s100);width:100%;justify-content:space-between;text-align:left} .nav>a:not(.btn)::after,.nav .has>button::after{display:none} /* static, so the panel pushes the rest of the menu down instead of over it */ .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-bottom:1px solid var(--s100);padding:2px 0 10px;display:none;background:var(--s50);border-radius:0 0 var(--r-sm) var(--r-sm)} .has>button[aria-expanded=true]+.mega{display:block} /* Both hover states, or a tap on a phone leaves the panel showing under a finger that has moved on. The panel opens from aria-expanded here. */ .has:hover .mega,.has.hovering .mega{display:none} .has>button[aria-expanded=true]+.mega{display:block} .mega>.wrap{width:100%} .mega-grid{grid-template-columns:1fr;gap:0} .mega a{padding:12px 14px;font-size:14.5px;border-radius:0} .mega a span{display:none} .mega-h{padding:14px 14px 4px;margin:0} .mega-h:not(:first-child){margin-top:4px;padding-top:14px;border-top:1px solid var(--s200)} .nav .btn{margin-top:16px;justify-content:center} } /* Tablet: the collapsed menu has room for two columns of links. */ @media(min-width:600px) and (max-width:1080px){ .mega-grid{grid-template-columns:1fr 1fr;column-gap:12px} .mega a span{display:block} } /* ── breadcrumb ──────────────────────────────────────────────────────── */ .crumb{font-size:13px;color:var(--s600);display:flex;flex-wrap:wrap;align-items:center;gap:8px} .crumb a{font-weight:600;color:var(--s600);border-bottom:1px solid transparent;transition:.16s;padding-block:4px} .crumb a:hover{color:var(--blue);border-bottom-color:var(--blue)} .crumb span[aria-current]{color:var(--s600)} .crumb i{display:block;width:5px;height:5px;border-right:1.5px solid var(--s300);border-top:1.5px solid var(--s300);transform:rotate(45deg)} .crumb.on-dark{color:var(--s400)} .crumb.on-dark a{color:var(--s300)} .crumb.on-dark a:hover{color:#fff;border-bottom-color:var(--star)} .crumb.on-dark i{border-color:var(--s600)} .crumb.on-dark span[aria-current]{color:var(--s400)} /* ── hero: home (split) ──────────────────────────────────────────────── */ .hero{position:relative;padding:calc(var(--hdr-h) + clamp(28px,3.4vw,44px)) 0 clamp(36px,4vw,56px);overflow:hidden;background:linear-gradient(180deg,var(--s50),#fff 62%)} .hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden} .hero-bg .dots{position:absolute;inset:0;opacity:.55;background-image:radial-gradient(circle,var(--s300) 1px,transparent 1px);background-size:26px 26px;-webkit-mask:radial-gradient(ellipse 70% 60% at 70% 32%,#000,transparent 72%);mask:radial-gradient(ellipse 70% 60% at 70% 32%,#000,transparent 72%)} .hero-bg .orb{position:absolute;border-radius:50%;filter:blur(80px)} .hero-bg .o1{width:460px;height:460px;background:rgba(37,99,235,.13);top:-140px;right:-60px} .hero-bg .o2{width:380px;height:380px;background:rgba(13,148,136,.12);top:180px;right:280px} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center} @media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:44px}} .hero h1{font-size:clamp(36px,5.4vw,62px);margin-top:20px;letter-spacing:-.045em;line-height:1.16} /* Named tint-* rather than g1/g2 — g2/g3/g4 are grid utilities further down, and a span sharing that name silently became display:grid inside the H1. */ .hero h1 .tint-b{color:var(--blue)} .hero h1 .tint-t{color:var(--teal)} .hero .lede{margin-top:20px;max-width:520px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .hero-note{margin-top:20px;font-size:13.5px;color:var(--s600);display:flex;flex-wrap:wrap;gap:6px 18px} .hero-note span{display:inline-flex;align-items:center;gap:7px} .hero-note span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none} /* ── hero: inner page (dark banner) ──────────────────────────────────── */ .phero{position:relative;background:var(--navy);color:#fff;padding:calc(var(--hdr-h) + clamp(24px,2.8vw,36px)) 0 clamp(34px,3.8vw,52px);overflow:hidden} .phero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px);background-size:30px 30px} .phero::after{content:"";position:absolute;width:620px;height:620px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(37,99,235,.28),transparent 68%);top:-280px;right:-150px} .phero-in{position:relative;z-index:1} .phero h1{color:#fff;font-size:clamp(32px,4.6vw,52px);margin-top:18px;letter-spacing:-.04em;max-width:16ch} .phero.wide h1{max-width:22ch} .phero-lede{color:var(--s400);margin-top:20px;max-width:62ch;font-size:17px;line-height:1.72} .phero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .phero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center} @media(max-width:960px){.phero-grid{grid-template-columns:1fr;gap:38px}} .phero-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px} .phero-meta span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--s300);padding:7px 14px;border:1px solid rgba(255,255,255,.14);border-radius:99px;background:rgba(255,255,255,.04)} .phero-meta span i{width:6px;height:6px;border-radius:50%;background:var(--star);flex:none} /* ── hero: light inner variant ───────────────────────────────────────── */ .lhero{position:relative;padding:calc(var(--hdr-h) + clamp(24px,2.8vw,36px)) 0 clamp(32px,3.6vw,48px);background:linear-gradient(180deg,var(--accent-wash),#fff 78%);overflow:hidden} .lhero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);background:rgba(37,99,235,.10);top:-200px;right:-120px;pointer-events:none} /* Single-column heroes leave the right half empty. The dot field gives that space the same texture the home and dark heroes have, so it reads as composed rather than as a blank band. */ .lhero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background-image:radial-gradient(circle,var(--s300) 1px,transparent 1px);background-size:26px 26px; -webkit-mask:radial-gradient(ellipse 48% 82% at 84% 44%,#000,transparent 70%); mask:radial-gradient(ellipse 48% 82% at 84% 44%,#000,transparent 70%)} @media(max-width:900px){.lhero::before{display:none}} .lhero-in{position:relative;z-index:1} .lhero h1{font-size:clamp(32px,4.4vw,50px);margin-top:18px;letter-spacing:-.04em;max-width:18ch} .lhero-lede{margin-top:20px;max-width:62ch;font-size:17px;color:var(--s600);line-height:1.72} /* ── answer-first block ──────────────────────────────────────────────── */ .answer{background:#fff;border:1px solid var(--s200);border-left:4px solid var(--accent);border-radius:var(--r);padding:26px 28px;box-shadow:var(--sh-sm)} .answer p{font-size:17px;line-height:1.72;color:var(--s700)} .answer p strong{color:var(--navy)} .answer .answer-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:10px} .answer.on-dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-left-color:var(--star)} .answer.on-dark p{color:var(--s300)} .answer.on-dark p strong{color:#fff} .answer.on-dark .answer-k{color:var(--star)} /* ── section shells ──────────────────────────────────────────────────── */ .sec{padding:var(--y) 0} .sec-sm{padding:clamp(30px,3.4vw,44px) 0} .sec-alt{background:var(--s50)} .sec-wash{background:var(--accent-wash)} .sec-line{border-top:1px solid var(--s200)} .sec-h{max-width:680px;margin-bottom:clamp(26px,3vw,38px)} /* The answer-first block sits directly under a hero, which already has bottom padding — without this the two stack into ~140px of empty band. */ .hero+.sec-sm,.lhero+.sec-sm,.phero+.sec-sm{padding-top:clamp(22px,2.4vw,30px)} /* Two same-tone sections in a row don't need a full double gap between them. */ .sec+.sec,.sec-sm+.sec{padding-top:calc(var(--y) * .82)} .sec-h.mid{margin-inline:auto;text-align:center} .sec-h.mid .accents{justify-content:center} .sec-h h2{font-size:clamp(27px,3.6vw,40px);margin-top:16px} .sec-h p{margin-top:18px} .sec-h.on-dark h2{color:#fff} .sec-h.on-dark p{color:var(--s400)} .dark{background:var(--navy);color:#fff;position:relative;overflow:hidden} .dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);background-size:30px 30px} .dark::after{content:"";position:absolute;width:620px;height:620px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(13,148,136,.2),transparent 68%);bottom:-320px;right:-180px} .dark>.wrap{position:relative;z-index:1} .dark h2,.dark h3,.dark h4{color:#fff} /* prose (used inside long-form sections) */ .prose p{margin-bottom:18px;font-size:16.5px;line-height:1.78} .prose p:last-child{margin-bottom:0} .prose h3{font-size:22px;margin:34px 0 14px} .prose h4{font-size:18px;margin:26px 0 10px} .prose ul,.prose ol{margin:0 0 18px;padding-left:22px} .prose li{margin-bottom:9px;line-height:1.7} .prose a:not(.btn){color:var(--blue);font-weight:600;border-bottom:1px solid rgba(37,99,235,.35)} .prose a:not(.btn):hover{border-bottom-color:var(--blue)} .lnk{color:var(--blue);font-weight:600;border-bottom:1px solid rgba(37,99,235,.35);transition:.16s;padding-block:3px} .lnk:hover{border-bottom-color:var(--blue)} /* ── TOC ─────────────────────────────────────────────────────────────── */ .toc{background:var(--s50);border:1px solid var(--s200);border-radius:var(--r);padding:22px 24px} .toc h2{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s500);margin-bottom:14px} .toc ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 26px;counter-reset:t} @media(max-width:720px){.toc ol{grid-template-columns:1fr}} .toc li{counter-increment:t;font-size:14.5px} .toc a{display:flex;gap:10px;padding:6px 0;font-weight:600;color:var(--s600);transition:.16s} .toc a::before{content:counter(t,decimal-leading-zero);font-size:11.5px;font-weight:700;color:var(--accent-dk);padding-top:3px;flex:none} .toc a:hover{color:var(--blue)} /* ── grid utilities ──────────────────────────────────────────────────── */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px)} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:1000px){.g4{grid-template-columns:1fr 1fr}} @media(max-width:940px){.g3{grid-template-columns:1fr}} @media(max-width:820px){.g2{grid-template-columns:1fr}} @media(max-width:560px){.g4{grid-template-columns:1fr}} .split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.5vw,58px);align-items:center} .split.rev{grid-template-columns:.98fr 1.02fr} @media(max-width:960px){.split,.split.rev{grid-template-columns:1fr;gap:36px}} @media(max-width:960px){.split.rev>*:first-child{order:2}} .aside-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,52px);align-items:start} @media(max-width:980px){.aside-grid{grid-template-columns:minmax(0,1fr)}} /* Grid tracks default to minmax(auto,1fr), so a child with an intrinsic min-width — a .tbl at min-width:600px, a long code string — widens the whole track and pushes the page into horizontal scroll. min-width:0 lets the track shrink and hands the overflow to the child's own scroll container. */ .g2>*,.g3>*,.g4>*,.split>*,.aside-grid>*,.hero-grid>*,.phero-grid>*, .cta-grid>*,.case-in>*,.strip>*,.tiers>*,.hubgrid>*,.numlist>div>*, .ph>*,.risk>*,.arow>*{min-width:0} .sticky{position:sticky;top:calc(var(--hdr-h) + 20px)} @media(max-width:980px){.sticky{position:static}} /* ── BLOCK: card grid ────────────────────────────────────────────────── */ .card{background:#fff;border:1px solid var(--s200);border-radius:var(--r);padding:26px 24px;transition:transform .28s var(--ease),box-shadow .28s,border-color .2s} .card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--s300)} .card h3{font-size:18.5px;margin-bottom:10px} .card p{font-size:14.5px;color:var(--s600);line-height:1.65} .card-ico{width:44px;height:44px;border-radius:11px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;margin-bottom:16px} .card-ico svg{width:21px;height:21px} .card ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px} .card li{font-size:13.5px;color:var(--s600);padding-left:18px;position:relative;line-height:1.6} .card li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--teal);border-radius:1px} .card .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dk);background:var(--accent-wash);padding:5px 10px;border-radius:99px;margin-bottom:12px} a.card{display:block} a.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--blue)} a.card:hover .more .arw{transform:translateX(4px)} /* ── BLOCK: numbered list (deliverables/steps) ───────────────────────── */ .numlist{display:grid;gap:0;counter-reset:n;border-top:1px solid var(--s200)} .numlist>div{counter-increment:n;display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--s200);align-items:start} .numlist>div::before{content:counter(n,decimal-leading-zero);font-size:13px;font-weight:700;color:var(--accent-dk);letter-spacing:.06em;padding-top:3px;min-width:26px} .numlist h3{font-size:17.5px;margin-bottom:6px} .numlist p{font-size:14.5px;color:var(--s600);line-height:1.68} .numlist .meta{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--s500)} /* ── BLOCK: alternating media rows ───────────────────────────────────── */ .arow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(30px,4vw,48px) 0;border-bottom:1px solid var(--s200)} .arow:last-child{border-bottom:0} .arow:nth-child(even)>.arow-fig{order:-1} @media(max-width:900px){.arow{grid-template-columns:1fr;gap:28px}.arow:nth-child(even)>.arow-fig{order:0}} .arow h3{font-size:clamp(21px,2.6vw,27px);margin-bottom:14px} .arow p{font-size:15.5px;color:var(--s600);line-height:1.72;margin-bottom:14px} .arow-fig{background:var(--s50);border:1px solid var(--s200);border-radius:var(--r);padding:22px;overflow:hidden} .arow-fig svg{width:100%;height:auto} /* ── BLOCK: feature strip / stat band ────────────────────────────────── */ .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--s200);border:1px solid var(--s200);border-radius:var(--r);overflow:hidden} @media(max-width:820px){.strip{grid-template-columns:1fr 1fr}} @media(max-width:520px){.strip{grid-template-columns:1fr}} .strip>div{background:#fff;padding:24px 22px} .strip b{display:block;font-size:26px;font-weight:700;letter-spacing:-.04em;color:var(--navy);line-height:1.1} .strip .u{color:var(--accent-dk)} .strip span{display:block;margin-top:7px;font-size:13px;color:var(--s600);line-height:1.55} .strip.on-dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1)} .strip.on-dark>div{background:rgba(255,255,255,.04)} .strip.on-dark b{color:#fff} .strip.on-dark .u{color:var(--star)} .strip.on-dark span{color:var(--s400)} /* ── BLOCK: assurance cards (dark) ───────────────────────────────────── */ .assure{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:1000px){.assure{grid-template-columns:1fr 1fr}} @media(max-width:560px){.assure{grid-template-columns:1fr}} .as{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:26px 22px;transition:.28s var(--ease);overflow:hidden} .as::before{content:"";position:absolute;top:0;left:0;right:100%;height:2px;background:linear-gradient(90deg,var(--blue),var(--star));transition:right .4s var(--ease)} .as:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);transform:translateY(-4px)} .as:hover::before{right:0} .as-ico{width:44px;height:44px;border-radius:11px;background:rgba(45,212,191,.13);border:1px solid rgba(45,212,191,.25);color:var(--star);display:grid;place-items:center;margin-bottom:18px} .as-ico svg{width:21px;height:21px} .as b{display:block;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.03em;margin-bottom:8px;line-height:1.3} .as p{font-size:14px;color:var(--s400);line-height:1.62} /* ── BLOCK: coverage lines ───────────────────────────────────────────── */ .cov{display:grid;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);overflow:hidden} .cov-line{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:rgba(255,255,255,.04);padding:20px 24px} @media(max-width:640px){.cov-line{grid-template-columns:1fr;gap:10px}} .cov-tag{display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:7px 14px;border-radius:99px;white-space:nowrap;background:rgba(45,212,191,.14);color:var(--star);border:1px solid rgba(45,212,191,.3)} .cov-tag.alt{background:rgba(37,99,235,.16);color:#7FADFF;border-color:rgba(37,99,235,.38)} .cov-line p{font-size:14.5px;color:var(--s400);line-height:1.6} .cov-line p b{color:#fff;font-weight:700} /* ── BLOCK: capability rows (list + diagram) ─────────────────────────── */ .stack-list{display:grid;gap:1px;background:var(--s200);border:1px solid var(--s200);border-radius:var(--r);overflow:hidden} .sv{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:#fff;padding:17px 20px;transition:background .22s} .sv:hover,.sv.on{background:var(--blue-wash)} .sv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--blue),var(--teal));transform:scaleY(0);transition:transform .28s var(--ease)} .sv:hover::before,.sv.on::before{transform:scaleY(1)} .sv-ico{position:relative;width:38px;height:38px;flex:none} .sv-ico i{position:absolute;top:0;right:0;width:26px;height:26px;border-radius:7px;background:var(--teal);opacity:.85;transition:.24s} .sv-ico b{position:absolute;bottom:0;left:0;width:26px;height:26px;border-radius:7px;background:var(--blue);display:grid;place-items:center;color:#fff;transition:.24s} .sv-ico b svg{width:14px;height:14px} .sv:hover .sv-ico i,.sv.on .sv-ico i{transform:translate(2px,-2px)} .sv:hover .sv-ico b,.sv.on .sv-ico b{transform:translate(-2px,2px)} .sv h3{font-size:16.5px;margin-bottom:2px} .sv p{font-size:13px;color:var(--s600);line-height:1.5} .sv-go{color:var(--s300);flex:none;transition:.24s} .sv:hover .sv-go,.sv.on .sv-go{color:var(--blue);transform:translateX(3px)} .stack-fig{position:relative} .stack-fig svg{width:100%;height:auto;overflow:visible} .ly{transition:opacity .3s,transform .3s var(--ease)} .ly-body{transition:fill .3s,stroke .3s} .ly-label{transition:fill .3s} .stack-fig.lit .ly{opacity:.32} .stack-fig.lit .ly.on{opacity:1;transform:translateX(-6px)} .stack-fig .ly.on .ly-body{fill:#fff;stroke:var(--blue)} .stack-fig .ly.on .ly-label{fill:var(--navy)} .stack-hint{margin-top:18px;text-align:center;font-size:13px;color:var(--s500)} @media(max-width:980px){.stack-hint{display:none}} /* ── BLOCK: process timeline ─────────────────────────────────────────── */ .jrn{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:26px} .jrn.four{grid-template-columns:repeat(4,1fr)} .jstep{position:relative;text-align:center;padding:0 6px} .jstep::before{content:"";position:absolute;top:33px;left:calc(50% + 40px);right:calc(-50% + 14px);height:2px;background:linear-gradient(90deg,var(--blue),var(--teal));opacity:.3} .jstep:last-child::before{display:none} .jnode{position:relative;z-index:1;display:grid;place-items:center;width:68px;height:68px;margin:0 auto 22px;border-radius:50%;background:#fff;border:2px solid var(--s200);color:var(--s500);transition:transform .3s var(--ease),border-color .3s,background .3s,color .3s,box-shadow .3s} .jnode svg{width:26px;height:26px} .jstep:hover .jnode{border-color:transparent;background:linear-gradient(140deg,var(--blue),var(--teal));color:#fff;transform:translateY(-5px);box-shadow:0 14px 28px -12px rgba(37,99,235,.6)} .jnum{display:block;font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--teal-dk);margin-bottom:6px} .jstep h3{font-size:17.5px;margin-bottom:8px} .jstep p{font-size:13.5px;color:var(--s600);line-height:1.6} @media(max-width:1080px){.jrn,.jrn.four{grid-template-columns:repeat(3,1fr);row-gap:44px}.jstep:nth-child(3n)::before{display:none}} @media(max-width:820px){ .jrn,.jrn.four{grid-template-columns:1fr;gap:0} .jstep::before{top:78px;bottom:-6px;left:33px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--blue),var(--teal))} .jstep:nth-child(3n)::before{display:block} .jstep:last-child::before{display:none} .jstep{display:grid;grid-template-columns:68px 1fr;gap:24px;padding:0 0 34px;align-items:start;text-align:left} .jnode{margin:0} .jstep>div{padding-top:4px} } /* ── BLOCK: phase table (vertical process) ───────────────────────────── */ .phases{display:grid;gap:14px} .ph{display:grid;grid-template-columns:118px 1fr;gap:24px;background:#fff;border:1px solid var(--s200);border-radius:var(--r);padding:22px 24px;transition:border-color .2s,box-shadow .2s} .ph:hover{border-color:var(--accent);box-shadow:var(--sh)} @media(max-width:700px){.ph{grid-template-columns:1fr;gap:10px}} .ph-when{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dk);padding-top:4px} .ph-when span{display:block;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--s500);letter-spacing:.04em} .ph h3{font-size:18px;margin-bottom:8px} .ph p{font-size:14.5px;color:var(--s600);line-height:1.68} .ph .out{margin-top:12px;font-size:13px;color:var(--s600);border-top:1px dashed var(--s200);padding-top:10px} .ph .out b{color:var(--navy)} /* ── BLOCK: comparison table ─────────────────────────────────────────── */ .tblwrap{overflow-x:auto;border:1px solid var(--s200);border-radius:var(--r);background:#fff;-webkit-overflow-scrolling:touch} .tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:600px} .tbl caption{text-align:left;padding:18px 22px 0;font-size:13px;color:var(--s500)} .tbl th,.tbl td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--s200);vertical-align:top;line-height:1.6} .tbl thead th{background:var(--s50);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--s500);white-space:nowrap} .tbl tbody th{font-weight:700;color:var(--navy);width:26%} .tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0} .tbl tbody tr:hover td,.tbl tbody tr:hover th{background:var(--s50)} .tbl .yes{color:var(--teal-dk);font-weight:700} .tbl .no{color:var(--s500)} .scroll-hint{font-size:12.5px;color:var(--s500);margin-top:10px} @media(min-width:760px){.scroll-hint{display:none}} /* ── BLOCK: pricing / tiers ──────────────────────────────────────────── */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start} @media(max-width:940px){.tiers{grid-template-columns:1fr}} .tier{background:#fff;border:1px solid var(--s200);border-radius:var(--r);padding:28px 26px;transition:.26s var(--ease);position:relative} .tier:hover{border-color:var(--accent);box-shadow:var(--sh-lg);transform:translateY(-4px)} .tier.feat{border-color:var(--accent);box-shadow:var(--sh)} .tier.feat::after{content:"Most chosen";position:absolute;top:-11px;left:26px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#fff;padding:5px 12px;border-radius:99px} .tier h3{font-size:19px;margin-bottom:8px} .tier .price{display:block;font-size:26px;font-weight:700;letter-spacing:-.04em;color:var(--navy);margin:14px 0 4px} .tier .price small{display:block;font-size:12.5px;font-weight:600;color:var(--s500);letter-spacing:0;margin-top:5px} .tier>p{font-size:14px;color:var(--s600);line-height:1.65} .tier ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px} .tier li{font-size:14px;color:var(--s600);padding-left:24px;position:relative;line-height:1.6} .tier li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:7px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)} .tier .btn{width:100%;margin-top:22px} /* ── BLOCK: panels with checklists ───────────────────────────────────── */ .pnl{background:#fff;border:1px solid var(--s200);border-radius:var(--r);padding:28px 26px} .pnl-ico{width:44px;height:44px;border-radius:11px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;margin-bottom:18px} .pnl-ico svg{width:21px;height:21px} .pnl h3{font-size:18px;margin-bottom:14px} .pnl>p{font-size:14px;color:var(--s600);margin-bottom:16px;line-height:1.65} .pnl ul{margin:0;padding:0;list-style:none;display:grid;gap:11px} .pnl li{font-size:14px;color:var(--s600);padding-left:24px;position:relative;line-height:1.6} .pnl li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:7px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)} /* ── BLOCK: risk / honesty block ─────────────────────────────────────── */ .risks{display:grid;gap:14px} .risk{display:grid;grid-template-columns:auto 1fr;gap:20px;background:#fff;border:1px solid var(--s200);border-radius:var(--r);padding:22px 24px} @media(max-width:640px){.risk{grid-template-columns:1fr;gap:12px}} .risk-ico{width:40px;height:40px;border-radius:10px;background:var(--amber-wash);color:var(--amber);display:grid;place-items:center;flex:none;border:1px solid rgba(180,83,9,.18)} .risk-ico svg{width:19px;height:19px} .risk h3{font-size:17px;margin-bottom:8px} .risk p{font-size:14.5px;color:var(--s600);line-height:1.68} .risk p+p{margin-top:10px;padding-top:10px;border-top:1px dashed var(--s200)} .risk p b{color:var(--navy)} /* ── BLOCK: "we don't do this" callout ───────────────────────────────── */ .callout{border:1px solid var(--s200);border-radius:var(--r);background:var(--s50);padding:28px 30px} .callout.warn{background:var(--amber-wash);border-color:rgba(180,83,9,.2)} .callout.dark{background:var(--navy);border-color:rgba(255,255,255,.12);color:var(--s300)} .callout.dark h3{color:#fff} .callout h3{font-size:19px;margin-bottom:12px} .callout p{font-size:15px;line-height:1.72;color:var(--s600)} .callout.dark p{color:var(--s400)} .callout p+p{margin-top:12px} .callout ul{margin:14px 0 0;padding-left:20px} .callout li{font-size:14.5px;margin-bottom:8px;color:var(--s600);line-height:1.65} .callout.dark li{color:var(--s400)} /* ── BLOCK: tech chips ───────────────────────────────────────────────── */ .chips{display:flex;flex-wrap:wrap;gap:10px} .chips span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--s700);padding:8px 15px;border:1px solid var(--s200);border-radius:99px;background:#fff;transition:.2s} .chips span:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .chips span i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none} .chips.on-dark span{color:var(--s300);border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.03)} .chips.on-dark span:hover{border-color:rgba(45,212,191,.5);color:#fff;background:rgba(45,212,191,.08)} .chips.on-dark span i{background:var(--star)} .chip-group{margin-bottom:26px} .chip-group:last-child{margin-bottom:0} .chip-group h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s500);margin-bottom:14px} .dark .chip-group h3{color:var(--s500)} /* ── BLOCK: industry cards ───────────────────────────────────────────── */ .ind{background:#fff;border:1px solid var(--s200);border-radius:var(--r);overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s;display:flex;flex-direction:column} .ind:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} .ind-art{height:132px;background:var(--s50);border-bottom:1px solid var(--s200);position:relative;overflow:hidden;display:grid;place-items:center} .ind-art svg{width:100%;height:100%} .ind-body{padding:24px 22px;display:flex;flex-direction:column;flex:1} .ind h3{font-size:19px;margin-bottom:8px} .ind-body>p{font-size:14px;color:var(--s600);margin-bottom:16px;line-height:1.65} .ind ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:7px} .ind li{font-size:13.5px;color:var(--s600);padding-left:18px;position:relative;line-height:1.6} .ind li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--teal);border-radius:1px} .ind .more{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px} .ind:hover .more .arw{transform:translateX(4px)} /* ── BLOCK: case study card ──────────────────────────────────────────── */ .case{background:var(--navy);border-radius:var(--r);overflow:hidden;position:relative} .case::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 70% at 88% 30%,rgba(13,148,136,.25),transparent 68%)} .case-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);padding:clamp(30px,4.5vw,56px);align-items:center} @media(max-width:940px){.case-in{grid-template-columns:1fr}} .case h2,.case h3{color:#fff;font-size:clamp(23px,3.2vw,32px);margin-top:16px} .case-p{color:var(--s400);margin-top:16px;font-size:15.5px;line-height:1.7} .case-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);overflow:hidden;margin-top:26px} .cm{background:rgba(255,255,255,.03);padding:20px 18px} .cm b{display:block;font-size:28px;font-weight:700;letter-spacing:-.045em;color:var(--star);line-height:1} .cm span{display:block;margin-top:6px;font-size:12.5px;color:var(--s400);line-height:1.5} .case-vis{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:20px} .case-vis svg{width:100%;height:auto} /* ── BLOCK: quote ────────────────────────────────────────────────────── */ .qt{max-width:840px;margin-inline:auto;text-align:center} .qt-mark{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--teal-wash);color:var(--teal);margin-bottom:24px} .qt blockquote{margin:0;font-size:clamp(20px,2.8vw,29px);font-weight:600;letter-spacing:-.03em;line-height:1.42;color:var(--navy)} .qt blockquote em{font-style:normal;color:var(--teal)} .qt figcaption{margin-top:26px;display:inline-flex;align-items:center;gap:14px} .qav{width:48px;height:48px;border-radius:50%;background:linear-gradient(140deg,var(--blue),var(--teal));color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none} .qt cite{font-style:normal;text-align:left;font-size:14.5px;font-weight:700;color:var(--navy);display:block} .qt cite small{display:block;font-weight:500;color:var(--s500);font-size:13.5px} /* ── BLOCK: FAQ ──────────────────────────────────────────────────────── */ .faqs{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;max-width:1000px;margin-inline:auto} .faqs.one{grid-template-columns:1fr;max-width:820px} @media(max-width:860px){.faqs{grid-template-columns:1fr}} .faq{border-bottom:1px solid var(--s200)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-weight:700;font-size:16px;color:var(--navy);line-height:1.45} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";width:11px;height:11px;flex:none;margin-top:7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .25s} .faq[open] summary::after{transform:rotate(-135deg)} .faq summary:hover{color:var(--accent)} .faq .fa{padding:0 0 20px;font-size:14.5px;color:var(--s600);line-height:1.72} .faq .fa p{margin:0 0 12px} .faq .fa p:last-child{margin:0} /* ── BLOCK: entry points (spectrum) ──────────────────────────────────── */ .entry{border-top:1px solid var(--s200);background:#fff;padding:clamp(36px,4.2vw,58px) 0} .entry-lbl{text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s500);margin-bottom:10px} .entry-h{text-align:center;font-size:clamp(24px,3vw,34px);margin-bottom:14px} .entry-spectrum{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:clamp(28px,3.2vw,40px);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--s500)} .entry-spectrum i{display:block;height:2px;width:clamp(90px,22vw,300px);border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--teal))} @media(max-width:560px){.entry-spectrum{display:none}} .entry-grid{display:grid;grid-template-columns:repeat(4,1fr)} .ep{position:relative;padding:6px 28px 30px;display:flex;flex-direction:column;gap:11px;transition:transform .3s var(--ease)} .ep::before{content:"";position:absolute;left:0;top:10px;bottom:22px;width:1px;background:var(--s200)} .ep:nth-child(4n+1)::before{display:none} .ep::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .44s var(--ease)} .ep:hover::after{transform:scaleX(1)} .ep:hover{transform:translateY(-3px)} .ep-ico{width:34px;height:34px;color:var(--blue);display:grid;place-items:center;margin-bottom:4px;transition:transform .3s var(--ease),color .3s} .ep-ico svg{width:32px;height:32px} .ep:hover .ep-ico{color:var(--teal);transform:translateY(-3px) scale(1.06)} .ep b{font-size:17.5px;font-weight:700;color:var(--navy);letter-spacing:-.03em;transition:color .24s} .ep:hover b{color:var(--blue)} .ep p{font-size:13.5px;color:var(--s600);line-height:1.62;flex:1} .ep-go{margin-top:6px;font-size:13px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px} .ep:hover .ep-go .arw{transform:translateX(4px)} @media(max-width:900px){.entry-grid{grid-template-columns:1fr 1fr;row-gap:34px}.ep:nth-child(4n+1)::before{display:block}.ep:nth-child(2n+1)::before{display:none}} @media(max-width:560px){.entry-grid{grid-template-columns:1fr;row-gap:0}.ep{padding:26px 0 28px}.ep::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}.ep:nth-child(2n+1)::before{display:block}.ep:first-child::before{display:none}.ep::after{left:0;right:0}} /* ── BLOCK: AI capability rows (dark) ────────────────────────────────── */ .ai-caps{display:grid;gap:14px} .ai-cap{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:20px 22px;transition:.26s var(--ease)} .ai-cap:hover{background:rgba(255,255,255,.075);border-color:rgba(45,212,191,.4);transform:translateX(4px)} .ai-cap-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(45,212,191,.13);border:1px solid rgba(45,212,191,.28);color:var(--star);transition:.26s} .ai-cap:hover .ai-cap-ico{background:var(--star);color:var(--navy);border-color:var(--star)} .ai-cap-ico svg{width:20px;height:20px} .ai-cap b{display:block;font-size:16.5px;color:#fff;font-weight:700;letter-spacing:-.025em;margin-bottom:5px} .ai-cap p{font-size:13.5px;color:var(--s400);line-height:1.62} /* ── BLOCK: two-column checklist ─────────────────────────────────────── */ .cols2{columns:2;column-gap:44px;margin:0;padding:0;list-style:none} @media(max-width:700px){.cols2{columns:1}} .cols2 li{break-inside:avoid;font-size:14.5px;color:var(--s600);padding-left:24px;position:relative;margin-bottom:12px;line-height:1.62} .cols2 li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:7px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)} .cols2 li b{display:block;color:var(--navy);font-weight:700} /* ── BLOCK: mini nav grid (hub links) ────────────────────────────────── */ .hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--s200);border:1px solid var(--s200);border-radius:var(--r);overflow:hidden} @media(max-width:900px){.hubgrid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.hubgrid{grid-template-columns:1fr}} .hubgrid a{background:#fff;padding:22px 22px;display:flex;flex-direction:column;gap:7px;transition:background .2s} .hubgrid a:hover{background:var(--accent-wash)} .hubgrid b{font-size:16px;color:var(--navy);letter-spacing:-.025em;display:flex;align-items:center;gap:8px} .hubgrid a:hover b{color:var(--accent-dk)} .hubgrid p{font-size:13.5px;color:var(--s600);line-height:1.58} /* ── BLOCK: CTA + form ───────────────────────────────────────────────── */ /* --teal-dk, NOT --teal, at the far stop. White 12px/700 eyebrow text measures 3.74:1 on #0D9488 and fails WCAG AA; on #0F766E it measures 5.49:1. The band is the closing call to action on every page, so the failure was site-wide. */ .cta{position:relative;overflow:hidden;background:linear-gradient(120deg, var(--blue-dk), var(--blue) 42%, var(--teal-dk));color:#fff;padding:var(--y) 0} /* The eyebrow on this band is white and nothing else: --sky measures 2.4:1 here. */ .cta .eyebrow.on-dark{color: var(--white)} .cta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1px);background-size:28px 28px} .cta-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start} @media(max-width:900px){.cta-grid{grid-template-columns:1fr}} .cta h2{color:#fff;font-size:clamp(27px,3.6vw,40px);margin-top:18px} /* 92%, not 88%: composited over the gradient's dark end 88% measures 4.43:1, just under AA. Declared in the space-separated form so the contrast test can read the alpha back rather than assume it. */ .cta-p{color: rgb(255 255 255 / 92%);margin:18px 0 26px;max-width:46ch;font-size:16px;line-height:1.7} .clist{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:15px;color:rgba(255,255,255,.92)} .clist a{font-weight:700;border-bottom:1px solid rgba(255,255,255,.45);padding-block:3px} .clist a:hover{border-bottom-color:#fff} .form{background:#fff;border-radius:var(--r);padding:30px 28px;box-shadow:0 30px 70px -30px rgba(15,23,42,.5);display:grid;gap:16px} .form h3{font-size:19px} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.frow{grid-template-columns:1fr}} .fld label{display:block;font-size:12px;font-weight:700;color:var(--s600);margin-bottom:6px;letter-spacing:.01em} .fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;border:1.5px solid var(--s200);border-radius:var(--r-sm);font:inherit;font-size:15px;background:var(--s50);color:var(--navy);transition:.18s;min-height:46px} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.12)} .fld textarea{min-height:96px;resize:vertical} .form small{font-size:12.5px;color:var(--s500);line-height:1.55} .form-note{font-size:12.5px;color:var(--s500);display:flex;gap:8px;align-items:flex-start;line-height:1.55} /* ── page meta (updated date) ────────────────────────────────────────── */ .pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13px;color:var(--s600);padding-top:20px;margin-top:36px;border-top:1px solid var(--s200)} /* ── link hit targets and on-dark link colour ────────────────────────────── Links inside body copy and FAQ answers carry no class, so they never picked up .lnk's vertical padding and sat at 20-23px against a 24px minimum. Vertical padding on an inline element grows the hit area without moving the line box, so nothing reflows. .lnk is --blue, which is 3.45:1 on the navy used by .callout.dark and the dark section shells — under the 4.5:1 floor. --sky is 8.33:1 there. */ /* Scoped to text-flow elements, so block-level card links (.card, .rel, .post, .topic) keep their own box model and nothing reflows. */ main :is(p,li,td,dd,caption,figcaption,blockquote,small) a:not(.btn):not(.card):not(.rel):not(.post):not(.topic){padding-block:4px} /* .more is a flex row inside a card body; min-height reaches the target without vertical padding disturbing the card's internal rhythm. */ .more,a.more{min-height:24px} .dark .lnk,.callout.dark .lnk,.dark .prose p a:not(.btn),.dark .faq .fa a:not(.btn){color:var(--sky);border-bottom-color:rgba(56,189,248,.45)} .dark .lnk:hover,.callout.dark .lnk:hover{color:#7DD3FC;border-bottom-color:#7DD3FC} .pmeta b{color:var(--s600);font-weight:600} .pmeta .dot{width:4px;height:4px;border-radius:50%;background:var(--s300)} /* ── related links ───────────────────────────────────────────────────── */ .related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.related{grid-template-columns:1fr}} .rel{display:block;background:#fff;border:1px solid var(--s200);border-radius:var(--r);padding:20px 22px;transition:.24s var(--ease)} .rel:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh)} .rel span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--s500);margin-bottom:8px} .rel b{display:block;font-size:16.5px;color:var(--navy);letter-spacing:-.025em;margin-bottom:6px} .rel p{font-size:13.5px;color:var(--s600);line-height:1.58} .rel:hover b{color:var(--accent-dk)} /* ── footer ──────────────────────────────────────────────────────────── */ .ftr{background:var(--navy);color:var(--s400);padding:calc(var(--y) * .72) 0 26px;font-size:14.5px} /* brand block + five link columns */ .fgrid{display:grid;grid-template-columns:1.7fr repeat(5,minmax(0,1fr));gap:28px 22px;margin-bottom:38px} @media(max-width:1180px){.fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.fgrid>:first-child{grid-column:1/-1}} @media(max-width:800px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:420px){.fgrid{grid-template-columns:1fr}} .ftr .brand b{color:#fff} .ftr .brand>span>span{color:var(--s400)} .ftr h2{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sky)} /* padding rather than pure margin, so each link clears the 24px target size */ .ftr nav a,.ftr .fcol a{display:block;padding:4px 0;margin-bottom:6px;color:var(--s400);font-weight:500;transition:color .18s} .ftr nav a:hover,.ftr .fcol a:hover{color:#fff} .ftr p{max-width:300px;line-height:1.65;color:var(--s400)} .fcontact{margin-top:18px;display:grid;gap:8px;font-size:14px} .fcontact a{margin:0;padding:4px 0;color:var(--s300)} .fcontact a:hover{color:var(--star)} .fbot{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--s400)} .fbot a{color:var(--s400)} .fbot a:hover{color:#fff} .fbot-links{display:flex;flex-wrap:wrap;gap:6px 18px} .fbot-links a{padding:4px 0} /* ── sticky mobile contact bar ───────────────────────────────────────── */ .mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;border-top:1px solid var(--s200);box-shadow:0 -6px 24px -12px rgba(15,23,42,.35);padding:8px 10px calc(8px + env(safe-area-inset-bottom))} .mbar-in{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px} .mbar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:var(--r-sm);font-size:14px;font-weight:700;border:1.5px solid var(--s200);color:var(--navy)} .mbar a svg{width:17px;height:17px} .mbar a.p{background:var(--blue);border-color:var(--blue);color:#fff} .mbar a.w{border-color:#25D366;color:#0E7A41} @media(max-width:760px){.mbar{display:block}body{padding-bottom:70px}} /* ── reveal ──────────────────────────────────────────────────────────── */ .rv{transition:opacity .65s var(--ease),transform .65s var(--ease)} .js .rv{opacity:0;transform:translateY(22px)} .rv.on{opacity:1;transform:none} /* ── shared SVG animation classes ────────────────────────────────────── */ .flow{stroke-dasharray:5 9;animation:dash 2.6s linear infinite} @keyframes dash{to{stroke-dashoffset:-56}} .pulse{transform-origin:center;animation:pulse 2.8s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.28}50%{opacity:.06}} .float{animation:float 7s ease-in-out infinite} .float-2{animation:float 7s ease-in-out infinite;animation-delay:-2.4s} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .rv{opacity:1!important;transform:none!important} } /* ── print ───────────────────────────────────────────────────────────── */ @media print{ .hdr,.mbar,.cta,.ftr,.mbtn{display:none!important} body{padding:0;color:#000} .rv{opacity:1!important;transform:none!important} a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555} } /* ── contrast on dark surfaces ───────────────────────────────────────────── --s500 measures 3.75:1 and --s600 2.3:1 against the navy canvas — both fail WCAG AA for body and label text. --s400 gives 7.5:1 on the same surface. */ .dark .jstep p,.dark .ph p,.dark .ph .out,.dark .numlist p, .dark .chip-group h3,.dark .ph-when span,.dark .stack-hint, .dark .scroll-hint,.dark .callout p,.dark .callout li{color:var(--s400)} .dark .eyebrow,.dark .jnum{color:var(--star)} .dark .answer .answer-k{color:var(--star)} .ai-chips-h{color:var(--s400)} /* ── BLOG / ARTICLES ──────────────────────────────────────────────────── */ .post-hero{margin:0 0 clamp(24px,3vw,38px)} .post-hero img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--s200);background:var(--s50)} .post-hero figcaption{margin-top:10px;font-size:12.5px;color:var(--s500)} .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13.5px;color:var(--s600);margin-top:18px} .post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--s300)} .post-meta b{color:var(--s600);font-weight:600} .post-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-dk);background:var(--accent-wash);padding:5px 11px;border-radius:99px} /* -- BLOG INDEX ----------------------------------------------------------- The index is laid out as a blog, not as a landing page: a hairline masthead instead of a hero banner, post ROWS instead of a card grid, and a sidebar carrying search, topics and categories. The previous version put ~770px of gradient hero above the first post title, which landed 2,994px down the page; here the masthead is ~165px and the first title clears the fold. ----------------------------------------------------------------------- */ /* one accent per category, every triplet taken from an existing .acc-* class */ .c-saas {--accent:#0891B2;--accent-dk:#0E7490;--accent-wash:#ECFEFF} .c-comm {--accent:#334155;--accent-dk:#1E293B;--accent-wash:#F1F5F9} .c-cust {--accent:#2563EB;--accent-dk:#1D4ED8;--accent-wash:#EFF4FE} .c-ai {--accent:#7C3AED;--accent-dk:#6D28D9;--accent-wash:#F5F1FE} .c-mob {--accent:#047857;--accent-dk:#065F46;--accent-wash:#ECFDF5} .c-cloud{--accent:#4F46E5;--accent-dk:#4338CA;--accent-wash:#EEF0FE} .c-int {--accent:#0D9488;--accent-dk:#0F766E;--accent-wash:#ECFDF9} /* masthead: a strip, not a banner */ .bmast{padding:calc(var(--hdr-h) + 22px) 0 0;background:#fff} .bmast-in{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 32px;padding-bottom:20px;border-bottom:1px solid var(--s200)} .bmast-t{flex:1 1 auto;min-width:0} .bmast h1{font-size:clamp(26px,2.8vw,34px);letter-spacing:-.038em;margin-top:12px;display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;line-height:1.2} .bmast h1 em{font-style:normal;font-size:13px;font-weight:600;letter-spacing:0;color:var(--s600);white-space:nowrap} .bmast .answer-lede{margin-top:10px;max-width:66ch} .bmast .answer-lede p{font-size:15.5px;color:var(--s600);line-height:1.65} .bmast-a{display:flex;flex-wrap:wrap;gap:10px;flex:none;padding-bottom:2px} .bmast-a a{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--s600);border:1px solid var(--s200);border-radius:99px;padding:9px 15px;min-height:38px;background:#fff;transition:.18s var(--ease)} .bmast-a a:hover{border-color:var(--blue);color:var(--blue)} .bmast-a a svg{width:15px;height:15px} /* shell */ .bshell{display:grid;grid-template-columns:minmax(0,1fr) 302px;gap:clamp(28px,3.4vw,52px);padding:clamp(24px,2.6vw,36px) 0 clamp(44px,5vw,72px);align-items:start} @media(max-width:1000px){.bshell{grid-template-columns:1fr;gap:36px}} .bshell>*{min-width:0} .listhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:6px} .listhead h2{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s600)} .listhead .cnt{font-size:13px;color:var(--s600)} /* post rows -- text left, small thumb right */ .posts{list-style:none;margin:0;padding:0} .posts>li{border-bottom:1px solid var(--s200)} .posts>li:first-child{border-top:1px solid var(--s200)} .post{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:26px;align-items:start;padding:26px 4px 26px 0;position:relative} .post>*{min-width:0} .post::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:3px;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .22s} @media(hover:hover){.post:hover::before{opacity:1}} .post:focus-within::before{opacity:1} @media(max-width:520px){.post{grid-template-columns:1fr;gap:16px}} .p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--s600)} .p-meta time{font-weight:700;color:var(--s600)} .p-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--s300);flex:none} .p-meta .cat{font-weight:700;color:var(--accent-dk)} .post h3{margin-top:9px;font-size:clamp(19px,1.7vw,22px);letter-spacing:-.03em;line-height:1.3} .post h3 a{background-image:linear-gradient(var(--accent),var(--accent));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .28s var(--ease)} .post:hover h3 a,.post h3 a:focus-visible{background-size:100% 2px} .post>div>p{margin-top:9px;font-size:15px;line-height:1.68;color:var(--s600);max-width:64ch} .p-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px} .p-tag{font-size:11.5px;font-weight:700;color:var(--s600);background:var(--s100);border-radius:99px;padding:5px 11px;line-height:1.4;white-space:nowrap} .p-more{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--blue);min-height:24px} .post:hover .p-more .arw{transform:translateX(4px)} @media(max-width:520px){.p-more{margin-left:0}} .p-thumb{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--s200);background:var(--navy);aspect-ratio:1;position:relative} @media(max-width:520px){.p-thumb{aspect-ratio:16/6}} .p-thumb svg{position:absolute;inset:0;width:100%;height:100%} .searchnote{display:none;font-size:13.5px;color:var(--s600);padding:12px 14px;background:var(--s50);border:1px solid var(--s200);border-radius:var(--r-sm);margin-bottom:14px} .searchnote.on{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .searchnote button{margin-left:auto;background:none;border:0;font:inherit;font-size:13.5px;font-weight:700;color:var(--blue);cursor:pointer;padding:4px 0;min-height:24px} .noresult{display:none;padding:34px 20px;text-align:center;border:1px dashed var(--s300);border-radius:var(--r);margin-top:18px} .noresult.on{display:block} .noresult b{display:block;font-size:17px;margin-bottom:8px} .noresult p{font-size:14.5px;color:var(--s600)} /* an honest end-marker rather than pagination invented for seven posts */ .listend{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:13.5px;color:var(--s600)} .listend::before,.listend::after{content:"";height:1px;background:var(--s200);flex:1} /* sidebar */ .bside{display:grid;gap:20px;position:sticky;top:calc(var(--hdr-h) + 20px)} @media(max-width:1000px){.bside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.bside{grid-template-columns:1fr}} .bside>*{min-width:0} .wid{border:1px solid var(--s200);border-radius:var(--r);padding:18px 18px 20px;background:#fff} .wid.plain{background:var(--s50)} .wid h2{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s600);margin-bottom:14px} /* search is JS-only, so it stays hidden until .js exists -- never a dead box */ .wid-search{display:none} .js .wid-search{display:block} .sform{display:flex;align-items:center;gap:9px;border:1px solid var(--s200);border-radius:var(--r-sm);padding:0 12px;background:#fff;transition:.18s} .sform:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)} .sform svg{width:16px;height:16px;color:var(--s600);flex:none} .sform input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;color:var(--navy);padding:11px 0;min-height:42px} .sform input:focus{outline:none} .sform input::placeholder{color:var(--s600)} .sform button{border:0;background:none;color:var(--s600);cursor:pointer;font-size:19px;line-height:1;padding:6px;min-width:26px;min-height:26px;display:none} .sform.has button{display:block} .sform button:hover{color:var(--navy)} .topics{list-style:none;margin:0;padding:0;display:grid;gap:2px} .topics a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-sm);font-size:14.5px;font-weight:700;color:var(--s700);min-height:44px;transition:.16s} .topics a:hover,.topics a[aria-current="true"]{background:var(--accent-wash);color:var(--accent-dk)} .topics a .sw{width:9px;height:9px;border-radius:3px;background:var(--accent);flex:none} .topics a .n{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--s600)} .topics a:hover .n,.topics a[aria-current="true"] .n{color:var(--accent-dk)} .cats{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .cats a{display:inline-block;font-size:12.5px;font-weight:700;color:var(--accent-dk);background:var(--accent-wash);border-radius:99px;padding:7px 12px;line-height:1.4;min-height:30px;transition:.16s} .cats a:hover{filter:brightness(.95)} .picks{list-style:none;margin:0;padding:0;display:grid} .picks li+li{border-top:1px solid var(--s100)} .picks a{display:block;padding:12px 0} .picks li:first-child a{padding-top:0} .picks span{display:block;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:5px} .picks b{display:block;font-size:14.5px;color:var(--navy);letter-spacing:-.022em;line-height:1.35;font-weight:700} .picks a:hover b{color:var(--blue)} .picks em{display:block;font-style:normal;font-size:12px;color:var(--s600);margin-top:5px} .wid-ask p{font-size:14px;line-height:1.6;color:var(--s600);margin-bottom:14px} .wid-ask .btn{width:100%} .wid-ask .alt{display:block;text-align:center;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--s600);padding:6px 0;min-height:24px} .wid-ask .alt:hover{color:var(--blue)} .feedline{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--s600);padding:6px 0;min-height:24px} .feedline:hover{color:var(--blue)} .feedline svg{width:15px;height:15px;flex:none} @media(forced-colors:active){ .wid,.post,.p-thumb,.p-tag,.cats a{border:1px solid CanvasText} .topics a[aria-current="true"]{border-color:Highlight;color:Highlight} } @media print{ .bside,.p-thumb,.bmast-a,.searchnote{display:none!important} .bmast{padding-top:0} .bshell{display:block;padding:0} .post{grid-template-columns:1fr;break-inside:avoid;padding:10pt 0} .posts>li,.posts>li:first-child{border-color:#999} .p-tag{border:1px solid #999} } .prose figure.inline-fig{margin:28px 0} .prose .keytake{background:var(--accent-wash);border:1px solid var(--s200);border-left:4px solid var(--accent-dk);border-radius:var(--r);padding:22px 24px;margin:28px 0} .prose .keytake b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:10px} .prose .keytake p{margin:0;font-size:15.5px}