/* ==========================================================================
   BE AI - beai.nz

   Ground: warm bone paper. The logo is a multi-colour ribbon with a grey
   tagline and pale circuit traces on transparency; on paper it reads as drawn.
   Headings: Fraunces. Body: Manrope. Eyebrows and figures: DM Mono.

   Accent: #D84626, sampled from the "AI" wordmark in the logo itself.
     --ai        #D84626  rules, icons, fills, display figures
     --ai-ink    #B03418  small text and links on paper        5.96:1
     --ai-deep   #C63C1E  solid fills carrying WHITE text      5.16:1
   Buttons carry white labels: on this orange, white is the only value that
   clears AA at body size, and it is what the black label was missing.

   Other logo colours carry meaning and nothing else:
     #27742E green = yes/good     #F0B430 amber = caution
     #B3261E = an error, and nothing else is red.
   There is no blue anywhere, including the family brand bar, which is the
   accent orange on this site.

   Boundary-contrast rule (WCAG 1.4.11): --hair is decorative only. Anything
   clickable uses --edge, solved to >= 3:1 on paper. The focus ring is
   near-black so it clears both the paper and an orange button; the two dark
   bands flip it to near-white.
   ========================================================================== */

:root{
  /* paper */
  --paper:#FBF9F5; --surface:#FFFFFF; --band:#F3EEE6; --sink:#EBE4D8;
  --ink:#191512; --ink-2:#3C3630; --muted:#6B625A;
  --hair:#E7DFD3; --hair-2:#DCD2C3; --edge:#8C8377;

  /* accent, sampled from the logo */
  --ai:#D84626; --ai-ink:#B03418; --ai-deep:#C63C1E; --ai-wash:#FBEDE7; --ai-wash-2:#F6DFD5;

  /* meaning */
  --good:#27742E; --good-fill:#96BE1A; --warn:#8A6508; --warn-fill:#F0B430; --bad:#B3261E;

  /* the dark statement band */
  --night:#17120F; --night-2:#241C17; --night-ink:#F7F3EC; --night-muted:#B3A89B; --night-hair:rgba(255,255,255,.14);

  --focus:#191512;   /* near-black: the only value that clears 3:1 on paper AND on an orange button */
  --shadow-1:0 1px 2px rgba(64,48,32,.06),0 2px 6px rgba(64,48,32,.05);
  --shadow-2:0 2px 4px rgba(64,48,32,.06),0 12px 28px rgba(64,48,32,.09);
  --shadow-3:0 4px 10px rgba(64,48,32,.07),0 30px 60px rgba(64,48,32,.13);

  --f-head:"Fraunces",Georgia,serif;
  --f-body:"Manrope","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,Consolas,monospace;
  --head-w:600; --head-ls:-.018em; --head-lh:1.04;

  --max:1800px; --gutter:clamp(20px,3.2vw,60px); --sec-y:clamp(38px,2.9vw,60px);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}



/* ========================= base ========================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--f-body);font-size:17.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2{font-family:var(--f-head);font-weight:var(--head-w);margin:0 0 .36em;line-height:var(--head-lh);letter-spacing:var(--head-ls);text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.5rem,4.55vw,4.35rem)}
.hero--home h1{max-width:16ch}
h2{font-size:clamp(2rem,3.5vw,3.35rem)}
h1 em,h2 em{font-style:italic;color:var(--ai-ink)}
h3,h4{font-family:var(--f-body);margin:0 0 .46em;font-weight:700;line-height:1.18;letter-spacing:-.016em;text-wrap:balance;color:var(--ink)}
h3{font-size:clamp(1.12rem,1.45vw,1.36rem)}
h4{font-size:1rem}
p{margin:0 0 1.05em}
a{color:var(--ai-ink);text-decoration:none}
a:hover{color:var(--ink)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sec--close :focus-visible,.sec--ai :focus-visible{outline-color:#FFF1EA}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--ai-deep);color:#fff;padding:.6rem 1rem;border-radius:var(--r-sm);font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{top:12px;color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);position:relative}
/* A reading measure belongs on the text, not on the section. Every band runs
   the full width so the whole site shares one left rule; only the long-form
   content inside carries a measure. */
.wrap--narrow{max-width:var(--max)}
.wrap--narrow .head{max-width:46rem}
.wrap--narrow>.prose,
.wrap--narrow>.list,
.wrap--narrow>.muted-p,
.wrap--narrow>.contact-cards,
.wrap--narrow>.side-steps,
.wrap--narrow .guide-cta{max-width:42rem}
.wrap--narrow>.score,
.wrap--narrow>.form,
.wrap--narrow>.notice{max-width:54rem}
.sec{padding-block:var(--sec-y);position:relative}
.sec--lift{background:var(--surface);border-block:1px solid var(--hair)}
.sec--plate{background:var(--band);border-block:1px solid var(--hair);overflow:hidden}
.sec--plate>.wrap{position:relative;z-index:1}
.mt{margin-top:1.15rem}
.muted-p{color:var(--muted);font-size:.95rem}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--ai-ink);margin:0 0 .8rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--ai);border-radius:2px;flex:none}
.lede{font-size:clamp(1.06rem,1.28vw,1.26rem);color:var(--ink-2);line-height:1.58}
.hero .lede,.split .lede,.close-in .lede,.score-band .lede{max-width:58ch}
.hero-copy{max-width:820px}
.head{margin-bottom:clamp(20px,1.9vw,34px)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.k{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ai-ink);font-weight:500}

.grid{display:grid;gap:clamp(14px,1.2vw,22px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}.btn{white-space:normal;line-height:1.25;max-width:100%}}

