/* ==================================================================
   KanavuLab, shared stylesheet (home + service pages), 2026-10-11
   AI marketing agency and creative studio.

   Colour world is unchanged: midnight and antique gold. The accent
   is one metal in two twins and the GROUND decides which one:
     --copper       #D3AE6A  gold. Every string on a dark ground,
                    and graphic work on any ground.
     --copper-deep  #8E5D1B  the same metal deepened for light
                    grounds: 5.17:1 on paper, 5.63:1 on white.
   Gold measures 1.92:1 on paper, so it is never a letterform there.
   Token names are kept from the Build Log sheet so the blog pages
   and this sheet speak the same words.

   Type: Plus Jakarta Sans carries structure and display, set tight.
   Source Serif 4 italic is rationed to the measured-proof statement.
   JetBrains Mono is for data only: timestamps, statuses, counts.
   ================================================================== */
:root{
    --ink:#0D2444; --black:#0A1020;
    --copper:#D3AE6A; --copper-hover:#E5C68B; --copper-deep:#8E5D1B;
    --copper-soft:rgba(142,93,27,0.09);
    --green:#2D8A56; --green-ink:#1F6B42; --amber-ink:#8A5A12;
    --gray-900:#2A3444; --gray-700:#59606E; --gray-500:#878E9A;
    --gray-300:#E1E5EA; --gray-100:#F2F4F7;
    --white:#FFFFFF; --paper:#F7F5F2;
    --ink-950:#050D1A; --ink-900:#0A1526; --ink-800:#101E33; --ink-700:#182942;
    --footer:#03080F;
    --on-dark:#C4CEDD; --on-dark-dim:#8FA0B7; --on-dark-hi:#F1F5FA;
    --line-dark:rgba(214,196,160,0.14);
    --line-light:rgba(13,36,68,0.12);

    --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

    --maxw:1240px;
    --gutter:clamp(20px,4vw,40px);
    --r-panel:14px; --r-media:10px;
    /* emil-skills tables, not invented: strong ease-out for anything
       arriving, strong ease-in-out for anything moving across */
    --ease-out:cubic-bezier(.23,1,.32,1);
    --ease-in-out:cubic-bezier(.77,0,.175,1);
    --nav-h:68px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
    font-family:var(--sans);background:var(--ink-950);color:var(--gray-900);
    font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    overflow-x:clip;
}
body[data-lang="ta"]{font-family:'Noto Sans Tamil',var(--sans)}
body[data-lang="hi"]{font-family:'Noto Sans Devanagari',var(--sans)}
img,video,picture{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* browser surfaces belong to the palette too */
::selection{background:var(--copper);color:var(--ink-950)}
html{scrollbar-color:#3E5470 transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#3E5470;border-radius:99px;border:3px solid transparent;background-clip:content-box}
input,textarea{caret-color:var(--copper-deep)}

/* focus: the deep twin on light grounds (5.17:1), the bright twin on
   dark ones (11.85:1). Never removed. */
:focus-visible{outline:2px solid var(--copper-deep);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.nav :focus-visible,.sheet :focus-visible,.foot :focus-visible{outline-color:var(--copper-hover)}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--copper);color:var(--ink-950);
    font-weight:700;padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none;font-size:15px}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------------- layout ---------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
.band{position:relative;padding:clamp(88px,10vw,152px) 0}
.on-dark{background:var(--ink-950);color:var(--on-dark)}
/* a dark band is a surface with light landing on it: a warm sweep
   from the left, shade closing from the right. Value only, no glow. */
.on-dark.lit::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(90deg,rgba(214,196,160,.06),rgba(214,196,160,.015) 40%,rgba(214,196,160,0) 66%),
      linear-gradient(270deg,rgba(0,0,0,.30),rgba(0,0,0,.08) 38%,rgba(0,0,0,0) 66%)}
.on-dark > .wrap{position:relative}
.on-paper{background:var(--paper);color:var(--gray-900)}
/* the shaded end carries the swing, not a warm tint: an ink wash in
   the far corner keeps paper from screenshotting as a flat fill */
.on-paper::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 60% at 100% 100%,rgba(13,36,68,.07),rgba(13,36,68,0) 70%),
               radial-gradient(60% 50% at 0% 0%,rgba(211,174,106,.05),rgba(211,174,106,0) 70%)}
.on-paper > .wrap{position:relative}
.on-white{background:var(--white);color:var(--gray-900)}

/* ---------------- type ---------------- */
h1,h2,h3{text-wrap:balance;font-weight:600}
.h2{font-family:var(--sans);font-size:clamp(36px,5vw,68px);line-height:1.02;letter-spacing:-.032em;color:var(--ink);max-width:18ch}
.on-dark .h2{color:var(--on-dark-hi)}
.h2 .soft{color:var(--gray-700)}
.on-dark .h2 .soft{color:var(--on-dark-dim)}
.lede{margin-top:20px;max-width:58ch;font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:var(--gray-700)}
.on-dark .lede{color:var(--on-dark-dim)}
.data{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums}
body[data-lang="ta"] .h2,body[data-lang="hi"] .h2{font-family:inherit;font-size:clamp(28px,3.8vw,48px);line-height:1.28;letter-spacing:-.01em;max-width:22ch}

/* ---------------- buttons ----------------
   One primary per view. On dark grounds the metal is the fill
   (ink label 8.74:1); on light grounds the structure inverts: ink
   fill, paper label 14.26:1, gold kept as the hairline. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
    padding:13px 24px;border-radius:999px;font-size:15.5px;font-weight:600;letter-spacing:-.01em;
    text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;
    transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .2s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--copper);color:var(--ink-900)}
.btn--primary:hover{background:var(--copper-hover)}
.on-light .btn--primary,.on-paper .btn--primary,.on-white .btn--primary{
    background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(211,174,106,.55)}
.on-light .btn--primary:hover,.on-paper .btn--primary:hover,.on-white .btn--primary:hover{background:#17365E}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(13,36,68,.48)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(13,36,68,.05)}
.on-dark .btn--ghost{color:var(--on-dark-hi);border-color:rgba(214,196,160,.5)}
.on-dark .btn--ghost:hover{border-color:rgba(226,206,168,.85);background:rgba(214,196,160,.07)}
@media (hover:hover) and (pointer:fine){
    .btn:hover svg{transform:translateX(3px)}
}

.tlink{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:15px;font-weight:600;
    color:var(--copper-deep);text-decoration:none}
.on-dark .tlink{color:var(--copper)}
.tlink svg{width:15px;height:15px;transition:transform .2s var(--ease-out)}
.tlink:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.tlink:hover svg{transform:translateX(3px)}}

/* ---------------- nav ----------------
   Every surface the bar sits on is dark (the hero stills, then a
   dark glass once it sticks), so there is ONE ground state and one
   logo: the pale artwork, logo-dark.png. */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h);display:flex;align-items:center;
    border-bottom:1px solid transparent;
    transition:background-color .3s ease,border-color .3s ease}
