/* NorthOps service subpages, round 6c (10 Nov 2026): the flagship homepage look on /websites/, /ai-assistants/,
   /ai-receptionist/, /toolkit/ and /privacy/. Loaded AFTER each page's inline <style> and replaces northops-glass.css there.
   Visual only: layout, sections, cards, wording, prices, links and JS hooks are the page's own.
   - Header, Services flyout, search, phone menu and footer: the homepage's (same rules as flagship.css, scoped to win
     over the pages' older inline nav rules).
   - Type: Inter with optical sizing at the homepage's sizes, weights, line heights and tracking. Near-black text on white
     and #f5f5f7, no tinted page background, no coloured headline words.
   - Blue (#1f5fd1) only for buttons and text links. Cards, chips and panels: white or very light grey, soft shadow, rounded.
   - Focus: near-black 2px rings (light rings on the near-black bands). */

@font-face{
  font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/inter-latin-opsz-normal.woff2) format("woff2-variations"),url(/assets/fonts/inter-latin-opsz-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* homepage tokens */
  --ink:#1d1d1f;--ink-2:#424245;--ink-3:#6e6e73;--paper:#fff;--mist:#f5f5f7;--night:#111113;
  --on-night:#f5f5f7;--on-night-2:#a1a1a6;
  --blue:#1f5fd1;--blue-hover:#1a55bd;--blue-press:#164aa6;--blue-on-night:#5b9cff;
  --hair:rgba(0,0,0,.12);--side:max(22px, env(safe-area-inset-left));--col:1024px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --focus:#1d1d1f;
  --card-shadow:0 0 0 1px rgba(0,0,0,.05),0 4px 24px rgba(0,0,0,.06);
  --card-shadow-hover:0 0 0 1px rgba(0,0,0,.06),0 10px 34px rgba(0,0,0,.1);
  /* the pages' own tokens, mapped onto the homepage palette */
  --c-ink:#1d1d1f;--c-ink-2:#1d1d1f;--c-ink-3:#424245;--c-muted:#6e6e73;--c-subtle:#6e6e73;
  --c-white:#fff;--c-warm-1:#f5f5f7;--c-warm-2:#f5f5f7;--c-warm-3:#d2d2d7;
  --c-border:rgba(0,0,0,.08);--c-border-md:rgba(0,0,0,.14);
  --c-navy:#1d1d1f;--c-navy-2:#1d1d1f;--c-navy-pale:#f5f5f7;--c-dark:#111113;
  --c-accent:#1f5fd1;--c-accent-2:#1a55bd;--c-accent-soft:#f5f5f7;
  --f-serif:var(--font);--f-sans:var(--font);
  --shadow-sm:0 0 0 1px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.05);
  --shadow-md:var(--card-shadow);--shadow-lg:var(--card-shadow-hover);
  /* old names some page rules and the chat widget fall back to */
  --blue-old:#1f5fd1;--text-2:#424245;--text-3:#6e6e73;--border:rgba(0,0,0,.1);--surface:#fff;
  color-scheme:light;
}