/* buttons — solid orange, WHITE label (5.17:1) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.78rem 1.5rem;border-radius:var(--r-pill);font-weight:700;font-size:1rem;letter-spacing:-.005em;border:1.5px solid transparent;transition:transform .18s var(--ease),background .18s,border-color .18s,box-shadow .18s;white-space:nowrap;text-align:center;font-family:var(--f-body)}
.btn:hover{transform:translateY(-1px)}
.btn--ai{background:var(--ai-deep);color:#fff;border-color:var(--ai-deep);box-shadow:0 6px 18px rgba(198,60,30,.28)}
.btn--ai:hover{background:#AE3417;border-color:#AE3417;color:#fff;box-shadow:0 10px 26px rgba(198,60,30,.34)}
.btn--line{background:var(--surface);color:var(--ink);border-color:var(--edge)}
.btn--line:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.btn--ghost{background:transparent;color:var(--ai-ink);padding-inline:.4rem;min-height:44px}
.btn--ghost:hover{color:var(--ink)}
.btn svg,.ic-svg{width:18px;height:18px;flex:none}
.btn--sm{min-height:44px;padding:.5rem 1.05rem;font-size:.92rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.15rem}

/* ========================= brand bar — now the accent orange ============ */
/* Structure matches the Be Digital family bar: a labelled lead, the family
   left-aligned, the current site underlined rather than pilled, and Pay Now
   held at the right as an outlined action. The ground stays Be AI's orange,
   and so the labels stay SOLID WHITE: Be Digital quiets its to 66% white,
   which composites to 3.07:1 here and fails. Weight and size carry the
   hierarchy instead, and every label holds 5.16:1. */
