/* 5. Feature header (.fh). One pattern for every feature page.
   Slots: .fh-copy (breadcrumb, tag, h1, lede, buttons) and .fh-media (browser frame, optional phone frame).
   Modifiers: .fh--phone = browser + phone; .fh--solo = browser only. The media hangs 72px (56px on small screens) below the dark band onto the next section. */
.fh{position:relative;z-index:1;overflow-x:clip;background:linear-gradient(135deg,var(--night) 0,var(--night-2) 100%);color:var(--night-text)}
.fh-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s5);align-items:end;padding-top:var(--s6);padding-bottom:var(--s6)}
.fh-copy{align-self:start;padding-bottom:var(--s3)}
.fh-crumbs ol{display:flex;flex-wrap:wrap;gap:0 var(--s1);list-style:none;margin:0 0 var(--s3);padding:0;font-size:.9375rem;color:var(--night-muted)}
.fh-crumbs li+li::before{content:"/";margin-right:var(--s1);color:var(--night-muted)}
.fh-crumbs a{color:var(--night-text);text-underline-offset:3px}
.fh-crumbs a:hover{color:var(--white)}
.fh-crumbs [aria-current]{color:var(--night-text);font-weight:600}
.fh-tag{display:inline-flex;align-items:center;gap:var(--s1);padding:6px 14px 6px 10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.08);font-size:.9375rem;font-weight:600;color:var(--night-text)}
.fh-tag .ic{width:18px;height:18px;color:var(--cyan)}
.fh h1{margin-top:var(--s3);font-size:clamp(2.25rem,3.4vw + .6rem,3.5rem);line-height:1.06;letter-spacing:-.035em;color:var(--white)}
.fh-lede{margin-top:var(--s3);max-width:34rem;font-size:1.25rem;line-height:1.5;color:var(--night-text)}
.fh-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.fh-media{--bleed:max(var(--gut),(100vw - var(--wrap))/2);position:relative;margin:0 calc(-1*(var(--bleed) + 48px)) -72px 0;align-self:end}
.fh-media .browser{box-shadow:0 26px 56px rgba(2,10,30,.45),0 2px 8px rgba(2,10,30,.25)}
.fh-media .phone{position:absolute;right:calc(var(--bleed) + 48px + var(--s4));bottom:-48px;width:clamp(120px,15%,156px)}
@media(prefers-reduced-motion:no-preference){.fh-media{animation:fh-rise .5s ease-out both}@keyframes fh-rise{from{transform:translateY(16px)}to{transform:none}}}
@media(max-width:1000px){
 .fh-in{grid-template-columns:minmax(0,1fr);row-gap:var(--s5);padding-top:var(--s5);padding-bottom:var(--s5)}
 .fh-media{margin:0 calc(-1*var(--gut)) -56px 0;max-width:720px}
 .fh-media .phone{right:var(--s3)}
 .fh-copy{padding-bottom:0}
 .fh-lede{max-width:40rem}
}
@media(max-width:640px){
 .fh-in{padding-top:var(--s4);padding-bottom:var(--s4);row-gap:var(--s4)}
 .fh-cta .btn{width:100%}
 .fh-cta .btn.lg{min-height:52px}
 .fh-tag{font-size:.875rem}
 .fh-lede{font-size:1.125rem}
 .fh-media{margin-bottom:-40px}
 .fh-media .phone{width:84px;border-width:4px;border-radius:20px;bottom:-32px;right:var(--s2)}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* 6. Feature-page body template (new). Vertical rhythm: --sp = 56px section padding on desktop, 40px at <=900px. Every block sits on the 12-column grid (.g12, 24px gutter, 8px spacing scale).
   Blocks: .in intro | .st typographic stair | .fl flow (lead + wide screen + two icon columns) | .sp split row (image + text, .sp--rev mirrors)
           .stm statement | .stp numbered cascade | .fx feature bento | .cta-band | .mr more-links | .ftp footer.
   Each block has ONE focal point. Backgrounds alternate white / soft / tint / night. Layouts apply from 901px; below that every block is one column. */
:root{--sp:56px}
@media(max-width:900px){:root{--sp:40px}}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3)}
.soft{background:var(--soft)}
.tint{background:var(--tint)}
.hl{font-weight:700;color:var(--ink);background:linear-gradient(transparent 62%,rgba(56,198,244,.38) 62%);padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ring{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--cyan);color:var(--cyan)}
.ring .ic{width:28px;height:28px}
.browser.lt{border-color:#D3DCEE;box-shadow:0 18px 40px rgba(7,20,51,.16),0 2px 6px rgba(7,20,51,.08)}
.sec-p{padding:var(--sp) 0}
.eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s1)}