.nav.is-stuck,.nav.is-sheet{background:rgba(5,13,26,.82);border-bottom-color:var(--line-dark);
    -webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px)}
.nav-in{display:flex;align-items:center;gap:22px;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:10px}
.nav-link{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;
    font-size:14.5px;font-weight:500;color:rgba(241,245,250,.78);text-decoration:none;
    transition:color .2s ease,background-color .2s ease}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav .btn{min-height:40px;padding:9px 18px;font-size:14.5px}
/* one primary per view: at rest the bar's CTA is an outline, so the hero's
   own gold button is the only filled control on the first screen */
.nav:not(.is-stuck):not(.is-sheet) .nav-right > .btn--primary{background:transparent;color:var(--on-dark-hi);box-shadow:inset 0 0 0 1px rgba(214,196,160,.55)}
.nav:not(.is-stuck):not(.is-sheet) .nav-right > .btn--primary:hover{background:rgba(214,196,160,.1)}
.langs{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.16)}
.lang-btn{min-height:32px;min-width:40px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:600;
    color:rgba(255,255,255,.66);transition:color .2s ease,background-color .2s ease}
.lang-btn:hover{color:#fff}
.lang-btn.active{background:rgba(255,255,255,.94);color:var(--ink-900)}
@media (pointer:coarse){.lang-btn{min-height:44px}}
.burger{display:none;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:1.6px;background:#F1F5FA;border-radius:2px;position:relative;
    transition:transform .2s var(--ease-out),opacity .15s ease}
.burger span::before,.burger span::after{content:'';position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:110;background:var(--ink-950);padding:calc(var(--nav-h) + 24px) var(--gutter) 40px;
    display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.sheet[hidden]{display:none}
.sheet-link{display:flex;justify-content:space-between;align-items:center;min-height:56px;font-size:22px;font-weight:600;
    letter-spacing:-.02em;color:var(--on-dark-hi);text-decoration:none;border-bottom:1px solid var(--line-dark)}
.sheet-link svg{width:18px;height:18px;color:var(--copper)}
.sheet .btn{margin-top:24px;align-self:flex-start}
.sheet-foot{margin-top:auto;padding-top:28px;font-size:14px;color:var(--on-dark-dim)}
.sheet-foot a{color:var(--on-dark)}
@media (max-width:1060px){
    .nav-links{display:none}
    .burger{display:inline-flex}
}
@media (max-width:560px){
    .nav-right > .btn{display:none}
    .brand img{height:24px}
    .nav-in{gap:10px}
    .lang-btn{min-width:38px;padding:4px 6px;font-size:11.5px}
}

/* ---------------- reveal ----------------
   Not one entrance for everything. Headings rise a short way; the
   few blocks that opt in pick their own verb in the page sheet. */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
    .rv{opacity:1;transform:none;transition:none}
}

/* ---------------- interface panels ----------------
   Code-built mini interfaces with sample data, not screenshots and
   not drawings. One elevation (shadow, no border-plus-shadow ghost),
   one radius. Real text, so they translate and stay sharp. */
.ui{position:relative;background:var(--white);border-radius:var(--r-panel);color:var(--gray-900);
    box-shadow:0 1px 0 rgba(13,36,68,.04),0 0 0 1px rgba(13,36,68,.07),0 24px 48px -24px rgba(13,36,68,.28);
    font-size:14.5px;line-height:1.5;overflow:hidden}
.ui-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--gray-300)}
.ui-title{font-weight:600;color:var(--ink);font-size:14px}
.ui-tag{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--gray-700);
    border:1px solid var(--gray-300);border-radius:999px;padding:2px 9px;white-space:nowrap}
.ui-body{padding:8px 18px 16px}
.ui-ico{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--gray-100);color:var(--ink)}
.ui-ico svg{width:15px;height:15px}
.ui-row{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--gray-100)}
.ui-row:last-child{border-bottom:0}
.ui-row-t{font-weight:600;color:var(--ink);font-size:14px;line-height:1.35}
.ui-row-m{font-size:12.5px;color:var(--gray-700)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap;
    padding:3px 9px;border-radius:999px;background:var(--gray-100);color:var(--gray-700)}
.st::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.st--live{background:rgba(45,138,86,.10);color:var(--green-ink)}
.st--wait{background:rgba(201,140,38,.12);color:var(--amber-ink)}
.st--sched{background:rgba(13,36,68,.06);color:var(--ink)}

/* AI assistant answer: generic, no product chrome, labelled */
.ai{padding:18px}
.ai-q{margin-left:auto;max-width:86%;width:fit-content;background:var(--gray-100);color:var(--ink);
    padding:10px 14px;border-radius:14px 14px 4px 14px;font-size:14px}