.bebar{background:var(--ai-deep);border-bottom:1px solid rgba(0,0,0,.14)}
.bebar-in{display:flex;justify-content:flex-start;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.bebar-in::-webkit-scrollbar{display:none}
.bebar-lead{display:inline-flex;align-items:center;flex:none;padding-right:15px;margin-right:7px;border-right:1px solid rgba(255,255,255,.34);font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;white-space:nowrap}
.bebar a{position:relative;display:inline-flex;align-items:center;flex:none;padding:0 13px;min-height:44px;color:#fff;font-size:.86rem;font-weight:500;letter-spacing:-.005em;white-space:nowrap}
.bebar a::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:#fff;transform:scaleX(0);transform-origin:center;transition:transform .22s var(--ease)}
.bebar a:hover,.bebar a:focus-visible{color:#fff}
.bebar a:hover::after,.bebar a:focus-visible::after{transform:scaleX(1)}
.bebar a.active{font-weight:700}
.bebar a.active::after{transform:scaleX(1)}
.bebar .bebar-pay{margin-left:auto;padding-left:18px}
.bebar .bebar-pay::after{display:none}
.bebar .bebar-pay span{border:1px solid rgba(255,255,255,.75);border-radius:var(--r-pill);padding:.32rem .85rem;font-size:.81rem;font-weight:700;transition:background .18s,color .18s,border-color .18s}
.bebar .bebar-pay:hover span,.bebar .bebar-pay:focus-visible span{background:#fff;color:var(--ai-ink);border-color:#fff}
@media (max-width:900px){
  .bebar-in{padding-inline:14px}
  .bebar a{padding:0 11px;font-size:.82rem}
  .bebar .bebar-pay{margin-left:0;padding-left:11px}
}
/* the label eats the width the scroller needs; the links say what the bar is */
@media (max-width:640px){.bebar-lead{display:none}}

/* ========================= header ========================= */
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,249,245,.86);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--hair)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:80px}
.logo{display:flex;align-items:center;min-height:44px;padding:2px 0}
.logo img{height:42px;width:auto}
.nav{display:flex;align-items:center;gap:.1rem}
.nav>li{position:relative}
.nav>li:first-child{position:static}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .85rem;color:var(--ink-2);font-weight:600;font-size:.97rem;border-radius:var(--r-sm);background:none;border:0;min-height:44px;font-family:var(--f-body)}
.nav>li>a:hover,.nav>li>button:hover,.nav>li>button[aria-expanded="true"]{color:var(--ink);background:var(--band)}
.nav>li>button svg{width:12px;height:12px;transition:transform .2s}
.nav>li>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:var(--surface);border:1px solid var(--hair-2);border-radius:var(--r-lg);padding:.6rem;box-shadow:var(--shadow-3);display:none;z-index:70}
.menu.open{display:grid;gap:.15rem}
.menu--mega{left:var(--gutter);right:var(--gutter);top:calc(100% - 8px);max-width:1120px;margin:0 auto;padding:1.1rem;grid-template-columns:repeat(3,1fr) 250px;gap:1rem}
.menu--mega.open{display:grid}
.menu-col{display:grid;gap:.15rem;align-content:start}
.menu-col .menu-h{margin:0;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:.25rem .75rem .5rem;font-weight:500}
.menu a{display:grid;gap:.1rem;padding:.6rem .75rem;border-radius:var(--r-sm);color:var(--ink);min-height:44px}
.menu a:hover{background:var(--ai-wash);color:var(--ink)}
.menu a b{font-weight:700;font-size:.94rem}
.menu a span{font-size:.82rem;color:var(--muted)}
.menu-rail{display:grid;gap:.4rem;align-content:start;padding:1rem;border-radius:var(--r-md);background:var(--ai-wash);border:1px solid var(--ai-wash-2)}
.menu-rail b{color:var(--ink);font-size:1rem}
.menu-rail>span{font-size:.84rem;color:var(--ink-2)}
.menu-rail .btn{justify-self:start;margin-top:.3rem}
.menu-rail .menu-all{padding:.4rem 0 0;min-height:44px;color:var(--ai-ink);font-size:.86rem;display:flex;align-items:center}
.hdr-cta{display:flex;align-items:center;gap:.6rem}
.burger{display:none;width:48px;height:48px;border-radius:12px;background:var(--ai-deep);border:1.5px solid var(--ai-deep);color:#fff;align-items:center;justify-content:center}
.burger svg{width:24px;height:24px}
@media (max-width:1180px){.nav{display:none}.burger{display:inline-flex}}
@media (max-width:520px){.hdr-cta .btn--ai{display:none}.logo img{height:36px}}

/* drawer */
.drawer{position:fixed;inset:0;z-index:80;background:var(--paper);display:none;flex-direction:column;overflow:auto;padding:0 var(--gutter) calc(24px + env(safe-area-inset-bottom))}
.drawer.open{display:flex}
.drawer-top{display:flex;align-items:center;justify-content:space-between;min-height:80px;position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--hair);margin-bottom:.6rem;z-index:1}
.drawer-top img{height:36px;width:auto}
.drawer nav a,.drawer nav summary{display:block;padding:.85rem .25rem;font-size:1.18rem;font-weight:700;color:var(--ink);border-bottom:1px solid var(--hair);min-height:52px;cursor:pointer}
.drawer nav summary{list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer nav summary::-webkit-details-marker{display:none}
.drawer nav summary::after{content:"+";font-weight:500;color:var(--ai-ink)}
.drawer nav details[open] summary::after{content:"\2013"}
.drawer nav details a{font-size:1rem;font-weight:600;color:var(--ink-2);padding-left:1rem;border-bottom:0;min-height:48px}
.drawer-cta{display:grid;gap:.6rem;margin-top:1.2rem}
.drawer-cta .btn{width:100%}
.drawer-mail{text-align:center;color:var(--muted);display:block;padding:.6rem;min-height:44px}

/* ========================= hero ========================= */
.hero{position:relative;overflow:hidden;padding-block:clamp(34px,4.2vw,76px) clamp(32px,3.4vw,58px);
  background:
    radial-gradient(1200px 640px at 84% 8%,rgba(216,70,38,.10),transparent 62%),
    radial-gradient(900px 520px at 2% 96%,rgba(240,180,48,.13),transparent 60%),
    var(--paper)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(25,21,18,.10) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse at 72% 42%,#000 8%,transparent 70%);mask-image:radial-gradient(ellipse at 72% 42%,#000 8%,transparent 70%);pointer-events:none}
.fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Motion is atmosphere, never competition. Below 1000px the copy takes the
   whole band, so the canvas steps back: masked out entirely behind the
   headline, returning as texture under the buttons. */
@media (max-width:1000px){
  .fx{opacity:.5}
  .hero .fx{opacity:.6;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 40%,rgba(0,0,0,.38) 64%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,transparent 40%,rgba(0,0,0,.38) 64%,#000 100%)}
}
@media (max-width:640px){
  .fx{opacity:.36}
  .hero .fx{opacity:.45}
  .hero::before{-webkit-mask-image:radial-gradient(ellipse at 78% 88%,#000 6%,transparent 62%);mask-image:radial-gradient(ellipse at 78% 88%,#000 6%,transparent 62%)}
}
.hero-in{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:clamp(28px,3vw,56px);align-items:center;position:relative;z-index:1;min-height:min(62vh,620px)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.35rem 0 .9rem}
@media (max-width:560px){.hero-ctas,.hero .cta-row{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}.hero-ctas .btn,.hero .cta-row .btn{width:100%}}
.hero-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-size:.9rem;color:var(--muted);margin-top:1rem}
.hero-trust li{display:flex;align-items:center;gap:.45rem}
.hero-trust i{width:7px;height:7px;border-radius:50%;background:var(--ai);flex:none}
.hero-visual{min-height:280px}
@media (max-width:1000px){.hero-in{grid-template-columns:minmax(0,1fr);min-height:0}.hero .lede{max-width:none}.hero-visual{display:none}}
.hero--page{padding-block:clamp(22px,2.4vw,40px) clamp(26px,2.7vw,46px)}
.hero--page .wrap{position:relative;z-index:1}
.crumbs{margin-bottom:.6rem;font-size:.84rem;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"/";color:var(--hair-2)}
.crumbs a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px;min-width:44px}

/* spine */
.spine-wrap{margin-top:1.15rem}
.spine{display:flex;gap:6px;max-width:760px}
.spine-seg{flex:1;min-width:0}
.spine-seg a,.spine-seg>span{display:flex;flex-direction:column;justify-content:center;min-height:44px;color:var(--muted)}
.spine-seg i{display:block;height:6px;border-radius:3px;background:var(--hair-2);margin-bottom:.4rem}
.spine-seg span{display:block;font-family:var(--f-mono);font-size:.71rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spine-seg span b{font-weight:500;color:var(--ai-ink)}
.spine-seg.on i{background:var(--ai)}
.spine-seg.on span{color:var(--ink)}
.spine-seg.all i{background:var(--ai-wash-2)}
/* Six segments across a phone leaves 58px each, which truncated every label
   to "1 DIS...". It scrolls instead, at a size worth reading. */
@media (max-width:640px){
  .spine{gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .spine::-webkit-scrollbar{display:none}
  .spine-seg{flex:0 0 106px}
  .spine-seg span{font-size:.67rem;overflow:visible;text-overflow:clip}
}

/* ========================= cards ========================= */
.card{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:clamp(20px,1.8vw,30px);overflow:hidden;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;display:flex;flex-direction:column;gap:.42rem;color:var(--ink-2);box-shadow:var(--shadow-1)}
.card:hover{transform:translateY(-3px);border-color:var(--hair-2);box-shadow:var(--shadow-2)}
.sec--lift .card{background:var(--paper)}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--ai-wash);color:var(--ai-ink);margin-bottom:.08rem;flex:none}
.card .ic svg{width:23px;height:23px}
.card h3{margin:0}
.card p{color:var(--ink-2);margin:0;font-size:.97rem}
.card .cap{color:var(--muted);font-size:.84rem}
.card .more{margin-top:auto;padding-top:.3rem;font-weight:700;color:var(--ai-ink);display:inline-flex;gap:.35rem;align-items:center;align-self:flex-start;min-height:44px}
.card .more svg{width:16px;height:16px}
a.card:hover{color:var(--ink-2)}
.stages .card{border-top:3px solid var(--ai)}
/* the six stages read as a progression, warm and blue-free:
   green to amber to the accent to ink, in the order the work happens */
.stages .card:nth-child(1){border-top-color:#96BE1A}
.stages .card:nth-child(2){border-top-color:#27742E}
.stages .card:nth-child(3){border-top-color:#F0B430}
.stages .card:nth-child(4){border-top-color:#D84626}
.stages .card:nth-child(5){border-top-color:#B03418}
.stages .card:nth-child(6){border-top-color:#191512}
.stages .card h3{font-family:var(--f-body);font-size:1.1rem}

/* ========================= split + lists ========================= */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3.5vw,72px);align-items:center}
.split--wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media (max-width:960px){.split,.split--wide{grid-template-columns:minmax(0,1fr)}.split .lede{max-width:none}}
.split>*,.split-visual,.wrap,.sec{min-width:0}
/* a heading in a half-width column needs a smaller size than a full-width one */
.split h2{font-size:clamp(1.75rem,2.45vw,2.5rem)}
.split--wide h2{font-size:clamp(1.7rem,2.2vw,2.25rem)}
.list{display:grid;gap:.55rem;margin-top:.9rem}
.list li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2);font-size:1rem}
.list li::before{content:"";flex:none;width:18px;height:18px;margin-top:.3rem;border-radius:50%;background:var(--ai-wash);box-shadow:inset 0 0 0 1.5px var(--ai)}
.list li b{color:var(--ink)}
.note{margin-top:1.2rem;padding:1rem 1.1rem;border-left:3px solid var(--ai);background:var(--ai-wash);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-2);font-size:.95rem}
.note b{color:var(--ink)}
.line{font-family:var(--f-head);font-weight:var(--head-w);font-size:1.55rem;font-style:italic;color:var(--ink);margin:1.3rem 0 .7rem;letter-spacing:var(--head-ls)}
.vendors{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vendors span+span::before{content:"\00B7";margin-right:.9rem;color:var(--hair-2)}

.seq{display:grid;gap:.5rem}
.seq li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;padding:.85rem 1rem;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--surface)}
.seq li .n{min-width:44px;height:34px;padding:0 .6rem;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--ai-wash);font-family:var(--f-mono);font-size:.72rem;color:var(--ai-ink);white-space:nowrap}
.seq li b{color:var(--ink);display:block}
.seq li span{display:block;color:var(--muted);font-size:.9rem}

.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,20px);margin:0}
.kpi div{padding:1rem 1.15rem;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--surface)}
.kpi dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kpi dd{margin:.25rem 0 0;font-family:var(--f-head);font-weight:var(--head-w);font-size:clamp(1.9rem,2.6vw,2.7rem);color:var(--ai-ink);line-height:1}
@media (max-width:900px){.kpi{grid-template-columns:1fr 1fr}}