/* ───────── base ───────── */
html{scroll-padding-top:112px}
@media (max-width:900px){html{scroll-padding-top:68px}}
html:has(#prelaunch.on){scroll-padding-top:144px}
@media (max-width:900px){html:has(#prelaunch.on){scroll-padding-top:104px}}
body{background:#fff;color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.011em;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
button,input,select,textarea{font-family:var(--font)}
::selection{background:#cfe0ff;color:var(--ink)}
input,textarea,select{caret-color:var(--blue)}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
body.menu-open{overflow:hidden}
/* round 6c fix: a backdrop-filter makes the header the containing block of the fixed phone menu, which clipped the open
   menu to the 52px header bar. While the menu is open the header goes solid and drops the filter, so the menu fills the screen. */
body.menu-open .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(250,250,252)}

/* focus: near-black rings; light rings on the near-black bands and cards */
:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.cta-band,.section-ink,.existing-band,.card-navy,.eph,.toast{--focus:#f5f5f7}
.skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--ink);color:#fff;padding:12px 18px;border-radius:980px;font-size:15px}
.skip:focus{top:10px;text-decoration:none}

/* ───────── header (homepage) ───────── */
.nav{position:sticky;top:0;z-index:600;height:52px;background:rgba(250,250,252,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .24s cubic-bezier(.4,0,.6,1)}
.nav.up,.nav.is-scrolled{border-bottom-color:rgba(0,0,0,.08)}
.nav .nav-in{max-width:calc(var(--col) + 2 * 22px);margin:0 auto;height:100%;padding:0 var(--side);display:flex;align-items:center;gap:20px}
.nav .brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:17px;letter-spacing:-.02em;min-height:44px;text-decoration:none}
.nav .brand svg{width:24px;height:24px;flex:none}
.nav .nav-links{position:static;transform:none;display:flex;align-items:center;gap:2px;margin-left:auto}
.nav .nav-link{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 11px;font:inherit;font-size:14px;font-weight:400;letter-spacing:-.01em;
  color:rgba(0,0,0,.8);background:none;border:0;cursor:pointer;border-radius:8px;text-decoration:none;transition:color .24s cubic-bezier(.4,0,.6,1)}
.nav .nav-link:hover{color:#000;background:none}
.nav .nav-link svg{width:10px;height:10px;transition:transform .24s cubic-bezier(.4,0,.6,1)}
.nav .nav-link[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav .dd{position:static}
.nav .nav-cta{margin-left:10px}
.nav .nav-toggle{display:none;margin:0 0 0 auto;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink);border-radius:10px}
.nav .nav-toggle svg{width:22px;height:22px;stroke:none;fill:none}
.nav .nav-toggle .i-close{display:none}
.nav .nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav .nav-toggle[aria-expanded="true"] .i-close{display:block}
.nav .nav-call{display:none}
.nav .mnav{position:fixed;inset:52px 0 0 0;z-index:590;background:#fafafc;overflow-y:auto;overscroll-behavior:contain;
  max-height:none;border:0;box-shadow:none;padding:18px var(--side) calc(32px + env(safe-area-inset-bottom))}
.nav .mnav[hidden]{display:none}
.nav .mnav:not([hidden]){animation:sp-mnav-in .32s cubic-bezier(.16,1,.3,1)}
@keyframes sp-mnav-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav .mnav ul{list-style:none;margin:0;padding:0}
.nav .mnav li a{display:flex;align-items:center;min-height:52px;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.08)}
.nav .mnav .mnav-sub{padding:0;font-size:inherit;color:inherit}
.nav .mnav .mnav-sub::before{content:none}
.nav .mnav .mnav-sub a,.nav .mnav .mnav-demos a{font-size:17px;font-weight:400;min-height:48px;color:var(--ink-2)}
.nav .mnav .mnav-sub a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav .mnav-label{margin:26px 0 4px;font-size:13px;color:var(--ink-3)}
.nav .mnav .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.nav .mnav .btn{flex:1 1 100%;min-height:48px}
@media (min-width:901px){.nav .mnav{display:none!important}}
@media (max-width:900px){
  .nav .nav-links,.nav .nav-cta{display:none}
  .nav .nav-toggle{display:inline-flex}
  .nav .nav-call{display:inline-flex;margin-left:auto}
  .nav .nav-call + .nav-toggle{margin-left:4px}
  .nav-in > .ns-btn{order:1;margin-left:-8px}
  .nav-in > .nav-toggle{order:2}
  .ns-btn ~ .nav-toggle{margin-left:-14px}
}
@media (min-width:901px){.nav-in > .ns-btn{margin-left:6px;margin-right:-6px}}
/* round 13: a header without a top-bar button (/websites/): at phone/tablet widths search takes the auto margin
   that the button used to have, so search + menu stay on the right */
@media (max-width:900px){
  .nav-in:not(:has(.nav-call)) > .ns-btn{margin-left:auto}
  .nav-in:not(:has(.nav-call)) > .ns-btn ~ .nav-toggle{margin-left:4px}   /* same search-to-menu spacing as before */
}
/* "Get the toolkit" is longer than the homepage's "Get a quote": tighter gaps keep the phone header on one line */
@media (max-width:420px){.nav .nav-in{gap:10px}}
@media (max-width:360px){
  .nav .nav-in{gap:4px;padding:0 14px}
  .nav-in > .ns-btn{margin-left:2px;width:36px}
  .ns-btn ~ .nav-toggle{margin-left:0;width:36px}
  .nav .nav-call{padding-left:12px;padding-right:12px}
}
/* the flyout lines up with this header's content edge (flyout.css also has rules for the old header) */
.nav .nf-in{max-width:calc(var(--col) + 2 * 22px);padding-left:var(--side);padding-right:var(--side)}

/* ───────── section sub-nav (Apple product sub-nav idea): page name left, this page's sections right ───────── */
.subnav{position:sticky;top:52px;z-index:500;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08)}
.subnav-in{max-width:calc(var(--col) + 2 * 22px);margin:0 auto;padding:0 var(--side);min-height:48px;display:flex;align-items:center;gap:24px}
.subnav-title{margin:0;font-size:19px;font-weight:600;letter-spacing:-.016em;color:var(--ink);white-space:nowrap}
.subnav-links{list-style:none;margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:2px}
.subnav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:12px;letter-spacing:-.005em;color:rgba(0,0,0,.72);text-decoration:none;border-radius:8px;white-space:nowrap}
.subnav-links a:hover{color:#000}
@media (max-width:900px){
  /* on phones the sub-nav scrolls away with the page; the same links are in the menu */
  .subnav{position:relative;top:auto}
  .subnav-in{gap:12px;padding-right:0}
  .subnav-title{font-size:17px}
  .subnav-links{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:22px}
  .subnav-links::-webkit-scrollbar{display:none}
}
@media (max-width:600px){.subnav-links{display:none}.subnav-in{min-height:44px}}

/* toolkit pre-launch ribbon: under the header and sub-nav, quiet grey */
.prelaunch{top:100px;background:#f5f5f7;border-bottom:1px solid rgba(0,0,0,.08);color:var(--ink-2)}
@media (max-width:900px){.prelaunch{top:52px}}

/* ───────── type (homepage scale) ───────── */
.serif{font-family:var(--font);font-weight:600;color:var(--ink)}
.t-display,.t-h1{font-size:clamp(34px,5.2vw,56px);line-height:1.07;letter-spacing:-.03em;font-weight:600}
.t-h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.022em;font-weight:600}
.t-h3{font-size:clamp(21px,2vw,24px);line-height:1.17;letter-spacing:-.015em;font-weight:600}
.t-lead{font-size:clamp(19px,1.9vw,21px);line-height:1.38;letter-spacing:-.012em;font-weight:400;color:var(--ink-2)}
.t-body{font-size:17px;line-height:1.47;letter-spacing:-.011em;font-weight:400;color:var(--ink-2)}
.t-small{font-size:14px;line-height:1.43;letter-spacing:-.006em;color:var(--ink-3)}
.t-label{font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--ink-3)}
/* headline accent words: plain near-black, upright (no colour, no gradient) */
.serif em,.hero-h em,.t-h1 em,.t-h2 em,.t-h3 em,.tool-h em,.eph h2 em,.existing-band h2 em,h1 em,h2 em,h3 em{font-style:normal;color:inherit!important;background:none!important;-webkit-text-fill-color:currentColor}
/* eyebrows: the homepage has none above headings; kept (wording unchanged) as a small grey label */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:-.006em;text-transform:none;color:var(--ink-3)}
.eyebrow::before{display:none}
.hero .eyebrow{font-size:17px;color:var(--ink-3)}
/* body copy weights: Inter 400, never 300 */
[class*="-card"] p,.faq-a,.step-body p,.included p,.outcome p,.fit li,.price-list li,.ex p,.ws-sys p,.pk-for,.req,.ex-disclaimer,.shot-cap,.tk-price-line{font-weight:400}
.problem-card h3,.faq-q,.included h3,.outcome h3,.fit h3,.ws-sys h3{letter-spacing:-.015em;font-weight:600}
.step-body h3,.ex h3{font-weight:600;letter-spacing:-.018em}
.price-amount .serif,.hp-amt,.eph-big,.problem-num{font-family:var(--font);font-weight:600;letter-spacing:-.03em}
.problem-num{color:var(--ink-3)}
.price-name,.pk-list-label{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink-3)}
.card-navy .price-name,.card-navy .pk-list-label{color:var(--on-night-2)}