.ai-a{margin-top:14px;display:grid;grid-template-columns:28px 1fr;gap:12px}
.ai-a p{color:var(--gray-900);font-size:14.5px}
.ai-a mark{background:rgba(211,174,106,.28);color:var(--ink);font-weight:600;padding:0 3px;border-radius:3px}
.ai-src{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.ai-src span{font-size:12px;color:var(--gray-700);border:1px solid var(--gray-300);border-radius:999px;padding:2px 9px}
.serp{padding:16px 18px;border-top:1px solid var(--gray-300)}
.serp-url{font-size:12.5px;color:var(--gray-700)}
.serp-t{display:block;margin-top:3px;font-size:17px;font-weight:600;color:#1F3E8A;line-height:1.3}
.serp-d{margin-top:4px;font-size:13.5px;color:var(--gray-700)}

/* inbox thread with task-step states and a human approval */
.steps-ui{list-style:none;padding:6px 18px 14px}
.stp{display:grid;grid-template-columns:20px 1fr auto;gap:12px;padding:10px 0;align-items:start}
.stp-k{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;margin-top:1px;
    background:rgba(45,138,86,.12);color:var(--green-ink)}
.stp-k svg{width:12px;height:12px}
.stp--now .stp-k{background:var(--ink);color:#fff}
.stp-t{font-weight:600;color:var(--ink);font-size:14px;line-height:1.4}
.stp-m{display:block;font-size:12.5px;color:var(--gray-700);font-weight:400;margin-top:2px}
.stp-time{font-family:var(--mono);font-size:11.5px;color:var(--gray-700);padding-top:2px}
.draft{display:block;margin:8px 0 2px;font-weight:400;padding:12px 14px;border-radius:10px;background:var(--gray-100);font-size:13.5px;color:var(--gray-900)}
.approve{display:flex;font-weight:400;align-items:center;gap:10px;margin-top:10px;font-size:12.5px;color:var(--gray-700)}
.approve b{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600}
.cal{display:flex;width:fit-content;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;border-radius:10px;
    border:1px solid var(--gray-300);font-size:13px;color:var(--ink);font-weight:600}
.cal svg{width:15px;height:15px;color:var(--copper-deep)}

/* weekly review */
.review{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.rev-col{padding:16px 18px;border-right:1px solid var(--gray-100)}
.rev-col:last-child{border-right:0}
.rev-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--gray-700);margin-bottom:10px}
.rev-h i{width:8px;height:8px;border-radius:2px;background:var(--gray-500)}
.rev-col--keep .rev-h i{background:var(--green)}
.rev-col--next .rev-h i{background:var(--copper)}
.rev-item{font-size:13.5px;line-height:1.4;padding:8px 0;border-top:1px solid var(--gray-100)}
.rev-item b{display:block;color:var(--ink);font-weight:600}
.rev-item span{display:block;color:var(--gray-700);font-size:12.5px;margin-top:2px}
@media (max-width:560px){
    .review{grid-template-columns:1fr}
    .rev-col{border-right:0;border-bottom:1px solid var(--gray-100)}
}
.ui-cap{margin-top:14px;font-size:13px;color:var(--gray-700)}
.on-dark .ui-cap{color:var(--on-dark-dim)}

/* ---------------- FAQ (details, works with no script) ---------------- */
.faqs{margin-top:44px;border-top:1px solid var(--line-light);max-width:860px}
.faq{border-bottom:1px solid var(--line-light)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
    min-height:64px;padding:18px 0;cursor:pointer;font-size:clamp(17px,1.5vw,20px);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq-x{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(13,36,68,.25);color:var(--ink)}
.faq-x svg{width:14px;height:14px;transition:transform .2s var(--ease-out)}
.faq[open] .faq-x svg{transform:rotate(45deg)}
.faq-a{padding:0 0 24px;max-width:70ch;color:var(--gray-700)}
.faq-a a{color:var(--copper-deep);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:#17365E}}

/* ---------------- CTA band ---------------- */
.cta-title{font-size:clamp(44px,7vw,104px);line-height:.98;letter-spacing:-.04em;color:var(--on-dark-hi);font-weight:600;max-width:14ch}
body[data-lang="ta"] .cta-title,body[data-lang="hi"] .cta-title{font-size:clamp(32px,5vw,64px);line-height:1.25;letter-spacing:0}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.cta-direct{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;font-size:14.5px;color:var(--on-dark-dim)}
.cta-direct a{color:var(--on-dark);text-underline-offset:3px}

/* ---------------- footer ---------------- */
.foot{background:var(--footer);color:var(--on-dark-dim);padding:72px 0 34px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
.foot-brand img{height:28px;width:auto}
.foot-tag{margin-top:16px;max-width:36ch;line-height:1.6}
.foot-h{font-size:13px;font-weight:600;color:var(--on-dark-hi);margin-bottom:12px}
.foot-list{list-style:none;display:grid;gap:4px}
.foot-list a{display:inline-flex;min-height:32px;align-items:center;color:var(--on-dark-dim);text-decoration:none}
.foot-list a:hover{color:var(--on-dark-hi);text-decoration:underline;text-underline-offset:3px}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:13px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---------------- service pages ---------------- */
.page-hero{position:relative;padding:calc(var(--nav-h) + clamp(36px,5vw,72px)) 0 clamp(64px,8vw,112px);overflow:hidden}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--on-dark-dim)}
.crumbs li+li::before{content:'/';margin-right:8px;color:rgba(143,160,183,.6)}
.crumbs a{color:var(--on-dark);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:32px}
.ph-h{font-size:clamp(38px,4.4vw,62px);line-height:1.02;letter-spacing:-.034em;color:var(--on-dark-hi);font-weight:600;max-width:17ch}
.ph-sub{margin-top:22px;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--on-dark-dim);max-width:46ch}
.ph-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ph-media{position:relative;border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/10;background:var(--ink-800);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.ph-media picture{display:block;width:100%;height:100%}
.ph-media img{width:100%;height:100%;object-fit:cover}
.ph-media--film{aspect-ratio:auto;overflow:visible;background:none;border-radius:0;box-shadow:none}
.ph-media video{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;background:#000;border-radius:var(--r-media)}
.ph-media.ph-media--film figcaption{position:static;margin-top:12px;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--on-dark-mid,rgba(241,245,250,.62));font-size:13px}
.ph-media figcaption{position:absolute;left:14px;bottom:12px;font-size:12.5px;color:#E9EEF5;
    background:rgba(5,13,26,.62);padding:4px 10px;border-radius:999px}
.ph-panel{max-width:520px;justify-self:end;width:100%}
@media (max-width:900px){
    .ph-grid{grid-template-columns:1fr}
    .ph-panel{justify-self:start}
}

.sec-h{font-size:clamp(30px,3.8vw,50px);line-height:1.06;letter-spacing:-.03em;color:var(--ink);font-weight:600;max-width:20ch}
.on-dark .sec-h{color:var(--on-dark-hi)}
.prose{max-width:68ch;margin-top:20px;color:var(--gray-700)}
.prose p+p{margin-top:16px}
.prose a{color:var(--copper-deep);text-underline-offset:3px}
.on-dark .prose{color:var(--on-dark-dim)}
.on-dark .prose a{color:var(--copper)}

/* what you get: a ruled two-column list, printed not panelled */
.gets{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:40px;border-top:1px solid var(--line-light)}
.gets li{padding:20px 0;border-bottom:1px solid var(--line-light)}
.gets b{display:block;color:var(--ink);font-size:17px;font-weight:600;letter-spacing:-.01em}
.gets span{display:block;margin-top:4px;color:var(--gray-700);font-size:15.5px}
@media (max-width:760px){.gets{grid-template-columns:1fr}}

/* how it works: a numbered rail, the sequence is the information */
.how{list-style:none;counter-reset:how;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px}
.how li{counter-increment:how;position:relative;padding-top:52px}
.how li::before{content:counter(how,decimal-leading-zero);position:absolute;top:0;left:0;font-family:var(--mono);font-size:12px;color:var(--copper-deep);
    padding-bottom:12px;width:100%;border-bottom:1px solid var(--line-light)}
.on-dark .how li::before{color:var(--copper);border-bottom-color:var(--line-dark)}
.how b{display:block;color:var(--ink);font-size:18px;font-weight:600;letter-spacing:-.01em}
.on-dark .how b{color:var(--on-dark-hi)}
.how span{display:block;margin-top:6px;font-size:15px;color:var(--gray-700)}
.on-dark .how span{color:var(--on-dark-dim)}
@media (max-width:900px){.how{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.how{grid-template-columns:1fr}}

/* for / not for */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.fit-col{padding:28px;border-radius:var(--r-panel);background:var(--white);box-shadow:0 0 0 1px rgba(13,36,68,.08)}
.fit-col h3{font-size:18px;color:var(--ink);letter-spacing:-.01em}
.fit-col ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.fit-col li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--gray-700);font-size:15.5px}
.fit-col li svg{width:16px;height:16px;margin-top:4px}
.fit-col--yes li svg{color:var(--green)}
.fit-col--no li svg{color:var(--gray-500)}
@media (max-width:760px){.fit{grid-template-columns:1fr}}

.callout{margin-top:40px;padding:28px 30px;border-radius:var(--r-panel);background:var(--ink-900);color:var(--on-dark)}
.callout p{max-width:64ch}
.callout b{color:var(--on-dark-hi)}
.callout .data{color:var(--copper)}

.related{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;margin-top:32px;border-top:1px solid var(--line-light)}
.related a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;padding:16px 0;
    border-bottom:1px solid var(--line-light);color:var(--ink);font-weight:600;text-decoration:none}
.related a svg{width:16px;height:16px;color:var(--copper-deep);flex:none;transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.related a:hover svg{transform:translateX(3px)}}
@media (max-width:900px){.related{grid-template-columns:1fr}}

/* touch targets: small text links grow to 44px where a thumb is the pointer */
@media (pointer:coarse){
    .foot-list a,.cta-direct a,.crumbs a,.sheet-foot a{display:inline-flex;align-items:center;min-height:44px}
    .rail-btn{min-height:44px}
}

/* ==================================================================
   kit: shared visuals for the service pages (2026-10-11)
   One working visual per section, built from inline SVG, CSS and
   vanilla JS (assets/site.js, same "kit:" headings). Designs are
   translated from 21st.dev components, never shipped as React:
   919 animated beam, 952 + 19203 sticky scroll reveal with a
   progress rail, 23593 streaming answer with inline citation,
   21217 two-sided comparison.

   Contract, read before reusing on another page:
   1. The page head sets the js class before anything paints:
      <script>document.documentElement.className+=' js';</script>
   2. A visual root carries data-kit="beam|versus|tally|sides|scrolly".
      site.js adds .is-play once it is 30 percent in view.
   3. Hidden states exist ONLY under html.js and only before .is-play
      (or .is-on for scroll scenes), so no-JS and reduced motion both
      render the finished picture.
   4. Motion is transform, opacity and clip-path (SVG linework may
      draw its stroke). Curves are the --ease tokens; entrances
      300-500ms, staggers 30-60ms, exits faster than entrances
      (emil-skills tables).
   5. Sample data is captioned "Illustration with sample data"; real
      data is captioned with its date range.
   ================================================================== */

/* kit: base type and chips */
.kit-mono{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.kit-cap{margin-top:14px;font-size:13px;line-height:1.5;color:var(--gray-700)}
.on-dark .kit-cap{color:var(--on-dark-dim)}
.kit-lede{margin-top:20px;max-width:50ch;font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--gray-700)}
.kit-lede + .kit-lede{margin-top:12px}
.on-dark .kit-lede{color:var(--on-dark-dim)}
.kit-proof{margin-top:36px;padding-top:24px;border-top:1px solid var(--line-light);font-family:var(--serif);font-style:italic;
    font-size:clamp(21px,1.9vw,26px);line-height:1.38;color:var(--ink);max-width:30ch}
.on-dark .kit-proof{color:var(--on-dark-hi);border-top-color:var(--line-dark)}
.kit-note{margin-top:10px;font-size:14px;color:var(--gray-700)}
.on-dark .kit-note{color:var(--on-dark-dim)}
.kit-chip{display:inline-flex;align-items:center;gap:5px;width:fit-content;font-size:12px;font-weight:600;line-height:1.4;padding:3px 10px;
    border-radius:999px;white-space:nowrap;background:var(--gray-100);color:var(--gray-700)}
.kit-chip svg{width:12px;height:12px;flex:none}
.kit-chip--named{background:rgba(45,138,86,.12);color:var(--green-ink)}
.kit-chip--gold{background:rgba(211,174,106,.22);color:var(--copper-deep)}
.on-dark .kit-chip{background:rgba(241,245,250,.07);color:var(--on-dark)}
.on-dark .kit-chip--named{background:rgba(45,138,86,.22);color:#9FDDB9}
.kit-head{max-width:760px}

/* kit: entrance verbs. Delay = --t (group start) + --k (index) x 40ms */
@keyframes kit-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kit-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes kit-fade{from{opacity:0}to{opacity:1}}
@keyframes kit-word{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
@keyframes kit-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes kit-draw-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes kit-draw-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes kit-from-r{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes kit-from-l{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
html.js [data-kit]:not(.is-play) :is(.kit-in,.kit-pop,.kit-fade){opacity:0}
html.js [data-kit].is-play .kit-in{animation:kit-rise .5s var(--ease-out) both;animation-delay:calc(var(--t,0ms) + var(--k,0) * 40ms)}
html.js [data-kit].is-play .kit-pop{animation:kit-pop .3s var(--ease-out) both;animation-delay:calc(var(--t,0ms) + var(--k,0) * 40ms)}
html.js [data-kit].is-play .kit-fade{animation:kit-fade .4s ease both;animation-delay:calc(var(--t,0ms) + var(--k,0) * 40ms)}

/* kit: beam. One question fans out to the assistants and converges on
   the brand. Paths are measured from the nodes by site.js, so the same
   markup draws left-to-right on desktop and top-down on a phone. */
.kit-beam{--leg1:700ms;--leg2:1650ms;--travel:900ms}
@media (min-width:901px){.ph-grid:has(> .kit-beam){grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}}
.ph-panel.kit-beam{max-width:640px}
.kit-beam-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr) minmax(0,1fr);
    align-items:center;gap:clamp(24px,3.8vw,56px);min-height:400px}
.kit-beam-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.kit-beam-base{fill:none;stroke:rgba(214,196,160,.26);stroke-width:1.5}
.kit-beam-pulse{fill:none;stroke:var(--copper-hover);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:16 200;stroke-dashoffset:16;opacity:0}
.kit-node{position:relative;z-index:1;border-radius:12px;background:#0B172A;color:var(--on-dark);
    box-shadow:inset 0 0 0 1px var(--line-dark),0 18px 36px -22px rgba(0,0,0,.85)}
.kit-node--q{display:grid;gap:10px;padding:20px 20px 22px}
.kit-node--q svg{width:18px;height:18px;color:var(--copper)}
.kit-node--q b{font-size:clamp(16px,1.35vw,19px);line-height:1.35;font-weight:600;letter-spacing:-.01em;color:var(--on-dark-hi)}
.kit-beam-eng{list-style:none;display:grid;gap:16px}
.kit-beam-eng .kit-node{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;font-size:15px;font-weight:600}
.kit-node-dot{width:8px;height:8px;flex:none;border-radius:50%;background-color:var(--copper);box-shadow:inset 0 0 0 1.5px rgba(196,206,221,.4)}
@keyframes kit-lit{from{background-color:rgba(211,174,106,0)}to{background-color:var(--copper)}}
.kit-node--brand{display:grid;gap:12px;justify-items:start;padding:22px 20px}
.kit-node--brand b{font-size:clamp(19px,1.6vw,23px);line-height:1.15;letter-spacing:-.022em;font-weight:600;color:var(--on-dark-hi)}
.kit-node--brand .kit-mono{color:var(--on-dark-dim)}
.kit-node-ring{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--copper);pointer-events:none}
html.js .kit-beam:not(.is-play) .kit-node-ring{opacity:0}
html.js .kit-beam:not(.is-play) .kit-node-dot{background-color:rgba(211,174,106,0)}
/* a colour change on an 8px dot: state indication, ease, paint only */
html.js .kit-beam.is-play .kit-node-dot{animation:kit-lit .25s ease both;animation-delay:calc(var(--leg1) + var(--travel) + var(--k,0) * 50ms)}
html.js .kit-beam.is-play .kit-node-ring{animation:kit-fade .3s ease both;animation-delay:calc(var(--leg2) + var(--travel) + 150ms)}
html.js .kit-beam.is-play .kit-node--brand .kit-pop{animation-delay:calc(var(--leg2) + var(--travel) + 200ms)}
html.js .kit-beam.is-play .kit-beam-pulse{animation:kit-pulse 5625ms infinite;animation-delay:calc(var(--t,0ms) + var(--k,0) * 50ms)}
html.js .kit-beam.is-play .kit-beam-pulse[data-leg="1"]{--t:var(--leg1)}
html.js .kit-beam.is-play .kit-beam-pulse[data-leg="2"]{--t:var(--leg2)}
html.js .kit-beam.is-off .kit-beam-pulse{animation-play-state:paused}
/* 16 percent of 5625ms is the 900ms travel; the rest of the cycle is rest */
@keyframes kit-pulse{
    0%{stroke-dashoffset:16;opacity:1;animation-timing-function:cubic-bezier(.77,0,.175,1)}
    16%{stroke-dashoffset:-100;opacity:1;animation-timing-function:linear}
    16.01%,100%{stroke-dashoffset:-100;opacity:0}
}
@media (max-width:600px){
    .kit-beam-grid{grid-template-columns:1fr;gap:44px;min-height:0}
    .kit-node--q{justify-self:center;max-width:300px;text-align:center}
    .kit-beam-eng{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
    .kit-beam-eng .kit-node{justify-content:center;padding:9px 4px;font-size:12px;gap:0}
    .kit-beam-eng .kit-node-dot{display:none}
    .kit-node--brand{justify-self:center;justify-items:center;min-width:200px}
}

/* kit: versus. A results page and an answer, side by side: the unit of
   the work changes from a keyword and a position to a question and a
   mention. The answer streams in word by word (21st.dev 23593). */
.kit-versus{margin-top:clamp(36px,5vw,56px)}
.kit-versus-grid{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);align-items:stretch}
.kit-vs-panel{display:flex;flex-direction:column}
.kit-vs-query{display:flex;align-items:center;gap:10px;margin:16px 18px 4px;padding:10px 16px;border-radius:999px;
    box-shadow:inset 0 0 0 1px var(--gray-300);font-size:14.5px;color:var(--ink)}
.kit-vs-query svg{width:15px;height:15px;color:var(--gray-700);flex:none}
.kit-serp{list-style:none;padding:6px 18px 12px;flex:1}
.kit-serp li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--gray-100)}
.kit-serp li:last-child{border-bottom:0}
.kit-pos{font-family:var(--mono);font-size:12px;color:var(--gray-700);text-align:center;font-variant-numeric:tabular-nums}
.kit-bars{display:grid;gap:7px}
.kit-bars i{display:block;height:7px;border-radius:4px;background:#D9DEE5;width:var(--w,70%)}
.kit-bars i:first-child{height:6px;background:#E9EDF1;width:var(--u,34%)}
.kit-serp-hit{z-index:0}
.kit-serp-hit::before{content:'';position:absolute;inset:2px -10px;z-index:-1;border-radius:8px;background:rgba(211,174,106,.17);box-shadow:inset 0 0 0 1px rgba(142,93,27,.3)}
.kit-serp-t{min-width:0}
.kit-serp-t small{display:block;font-size:12px;color:var(--gray-700)}
.kit-serp-t b{display:block;margin-top:1px;font-size:15px;line-height:1.3;font-weight:600;color:#1F3E8A}
.kit-vs-unit{margin-top:auto;padding:13px 18px;border-top:1px solid var(--gray-300);background:#FAFAF8;font-size:14px;font-weight:600;color:var(--ink)}
.kit-vs-unit span{color:var(--copper-deep)}
.kit-vs-axis{position:relative;display:grid;place-items:center}
.kit-vs-line{position:absolute;top:28px;bottom:28px;left:50%;width:1px;margin-left:-.5px;
    background:linear-gradient(rgba(13,36,68,0),rgba(13,36,68,.28) 18%,rgba(13,36,68,.28) 82%,rgba(13,36,68,0))}
.kit-vs-badge{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--paper);
    font-size:13px;font-weight:600;letter-spacing:.02em;box-shadow:0 0 0 6px var(--paper)}
.kit-vs-chat{flex:1;display:grid;align-content:center;gap:18px;padding:22px 20px}
.kit-vs-q{justify-self:end;max-width:88%;padding:10px 14px;border-radius:14px 14px 4px 14px;background:var(--gray-100);color:var(--ink);font-size:14.5px;line-height:1.45}
.kit-vs-a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px}
.kit-vs-a p{font-size:15.5px;line-height:1.65;color:var(--gray-900)}
.kit-vs-a mark{position:relative;z-index:0;background:none;color:var(--ink);font-weight:600;padding:0 3px}
.kit-vs-a mark::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:3px;background:rgba(211,174,106,.34)}
.kit-vs-more{display:grid;gap:9px;margin-top:14px}
.kit-vs-more i{display:block;height:7px;border-radius:4px;background:#E3E7EC;width:var(--w,100%)}
.kit-vs-srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.kit-vs-srcs > i{display:block;width:64px;height:24px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--gray-300);background:linear-gradient(#E3E7EC,#E3E7EC) 50% 50% / 58% 6px no-repeat}
.kit-src{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--gray-300);
    font-family:var(--mono);font-size:11.5px;color:var(--gray-700)}
.kit-src svg{width:11px;height:11px;flex:none}
html.js .kit-versus:not(.is-play) .kit-w{opacity:0}
html.js .kit-versus:not(.is-play) .kit-serp-hit::before,html.js .kit-versus:not(.is-play) .kit-vs-a mark::before{clip-path:inset(0 100% 0 0)}
html.js .kit-versus:not(.is-play) .kit-vs-line{transform:scaleY(0)}
html.js .kit-versus.is-play .kit-w{animation:kit-word .25s var(--ease-out) both;animation-delay:calc(var(--t,0ms) + var(--k,0) * 45ms)}
html.js .kit-versus.is-play .kit-serp-hit::before{animation:kit-wipe .5s var(--ease-in-out) both;animation-delay:500ms}
html.js .kit-versus.is-play .kit-vs-a mark::before{animation:kit-wipe .4s var(--ease-in-out) both;animation-delay:calc(var(--t,0ms) + var(--k,0) * 45ms + 120ms)}
html.js .kit-versus.is-play .kit-vs-line{animation:kit-draw-y .6s var(--ease-in-out) both;animation-delay:200ms}
@media (max-width:760px){
    .kit-versus-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 76px auto}
    .kit-vs-line{top:50%;bottom:auto;left:28px;right:28px;width:auto;height:1px;margin:-.5px 0 0;
        background:linear-gradient(90deg,rgba(13,36,68,0),rgba(13,36,68,.28) 18%,rgba(13,36,68,.28) 82%,rgba(13,36,68,0))}
    html.js .kit-versus:not(.is-play) .kit-vs-line{transform:scaleX(0)}
    html.js .kit-versus.is-play .kit-vs-line{animation-name:kit-draw-x}
}

/* kit: tally. Real answers as dots, one dot per logged answer. Shape,
   not only colour, carries the state: solid is named, a ring with a
   pip is "listed as a source, not named", a plain ring is not named. */
.kit-duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,80px);align-items:center}
@media (max-width:960px){.kit-duo{grid-template-columns:minmax(0,1fr)}}
.kit-tally-card{border-radius:var(--r-panel);padding:clamp(20px,2.6vw,32px);background:var(--white);
    box-shadow:0 0 0 1px rgba(13,36,68,.07),0 30px 60px -38px rgba(13,36,68,.4)}