.cover{margin-top:clamp(15px,1.6vw,25px);overflow-x:auto}
.cover table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.cover th,.cover td{padding:.75rem .8rem;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.cover thead th{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cover thead th.us{color:var(--ai-ink)}
.cover tbody th{font-weight:700;color:var(--ink)}
.cover td.y{color:var(--good);font-weight:700}
.cover td.n{color:var(--muted)}

/* industries */
.ind{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1vw,16px)}
@media (max-width:1100px){.ind{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ind{grid-template-columns:1fr 1fr}}
.ind a{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.18rem .6rem;padding:1rem;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--surface);color:var(--ink);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;min-height:102px;align-content:start;box-shadow:var(--shadow-1)}
.ind a:hover{border-color:var(--ai);transform:translateY(-2px);box-shadow:var(--shadow-2)}
/* Two of the seven sector names wrap at three columns. Reserving the second
   line for all of them keeps every description starting on the same line. */
.ind b{font-weight:700;font-size:1rem;line-height:1.25;display:block;min-height:2.5em}
.ind span{font-size:.84rem;color:var(--muted)}
.ind svg{width:22px;height:22px;color:var(--ai);grid-column:1;grid-row:1;margin-top:3px}
.ind b,.ind span{grid-column:2}

/* governance questions */
.quest{display:grid;gap:.5rem}
.quest li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;padding:.9rem 1.1rem;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--surface);font-size:1.04rem;color:var(--ink);font-weight:600}
.quest .n{font-family:var(--f-head);font-weight:var(--head-w);font-size:1.6rem;color:var(--ai);line-height:1;min-width:2.2rem}