/* .in intro: lead copy on the left; screen (or pull-out) on the right. The screen starts below the header overhang. */
.in{padding:var(--s5) 0 var(--sp);background:var(--white)}
.in-copy{grid-column:1/6;align-self:start}
.in-lead{font-size:1.375rem;line-height:1.55;font-weight:500;color:var(--ink)}
.in-body{margin-top:var(--s3);font-size:1.1875rem;line-height:1.65;color:#2A3858}
.in-call{display:flex;gap:var(--s2);margin-top:var(--s4);padding-left:var(--s3);border-left:4px solid var(--accent);font-size:1.25rem;line-height:1.5;font-weight:700;color:var(--ink)}
.in-call .ic{width:32px;height:32px;color:var(--accent);margin-top:2px}
.in-media{grid-column:6/-1;margin-top:calc(72px + var(--s3) - var(--s5));align-self:start}
.in--pull .in-copy{grid-column:1/8;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.in--pull .in-lead{font-size:2rem;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.in--pull .in-body{font-size:1.375rem;line-height:1.55}
.in--pull .in-media{grid-column:8/-1;align-self:stretch;display:flex}
.in--pull .pull{flex:1;display:flex;flex-direction:column;justify-content:center}
.pull{margin:0;padding:var(--s5) var(--s4);background:var(--tint);border-left:8px solid var(--accent);border-radius:0 12px 12px 0}
.pull .ic{width:48px;height:48px;color:var(--accent);stroke-width:1.5}
.pull blockquote{margin:var(--s2) 0 0}
.pull p{font-size:1.625rem;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--ink)}

/* .st stair: note (optional, full width), then the focal sentence on the left and its supporting text on the right of the same row. Slots: .t-note, .t-display, .t-body, .t-flag (icon + short sentence under the body). */
.st{padding:var(--sp) 0;background:var(--soft)}
.st .t-note{grid-column:1/-1;margin-bottom:var(--s2);font-size:1.5rem;line-height:1.4;font-weight:500;color:var(--muted)}
.st .t-display{grid-column:1/8;grid-row:2/span 2;align-self:center;margin:0;font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--accent);text-wrap:balance}
.st .t-display.lg{font-size:clamp(2.5rem,5.6vw,4.75rem);line-height:1;letter-spacing:-.045em}
.st .t-body{grid-column:8/-1;grid-row:2;align-self:center;padding-left:var(--s3);border-left:4px solid var(--accent);font-size:1.25rem;line-height:1.55;color:#2A3858}
.st .t-flag{grid-column:8/-1;grid-row:3;display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);font-size:1.25rem;line-height:1.4;font-weight:700;color:var(--ink)}
.st .t-flag .ring{border-color:var(--accent);color:var(--accent)}

/* .fl flow: lead sentence beside a wide screen, then two icon columns. Dark band, so the screen is the bright thing. */
.fl{padding:var(--sp) 0}
.fl-lead{grid-column:1/6;align-self:center;font-size:clamp(1.5rem,1.4vw + 1rem,1.875rem);line-height:1.35;font-weight:700;letter-spacing:-.01em;color:var(--white)}
.fl-fig{grid-column:6/-1;margin:0}
.fl-col{display:flex;gap:var(--s3);margin-top:var(--s4);font-size:1.25rem;line-height:1.55;color:var(--night-text)}
.fl-col.a{grid-column:1/7;padding-right:var(--s3)}
.fl-col.b{grid-column:7/-1;padding-right:var(--s3)}

/* .sp split row: screen and text, mirrored with .sp--rev */
.sp{padding:var(--sp) 0;background:var(--white)}
.sp .g12{align-items:center}
.sp-media{grid-column:1/8;margin:0}
.sp-copy{grid-column:8/-1;padding-left:var(--s3)}
.sp-big{font-size:clamp(2rem,2.6vw + .6rem,2.75rem);line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--accent)}
.sp-big.md{font-size:clamp(1.5rem,1.2vw + 1rem,1.875rem);line-height:1.35;letter-spacing:-.01em;font-weight:600;color:var(--ink)}
.sp-text{margin-top:var(--s3);font-size:1.1875rem;line-height:1.65;color:#2A3858}
.sp--rev .sp-media{grid-column:7/-1;grid-row:1;order:2}
.sp--rev .sp-copy{grid-column:1/6;grid-row:1;order:1;padding:0 var(--s3) 0 0}

/* .stm statement: one big sentence on the left, supporting text on the right */
.stm{padding:var(--sp) 0}
.stm .g12{align-items:stretch}
.stm-big{grid-column:1/7;align-self:center;font-size:clamp(1.875rem,2.6vw + .6rem,2.75rem);line-height:1.12;letter-spacing:-.03em;font-weight:800;color:var(--ink)}
.stm-ic{display:grid;place-items:center;width:56px;height:56px;margin-bottom:var(--s2);border-radius:50%;background:var(--accent);color:var(--on-accent)}
.stm-ic .ic{width:28px;height:28px}
.stm-body{grid-column:7/-1;display:flex;flex-direction:column;justify-content:center;gap:var(--s3);padding:var(--s4);border-radius:12px;background:var(--white);box-shadow:0 0 0 1px #BDD6F5}
.stm-body p{font-size:1.3125rem;line-height:1.6;color:#2A3858}
.stm-body .stm-note{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s2) var(--s3);border-radius:8px;background:var(--tint);font-weight:700;color:var(--ink)}
.stm-note .ic{color:var(--accent);width:32px;height:32px}

/* .stp numbered timeline: one aligned row of three, joined by a line through the number circles. Numbers come from a CSS counter (no added text). */
.stp{padding:var(--s5) 0;background:var(--white)}
.stp-l{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s4);list-style:none;margin:0;padding:0;position:relative}
.stp-l::before{content:"";position:absolute;left:36px;right:calc(33.333% - 57px);top:35px;height:2px;background:linear-gradient(90deg,var(--accent),var(--night));z-index:0}
.stp-l li{counter-increment:s;position:relative;z-index:1}
.stp-l li::before{content:counter(s);display:grid;place-items:center;width:72px;height:72px;margin-bottom:var(--s2);border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:2rem;font-weight:800;letter-spacing:-.03em;box-shadow:0 0 0 8px var(--white)}
.stp-l li:nth-child(2)::before{background:var(--night-2)}
.stp-l li:nth-child(3)::before{background:var(--night)}
.stp-l p{font-size:1.25rem;line-height:1.55;color:#2A3858}

/* .fx feature bento: eight items, six treatments. Slot 1 dark and big, slot 8 solid accent, slots 5 to 7 plain rows. Slot 4 takes an optional phone (.fx-ph). */
.fx{padding:var(--sp) 0;background:var(--white)}
.fx.soft{background:var(--soft)}
.fx-h{margin-bottom:var(--s4);max-width:48rem}
.fx-h h2{margin:0}
.fx-g{row-gap:var(--s3)}
.fx-i{position:relative;min-width:0;border-radius:12px}
.fx-i h3{font-size:1.5rem;line-height:1.15;letter-spacing:-.02em}
.fx-i p{margin-top:var(--s1);font-size:1.0625rem;line-height:1.55}
.fx-i>.ic{width:40px;height:40px;margin-bottom:var(--s2);stroke-width:1.5}
.fx-1{grid-column:1/8;grid-row:1;padding:var(--s5);background:linear-gradient(135deg,var(--night),var(--night-2));color:var(--white);display:flex;flex-direction:column;justify-content:flex-end;min-height:232px}
.fx-1>.ic{color:var(--cyan);width:56px;height:56px}
.fx-1 h3{font-size:2rem;color:var(--white)}
.fx-1 p{font-size:1.25rem;color:var(--night-text)}
.fx-2{grid-column:8/-1;grid-row:1;padding:var(--s4);background:var(--tint);box-shadow:0 0 0 1px #BDD6F5;color:var(--ink)}
.fx-2>.ic{color:var(--accent)}
.fx-2 p{color:#2A3858}
.fx-3{grid-column:1/6;grid-row:2;padding:var(--s4);background:var(--white);border-top:4px solid var(--accent);border-radius:0 0 12px 12px;box-shadow:0 0 0 1px var(--line)}
.fx-2,.fx-3{display:flex;flex-direction:column;justify-content:center}
.fx-3>.ic{color:var(--accent)}
.fx-3 p{color:#2A3858}
.fx-4{grid-column:6/-1;grid-row:2;overflow:hidden;padding:var(--s4);background:var(--white);box-shadow:0 0 0 1px var(--line)}
.fx-4.has-ph{min-height:280px}
.fx-4>.ic{color:var(--accent)}
.fx-4 p{color:#2A3858}
.fx-4.has-ph{padding-right:calc(152px + var(--s6))}
.fx-ph{position:absolute;right:var(--s4);top:var(--s4);bottom:0;width:152px;overflow:hidden}
.fx-ph .phone{box-shadow:0 0 0 1px rgba(7,20,51,.1),0 12px 28px rgba(7,20,51,.22)}
.fx-5,.fx-6,.fx-7{grid-column:1/8;display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s2) 0}
.fx-5{grid-row:3}.fx-6{grid-row:4}.fx-7{grid-row:5}
.fx-5>.ic,.fx-6>.ic,.fx-7>.ic{box-sizing:content-box;width:28px;height:28px;padding:14px;margin:0;border-radius:50%;background:var(--tint);color:var(--accent)}
.fx-5 p,.fx-6 p,.fx-7 p{color:#2A3858}
.fx-8{grid-column:8/-1;grid-row:3/span 3;display:flex;flex-direction:column;justify-content:center;padding:var(--s5) var(--s4);background:var(--accent);color:var(--on-accent)}
.fx-8>.ic{width:64px;height:64px;color:var(--white)}
.fx-8 h3{font-size:1.875rem;color:var(--white)}
.fx-8 p{font-size:1.1875rem;color:var(--white)}

/* final CTA and links */
.cta-band{position:relative;overflow:hidden;background:var(--night);color:var(--night-text)}
.cta-band::after{content:"";position:absolute;right:-60px;top:-40px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#F4F7FF 0,#C3D0F0 38%,#7E93C6 70%,#4A6199 100%);-webkit-mask-image:radial-gradient(circle at 78% 30%,transparent 0 68%,#000 69%);mask-image:radial-gradient(circle at 78% 30%,transparent 0 68%,#000 69%);filter:drop-shadow(0 0 22px rgba(160,190,255,.45));pointer-events:none}
.cta-band .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s5);padding-bottom:var(--s5)}
.cta-band h2{font-size:2.5rem;color:var(--white)}
.cta-band .t{flex:1 1 360px;max-width:620px}
.cta-band .t p{margin-top:var(--s1);font-size:1.25rem;color:var(--night-text)}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-right:140px}
.mr{padding:var(--sp) 0;background:var(--soft)}
.mr-h{grid-column:1/5;font-size:2rem;line-height:1.1;letter-spacing:-.03em;align-self:start}
.mr-l{grid-column:5/-1;list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.mr-l a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);color:var(--ink);text-decoration:none;font-size:clamp(1.5rem,1.6vw + 1rem,2.25rem);line-height:1.15;font-weight:800;letter-spacing:-.03em}
.mr-l a:hover{color:var(--accent)}
.mr-l .ar{flex:none;color:var(--accent);transition:transform .15s}
.mr-l a:hover .ar{transform:translateX(8px)}
.mr-l .lm{flex:none;font-size:1rem;letter-spacing:0;font-weight:700;color:var(--accent)}
.mr-s{grid-column:5/-1;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s3);font-size:1rem;font-weight:700}

/* footer */
.ftp{background:var(--white);border-top:1px solid var(--line);padding:var(--s5) 0 var(--s4)}
.ftp .logo{font-size:1.75rem}
.ftp-brand{grid-column:1/6}
.ftp-brand nav{display:flex;flex-wrap:wrap;gap:0 var(--s3);margin-top:var(--s2)}
.ftp-brand nav a,.ftp-brand .tl{color:var(--ink)}
.ftp-brand nav a{text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.ftp-brand nav a:hover{text-decoration:underline}
.ftp-brand .tl{margin-top:var(--s2);font-size:1.0625rem}
.ftp-brand .tl+.tl{margin-top:var(--s1);color:var(--muted);font-size:1rem}
.ft-cols{grid-column:7/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4) var(--s5)}
.ft-cols h2{font-size:1rem;letter-spacing:0;line-height:1.3;margin-bottom:var(--s1)}
.ft-cols ul{list-style:none;margin:0;padding:0}
.ft-cols a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink);text-decoration:none}
.ft-cols a:hover{text-decoration:underline}
.ft-copy{grid-column:1/-1;margin-top:var(--s4);color:var(--muted);font-size:.875rem}