.on-dark .kit-tally-card{background:linear-gradient(180deg,#0C1A2E,#0A1526 60%);box-shadow:inset 0 0 0 1px var(--line-dark),0 40px 80px -44px rgba(0,0,0,.85)}
.kit-tally-k{color:var(--copper-deep)}
.on-dark .kit-tally-k{color:var(--copper)}
.kit-tally-q{margin-top:10px;font-size:clamp(18px,1.6vw,21px);line-height:1.38;font-weight:600;letter-spacing:-.012em;color:var(--ink);max-width:36ch}
.on-dark .kit-tally-q{color:var(--on-dark-hi)}
.kit-tally-rows{margin-top:22px;border-top:1px solid var(--line-light)}
.on-dark .kit-tally-rows{border-top-color:var(--line-dark)}
.kit-tally-row{display:grid;grid-template-columns:92px minmax(0,1fr) 128px;gap:10px 18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-light)}
.on-dark .kit-tally-row{border-bottom-color:var(--line-dark)}
.kit-tally-row > b{font-size:15px;font-weight:600;color:var(--ink)}
.on-dark .kit-tally-row > b{color:var(--on-dark-hi)}
.kit-tally-row > .kit-chip{justify-self:end}
.kit-dots{display:flex;flex-wrap:wrap;gap:6px}
.kit-dots i,.kit-key i{display:block;width:11px;height:11px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--gray-500)}
.kit-dots i.n,.kit-key i.n{background:var(--copper-deep);box-shadow:none}
.kit-dots i.c,.kit-key i.c{box-shadow:inset 0 0 0 1.5px var(--copper-deep);background:radial-gradient(circle,var(--copper-deep) 0 2px,transparent 2.6px)}
.on-dark .kit-dots i,.on-dark .kit-key i{box-shadow:inset 0 0 0 1.5px rgba(196,206,221,.42)}
.on-dark .kit-dots i.n,.on-dark .kit-key i.n{background:var(--copper);box-shadow:none}
.on-dark .kit-dots i.c,.on-dark .kit-key i.c{box-shadow:inset 0 0 0 1.5px var(--copper);background:radial-gradient(circle,var(--copper) 0 2px,transparent 2.6px)}
.kit-tally-sub{grid-column:2 / -1;display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.45;color:var(--gray-700)}
.on-dark .kit-tally-sub{color:var(--on-dark-dim)}
.kit-tally-wait{grid-column:2 / -1;font-family:var(--mono);font-size:12px;color:var(--gray-700)}
.on-dark .kit-tally-wait{color:var(--on-dark-dim)}
.kit-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:12.5px;color:var(--gray-700)}
.kit-key span{display:inline-flex;align-items:center;gap:8px}
.on-dark .kit-key{color:var(--on-dark-dim)}
html.js .kit-tally:not(.is-play) :is(.kit-dots i,.kit-tally-row > .kit-chip,.kit-tally-sub,.kit-tally-wait){opacity:0}
html.js .kit-tally.is-play .kit-dots i{animation:kit-pop .3s var(--ease-out) both;animation-delay:calc(var(--t,0ms) + var(--k,0) * 30ms)}
html.js .kit-tally.is-play :is(.kit-tally-row > .kit-chip,.kit-tally-sub,.kit-tally-wait){animation:kit-pop .3s var(--ease-out) both;animation-delay:calc(var(--t,0ms) + var(--n,0) * 30ms + 120ms)}
@media (max-width:560px){
    .kit-tally-row{grid-template-columns:76px minmax(0,1fr);gap:10px 14px}
    .kit-tally-row > .kit-chip{grid-column:2;justify-self:start}
    .kit-tally-sub,.kit-tally-wait{grid-column:2}
}