/* the workshop agenda card */
.agenda{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--shadow-3);overflow:hidden}
.agenda-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.2rem;border-bottom:1px solid var(--hair);background:var(--band)}
.agenda-top b{color:var(--ink)}
.agenda-top .mono{font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.agenda ol{display:grid}
.agenda li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;padding:.72rem 1.2rem;border-bottom:1px solid var(--hair)}
.agenda li .n{font-family:var(--f-mono);font-size:.72rem;color:var(--ai-ink);width:28px}
.agenda li b{color:var(--ink);display:block;font-size:.95rem}
.agenda li span{display:block;color:var(--muted);font-size:.82rem}
.agenda-foot{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.2rem;background:var(--ai-wash)}
.agenda-foot .mono{font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.agenda-foot b{color:var(--ai-ink)}

/* ========================= the accent band (Score) ========================= */
.sec--ai{background:var(--ai-deep);color:#fff;border-block:1px solid var(--ai-deep)}
.sec--ai h2,.sec--ai .eyebrow{color:#fff}
.sec--ai .eyebrow::before{background:#fff}
.sec--ai .lede{color:#FFE8E0}
.score-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3vw,60px);align-items:center}
@media (max-width:960px){.score-band{grid-template-columns:minmax(0,1fr)}}
.q1{padding:clamp(18px,2vw,28px);border-radius:var(--r-lg);background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.3)}
.q1-text{font-weight:700;font-size:1.14rem;margin:0 0 .9rem;display:grid;gap:.25rem;color:#fff}
.q1-text .mono{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#FFD9CC}
.q1-opts{display:flex;flex-wrap:wrap;gap:.5rem}
.q1-opts a{display:inline-flex;align-items:center;min-height:46px;padding:.5rem 1.05rem;border-radius:var(--r-pill);border:1.5px solid #fff;color:#fff;font-weight:700;transition:background .2s,color .2s}
.q1-opts a:hover{background:#fff;color:var(--ai-deep)}
.q1-note{margin:.9rem 0 0;font-size:.86rem;color:#FFE8E0}
.sec--ai .slider-ctl button{border-color:#fff;color:#fff}

/* ========================= the night band (closing) ========================= */
.sec--close{background:var(--night);color:var(--night-ink);border-block:1px solid var(--night)}
.sec--close h2{color:#fff}
.sec--close .lede,.sec--close p{color:var(--night-muted)}
.sec--close .eyebrow{color:#FF9370}
.sec--close .eyebrow::before{background:#FF9370}
.sec--close .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sec--close .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.close-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(20px,3vw,60px);align-items:center}
@media (max-width:900px){.close-in{grid-template-columns:minmax(0,1fr)}}
.close-btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end;align-items:center}
.close-phone{color:var(--night-muted);font-size:.92rem;display:inline-flex;align-items:center;min-height:44px;padding:0 .4rem}
.close-phone:hover{color:#fff}
@media (max-width:900px){.close-btns{justify-content:flex-start}}

/* family band */
.family{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:clamp(10px,1vw,16px)}
@media (max-width:640px){.family{grid-template-columns:repeat(2,minmax(0,1fr))}}
.family a{display:grid;gap:.3rem;padding:1.05rem;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--surface);color:var(--ink);align-content:start;min-height:120px;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;box-shadow:var(--shadow-1)}
.family a:hover{border-color:var(--ai);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.family .k{color:var(--muted)}
.family b{font-size:1.04rem;line-height:1.25}
.family span:not(.k){font-size:.84rem;color:var(--muted)}

/* diagram */
.diagram{margin:0;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:clamp(14px,1.4vw,22px);box-shadow:var(--shadow-2)}
.diagram svg{width:100%;height:auto;display:block}
.diagram figcaption{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);margin-top:.8rem;letter-spacing:.04em}

/* faq */
.faq{display:grid;gap:.5rem}
@media (min-width:1100px){.faq{grid-template-columns:1fr 1fr;gap:.5rem 1.1rem;align-items:start}}
.faq details{border:1px solid var(--hair);border-radius:var(--r-md);background:var(--surface)}
.faq details[open]{border-color:var(--ai-wash-2);box-shadow:var(--shadow-1)}
.faq summary{list-style:none;cursor:pointer;padding:1rem 3rem 1rem 1.1rem;font-weight:700;font-size:1.04rem;color:var(--ink);position:relative;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:.8rem;font-size:1.5rem;color:var(--ai-ink);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq-a{padding:0 1.1rem 1.1rem}
.faq-a p{margin:0;color:var(--ink-2)}

/* ========================= footer ========================= */
/* Light, because the logo's navy facets disappear on near-black. The closing
   band above it is the page's single dark moment. */
.ftr{background:var(--band);color:var(--ink-2);border-top:1px solid var(--hair);padding:clamp(24px,2.2vw,38px) 0 calc(16px + env(safe-area-inset-bottom));overflow-x:clip}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr);gap:clamp(20px,2.5vw,44px)}
@media (max-width:900px){.ftr-top{grid-template-columns:minmax(0,1fr)}}
.ftr-brand img{height:46px;width:auto;margin-bottom:.7rem}
.ftr-brand p{color:var(--muted);font-size:.93rem;max-width:46ch;margin-bottom:.55rem}
.ftr-brand .strap{font-size:clamp(.64rem,2.9vw,.72rem);letter-spacing:.08em;text-transform:uppercase;color:var(--ai-ink);font-weight:600;white-space:nowrap;max-width:none;margin:0}
@media (max-width:380px){.ftr-brand .strap{letter-spacing:.04em}}
.ftr-contact{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin:0}
.ftr-contact a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.ftr-rows{display:grid;gap:.3rem;align-content:start}
.ft-row{display:grid;grid-template-columns:110px 1fr;gap:.4rem 1rem;align-items:start}
@media (max-width:640px){.ft-row{grid-template-columns:1fr}}
.ftr h2{font-family:var(--f-mono);font-size:.7rem;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--ai-ink);margin:.85rem 0 0;font-weight:500}
.ftr ul{display:flex;flex-wrap:wrap;gap:0 1.1rem;align-items:center}
.ftr li a{color:var(--ink-2);font-size:.92rem;display:inline-flex;align-items:center;padding:.3rem 0;min-height:44px;min-width:44px}
.ftr li a:hover{color:var(--ai-ink)}
.ftr-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.4rem;margin-top:clamp(14px,1.5vw,24px);padding-top:.8rem;border-top:1px solid var(--hair-2);font-size:.82rem;color:var(--muted);align-items:center}
.ftr-legal ul{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.ftr-legal a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.ftr-legal a:hover{color:var(--ink)}

/* ========================= sliders + chrome ========================= */
@media (max-width:640px){
  .is-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;padding-bottom:4px}
  .is-slider::-webkit-scrollbar{display:none}
  .is-slider>*{flex:0 0 84%;scroll-snap-align:start}
}
.slider-ctl{display:none;align-items:center;justify-content:center;gap:.6rem;margin-top:.9rem}
.slider-ctl button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--edge);background:var(--surface);color:var(--ink);display:grid;place-items:center}
.slider-ctl button svg{width:18px;height:18px}
.slider-ctl .dots{display:flex;gap:6px}
.slider-ctl .dots i{width:8px;height:8px;border-radius:50%;background:var(--hair-2)}
.slider-ctl .dots i.on{background:var(--ai)}
@media (max-width:640px){.slider-ctl{display:flex}}

.progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:100;background:var(--ai);pointer-events:none}
.rail{position:fixed;right:11px;top:50%;transform:translateY(-50%);z-index:45;display:none;flex-direction:column;gap:2px}
@media (min-width:1500px){.rail:not([hidden]){display:flex}}
.rail a{position:relative;width:44px;height:44px;display:grid;place-items:center}
.rail a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hair-2);border:1px solid var(--edge);transition:background .2s,transform .2s}
.rail a.on::before{background:var(--ai);border-color:var(--ai);transform:scale(1.35)}
.rail a span{position:absolute;right:41px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--surface);border:1px solid var(--hair-2);padding:.28rem .55rem;border-radius:6px;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:var(--shadow-1)}
.rail a:hover span,.rail a.on span{opacity:1}
.top{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:50;width:48px;height:48px;border-radius:50%;background:var(--ai-deep);border:1.5px solid var(--ai-deep);color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s;box-shadow:var(--shadow-2)}
.top.show{opacity:1;pointer-events:auto}
.top svg{width:20px;height:20px}

.rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.armed .rv:not(.in){opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .armed .rv:not(.in){opacity:1;transform:none}
}

/* ========================= chips, tags, family ========================= */
.sec-gap{margin-top:clamp(15px,1.6vw,25px)}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.tags span{font-size:.86rem;padding:.4rem .78rem;border-radius:var(--r-pill);border:1px solid var(--hair-2);color:var(--ink-2);background:var(--surface)}
.tick-wide .list{grid-template-columns:1fr 1fr;gap:.7rem 2rem}
@media (max-width:820px){.tick-wide .list{grid-template-columns:1fr}}
.fam{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.fam-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem;border-radius:var(--r-pill);border:1px solid var(--ai-wash-2);background:var(--ai-wash);color:var(--ink);min-height:44px;font-size:.86rem}
.fam-chip span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fam-chip b{font-weight:700}
.fam-chip:hover{border-color:var(--ai);color:var(--ink)}

/* hand-off to a sibling brand */
.sec--handoff{padding-block:0 clamp(14px,1.5vw,22px)}
.handoff{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.05rem 1.2rem;border:1px solid var(--ai-wash-2);border-radius:var(--r-md);background:var(--ai-wash)}
.handoff p{margin:0;color:var(--ink-2)}
@media (max-width:760px){.handoff{grid-template-columns:1fr}}

.hero-page-in{max-width:none}
/* A display heading and a lede each get a measure: a single 1300px line of
   65px type is a banner, not a sentence. */
.hero-page-in h1{max-width:26ch}
.hero-page-in .lede{max-width:78ch}
.head .lede{max-width:76ch}

/* the six-stage card in an industry sidebar */
.spine-card{padding:clamp(18px,2vw,28px);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--hair);box-shadow:var(--shadow-2)}
.spine-card .k{display:block;margin-bottom:.8rem}
.spine-card .list{margin-top:1.2rem}

/* the About statement */
.statement{text-align:left}
.statement h2{max-width:20ch}
.statement .lede,.statement .strap{max-width:56ch}
.statement h2{font-size:clamp(2rem,3.4vw,3.3rem)}
.statement .strap{color:var(--ai-ink);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-top:1rem;font-weight:600}

/* pointer spotlight, armed by script on pointer devices only */
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(216,70,38,.07),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:0}
.spot:hover::before{opacity:1}
.spot>:not(.ribbon){position:relative;z-index:1}