@media(max-width:1000px){
 .in{padding-top:calc(56px + var(--s3))}
 .in-media{margin-top:0}
 .cta-band .acts{margin-right:0}.cta-band::after{display:none}
}
@media(max-width:900px){
 .in{padding-bottom:var(--sp)}
 .stp,.st,.fl,.sp,.stm,.fx,.mr{padding-top:var(--sp);padding-bottom:var(--sp)}
 .g12>*,.in-copy,.in-media,.in--pull .in-copy,.in--pull .in-media,.fl-lead,.fl-fig,.fl-col.a,.fl-col.b,.sp-media,.sp-copy,.sp--rev .sp-media,.sp--rev .sp-copy,.stm-big,.stm-body,.st .t-note,.st .t-display,.st .t-body,.st .t-flag,.mr-h,.mr-l,.mr-s,.ftp-brand,.ft-cols,.ft-copy,.fx-1,.fx-2,.fx-3,.fx-4,.fx-5,.fx-6,.fx-7,.fx-8{grid-column:1/-1;grid-row:auto}
 .g12{row-gap:var(--s3)}
 .in-media{margin-top:var(--s3)}
 .in-copy,.in--pull .in-copy{order:-1;display:block}
 .in--pull .in-media{display:block}
 .fl-col{margin-top:0;padding-right:0}
 .sp-copy,.sp--rev .sp-copy{padding:0}
 .sp--rev .sp-media,.sp--rev .sp-copy{order:0}
 .sp--rev .sp-copy{order:-1}
 .stm-body{padding:var(--s3)}
 .stp-l{grid-template-columns:minmax(0,1fr);row-gap:var(--s3)}
 .stp-l::before{left:35px;right:auto;top:36px;bottom:36px;width:2px;height:auto;background:linear-gradient(180deg,var(--accent),var(--night))}
 .stp-l li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--s2);align-items:center}
 .stp-l li::before{width:56px;height:56px;margin:0;font-size:1.5rem;box-shadow:0 0 0 6px var(--white)}
 .stp-l::before{left:27px}
 .st .t-note{margin-bottom:0}
 .st .t-display{margin-bottom:var(--s1)}
 .st .t-body{padding-left:var(--s3);font-size:1.1875rem}
 .st .t-flag{margin-top:0}
 .fx-h{margin-bottom:var(--s3)}
 .fx-1{min-height:0;padding:var(--s4)}
 .fx-4,.fx-4.has-ph{min-height:0;padding:var(--s4)}
 .fx-4.has-ph{padding-bottom:0}
 .fx-ph{position:relative;right:auto;top:auto;bottom:auto;width:152px;height:208px;margin:var(--s3) auto 0}
 .fx-3{padding:var(--s3)}
 .fx-8{padding:var(--s4)}
 .mr-s{margin-top:var(--s2)}
 .mr-h{margin-bottom:var(--s2)}
 .ft-cols{margin-top:var(--s2)}
}
@media(max-width:640px){
 .in{padding-top:calc(40px + var(--s2))}
 .in-lead{font-size:1.1875rem}
 .in--pull .in-lead{font-size:1.5rem}
 .in--pull .in-body{font-size:1.1875rem}
 .pull{padding:var(--s3)}
 .pull p{font-size:1.375rem}
 .st .t-note{font-size:1.25rem}
 .fl-col{font-size:1.125rem}
 .stp-l p,.stm-body p{font-size:1.125rem}
 .cta-band h2{font-size:1.875rem}
 .cta-band .wrap{padding-top:var(--s4);padding-bottom:var(--s4)}
 .cta-band .btn{flex:1 1 100%}
 .cta-band .acts{width:100%}
 .mr-l a{flex-wrap:wrap}
 .ft-cols{gap:var(--s3) var(--s4)}
 .ftp{padding-top:var(--s4)}
}