/* kit: scrolly. Steps scroll past a sticky stage whose scene changes
   with the step under the middle of the screen (21st.dev 952), with a
   progress rail bound 1:1 to scroll (21st.dev 19203). The DOM order is
   step, scene, step, scene, so phones and no-JS read it in sequence;
   only html.js at 900px+ with motion allowed stacks the scenes. */
.kit-scrolly{--n:4;position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,6vw,96px);margin-top:clamp(40px,5vw,64px)}
.kit-step{grid-column:1;grid-row:var(--r);position:relative;padding-left:60px;align-self:start}
.kit-scene{grid-column:2;grid-row:var(--r);margin:0}
.kit-rail{grid-column:1;grid-row:1 / span var(--n);position:relative;justify-self:start;width:2px;margin-left:17px;background:var(--gray-300);border-radius:2px}
.kit-rail-fill{position:absolute;inset:0;border-radius:2px;background:var(--copper-deep);transform-origin:50% 0;transform:scaleY(0)}
.kit-step-n{position:absolute;left:0;top:-4px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
    background:var(--white);box-shadow:inset 0 0 0 1.5px var(--gray-300);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--gray-700);
    transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.kit-step h3{font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.kit-step p{margin-top:10px;max-width:40ch;font-size:16.5px;line-height:1.6;color:var(--gray-700)}
.kit-step p a{color:var(--copper-deep);text-underline-offset:3px}
.kit-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kit-tags li{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink);
    box-shadow:inset 0 0 0 1px rgba(13,36,68,.18)}