/* ========================= packages ========================= */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.2vw,22px);align-items:stretch}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:clamp(20px,1.9vw,30px);border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-1)}
.plan--hi{border-color:var(--ai);box-shadow:var(--shadow-2),0 0 0 1px var(--ai)}
.plan .k{color:var(--ai-ink)}
.plan h2{font-family:var(--f-head);font-weight:var(--head-w);font-size:clamp(1.55rem,2vw,2rem);line-height:1.1;letter-spacing:var(--head-ls);margin:0}
.plan .tag{color:var(--ink-2);font-size:1rem;margin:0}
.plan .price{margin:.2rem 0 0;display:grid;gap:.1rem}
.plan .price b{font-family:var(--f-head);font-weight:var(--head-w);font-size:1.45rem;color:var(--ink)}
.plan .price span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan ul{display:grid;gap:.42rem;margin:.35rem 0 .2rem;padding-top:.8rem;border-top:1px solid var(--hair)}
.plan li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2);font-size:.96rem}
.plan li svg{width:18px;height:18px;flex:none;margin-top:.2rem;color:var(--good)}
.plan .btn{margin-top:auto;width:100%}
.plan .fit{font-size:.85rem;color:var(--muted);margin:0}
.ribbon{position:absolute;top:-1px;right:24px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:var(--ai-deep);color:#fff;padding:.35rem .7rem;border-radius:0 0 8px 8px;font-weight:500}

/* ========================= forms ========================= */
.assess{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,3vw,60px);align-items:start}
@media (max-width:960px){.assess{grid-template-columns:minmax(0,1fr)}}
.form{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--shadow-3);overflow:hidden;position:relative}
.form-top{display:flex;align-items:center;gap:.6rem;padding:1rem 1.2rem;border-bottom:1px solid var(--hair);background:var(--band);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.form-body{padding:clamp(18px,2vw,28px)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.field{display:grid;gap:.3rem}
.field label,.field .label{font-size:.86rem;color:var(--ink);font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:16px;padding:.72rem .85rem;border-radius:var(--r-sm);border:1.5px solid var(--edge);background:var(--surface);color:var(--ink);min-height:48px;width:100%;font-family:var(--f-body)}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--ink)}
.field input.bad,.field textarea.bad,.field select.bad{border-color:var(--bad)}
.field--full{grid-column:1/-1}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.opts--2{grid-template-columns:1fr 1fr}
@media (max-width:640px){.opts,.opts--3{grid-template-columns:1fr 1fr}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:grid;gap:.2rem;padding:.8rem .9rem;border:1.5px solid var(--edge);border-radius:var(--r-md);min-height:56px;color:var(--ink);font-weight:600;font-size:.94rem;transition:border-color .2s,background .2s;align-content:center;background:var(--surface)}
.opt span small{font-weight:400;color:var(--muted);font-size:.8rem}
.opt input:checked+span{border-color:var(--ai);background:var(--ai-wash)}
.opt input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.form-nav{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--hair)}
.form-note{font-size:.82rem;color:var(--muted);margin:.8rem 0 0}
.form-note--warn{color:#8A2B08;font-weight:600}

/* notices */
.notice{padding:1.2rem 1.3rem;border-radius:var(--r-lg);border:1px solid var(--hair);background:var(--surface);margin-bottom:1rem;box-shadow:var(--shadow-1)}
.notice h2{font-family:var(--f-body);font-weight:700;font-size:1.2rem;line-height:1.25;letter-spacing:-.016em;margin-bottom:.3rem;color:var(--ink)}
.notice p{margin:0;color:var(--ink-2)}
.notice--ok{border-color:#BFD79A;background:#F0F6E6;text-align:center;padding:1.7rem 1.2rem}
.notice--ok .ok{width:64px;height:64px;border-radius:50%;background:#E1EFCB;border:1.5px solid var(--good);display:grid;place-items:center;margin:0 auto 1rem;color:var(--good)}
.notice--ok .ok svg{width:30px;height:30px}
.notice--bad{border-color:#E8B4B0;background:#FCEDEB}
.notice--bad h3{color:var(--bad)}

.contact-cards{display:grid;gap:.6rem;margin-top:1.4rem}
.contact-cards a,.contact-cards>div{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;padding:.9rem 1rem;border:1px solid var(--hair);border-radius:var(--r-md);color:var(--ink);background:var(--surface)}
.contact-cards a:hover{border-color:var(--ai);color:var(--ink)}
.contact-cards svg{width:22px;height:22px;color:var(--ai)}
.contact-cards b{display:block;font-weight:700}
.contact-cards span{display:block;color:var(--muted);font-size:.86rem}
.side-steps{margin-top:1.6rem}
.side-steps .eyebrow{margin-bottom:.4rem}
.flowv{display:grid;gap:0;margin-top:.6rem}
.flowv li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;padding:.6rem 0}
.flowv li+li{border-top:1px dashed var(--hair-2)}
.flowv .n{width:30px;height:30px;border-radius:50%;background:var(--ai-wash);border:1px solid var(--ai-wash-2);display:grid;place-items:center;font-family:var(--f-mono);font-size:.72rem;color:var(--ai-ink)}
.flowv b{color:var(--ink);font-weight:700;font-size:.98rem}
.flowv span{color:var(--muted);font-size:.86rem;display:block}

/* ========================= the AI Opportunity Score ========================= */
.score{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--shadow-3);overflow:hidden}
.score-top{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--hair);background:var(--band);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.score-bar{height:4px;background:var(--hair)}
.score-bar i{display:block;height:100%;width:0;background:var(--ai);transition:width .4s var(--ease)}
.score-intro,.score-q,.score-result{padding:clamp(20px,2.4vw,36px)}
.score-intro h2{font-size:clamp(1.8rem,2.8vw,2.6rem)}
.score-q .q-dim{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ai-ink);margin-bottom:.6rem}
.score-q .q-text{font-family:var(--f-body);font-weight:700;font-size:clamp(1.25rem,1.9vw,1.7rem);color:var(--ink);margin:0 0 .4rem;letter-spacing:-.015em}
.score-q .q-note{color:var(--muted);font-size:.86rem;margin:0 0 1rem}
.q-opts{display:grid;gap:.55rem;margin-top:.8rem}
.q-opt{display:flex;align-items:center;gap:.8rem;text-align:left;padding:.85rem 1rem;border:1.5px solid var(--edge);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-weight:600;font-size:1rem;min-height:56px;transition:border-color .2s,background .2s,transform .2s var(--ease);font-family:var(--f-body)}
.q-opt:hover{border-color:var(--ink);transform:translateX(3px)}
.q-opt[aria-pressed="true"]{border-color:var(--ai);background:var(--ai-wash)}
.q-opt i{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--edge);display:grid;place-items:center;font-family:var(--f-mono);font-size:.7rem;color:var(--muted);flex:none;font-style:normal}
.q-opt[aria-pressed="true"] i{background:var(--ai-deep);border-color:var(--ai-deep);color:#fff}
.q-nav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--hair)}
.score-num{display:flex;align-items:baseline;gap:.4rem;margin:.4rem 0 .2rem}
.score-num .num{font-family:var(--f-head);font-weight:var(--head-w);font-size:clamp(4.4rem,9vw,7.5rem);line-height:1;color:var(--ai);font-variant-numeric:tabular-nums;letter-spacing:var(--head-ls)}
.score-num span{font-family:var(--f-mono);font-size:1rem;color:var(--muted)}
.score-level{margin:0 0 .6rem;font-size:1.1rem;color:var(--ink-2)}
.score-level .mono{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:.5rem}
.score-level b{color:var(--ink);font-size:1.3rem}
.levels{display:flex;gap:6px;max-width:420px;margin:0 0 1rem}
.levels li{flex:1;height:8px;border-radius:4px;background:var(--hair-2)}
.levels li.on{background:var(--ai)}
.levels.lv-1 li.on,.levels.lv-2 li.on{background:var(--warn-fill)}
.levels.lv-3 li.on{background:var(--ai)}
.levels.lv-4 li.on,.levels.lv-5 li.on{background:var(--good-fill)}
.score-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,32px);margin-top:1.4rem}
@media (max-width:760px){.score-cols{grid-template-columns:1fr}}
.score-list{display:grid;gap:.6rem;counter-reset:sl}
.score-list li{counter-increment:sl;display:grid;gap:.25rem;padding:.95rem 1rem .95rem 3rem;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--paper);position:relative}
.score-list li::before{content:counter(sl,decimal-leading-zero);position:absolute;left:1rem;top:1rem;font-family:var(--f-head);font-weight:var(--head-w);font-size:1.4rem;color:var(--ai-ink);line-height:1}
.score-list--risk li::before{color:var(--warn)}
.score-list b{color:var(--ink)}
.score-list span{color:var(--ink-2);font-size:.92rem}
.score-list a{font-weight:700;font-size:.9rem;min-height:44px;display:inline-flex;align-items:center}
.score-next{margin-top:1.2rem;padding:1.15rem;border-radius:var(--r-lg);background:var(--ai-wash);border:1px solid var(--ai-wash-2)}
.score-next h3{margin-bottom:.2rem}
.score-next p{color:var(--ink-2);margin-bottom:.8rem}
.score-form{border-radius:0;border:0;border-top:1px solid var(--hair);box-shadow:none;background:var(--band)}
.levels-key{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:clamp(15px,1.6vw,25px)}
@media (max-width:1100px){.levels-key{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.levels-key{grid-template-columns:1fr}}
.levels-key div{padding:1rem;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--surface);display:grid;gap:.2rem;align-content:start}
.levels-key .mono{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ai-ink)}
.levels-key b{color:var(--ink)}
.levels-key p{margin:0;font-size:.86rem;color:var(--muted)}