/* ───────── text links: blue (several were inline near-black). Links inside running text keep a thin underline:
   blue against the near-black text around it is under 3:1, so colour alone would not mark them (WCAG 1.4.1). ───────── */
main a[style*="--c-navy"],.faq-a a,.ex-sys a,.req a,.price-fine a,.t-body a,.t-small a,.ex-disclaimer a,.pk-note a,.price-note a,.pv a,main p a:not(.btn):not(.more):not(.ex-link){
  color:var(--blue)!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:.18em!important;text-decoration-color:rgba(31,95,209,.45)!important}
main a[style*="--c-navy"]:hover,.faq-a a:hover,.ex-sys a:hover,.req a:hover,.price-fine a:hover,.t-body a:hover,.t-small a:hover,.ex-disclaimer a:hover,.pk-note a:hover,.price-note a:hover,.pv a:hover,main p a:not(.btn):hover{text-decoration-color:currentColor!important}
.cta-band a.t-body,.cta-band .t-body a,.section-ink .t-body a{color:var(--blue-on-night)!important}
em[style*="--c-navy"],p[style*="--c-navy"]{color:var(--ink)!important;font-style:normal}

/* ───────── buttons (homepage pills) ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 22px;border-radius:980px;border:1px solid transparent;
  font-family:var(--font);font-size:17px;line-height:1.18;letter-spacing:-.016em;font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none!important;box-shadow:none;
  transition:background-color .24s cubic-bezier(.4,0,.6,1),color .24s cubic-bezier(.4,0,.6,1),border-color .24s cubic-bezier(.4,0,.6,1),transform .1s ease-out}
/* subpage buttons carry longer labels than the homepage's: they may wrap (balanced) instead of widening their column */
main .btn,.buybar .btn,.mnav .btn{white-space:normal;text-wrap:balance;text-align:center;max-width:100%}
.btn:hover{transform:none;box-shadow:none}
.btn:active{transform:scale(.97)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary,.btn-navy,.btn-form,.btn-light,.nav-cta.btn,.nav-call.btn{background:var(--blue)!important;color:#fff!important;border-color:transparent!important}
.btn-primary:hover,.btn-navy:hover,.btn-form:hover,.btn-light:hover{background:var(--blue-hover)!important;box-shadow:none}
.btn-primary:active,.btn-navy:active,.btn-form:active,.btn-light:active{background:var(--blue-press)!important}
.btn-outline,.btn-ghost-light,.btn-outline[style]{background:transparent!important;color:var(--blue)!important;border-color:currentColor!important}
.btn-outline:hover,.btn-ghost-light:hover{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.cta-band .btn-outline,.cta-band .btn-ghost-light,.section-ink .btn-outline,.existing-band .btn-outline,.card-navy .btn-outline,.eph .btn-outline,.btn-ghost-light{color:var(--blue-on-night)!important}
.cta-band .btn-outline:hover,.cta-band .btn-ghost-light:hover,.section-ink .btn-outline:hover,.existing-band .btn-outline:hover,.card-navy .btn-outline:hover{color:#fff!important}
.btn-sm{min-height:32px;padding:6px 14px;font-size:14px;position:relative}
.btn-sm::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.mnav .btn svg,.btn svg{stroke:currentColor}

/* ───────── surfaces ───────── */
.hero{background:#fff;padding-top:clamp(56px,7vw,96px)}
.hero::before,.hero::after,.hero-bg{display:none!important}
.hero-rule{background:var(--ink)}
.section-warm,.section-warm2{background:var(--mist)}
/* cards, panels: white, soft shadow, rounded (on white sections they sit on a hairline + soft shadow; on grey they lift) */
.card,.problem-card,.faq-item,.form-card,.founding-panel,.contact-channel,.metric,.solution-card,.web-panel,.req,.ex-disclaimer,.ex-wide,.tool-visual,.shot,.care-opt,.ai-ex{
  background:#fff;border:0!important;border-radius:18px;box-shadow:var(--card-shadow)}
.card:hover,.faq-item:hover,.contact-channel:hover{box-shadow:var(--card-shadow-hover);transform:none}
.problem-card:hover{box-shadow:var(--card-shadow-hover)}
.care-opt{background:var(--mist);box-shadow:none}
.shot{border-radius:14px}
.shot-bar{background:#f5f5f7;border-bottom:1px solid rgba(0,0,0,.06)}
.shot-bar i{background:#d2d2d7}
/* near-black featured cards and bands (homepage night tiles) */
.card-navy,.pillar-card.featured{background:#1d1d1f!important;color:var(--on-night);box-shadow:0 10px 34px rgba(0,0,0,.18)}
.cta-band,.section-ink,.existing-band{background:var(--night)!important;color:var(--on-night)}
.cta-band::before,.cta-band::after,.existing-band::before,.existing-band::after,.section-ink::before,.section-ink::after{display:none!important}
.cta-band .serif,.existing-band .serif,.section-ink .serif,.cta-band h2,.existing-band h2,.section-ink h2{color:#f5f5f7!important}
.cta-band .t-body,.existing-band .t-body,.section-ink .t-body,.cta-band .t-lead,.existing-band .t-lead,.enq-list li{color:var(--on-night-2)!important}
.cta-band .eyebrow,.existing-band .eyebrow,.section-ink .eyebrow,.cta-band [style*="rgba(255,255,255,.5)"]{color:var(--on-night-2)!important}
.eph{background:#1d1d1f!important}
.eph .t-body,.eph-row,.eph-note{color:var(--on-night-2)}
.eph-calc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.eph-row.total,.eph-big{color:#f5f5f7}
/* chips, tags, badges: light grey, near-black text, no tint */
.trust-badge,.ex-tag,.price-tag,.flow-step,.trade,.solution-tag,.pk-time,.hero-pill,.chip{background:#f5f5f7!important;border:0!important;color:var(--ink)!important;box-shadow:none}
.trust-badge{font-size:12px;font-weight:500;padding:6px 12px}
.trust-badge svg,.pk-time svg,.card-icon svg,.footer-contact-icon svg{stroke:var(--ink)!important}
.trust-badge.badge-green,.trust-badge.badge-green svg{color:var(--ink)!important;stroke:var(--ink)!important}
.flow-step.end{background:var(--ink)!important;color:#fff!important}
.flow-arrow{color:#86868b}
.ex-tag,.price-tag,.solution-tag{font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:none;padding:3px 10px}
.card-navy .price-tag,.card-navy .pk-time{background:rgba(255,255,255,.1)!important;color:#f5f5f7!important}
.card-navy .pk-time svg{stroke:#f5f5f7!important}
/* each example site's own accent stays only as the tiny dot */
.ex-ai{color:var(--ink);border-color:rgba(0,0,0,.14);font-size:12px;font-weight:500;letter-spacing:.01em;text-transform:none}
.ex-try{border-left-color:#d2d2d7;font-family:var(--font);font-style:normal;color:var(--ink-2)!important;font-size:17px!important}
.card-icon,.card-icon-pale,.founding-icon,.credential-tick,.success-icon,.cc-icon,.contact-icon,.footer-contact-icon{background:#f5f5f7!important;border:0!important;color:var(--ink)}
.fit li::before{background-color:#f5f5f7;border:0}
.step-circle{background:#f5f5f7;border:0;color:var(--ink)}
.step{border-color:rgba(0,0,0,.08)!important}
.price-list li::before{color:var(--ink-3)}
.card-navy .price-list li::before{color:var(--on-night-2)}
.contact-channel.wa{background:#fff}
.contact-channel.wa .cc-label{color:var(--ink-3)}
.contact-channel.wa .cc-icon svg{stroke:var(--ink)}
.tool-price-note{color:var(--ink-3)}
/* forms */
.f-group input,.f-group select,.f-group textarea{background:#fff;border:1px solid rgba(0,0,0,.16);border-radius:12px;color:var(--ink);font-size:17px}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,95,209,.18)}
.f-group label{color:var(--ink-2)}
/* buybar and toast */
.buybar{background:rgba(250,250,252,.92);border-top:1px solid rgba(0,0,0,.08)}
.toast{background:var(--ink);border-radius:980px}
/* social links inside page content (contact columns) */
.social-links a{border:0;background:#f5f5f7;border-radius:50%;color:var(--ink-2)}
.social-links a:hover{color:#000;background:#ebebef;transform:none}

/* ai-assistants: example cards (rules that used to live in the glass layer) */
.ai-ex-shot{margin:calc(10px - var(--sp-6)) calc(10px - var(--sp-6)) var(--sp-5);border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#f5f5f7}
.ai-ex-shot picture,.ai-ex-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ai-ex .solution-header{align-items:center;margin-bottom:var(--sp-4)}
.ai-ex .solution-tag{margin-top:0}
.ai-ex .solution-title{font-size:21px;font-weight:600;letter-spacing:-.015em;min-height:1.3em}
.ai-ex .ai-ex-desc{flex:1 0 auto;margin-bottom:var(--sp-4)}
.ai-ex .solution-ideal{margin-bottom:var(--sp-5);background:#f5f5f7;border-radius:12px}
.ai-ex .solution-btn{margin-top:0}
.metric-link{color:inherit;text-decoration:none}

/* ───────── footer (homepage) ───────── */
.foot{background:var(--mist);margin-top:12px;font-size:12px;line-height:1.33;color:rgba(0,0,0,.56)}
.foot .wrap{max-width:calc(var(--col) + 2 * 22px);margin:0 auto;padding:28px var(--side)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:28px;padding-bottom:22px;border-bottom:1px solid rgba(0,0,0,.16)}
.foot h2{font-size:12px;font-weight:600;color:rgba(0,0,0,.88);margin:0 0 10px;letter-spacing:0;line-height:1.33}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.foot li a{display:inline-flex;align-items:center;min-height:44px;color:rgba(0,0,0,.72);text-decoration:none}
.foot li a:hover{color:#000;text-decoration:underline}
.foot .brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:15px;letter-spacing:-.02em;margin-bottom:10px;text-decoration:none}
.foot .brand svg{width:20px;height:20px;flex:none}
.foot p{margin:0;max-width:42ch}
.foot p + p{margin-top:8px}
.foot .social{display:flex;gap:6px;margin-top:12px}
.foot .social a{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:rgba(0,0,0,.72)}
.foot .social a:hover{background:rgba(0,0,0,.05);color:#000}
.foot .social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.foot .legal{padding-top:16px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.foot .legal p{margin:0}
.foot .legal a{color:rgba(0,0,0,.72);text-decoration:none}
.foot .legal a:hover{text-decoration:underline}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}.foot-top > div:first-child{grid-column:1/-1}}
@media (max-width:400px){.foot-top{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.nav .mnav:not([hidden]){animation:none}.btn:active{transform:none}}

/* focus rings from the shared header add-ons (search.css, flyout.css use blue): near-black here like the rest of the page */
.nav .ns-btn:focus-visible,.nav .nf a:focus-visible{outline:2px solid var(--focus)!important;outline-offset:3px}
.subnav-links a:focus-visible{outline-offset:-4px}
.shot-bar span{color:var(--ink-2);opacity:1}