.kit-tags svg{width:12px;height:12px;color:var(--green)}
.kit-stage{position:relative;display:grid;place-items:center;min-height:360px;padding:clamp(20px,3vw,36px);border-radius:var(--r-panel);
    background:var(--paper);box-shadow:inset 0 0 0 1px rgba(13,36,68,.06);overflow:hidden}
.kit-stage::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 60% at 100% 100%,rgba(13,36,68,.06),rgba(13,36,68,0) 70%),radial-gradient(60% 50% at 0% 0%,rgba(211,174,106,.08),rgba(211,174,106,0) 70%)}
.kit-stage > *{position:relative}
.kit-stage > .kit-stage-tag{position:absolute;top:14px;right:14px;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.7);
    box-shadow:inset 0 0 0 1px rgba(13,36,68,.14);color:var(--gray-700);font-size:11px}
/* scene parts: hidden only while their scene is off; exits are quick */
.kit-s{transition:opacity .18s ease,transform .18s ease}
html.js .kit-scene:not(.is-on) .kit-s{opacity:0;transform:translateY(8px)}
html.js .kit-scene:not(.is-on) .kit-s--pop{transform:scale(.94)}
html.js .kit-scene.is-on .kit-s{transition:opacity .4s var(--ease-out),transform .5s var(--ease-out);transition-delay:calc(160ms + var(--t,0ms) + var(--k,0) * 50ms)}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
    /* about a third of a screen per step, so the step before and the
       step after stay in view around the active one */
    html.js .kit-scrolly .kit-step{min-height:36vh;padding-bottom:40px}
    html.js .kit-scrolly .kit-step:last-of-type{min-height:46vh}
    html.js .kit-scrolly .kit-scene{grid-row:1 / span var(--n);position:sticky;top:max(calc(var(--nav-h) + 24px),calc(50vh - 220px));align-self:start;
        opacity:0;transform:translateY(14px) scale(.985);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
    html.js .kit-scrolly .kit-scene.is-on{opacity:1;transform:none;pointer-events:auto;
        transition:opacity .4s var(--ease-out) .08s,transform .5s var(--ease-out) .08s}
    html.js .kit-scrolly .kit-stage{height:400px;min-height:0}
    html.js .kit-scrolly .kit-step h3{color:var(--gray-700);transition:color .25s ease}
    html.js .kit-scrolly .kit-step.is-on h3{color:var(--ink)}
    html.js .kit-scrolly .kit-step.is-on .kit-step-n{background:var(--ink);color:var(--paper);box-shadow:none}
    html.js .kit-scrolly .kit-step.is-past .kit-step-n{color:var(--copper-deep);box-shadow:inset 0 0 0 1.5px var(--copper-deep)}
}
@media (max-width:899px){
    .kit-scrolly{grid-template-columns:minmax(0,1fr);row-gap:20px}
    .kit-step,.kit-scene{grid-column:1;grid-row:auto}
    .kit-scene{margin-bottom:28px}
    .kit-rail{display:none}
    .kit-step{padding-left:52px}
}