/* ========================= long-form reading ========================= */
/* Insights and legal bodies sit on white so a 1,500-word page is easy on the
   eye; the rest of the site is bone. */
.sec--paper{background:var(--surface);border-block:1px solid var(--hair)}
.sec--paper :focus-visible{outline-color:var(--ink)}
.prose{font-size:1.07rem;line-height:1.72;color:var(--ink-2)}
.prose h2{font-size:clamp(1.5rem,2.2vw,2.1rem);margin:1.5em 0 .45em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.4em}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.4rem;display:grid;gap:.5rem}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li::marker{color:var(--ai)}
.prose li b{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:var(--r-md)}
.prose blockquote{margin:0 0 1.25em;padding:1rem 1.2rem;border-left:3px solid var(--ai);background:var(--ai-wash);border-radius:0 var(--r-md) var(--r-md) 0}
.prose--paper{color:var(--ink-2)}
.guide-date,.legal-updated{font-family:var(--f-mono);font-size:.76rem;color:var(--muted);margin-top:2rem}
@media (min-width:1300px){
  .wrap--article{display:grid;grid-template-columns:minmax(0,42rem) minmax(240px,21rem);gap:clamp(30px,4vw,76px);align-items:start}
  .wrap--article>.prose{max-width:none}
  .wrap--article .guide-cta{margin-top:0;position:sticky;top:104px;max-width:none}
}
.guide-cta{margin-top:clamp(20px,2vw,32px);padding:clamp(18px,1.8vw,28px);border-radius:var(--r-xl);background:var(--band);border:1px solid var(--hair);color:var(--ink-2)}
.guide-cta h3{color:var(--ink)}
.pager{margin-top:2rem;display:flex;justify-content:center;gap:.5rem}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .6rem;border:1px solid var(--edge);border-radius:var(--r-sm);color:var(--ink);background:var(--surface)}
.pager .page-numbers.current{background:var(--ai-deep);border-color:var(--ai-deep);color:#fff}

/* the "when to use this" row in a compare table */
.cover tr.when th,.cover tr.when td{background:var(--ai-wash);color:var(--ink)}

/* SVG draw-on-scroll, armed by fx.js */
[data-draw] .draw-arm{transition:stroke-dashoffset .9s var(--ease)}

@media print{
  .bebar,.hdr,.drawer,.rail,.top,.progress,.fx,.form,.score-form{display:none!important}
  body{background:#fff;color:#000}
  h1,h2,h3,h4,.card,.card p{color:#000}
  .sec{padding-block:14px}
  .sec--close,.sec--ai{background:#fff!important;color:#000!important}
  .sec--close h2,.sec--ai h2,.sec--close .lede,.sec--ai .lede{color:#000!important}
}