/* scene: tracked questions */
.kit-sheet{width:100%;max-width:470px;border-radius:12px;background:var(--white);box-shadow:0 0 0 1px rgba(13,36,68,.07),0 24px 48px -28px rgba(13,36,68,.35)}
.kit-sheet-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:14px 18px;border-bottom:1px solid var(--gray-300);
    font-size:14px;font-weight:600;color:var(--ink)}
.kit-sheet-h .kit-mono{color:var(--gray-700)}
.kit-qs{list-style:none;padding:6px 18px 10px}
.kit-qs li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--gray-100);font-size:14.5px;line-height:1.4;color:var(--ink)}
.kit-qs li:last-child{border-bottom:0}
.kit-qs .kit-mono{color:var(--copper-deep)}
.kit-tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(45,138,86,.13);color:var(--green-ink)}
.kit-tick svg{width:12px;height:12px}
.kit-qs-add{color:var(--gray-700)!important;font-size:13.5px!important}
.kit-qs-add span:first-child{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--gray-300)}
.kit-qs-add svg{width:12px;height:12px}

/* scene: the first check, question by assistant */
.kit-matrix{width:100%;max-width:470px;display:grid;grid-template-columns:44px repeat(4,minmax(0,1fr));gap:10px 8px;align-items:center;
    padding:20px 18px;border-radius:12px;background:var(--white);box-shadow:0 0 0 1px rgba(13,36,68,.07),0 24px 48px -28px rgba(13,36,68,.35)}
.kit-matrix > .kit-mono{text-align:center;color:var(--gray-700);font-size:11px}
.kit-matrix > .kit-mono:nth-child(5n+1){text-align:left;color:var(--copper-deep)}
.kit-m{justify-self:center;display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.kit-m svg{width:14px;height:14px}
.kit-m--n{background:var(--copper-deep);color:#fff}
.kit-m--c{box-shadow:inset 0 0 0 2px var(--copper-deep);color:var(--copper-deep)}
.kit-m--x{box-shadow:inset 0 0 0 1.5px var(--gray-300);color:var(--gray-500)}
.kit-matrix .kit-key{grid-column:1 / -1;margin-top:6px;padding-top:14px;border-top:1px solid var(--gray-100)}
.kit-matrix .kit-key i{width:12px;height:12px}
.kit-key i.x{box-shadow:inset 0 0 0 1.5px var(--gray-300)}
@media (max-width:600px){
    .kit-stage{padding-top:54px}
    .kit-matrix{grid-template-columns:28px repeat(4,minmax(0,1fr));gap:10px 4px;padding:18px 12px}
    .kit-matrix > .kit-mono{font-size:10px;letter-spacing:0}
    .kit-m{width:28px;height:28px}
}

/* scene: the anatomy of an answer page */
.kit-anat{width:100%;max-width:560px;display:grid;gap:16px}
.kit-page{width:60%;border-radius:10px;background:var(--white);box-shadow:0 0 0 1px rgba(13,36,68,.08),0 24px 48px -28px rgba(13,36,68,.35)}
.kit-page-bar{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-bottom:1px solid var(--gray-100)}
.kit-page-bar i{width:7px;height:7px;border-radius:50%;background:var(--gray-300)}
.kit-page-bar .kit-mono{margin-left:6px;font-size:10.5px;color:var(--gray-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-page-body{display:grid;gap:18px;padding:20px 18px 22px}
.kit-blk{position:relative}
.kit-blk--h b{display:block;font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.kit-blk-lines{display:grid;gap:7px}
.kit-blk-lines i{display:block;height:7px;border-radius:3px;background:#E3E7EC;width:var(--w,100%)}
.kit-blk--a .kit-blk-lines i{background:rgba(211,174,106,.5)}
.kit-blk--t .kit-blk-lines{grid-template-columns:1fr 1fr;gap:6px 10px}
.kit-tagline{position:absolute;top:50%;left:calc(100% + 44px);transform:translateY(-50%);display:flex;align-items:center;white-space:nowrap;
    font-size:13.5px;font-weight:600;color:var(--ink)}
.kit-tagline::before{content:'';position:absolute;right:calc(100% + 6px);top:50%;width:46px;height:0;border-top:1px dashed rgba(142,93,27,.55)}
.kit-tagline::after{content:'';position:absolute;right:calc(100% + 50px);top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--copper-deep)}
.kit-anat-foot{display:flex;flex-wrap:wrap;gap:8px}
.kit-anat-foot .kit-chip{background:var(--white);box-shadow:inset 0 0 0 1px rgba(13,36,68,.14);color:var(--ink)}
@media (max-width:600px){
    .kit-page{width:100%}
    .kit-blk{display:grid;gap:8px}
    .kit-tagline{position:static;transform:none;width:fit-content;padding:2px 9px;border-radius:999px;font-size:11.5px;color:var(--copper-deep);background:rgba(211,174,106,.16)}
    .kit-tagline::before,.kit-tagline::after{display:none}
}

/* scene: the weekly loop */
.kit-loop{position:relative;width:min(100%,330px);aspect-ratio:1}
.kit-loop svg{display:block;width:100%;height:100%;overflow:visible}
.kit-loop-arc{fill:none;stroke:var(--copper-deep);stroke-width:3;stroke-linecap:round}
.kit-loop-track{fill:none;stroke:#E1E5EA;stroke-width:3}
.kit-loop-orbit{transform-origin:160px 160px}
.kit-loop-dot{fill:var(--ink)}
.kit-loop-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.kit-loop-c b{font-size:22px;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.kit-loop-c span{font-size:13.5px;color:var(--gray-700)}
.kit-loop-l{position:absolute;translate:-50% -50%;padding:4px 11px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px rgba(13,36,68,.1),0 8px 18px -10px rgba(13,36,68,.35);
    font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.kit-loop-arc{stroke-dasharray:100 100;stroke-dashoffset:0;transition:stroke-dashoffset .18s ease}
html.js .kit-scene:not(.is-on) .kit-loop-arc{stroke-dashoffset:100}
html.js .kit-scene.is-on .kit-loop-arc{transition:stroke-dashoffset .7s var(--ease-in-out);transition-delay:calc(200ms + var(--k,0) * 260ms)}
html.js .kit-scene.is-on .kit-loop-orbit{animation:kit-orbit 2.2s var(--ease-in-out) 1s both}
@keyframes kit-orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* kit: sides. One card, two faces: each yes sits across from the no it
   rules out (21st.dev 21217, folded into one object). Each face is a
   real list; subgrid lines the rows up across the seam. */
.kit-sides{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto repeat(var(--n,3),auto);
    margin-top:clamp(36px,5vw,56px);border-radius:var(--r-panel);background:var(--white);
    box-shadow:0 0 0 1px rgba(13,36,68,.07),0 30px 60px -38px rgba(13,36,68,.4);overflow:hidden}
.kit-side{display:grid;grid-row:1 / -1;grid-template-rows:subgrid}
.kit-side--no{background:#FAF8F5}
.kit-side ul{list-style:none;display:grid;grid-row:2 / -1;grid-template-rows:subgrid}
.kit-side-h{display:flex;align-items:center;gap:10px;padding:24px 36px 18px;font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.kit-side-h svg{width:20px;height:20px;flex:none}
.kit-side--yes .kit-side-h{color:var(--green-ink)}
.kit-side--no .kit-side-h svg{color:var(--gray-500)}
.kit-side li{position:relative;padding:20px 36px;border-top:1px solid var(--gray-100);font-size:16.5px;line-height:1.55;color:var(--gray-900)}
.kit-side--no li{color:var(--gray-700);border-top-color:rgba(13,36,68,.07)}
.kit-side--no li::before{content:'';position:absolute;left:-5px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--copper-deep);z-index:1}
.kit-sides-seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(13,36,68,.12);transform-origin:50% 0;z-index:1}
html.js .kit-sides:not(.is-play) .kit-side li{opacity:0}
html.js .kit-sides:not(.is-play) .kit-sides-seam{transform:scaleY(0)}
html.js .kit-sides.is-play .kit-sides-seam{animation:kit-draw-y .6s var(--ease-in-out) both}
html.js .kit-sides.is-play .kit-side--yes li{animation:kit-from-r .5s var(--ease-out) both;animation-delay:calc(240ms + var(--k,0) * 60ms)}
html.js .kit-sides.is-play .kit-side--no li{animation:kit-from-l .5s var(--ease-out) both;animation-delay:calc(240ms + var(--k,0) * 60ms)}
@media (max-width:760px){
    .kit-sides{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
    .kit-side,.kit-side ul{grid-row:auto;grid-template-rows:none}
    .kit-side--no{border-top:1px solid var(--gray-300)}
    .kit-side-h,.kit-side li{padding-left:22px;padding-right:22px}
    .kit-sides-seam,.kit-side--no li::before{display:none}
}

/* kit: aside. Heading and related links on the left, the long list on
   the right, so the wide band has no empty column. */
.kit-aside{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;gap:0 clamp(36px,5vw,88px);align-items:start}
.kit-aside > .sec-h{grid-column:1;grid-row:1}
.kit-aside > .faqs{grid-column:2;grid-row:1 / span 2;margin-top:0;max-width:none}
.kit-aside-rel{grid-column:1;grid-row:2;margin-top:36px}
.kit-aside-rel h3{font-size:15px;font-weight:600;color:var(--gray-700)}
.kit-aside .related{grid-template-columns:minmax(0,1fr);margin-top:12px}
@media (max-width:900px){
    .kit-aside{grid-template-columns:minmax(0,1fr)}
    .kit-aside > .sec-h,.kit-aside > .faqs,.kit-aside-rel{grid-column:1;grid-row:auto}
    .kit-aside > .faqs{margin-top:32px}
    .kit-aside-rel{margin-top:48px}
}

/* kit: reduced motion. Finished picture, no travel, no stream. */
@media (prefers-reduced-motion:reduce){
    html.js [data-kit] :is(.kit-in,.kit-pop,.kit-fade,.kit-w,.kit-dots i,.kit-side li,.kit-s,.kit-tally-sub,.kit-tally-wait),
    html.js [data-kit] .kit-tally-row > .kit-chip{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
    html.js [data-kit] :is(.kit-vs-line,.kit-sides-seam){animation:none!important;transform:none!important}
    html.js [data-kit] :is(.kit-serp-hit,.kit-vs-a mark)::before,html.js [data-kit] :is(.kit-node-dot,.kit-node-ring){animation:none!important;clip-path:none!important;opacity:1!important}
    html.js [data-kit] .kit-beam-pulse{display:none}
    html.js [data-kit] .kit-loop-arc{transition:none!important;stroke-dashoffset:0!important}
    html.js [data-kit] .kit-loop-orbit{animation:none!important}
}