/* PLACEHOLDER CONTENT — Mano reskins before any deploy.
   Aisla v4, reference design-system recreation. Written from the verified teardown
   (in directions/references/), not from their source. Tokens are the teardown's
   documented values. All copy/brand strings are our own placeholders. */

/* ============================================================= FONTS */
@font-face{font-family:'Aspekta';src:url('fonts/aspekta-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Aspekta';src:url('fonts/aspekta-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Aspekta';src:url('fonts/aspekta-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
/* ONE serif file, for ONE place. Mano 2026-08-03, after killing the serif everywhere and then
   re-opening the live site: "we can still use the seriff look, that was really the best look...
   but it shouldnt carry over into any other aisla branding unless its super fucking important.
   we have to be very conservative about how we use this because it clutters documents but on
   the hero section with pluto, it adds a lot of emphasis to the scene."
   So the scope is now the HERO H1 AND NOTHING ELSE. Not h2, not h3, not body, not the app,
   not the PDF renderer, not a deck. Those were all stripped the same day and STAY sans. */

/* ============================================================= TOKENS */
:root{
  /* backgrounds, 5 steps */
  --bg-deep:#050608; --bg:#07080a; --bg-1:#0d0f12; --bg-2:#14171c;
  /* text, 4 steps */
  /* tx-3 raised #5a5e66->#80858f, tx-2 #8a8d94->#959aa2 (2026-07-23 WCAG pass: tx-3 was ~3:1 on
     the dark grounds, failing AA for the meta/label text it styles; both now >=4.5:1 on every bg step
     while keeping the 4-step hierarchy) */
  --tx-0:#f5f5f4; --tx-1:#c8c9cd; --tx-2:#959aa2; --tx-3:#80858f;
  /* hairlines, 3 strengths */
  --ln-1:rgba(255,255,255,.04); --ln-2:rgba(255,255,255,.08); --ln-3:rgba(255,255,255,.16);
  /* brand accents */
  --yellow:#F7FE86; --mint:#A4FBD0; --ice:#B7EAFF;
  /* home/default = blue primary with a touch of orange (Phase 1 palette swap).
     Orange (#FF8F4A) lives only at the gradient tail (text) + CTA-hover warmth, never a surface fill.
     Blue->orange stop pushed from 82% to 95% (2026-07-23 Gaia polish pass, re-tightened after the
     first pass to 90% still faded on the page's longest em-phrase): on long em-phrases ("That's the
     real problem.", "...what you already use.") the transition band stretched across a full trailing
     word, landing it in the muddy blue/orange interpolation midpoint (near-complementary hues gray
     out at 50/50) instead of a clean tip flourish. Same 4 colors, same order — only WHERE the last
     transition starts, so even the longest headline on the page keeps it to the final glyph or two. */
  /* 2026-07-24 Mano fix batch: orange tail DROPPED from both brand gradients — the tail read
     as a gray/orange stain in the button's bottom-right corner. Rule now: every gradient stays
     tonal within its page accent (home/company = blues only). */
  --grad-text:linear-gradient(135deg,#B7EAFF 0%,#6FA8E5 42%,#0084FF 100%);
  --grad-brand:linear-gradient(135deg,#B7EAFF 0%,#6FA8E5 46%,#0084FF 100%);
  --grad-em:var(--grad-text);
  /* signal + current pillar colour (home default = blue) */
  /* 2026-07-24 Mano: flat blue accents (.ai, dots, washes) were too pale vs the logo mark
     — home --c deepened to the logo's blue #4FA8FF. Gradients keep their own light stops. */
  --pixel-signal:#4FA8FF;
  --c:#4FA8FF; --c-2:#6FA8E5;
  /* type scale */
  --t-hero:64px; --t-display:48px; --t-section:36px; --t-sub:28px;
  --t-card:20px; --t-body:16px; --t-small:14px; --t-meta:12px; --t-label:11px;
  /* radii, square-ish */
  --r-1:2px; --r-2:4px; --r-3:6px; --r-4:8px;
  /* spacing / layout */
  --sec-pad:88px; --container:1320px; --container-wide:1480px; --nav-h:59px; --gut:32px;
  /* families */
  --f-sans:'Aspekta',system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-serif:'Playfair Display',Georgia,serif; /* hero h1 ONLY, see the emphasis rule */
}

/* pillar themes, one class swaps 3 properties, everything reads var(--c) */
/* aiPlan takes over home's old mint/yellow green mixture, routing through yellow (Phase 1 swap) */
/* 2026-07-24 Mano fix batch: the shared lime (#F7FE86) mid-stop is GONE from every pillar
   gradient — it dragged yellow-green through purple/orange/mint headlines and buttons.
   Rule: each pillar's gradient runs light->mid->deep within its OWN accent only.
   (aiPlan's --c-2 also moves off lime to a deep mint so the bg glows stay tonal.) */
/* aiPlan (2026-07-24 Mano): flat accent = the logo's green #4ADE9C (the old #A4FBD0 mint read
   too pale). Lime (#EAFF8F) is welcomed BACK here as the gradient's bright highlight stop —
   but ONLY on aiPlan; every other page stays tonal within its own accent. */
body[data-current=aiplan]{--c:#4ADE9C;--c-2:#2FB884;--pixel-signal:#4ADE9C;
  --grad-em:linear-gradient(135deg,#EAFF8F 0%,#4ADE9C 55%,#2FB884 100%);
  --grad-pillar:linear-gradient(135deg,#EAFF8F 0%,#4ADE9C 55%,#2FB884 100%);}
/* 2026-07-25 hygiene pass (Mano ruling R6): the aiBuild orange and aiLearn purple were
   inherited verbatim from the reference design system (#FF8C42 / #C084FC). Both nudged onto
   values derived from OUR logo instead, close enough that the page looks identical:
     orange #FF8C42 -> #FF8F4A  (low channel = 4A, the logo green's low channel, #4ADE9C)
     purple #C084FC -> #BF86FF  (high channel = FF, the logo blue's high channel, #4FA8FF)
   Feel unchanged per R3; only the literal values are ours now. */
body[data-current=aibuild]{--c:#FF8F4A;--c-2:#FF6B2C;--pixel-signal:#FF8F4A;
  --grad-em:linear-gradient(135deg,#FFB27C 0%,#FF8F4A 50%,#F4712D 100%);
  --grad-pillar:linear-gradient(135deg,#FFB27C 0%,#FF8F4A 50%,#F4712D 100%);}
body[data-current=ailearn]{--c:#BF86FF;--c-2:#9F50FF;--pixel-signal:#BF86FF;
  --grad-em:linear-gradient(135deg,#DCB8FE 0%,#BF86FF 50%,#9F50FF 100%);
  --grad-pillar:linear-gradient(135deg,#DCB8FE 0%,#BF86FF 50%,#9F50FF 100%);}

/* ============================================================= RESET / BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* The page colour lives on <html>, and <body> is transparent, so that the presence layer
   can sit at z-index:-1 and still be seen.
   Every page's critical CSS sets `html{background:#07080a}` AND `body{background:#07080a}`.
   Because the root already has a background of its own, body's does NOT propagate to the
   canvas — body paints a real opaque box, in painting step 3, over every negative-z-index
   child, which is step 2. The atmosphere layer rendered exactly nothing until this moved.
   These two rules override the inline critical CSS (site.css loads after it) and are the
   reason the light is visible at all; do not fold them back together. */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;background:var(--bg)}
body{background:transparent;color:var(--tx-1);font-family:var(--f-sans);font-size:var(--t-body);
  line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:color-mix(in oklab,var(--c) 40%,transparent);color:#fff}
/* two-tone ring so keyboard focus stays visible on the bright full-bleed CTA bands too */
:focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:var(--r-2);
  box-shadow:0 0 0 5px rgba(7,8,10,.55)}

/* ============================================================= TYPOGRAPHY */
h1,h2,h3{color:var(--tx-0);font-weight:600;letter-spacing:-.04em;line-height:.97;text-wrap:balance}
h1{font-size:clamp(48px,6.4vw,92px)}
h2{font-size:clamp(30px,3.4vw,var(--t-section));line-height:1.0}
h3{font-size:var(--t-card);letter-spacing:-.02em;line-height:1.15}
.h-display{font-size:clamp(34px,4.2vw,var(--t-display));line-height:1.0;letter-spacing:-.035em;
  font-weight:600;color:var(--tx-0)}
/* Default emphasis for every heading, all levels: upright, the heading's own weight,
   gradient only. Sans. This is the h2 em rule Mano pointed at and it is now the house
   default, so nothing but the hero can drift. */
h1 em,.h-em{font-style:normal;font-family:inherit;font-weight:inherit;letter-spacing:inherit;
  background:var(--grad-em);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* THE ONE EXCEPTION, and it is deliberately narrow: the hero h1, where the serif italic sits
   against Pluto and carries the scene. One clause, one page, one place on that page. */
.home-hero h1 em,.prac-hero h1 em,.ab-hero h1 em,.ct-hero h1 em,.ar-hero h1 em{
  font-family:var(--f-serif);font-style:italic;font-weight:500;letter-spacing:-.01em;padding-right:.04em}
/* section headlines: accent stays (per-page --grad-em), serif goes */
h2 em{font-style:normal;font-family:inherit;font-weight:inherit;letter-spacing:inherit;
  background:var(--grad-em);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* card headlines were faux-italic sans (no Aspekta italic exists) — the cheapest
   thing on the site. Upright, carrying the section accent, same as .ai / .k-plan. */
h3 em{font-style:normal;font-weight:600;color:var(--c)}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ai{color:var(--c);font-weight:500}

.lede{font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;color:var(--tx-1);max-width:64ch}
.muted{color:var(--tx-2)}
strong{color:var(--tx-0);font-weight:600}
p{max-width:66ch}

/* eyebrow, mono 11 caps preceded by the 4-pixel fading strip in the section accent */
.eyebrow{font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-2);display:inline-flex;align-items:center;line-height:1}
/* the four-practice strip: blue -> green -> orange -> purple, Aisla's own mark
   (one pixel per practice + the whole, replacing the single-color fade) */
/* 2026-07-24 Mano: the recurring 4-dot mark was only updated on the logo — this eyebrow
   strip (every section, every page) still used the pale blue/green. Now matches the logo:
   #4FA8FF blue, #4ADE9C green, #FF8F4A orange, #BF86FF purple. */
.eyebrow::before{content:"";flex:none;width:5px;height:5px;border-radius:1.2px;margin-right:22px;
  background:#4FA8FF;box-shadow:7px 0 0 #4ADE9C, 0 7px 0 #FF8F4A, 7px 7px 0 #BF86FF;
  position:relative;top:-3px}
.eyebrow.no-strip::before{display:none}

.mono{font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.04em}
.tag{font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c)}

/* ============================================================= LAYOUT */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gut)}
.wrap-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec-pad) 0;position:relative}
.sec-tight{padding:calc(var(--sec-pad) * .6) 0}
/* Pillar content sections run tighter so they flow as one exploration instead of floating in dead
   vertical space (Mano 2026-07-22: the gaps read as bland/unfinished vs reveriext's dense rhythm). */
.prac-what,.prac-caps,.prac-clarity,.prac-exp,.prac-faq,.prac-cross{padding-top:56px;padding-bottom:56px}
.hair{height:1px;background:var(--ln-2);border:0;width:100%}
.head-lede{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end}
.head-lede .lede{padding-bottom:6px}
.stack-sm>*+*{margin-top:14px}
.eyebrow-row{margin-bottom:26px}

/* ============================================================= BUTTONS */
.btn{font-family:var(--f-mono);font-size:var(--t-meta);font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;padding:12px 20px;
  border-radius:100px;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  border:1px solid transparent;white-space:nowrap}
.btn .ar{transition:transform .2s ease}
.btn:hover .ar{transform:translate(2px,-2px)}
.btn-primary{background:var(--tx-0);color:#0a0a0a}
/* hover keeps the button's OWN page gradient (2026-07-24: it used to force --grad-brand,
   which turned mint/orange/purple pillar CTAs blue on hover); darkening comes from the
   brightness filter in the adaptive block below */
.btn-primary:hover{background:var(--grad-pillar,var(--grad-brand));color:#0a0a0a;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--tx-0);border-color:var(--ln-3)}
.btn-ghost:hover{border-color:color-mix(in oklab,var(--c) 60%,transparent);
  background:color-mix(in oklab,var(--c) 8%,transparent);transform:translateY(-1px)}
.btn-lg{padding:14px 24px}

/* ============================================================= CARD (universal) */
.card{background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4);
  transition:transform .2s ease,border-color .2s ease;padding:28px}
.card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--c) 55%,transparent)}
.card-flat{background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4)}

.icon-chip{width:38px;height:38px;border-radius:var(--r-3);border:1px solid var(--ln-2);
  background:var(--bg-2);display:grid;place-items:center;color:var(--c);margin-bottom:22px}
.icon-chip svg{width:18px;height:18px}

/* ============================================================= NAV */
.as-nav{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:32px;padding:0 var(--gut);height:var(--nav-h);
  background:color-mix(in oklab,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--ln-2)}
.as-logo{display:inline-flex;align-items:center;font-weight:600;font-size:22px;
  letter-spacing:-.03em;color:var(--tx-0)}
/* the 2x2 four-practice mark: the brand story (plan/build/learn + the whole) in 12px */
/* blue + green dots deepened 2026-07-24 (Mano: too pale over the pillar hero photos) —
   blue rides the brand's deep #0084FF lightened one step, green the new deep mint */
.as-logo::before{content:"";flex:none;width:5px;height:5px;border-radius:1.2px;background:#4FA8FF;
  box-shadow:7px 0 0 #4ADE9C,0 7px 0 #FF8F4A,7px 7px 0 #BF86FF;
  margin-right:16px;position:relative;top:-3px}
/* 2026-07-24 Mano: the "ai" in the aisla wordmark read too pale — match the logo's blue dot */
.as-logo .ai{color:#4FA8FF;font-weight:600}
.as-nav nav{display:flex;justify-content:space-between;align-items:center}
.nav-group{display:flex;align-items:center;gap:28px}
.as-nav .lnk{font-size:14px;color:var(--tx-1);position:relative;padding:6px 0;transition:color .15s ease}
.as-nav .lnk:hover{color:var(--tx-0)}
/* The practice prefixes carry their OWN accent, not the page's (2026-07-28, Mano).
   The mobile menu has done this since it was built, via --link-c; the desktop nav and the
   footer were still plain text, so the two disagreed on every page. Keyed off href rather
   than inline styles or extra classes, so there is one place to change a practice colour.
   Bare `.ai` is (0,1,0) and would otherwise hand all three the PAGE accent — these are
   (0,2,1) and win, and they keep their colour through :hover and .is-on by design. */
.as-nav .lnk[href="aiplan.html"] .ai,.foot-col a[href="aiplan.html"] .ai{color:#4ADE9C}
.as-nav .lnk[href="aibuild.html"] .ai,.foot-col a[href="aibuild.html"] .ai{color:#FF8F4A}
.as-nav .lnk[href="ailearn.html"] .ai,.foot-col a[href="ailearn.html"] .ai{color:#BF86FF}
/* The Insights filter row is the third and last place all three sit together as a set, and it
   sits directly under the nav — leaving it grey made the two rows disagree on the same screen.
   That is where this stops: FAQ answers, tag chips and running sentences keep the names plain,
   because a colour code that appears everywhere stops being a code and becomes noise. */
.in-filter button[data-f="aiplan"] .ai{color:#4ADE9C}
.in-filter button[data-f="aibuild"] .ai{color:#FF8F4A}
.in-filter button[data-f="ailearn"] .ai{color:#BF86FF}
/* the active indicator: one pixel + a fading comet dash (ours, not the ghost-pixel pair) */
.as-nav .lnk.active{color:var(--tx-0)}
.as-nav .lnk.active::before{content:"";position:absolute;left:50%;bottom:-13px;
  width:6px;height:6px;border-radius:2px;transform:translateX(-11px);background:var(--pixel-signal)}
.as-nav .lnk.active::after{content:"";position:absolute;left:50%;bottom:-11px;
  transform:translateX(-1px);width:16px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,color-mix(in oklab,var(--pixel-signal) 62%,transparent),transparent)}
/* sentence-case sans, matching the nav links (2026-07-23 external-review fix: the nav mixed
   uppercase-mono CTA with sentence-case sans links — one family, one case) */
.as-cta{font-family:var(--f-sans);font-size:14px;font-weight:500;
  color:var(--tx-0);border:1px solid var(--ln-3);border-radius:100px;
  padding:9px 16px;display:inline-flex;align-items:center;gap:8px;transition:.18s ease;background:transparent}
.as-cta:hover{background:var(--grad-brand);color:#0a0a0a;border-color:transparent;transform:translateY(-1px)}
.as-cta .ar{transition:transform .2s ease}
.as-cta:hover .ar{transform:translate(2px,-2px)}
.nav-burger{display:none}

/* ============================================================= MOBILE NAV (native details) */
.m-nav{display:none}
.m-nav>summary{list-style:none;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
.m-nav>summary::-webkit-details-marker{display:none}
.burger{position:relative;width:22px;height:12px}
.burger span{position:absolute;left:0;height:1.6px;width:100%;background:var(--tx-0);border-radius:2px;
  transition:transform .18s ease,opacity .18s ease,top .18s ease}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:5px}
.burger span:nth-child(3){top:10px}
.m-nav[open] .burger span:nth-child(1){top:5px;transform:rotate(45deg)}
.m-nav[open] .burger span:nth-child(2){opacity:0}
.m-nav[open] .burger span:nth-child(3){top:5px;transform:rotate(-45deg)}
.m-panel{position:fixed;inset:var(--nav-h) 0 0 0;z-index:45;padding:34px var(--gut) 48px;
  background:var(--bg);overflow:auto;animation:mPanelIn .45s cubic-bezier(.16,1,.3,1) both}
/* texture lives on a pseudo so the mask fades only the grid, never the opaque backdrop
   (a mask on the panel itself would make the page bleed through the menu) */
.m-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 15% 8%,color-mix(in oklab,var(--mint) 12%,transparent),transparent 70%),
    radial-gradient(55% 45% at 92% 22%,color-mix(in oklab,var(--ice) 12%,transparent),transparent 70%),
    linear-gradient(var(--ln-1) 1px,transparent 1px),
    linear-gradient(90deg,var(--ln-1) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 55%,transparent 100%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 55%,transparent 100%)}
.m-panel>*{position:relative;z-index:1}
.m-nav:not([open]) .m-panel{animation:mPanelOut .3s cubic-bezier(.4,0,.8,1) both}
@keyframes mPanelIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes mPanelOut{from{opacity:1}to{opacity:0}}
.m-link{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--ln-2)}
/* ml-t/ml-d must be display:block: both are inline spans by default, so with no line break
   between them in the markup they ran together on one baseline ("aiPlanFind where AI belongs")
   and the margin-top below was inert on an inline box. Block stacks them + makes the 6px gap real. */
.m-link .ml-t{display:block;font-size:clamp(20px,7vw,28px);font-weight:600;letter-spacing:-.03em;color:var(--tx-0);line-height:1}
.m-link .ml-t .ai{color:var(--link-c,var(--c))}
.m-link .ml-d{display:block;font-size:13px;color:var(--tx-2);margin-top:6px}
.m-link .ml-ar{color:var(--link-c,var(--tx-2));transform:rotate(-45deg);font-size:20px;flex:none}
.m-sub{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);margin:26px 0 6px}
.m-cta{margin-top:30px;width:100%;justify-content:center}

/* ============================================================= FILM GRAIN + GLOW */
/* 2026-07-27: this was a NO-OP for its whole life. `overlay` against a near-black page
   resolves to 2*backdrop*source, and at --bg #07080a that multiplies the noise to nothing
   — a flat region of the rendered page measured stddev 0.000 while the canvas loop ran
   every third frame. `screen` is the blend that reads on a dark ground: it adds light, so
   grain appears in the shadows and disappears on the bright CTA bands, which is how film
   actually behaves. Opacity carries the calibration (canvas alpha 26 x .2 = ~.02 effective),
   chosen to lift the black floor by ~2 levels and no more. */
.grain{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:8;
  opacity:.2;mix-blend-mode:screen}
.glow{position:absolute;inset:0;pointer-events:none;z-index:0}

/* ============================================================= HOME, HERO */
.home-hero{position:relative;min-height:clamp(560px,84vh,860px);display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--ln-1)}
.home-hero canvas.ripple{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.home-hero .glow{background:
  radial-gradient(46% 40% at 50% 30%,color-mix(in oklab,var(--c) 10%,transparent),transparent 70%)}
.home-hero .hero-in{position:relative;z-index:2;padding-bottom:72px;max-width:960px}
/* NOTE: the sitewide type-scale block further down (search "h1 = 64px SITEWIDE") sets the
   real size for this h1. Only the margins are decided here. */
.home-hero h1{margin:22px 0 24px}
.home-hero .lede{max-width:52ch;color:var(--tx-1)}
.home-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---- 2026-07-26, Mano's ruling: the hero goes back to Pluto GREETING you --------------
   For one day (ruling R1, 07-25) this hero held the dashboard: copy centred over the app
   frame. Mano's reaction after living with it: the page felt like a downgrade, and putting
   Pluto beside the dashboard "as if he's presenting it" was the wrong move too, because he
   wants a visitor CALM and focused when they reach the product. His words on why the old
   hero worked: it felt like Pluto was greeting you.
   So the fold is one idea again — copy left, Pluto docked right, quiet motion behind — and
   the dashboard gets the whole next section to itself with nothing competing.
   The .has-demo and .hero-demo rules that lived here are gone with it. */

/* The background field. A WebGL quad drawn by assets/hero-field.js; the gradient below is
   what shows under reduced-motion, Save-Data, no-WebGL, or a lost context, so the hero is
   never flat-black even when the canvas never starts. Deliberately dim: this is depth, not
   decoration, and it sits behind BOTH the copy and the Spline scene. */
.hero-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  display:block;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
.hero-field.on{opacity:1}
.home-hero .pe-fallback{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 44% at 68% 34%,color-mix(in oklab,var(--c) 11%,transparent),transparent 72%),
    radial-gradient(46% 38% at 22% 62%,color-mix(in oklab,#4ADE9C 6%,transparent),transparent 74%)}

/* HOME, PROOF band */
.home-proof{border-bottom:1px solid var(--ln-1)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-cell{padding:34px 30px;border-left:1px solid var(--ln-2)}
.proof-cell:first-child{border-left:0;padding-left:0}
.proof-dots{display:inline-flex;gap:4px;margin-bottom:16px}
.proof-dots i{width:5px;height:5px;border-radius:1px;background:var(--c)}
.proof-dots i:nth-child(2){opacity:.55}.proof-dots i:nth-child(3){opacity:.25}
.proof-v{font-size:26px;font-weight:600;color:var(--tx-0);letter-spacing:-.03em;line-height:1;margin-bottom:9px}
.proof-v span{color:var(--c)}
.proof-l{font-size:13px;color:var(--tx-2);line-height:1.45;max-width:22ch}

/* HOME, THESIS */
.home-thesis .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:8px}
.evo{display:flex;flex-direction:column;gap:12px}
.evo-row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:20px 22px;border:1px solid var(--ln-2);border-radius:var(--r-4);background:var(--bg-1)}
.evo-row.on{border-color:color-mix(in oklab,var(--c) 45%,transparent);
  background:color-mix(in oklab,var(--c) 5%,var(--bg-1))}
.evo-ix{font-family:var(--f-mono);font-size:12px;color:var(--tx-3);letter-spacing:.1em;padding-top:2px}
.evo-row.on .evo-ix{color:var(--c)}
.evo-t{font-size:16px;font-weight:600;color:var(--tx-0);margin-bottom:4px}
.evo-d{font-size:13.5px;color:var(--tx-2);line-height:1.5;max-width:46ch}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.tri .card h3{margin-bottom:12px}
.tri .card p{font-size:14.5px;color:var(--tx-2);line-height:1.55}

/* HOME, LOOP (orbit) */
.home-loop .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.orbit-wrap{position:relative;aspect-ratio:1/1;max-width:380px;margin:0 auto;width:100%}
.orbit-wrap svg{width:100%;height:100%;overflow:visible}
.orb-node{transition:none}
/* 2026-07-28 Mano: the mono caps read as a different type system from the rest of the site.
   The orbit IS the brand diagram, so its type is the brand's — the wordmark at the core in
   the header logo's exact treatment, and the three names set the way the nav sets them.
   Painted with `fill`, not `color`: SVG text takes its colour from fill, so the global
   `.ai{color:var(--c)}` cannot reach in here and every colour below is stated once. */
.orb-core{font-family:var(--f-sans);font-size:34px;font-weight:600;letter-spacing:-.03em;fill:var(--tx-0)}
.orb-core .ai{fill:#4FA8FF;font-weight:600}
.orb-label{font-family:var(--f-sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;fill:var(--tx-2)}
.orb-label .ai{font-weight:600}
.lb-plan .ai{fill:#4ADE9C}.lb-build .ai{fill:#FF8F4A}.lb-learn .ai{fill:#BF86FF}
.pillar-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.pcard{display:flex;flex-direction:column;min-height:210px}
.pcard .tag{margin-bottom:auto}
.pcard h3{font-size:22px;margin:20px 0 10px}
.pcard p{font-size:14px;color:var(--tx-2);line-height:1.55;margin-bottom:20px}
.pcard .more{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--tx-1);display:inline-flex;gap:7px;align-items:center;transition:color .15s}
.pcard:hover .more{color:var(--c)}
.pcard.is-aiplan{--c:#4ADE9C}.pcard.is-aibuild{--c:#FF8F4A}.pcard.is-ailearn{--c:#BF86FF}
.pc-art{height:132px;margin:0 0 20px;border-radius:12px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,var(--bg-2),var(--bg-deep));border:1px solid var(--ln-2);display:grid;place-items:center}
.pc-art::before{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 60% at 50% 42%,color-mix(in oklab,var(--c) 16%,transparent),transparent 70%)}
.pc-art svg{position:relative;width:78%;max-width:190px;height:auto}
.pcard:hover .pc-art{border-color:color-mix(in oklab,var(--c) 35%,var(--ln-2))}
.pcard .tag{margin-bottom:14px}
.pcard .more{margin-top:auto}

/* HOME, PRESENCE — claim left, evidence right.
   The right column used to hold a rotating dot-globe. It is gone (2026-07-25): it occupied the
   evidence slot with decoration, and the About page carries the geography properly now. The four
   proof numbers moved into it, so the section argues instead of illustrating. */
.home-presence .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.home-presence .stat-band{grid-template-columns:repeat(2,1fr);gap:38px 32px;margin-top:0}
@media(max-width:900px){.home-presence .grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:520px){.home-presence .stat-band{gap:30px 20px}}
/* tools carousel: a smooth infinite marquee of the software we build on (monochrome brand marks) */
.logo-marquee{margin-top:60px;padding-top:38px;border-top:1px solid var(--ln-2);position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;align-items:center;gap:54px;width:max-content;will-change:transform;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.logo-marquee.dragging .logo-track{cursor:grabbing}
.logo{display:inline-flex;align-items:center;gap:11px;color:var(--tx-3);white-space:nowrap;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.02em;transition:color .25s}
.logo svg{height:22px;width:auto;fill:currentColor;flex:none}
.logo svg.inv{fill:#eef1f4}
.logo svg *{pointer-events:none}
.logo:hover{color:var(--tx-0)}
/* dedicated "your tools, made smarter" section */
.home-stack .stack-head{max-width:760px}
.home-stack .lede{margin-top:20px}
.home-stack .logo-marquee{margin-top:52px;border-top:0;padding-top:0}
/* legacy chip strip — still used by pillar pages (aiPlan/aiBuild/aiLearn) + portfolio */
.logo-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:64px;padding-top:40px;border-top:1px solid var(--ln-2)}
.logo-chip{height:40px;padding:0 18px;border-radius:var(--r-3);border:1px solid var(--ln-2);background:var(--bg-1);
  display:grid;place-items:center;color:var(--tx-2);font-family:var(--f-mono);font-size:12px;font-weight:500;
  letter-spacing:.02em;white-space:nowrap;transition:border-color .2s,color .2s}
.logo-chip:hover{border-color:color-mix(in oklab,var(--c) 45%,transparent);color:var(--tx-0)}
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.stat .eyebrow{margin-bottom:16px}
/* the 2x2 logo mark is a SECTION signature. In the 4-across band it read as a strip; stacked
   2x2 in the presence column it became four logos in one grid. A stat label is not a heading. */
.stat .eyebrow::before{display:none}
.stat-v{font-size:clamp(34px,4vw,52px);font-weight:600;color:var(--tx-0);letter-spacing:-.04em;line-height:1}
.stat-v span{color:var(--c)}
.stat-l{font-size:12px;font-family:var(--f-mono);letter-spacing:.06em;color:var(--tx-3);text-transform:uppercase;margin-top:10px}

/* HOME, NOTES (insights) */
.notes-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.notes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.note{border:1px solid var(--ln-2);border-radius:var(--r-4);overflow:hidden;background:var(--bg-1);
  transition:transform .2s ease,border-color .2s ease;display:flex;flex-direction:column}
.note:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--c) 45%,transparent)}
.note-img{aspect-ratio:16/11;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--bg-2),var(--bg-1))}
.note-img::after{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(70% 90% at 30% 20%,color-mix(in oklab,var(--c) 22%,transparent),transparent 60%),
            repeating-linear-gradient(45deg,transparent 0 9px,rgba(255,255,255,.02) 9px 10px)}
.note-b{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.note h3{font-size:16px;line-height:1.3}
.note .more{margin-top:auto;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2)}
.link-arrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--tx-1);display:inline-flex;gap:8px;align-items:center;white-space:nowrap;border:1px solid var(--ln-2);
  border-radius:100px;padding:9px 15px;transition:.18s}
.link-arrow:hover{border-color:color-mix(in oklab,var(--c) 50%,transparent);color:var(--tx-0)}

/* HOME, CTA (full brand gradient) */
/* Closing band = blue surface. Kept in the light half of the blue range (ice -> #6FA8E5) so the
   dark band text stays legible; NO orange here (orange is never a surface fill). Phase 1 swap. */
.home-cta{position:relative;text-align:center;overflow:hidden;color:#0a0a0a;padding:var(--sec-pad) var(--gut);
  background:linear-gradient(135deg,#B7EAFF 0%,#8FD0F5 54%,#6FA8E5 100%)}
.home-cta::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.015) 3px 4px)}
.home-cta .in{position:relative;z-index:2;max-width:760px;margin:0 auto}
.home-cta h2{color:#0a0a0a;font-size:clamp(30px,4vw,var(--t-display))}
.home-cta h2 em{background:none;-webkit-text-fill-color:#0a0a0a;color:#0a0a0a;opacity:.62}
.home-cta p{color:rgba(10,10,10,.72);max-width:52ch;margin:20px auto 0;font-size:16px}
.home-cta .row{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.home-cta .btn-primary{background:#0a0a0a;color:#fff}
.home-cta .btn-primary:hover{background:#000;color:#fff}
.home-cta .btn-ghost{border-color:rgba(10,10,10,.28);color:#0a0a0a}
.home-cta .btn-ghost:hover{background:rgba(10,10,10,.06);border-color:rgba(10,10,10,.5)}

/* ============================================================= PILLAR PAGES */
.prac-hero{position:relative;min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;
  overflow:hidden;border-bottom:1px solid var(--ln-1)}
.prac-hero .glow{background:
  radial-gradient(60% 55% at 78% 30%,color-mix(in oklab,var(--c) 15%,transparent),transparent 68%),
  radial-gradient(50% 60% at 20% 80%,color-mix(in oklab,var(--c-2) 8%,transparent),transparent 70%)}
.prac-hero .tex{position:absolute;inset:0;z-index:0;opacity:.5;
  background:
    radial-gradient(90% 90% at 80% 30%,color-mix(in oklab,var(--c) 8%,transparent),transparent 60%),
    linear-gradient(90deg,var(--ln-1) 1px,transparent 1px),
    linear-gradient(var(--ln-1) 1px,transparent 1px);
  background-size:auto,52px 52px,52px 52px;
  -webkit-mask-image:radial-gradient(80% 80% at 78% 34%,#000,transparent 72%);
  mask-image:radial-gradient(80% 80% at 78% 34%,#000,transparent 72%)}
.prac-hero .in{position:relative;z-index:2;max-width:760px}
.prac-hero h1{font-size:clamp(48px,6.2vw,88px);margin-bottom:28px}
.prac-hero .lede{margin-bottom:34px}
.prac-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.signal-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;
  border-top:1px solid var(--ln-2)}
.signal{padding:24px 26px 0;border-left:1px solid var(--ln-2)}
.signal:first-child{border-left:0;padding-left:0}
.signal .s-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:10px}
.signal .s-v{font-size:13.5px;color:var(--tx-2);line-height:1.5;max-width:26ch}

/* prac-what */
.prac-what .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.prac-what .card{min-height:180px}
.prac-what .card .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-bottom:16px}
.prac-what .card h3{font-size:19px;margin-bottom:10px}
.prac-what .card p{font-size:14px;color:var(--tx-2);line-height:1.55}
.prac-what .card.hl{border-color:color-mix(in oklab,var(--c) 55%,transparent);
  background:color-mix(in oklab,var(--c) 6%,var(--bg-1))}
.prac-what .card.hl .k{color:var(--c)}

/* prac-outcomes */
.prac-out .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.out-cell{border-top:1px solid var(--ln-2);padding-top:22px}
.out-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:14px}
/* serif ration: these are four one-word labels (Build/Live/Managed/Trained), not a
   quotation — they read cleaner as sans and stop the section being 4 more serif hits */
.out-t{font-weight:600;font-size:26px;color:var(--tx-0);margin-bottom:12px;letter-spacing:-.025em}
.out-d{font-size:13.5px;color:var(--tx-2);line-height:1.55}

/* prac-caps */
.prac-caps .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.caps-visual{aspect-ratio:4/5;border-radius:var(--r-4);border:1px solid var(--ln-2);position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--bg-2),var(--bg-deep))}
.caps-visual .cv-glow{position:absolute;inset:0;
  background:radial-gradient(60% 50% at 30% 80%,color-mix(in oklab,var(--c) 20%,transparent),transparent 65%)}
.caps-visual .cv-cap{position:absolute;left:24px;right:24px;bottom:22px;z-index:3}
.caps-visual .cv-cap .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.caps-visual .cv-cap h3{font-weight:600;font-size:24px;letter-spacing:-.025em;margin-top:8px;max-width:18ch;color:#fff}
/* outcome photo: full-cover, graded, bottom scrim so the caption reads, subtle accent wash */
.caps-visual .cv-photo{position:absolute;inset:0;z-index:1}
.caps-visual .cv-photo img{width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(.8) brightness(.82) contrast(1.02)}
.caps-visual .cv-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(80% 70% at 30% 20%,color-mix(in oklab,var(--c) 18%,transparent),transparent 62%);
  mix-blend-mode:overlay}
.caps-visual .cv-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg-deep) 18%,transparent) 0%,transparent 34%,color-mix(in oklab,var(--bg-deep) 82%,transparent) 100%)}
.caps-visual .cv-glow{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 40% at 26% 96%,color-mix(in oklab,var(--c) 22%,transparent),transparent 60%);mix-blend-mode:screen}
.caps-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln-2);border:1px solid var(--ln-2);border-radius:var(--r-4);overflow:hidden}
.cap{background:var(--bg-1);padding:28px 26px;transition:background .2s}
.cap:hover{background:var(--bg-2)}
.cap .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-bottom:14px}
.cap h3{font-size:17px;margin-bottom:9px}
.cap p{font-size:13.5px;color:var(--tx-2);line-height:1.5}

/* prac-clarity, numbered steps */
.prac-clarity .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:56px}
.step{background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4);padding:24px 22px;
  transition:transform .2s,border-color .2s;min-height:210px;display:flex;flex-direction:column}
.step:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--c) 50%,transparent)}
.step .n{width:34px;height:34px;border-radius:var(--r-2);border:1px solid var(--ln-2);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;color:var(--c);margin-bottom:20px}
.step h3{font-size:16px;margin-bottom:10px;line-height:1.2}
.step p{font-size:13px;color:var(--tx-2);line-height:1.5}

/* prac-packages */
.prac-pack .pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;align-items:start}
.pk{background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4);padding:32px 28px;
  display:flex;flex-direction:column;transition:border-color .2s}
.pk.feat{border-color:color-mix(in oklab,var(--c) 55%,transparent);
  background:color-mix(in oklab,var(--c) 5%,var(--bg-1));position:relative;box-shadow:0 0 0 1px color-mix(in oklab,var(--c) 25%,transparent)}
/* A quiet tag notched into the card's top edge on the RIGHT, not a banner across it.
   The accent is carried as text and a hairline instead of a filled slab, and the fill is
   the card's own ground so the card border reads as passing behind it.
   Written as `.pk .pk-badge` (0,2,0) deliberately: the cursor-wash rule further down is a
   two-class selector and a bare `.pk-badge` loses to it. */
.pk .pk-badge{position:absolute;top:-10px;right:22px;left:auto;z-index:2;
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;line-height:1;
  text-transform:uppercase;white-space:nowrap;
  color:var(--c);
  background:color-mix(in oklab,var(--c) 12%,var(--bg-1));
  border:1px solid color-mix(in oklab,var(--c) 38%,transparent);
  border-radius:var(--r-1);padding:6px 10px 5px}
.pk-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c);margin-bottom:14px}
.pk h3{font-size:26px;margin-bottom:10px}
.pk .pk-sub{font-size:13.5px;color:var(--tx-2);line-height:1.5;margin-bottom:22px;min-height:42px}
.pk .hair{margin-bottom:20px}
.pk-list{display:flex;flex-direction:column;gap:12px;margin-bottom:26px;flex:1}
.pk-list li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:13.5px;color:var(--tx-1);line-height:1.45}
.pk-list li::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--c);margin-top:8px}
.pk-list .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);
  grid-column:1/-1;margin:6px 0 2px}
.pk-list .k::before{display:none}
.pk .btn{width:100%;justify-content:center}

/* prac-expertise */
.prac-exp .logo-row{margin-top:52px;border:0;padding:0}
.prac-exp .show-more{display:flex;justify-content:center;margin-top:34px}
.industries{margin-top:64px;padding-top:40px;border-top:1px solid var(--ln-2);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln-2);border:1px solid var(--ln-2);border-radius:var(--r-4);overflow:hidden}
.ind{background:var(--bg-1);padding:22px 22px;display:flex;align-items:flex-start;gap:14px;transition:background .2s}
.ind:hover{background:var(--bg-2)}
.ind-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--c);
  background:color-mix(in oklab,var(--c) 9%,transparent);border:1px solid color-mix(in oklab,var(--c) 22%,transparent)}
.ind-ic svg{width:18px;height:18px}
.ind-tx{min-width:0}
.ind-t{display:block;font-size:14.5px;color:var(--tx-0);font-weight:600;letter-spacing:-.01em}
.ind-d{display:block;font-size:12.5px;color:var(--tx-2);margin-top:5px;line-height:1.5}

/* prac-faq, native details */
.prac-faq .faq{margin-top:44px;border-top:1px solid var(--ln-2)}
.qa{border-bottom:1px solid var(--ln-2)}
.qa>summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;
  align-items:center;gap:24px;font-size:17px;font-weight:500;color:var(--tx-0)}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary .pm{position:relative;width:15px;height:15px;flex:none}
.qa>summary .pm::before,.qa>summary .pm::after{content:"";position:absolute;background:var(--c);
  transition:transform .2s ease,opacity .2s}
.qa>summary .pm::before{top:7px;left:0;width:15px;height:1.5px}
.qa>summary .pm::after{left:7px;top:0;height:15px;width:1.5px}
.qa[open]>summary .pm::after{transform:scaleY(0)}
.qa .qa-a{padding:0 0 26px;font-size:14.5px;color:var(--tx-2);line-height:1.6;max-width:74ch}
.qa[open]>summary{color:var(--tx-0)}

/* prac-cross, continue the loop */
.prac-cross .cross-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.cross{background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4);padding:34px 30px;
  transition:transform .2s,border-color .2s;display:flex;flex-direction:column;min-height:180px}
.cross:hover{transform:translateY(-2px)}
.cross.is-aiplan{--c:#4ADE9C}.cross.is-aibuild{--c:#FF8F4A}.cross.is-ailearn{--c:#BF86FF}
/* pillar-name keyword highlight — color aiPlan/aiBuild/aiLearn inline in prose (Mano 2026-07-24) */
.k-plan{color:#4ADE9C;font-weight:600}.k-build{color:#FF8F4A;font-weight:600}.k-learn{color:#BF86FF;font-weight:600}
.cross:hover{border-color:color-mix(in oklab,var(--c) 55%,transparent)}
.cross .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c);margin-bottom:16px}
.cross h3{font-size:22px;margin-bottom:12px}
.cross h3 .ai{color:var(--c)}
/* serif ration: a plain sentence, not a pull-quote — serif italic oversold it */
.cross .thesis{font-size:18px;color:var(--tx-1);line-height:1.45;letter-spacing:-.01em;margin-bottom:auto}
.cross .more{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--tx-1);display:inline-flex;gap:8px;margin-top:22px}
.cross:hover .more{color:var(--c)}

/* prac-cta (dark) */
.prac-cta{text-align:center;border-top:1px solid var(--ln-1)}
.prac-cta .in{max-width:620px;margin:0 auto}
.prac-cta h2{font-size:clamp(30px,4vw,var(--t-display))}
.prac-cta p{color:var(--tx-2);margin:18px auto 0;max-width:44ch}
.prac-cta .row{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.prac-cta .glow2{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 60% at 50% 120%,color-mix(in oklab,var(--c) 12%,transparent),transparent 70%)}

/* ============================================================= CARE PASS (2026-07-22)
   Restores reveriext's section-by-section discipline: one icon chip per item + connective
   tissue (dotted rail, ghost arrows, down-marks) + a full-bleed CTA crescendo. All shared,
   so aiBuild/aiLearn inherit through var(--c) / --grad-pillar. Section 07 (.ind-ic) is the
   reference execution; .care-ic matches it exactly so the page runs ONE chip pattern. */

/* shared 34px line-icon chip (identical recipe to the .ind-ic reference) */
.care-ic,.ind-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:var(--c);background:color-mix(in oklab,var(--c) 9%,transparent);
  border:1px solid color-mix(in oklab,var(--c) 22%,transparent)}
.care-ic svg,.ind-ic svg{width:18px;height:18px}
.ic-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* -- 02 what: three cards read as before -> trap -> payoff -- */
.prac-what .cards3{position:relative}
.prac-what .card{position:relative}
.prac-what .card .care-ic{margin-bottom:16px}
.prac-what .card.hl .care-ic{background:color-mix(in oklab,var(--c) 16%,transparent);
  border-color:color-mix(in oklab,var(--c) 42%,transparent)}
.prac-what .card.hl{box-shadow:0 0 46px -18px color-mix(in oklab,var(--c) 60%,transparent)}
.prac-what .cards3 .card:not(:last-child)::after{content:"\2192";position:absolute;top:50%;right:-15px;
  transform:translate(50%,-50%);font-family:var(--f-mono);font-size:15px;color:var(--tx-3);
  z-index:2;line-height:1;pointer-events:none}

/* -- 03 outcomes: one bordered panel, a dotted accent rail through the chip row, down-marks -- */
.prac-out .grid4{gap:24px;background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4);
  padding:34px 30px;position:relative;
  background-image:radial-gradient(color-mix(in oklab,var(--c) 4%,transparent) 1px,transparent 1px);
  background-size:22px 22px;background-position:16px 50px}
.prac-out .grid4::before{content:"";position:absolute;left:30px;right:30px;top:calc(34px + 17px);
  border-top:1px dashed color-mix(in oklab,var(--c) 40%,transparent);z-index:0}
.prac-out .out-cell{border-top:0;padding-top:0;position:relative;z-index:1}
.prac-out .out-cell .care-ic{margin-bottom:16px;
  background:color-mix(in oklab,var(--c) 12%,var(--bg-1))}   /* opaque, so the rail reads as a track the chips sit on */
.prac-out .out-k{margin-bottom:8px}
.prac-out .out-cell .dn{display:block;color:var(--tx-3);font-family:var(--f-mono);font-size:13px;
  line-height:1;margin:0 0 10px}

/* -- 04 capabilities: a line icon on each cell of the 2x2 -- */
.prac-caps .cap .care-ic{margin-bottom:14px}

/* -- 05 how we work: enlarge the step number into a filled accent beat -- */
.prac-clarity .step .n{width:44px;height:44px;border-radius:var(--r-3);border:0;
  background:color-mix(in oklab,var(--c) 90%,#fff);color:#0a0a0a;font-weight:600;font-size:15px;
  margin-bottom:22px}

/* -- 06 packages: an icon chip per card + a mint check on every list item -- */
.prac-pack .pk .care-ic{margin-bottom:18px}
.prac-pack .pk-list li:not(.k)::before{width:13px;height:13px;margin-top:3px;border-radius:0;
  background:var(--c);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}

/* -- 09 continue the loop: target-pillar glyph in the top-right corner, that pillar's accent -- */
.prac-cross .cross{position:relative;overflow:hidden}
.prac-cross .cross .corner{position:absolute;top:20px;right:20px;color:var(--c);opacity:.85;pointer-events:none}
.prac-cross .cross .corner svg{width:26px;height:26px}

/* -- 10 CTA: full-bleed accent crescendo, near-black type + inverted buttons on top -- */
.prac-cta{background:var(--grad-pillar);border-top:0;overflow:hidden}
.prac-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 82% at 50% 42%,rgba(255,255,255,.16),transparent 72%)}
.prac-cta .glow2{display:none}
.prac-cta .in{position:relative;z-index:1}
.prac-cta h2{color:#0a0a0a}
.prac-cta h2 em{background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:#0a0a0a;color:#0a0a0a}
.prac-cta p{color:color-mix(in oklab,#0a0a0a 76%,transparent)}
.prac-cta .btn-primary{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.prac-cta .btn-primary:hover{background:#000;color:#fff;transform:translateY(-1px)}
.prac-cta .btn-ghost{border-color:rgba(0,0,0,.42);color:#0a0a0a}
.prac-cta .btn-ghost:hover{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.62);transform:translateY(-1px)}

/* -- 01 hero: deeper bottom scrim so the signal strip (esp. the price cell) sits on near-black.
   Separate layer over the photo, so it survives any background swap (Track C). -- */
.prac-hero .hero-photo::after{background:linear-gradient(180deg,transparent 36%,
  color-mix(in oklab,var(--bg) 90%,transparent) 90%)}

/* -- 04 outcome tile: horizontal art banner (was a portrait photo). The pillar's own
   diagram sits on a graded field with an accent glow; section goes single-column so the
   banner runs wide like reveriext's outcome visuals, capability 2x2 sits below it. -- */
.prac-caps .grid{grid-template-columns:1fr;gap:46px}
.caps-visual.is-art{aspect-ratio:auto;height:clamp(300px,32vw,440px);position:relative;
  background:linear-gradient(160deg,var(--bg-1),var(--bg-deep));display:block}
.caps-visual.is-art .cv-glow{position:absolute;inset:0;z-index:1;
  background:radial-gradient(54% 70% at 50% 42%,color-mix(in oklab,var(--c) 18%,transparent),transparent 72%)}
.caps-visual.is-art .cv-art{position:absolute;inset:0;z-index:2;color:var(--c);
  display:flex;align-items:center;justify-content:center;padding:30px 40px 78px}
.caps-visual.is-art .cv-art svg{width:auto;height:min(84%,300px);max-width:82%;overflow:visible}
.caps-visual.is-art .cv-cap{left:30px;right:30px;bottom:26px;z-index:3}
.prac-caps .caps-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.prac-caps .caps-grid{grid-template-columns:1fr 1fr}}

/* care-pass mobile: rail off (single column), arrows point down between stacked cards */
@media(max-width:900px){
  .prac-out .grid4::before{display:none}
  .prac-out .grid4{padding:26px 22px}
  .prac-what .cards3 .card:not(:last-child)::after{content:"\2193";top:auto;bottom:-15px;right:50%;
    transform:translate(50%,50%)}
}

/* ============================================================= FOOTER */
.as-foot{border-top:1px solid var(--ln-2);padding:72px 0 0;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px}
.foot-brand .as-logo{margin-bottom:18px}
.foot-brand p{font-size:13.5px;color:var(--tx-2);line-height:1.6;max-width:34ch}
.foot-col h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:18px}
.foot-col a{display:block;font-size:14px;color:var(--tx-1);padding:6px 0;transition:color .15s}
.foot-col a:hover{color:var(--tx-0)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 0;border-top:1px solid var(--ln-2);font-size:12.5px;color:var(--tx-3)}
.foot-bar .fb-links{display:flex;gap:22px}
.foot-word{font-size:clamp(80px,20vw,300px);font-weight:600;letter-spacing:-.05em;line-height:.8;
  color:var(--tx-0);opacity:.03;text-align:center;padding:10px 0 0;user-select:none;pointer-events:none}

/* ============================================================= RESPONSIVE */
@media(max-width:1080px){
  .notes-grid{grid-template-columns:repeat(2,1fr)}
  .prac-clarity .steps{grid-template-columns:repeat(3,1fr)}
  .stat-band{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .industries{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  :root{--sec-pad:76px;--gut:22px}
  /* drop backdrop-filter on mobile: it makes the sticky bar a containing block for the
     position:fixed <details> panel, collapsing the full-screen menu. Solid bar instead. */
  .as-nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  .as-nav nav,.as-nav>.as-cta{display:none}
  .as-nav{grid-template-columns:1fr auto}
  .m-nav{display:block}
  .head-lede{grid-template-columns:1fr;gap:24px;align-items:start}
  .home-thesis .grid,.home-loop .grid,.home-presence .grid,.prac-caps .grid{grid-template-columns:1fr;gap:40px}
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-cell:nth-child(-n+2){border-top:0}
  .proof-cell:nth-child(2n+1){border-left:0;padding-left:0}
  .proof-cell{border-top:1px solid var(--ln-2)}
  .tri,.pillar-cards,.prac-what .cards3,.prac-pack .pk-grid{grid-template-columns:1fr;gap:20px}
  .prac-out .grid4{grid-template-columns:1fr 1fr;gap:24px}
  .caps-grid{grid-template-columns:1fr 1fr}
  .signal-strip{grid-template-columns:1fr}
  .signal{border-left:0;padding:20px 0 0;border-top:1px solid var(--ln-2)}
  .signal:first-child{border-top:0}
  .orbit-wrap{max-width:360px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .notes-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .notes-grid,.prac-out .grid4,.caps-grid,.industries,.prac-clarity .steps,.stat-band,.foot-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .proof-cell{border-left:0;padding-left:0}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:12px}
  .home-hero .hero-cta,.prac-hero .hero-cta{width:100%}
  .btn{flex:1;justify-content:center}
}

/* ============================================================= SPLINE HERO LAYER
   Mounted by spline-hero.js ONLY when a scene URL is set (data-spline attr or
   ?spline= preview param). Sits above ripple+glow (z0), below the copy (z2). */
.spline-stage{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .9s ease}
.spline-stage.on{opacity:1}
.spline-stage spline-viewer{display:block;width:100%;height:100%}
[data-spline-pos="right"] .spline-stage{inset:0 0 0 auto;width:min(54vw,780px)}
@media(max-width:900px){[data-spline-pos="right"] .spline-stage{inset:0;width:100%}}
/* While a live scene is loading, the static stand-in stays invisible so it never
   flashes; it fades back in only if the scene fails (class removed by the script). */
.in-visual{transition:opacity .5s ease}
.spline-pending .in-visual{opacity:0;transition:none}
/* first-paint-hidden fallback (insights.html head) is revealed only if the live scene fails */
html.js .in-hero[data-spline].spline-failed .in-visual{opacity:1}

/* ===== Insights: Pluto's stage (calm lit platform + cool spotlight, echoing his cyan eyes).
   The whole zone is right-aligned to the CONTENT container's right edge — not the raw viewport edge —
   so on a wide screen Pluto sits centered in the space beside the copy, not stranded in the outer margin.
   z-order: stage(0) < scene(1) < copy(2). Subtler than the home hero: Insights is a content page. ===== */
.in-hero .in-stage{position:absolute;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden;
  left:auto;right:max(var(--gut), calc((100vw - var(--container)) / 2));width:min(46vw,600px);
  /* feather the whole stage zone so its floor/glow layers never show a clipped edge */
  -webkit-mask-image:radial-gradient(72% 72% at 50% 54%,#000 38%,transparent 94%);
  mask-image:radial-gradient(72% 72% at 50% 54%,#000 38%,transparent 94%)}
/* soft cool spotlight behind/above Pluto */
.in-hero .in-stage-glow{position:absolute;left:0;right:0;top:6%;height:76%;
  background:radial-gradient(48% 52% at 50% 40%,rgba(150,200,255,.16),rgba(115,165,255,.05) 48%,transparent 74%);
  filter:blur(10px);animation:inGlowBreath 7s ease-in-out infinite}
/* faint floor wash so he sits on ground, not floating */
.in-hero .in-stage-floor{position:absolute;left:-10%;right:-10%;bottom:0;height:34%;
  background:linear-gradient(0deg,rgba(90,130,210,.10),transparent 82%);
  -webkit-mask-image:radial-gradient(80% 100% at 50% 100%,#000 30%,transparent 82%);
  mask-image:radial-gradient(80% 100% at 50% 100%,#000 30%,transparent 82%)}
/* lit platform disc under Pluto */
.in-hero .in-stage-disc{position:absolute;left:50%;transform:translateX(-50%);bottom:14%;
  width:76%;height:120px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(160,205,255,.24),rgba(120,160,255,.06) 54%,transparent 78%);
  filter:blur(7px)}
@keyframes inGlowBreath{0%,100%{opacity:.82}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.in-hero .in-stage-glow{animation:none}}

/* Pluto sits ~10-15% larger than the first pass and CENTERED over his platform (same right-column zone
   as the stage), not hugging the screen edge (Mano 2026-07-23). Downscale keeps the render sharp. */
@media(min-width:901px){
  .in-hero[data-spline-pos="right"] .spline-stage{
    left:auto;right:max(var(--gut), calc((100vw - var(--container)) / 2));
    width:min(46vw,600px);transform:scale(.8);transform-origin:center;
    /* feather every edge so the scene's in-3D stage fades into the page instead of
       cropping at the canvas rectangle ("cuts off, in a box" — Mano 07-23) */
    -webkit-mask-image:radial-gradient(94% 94% at 50% 50%,#000 56%,transparent 95%);
    mask-image:radial-gradient(94% 94% at 50% 50%,#000 56%,transparent 95%)}
}

/* Home robot hero (scene moved here from Insights). The photo fallback is hidden from FIRST PAINT so
   hero-home.jpg never flashes before the scene mounts; spline-hero.js adds .spline-failed to reveal it
   only if the scene can't come up (no WebGL / reduced-motion / load fail). Mirrors the inline critical rule. */
html.js .home-hero[data-spline] .home-photo{opacity:0;transition:opacity .5s ease}
html.js .home-hero[data-spline].spline-failed .home-photo{opacity:1}
/* Dark WELL so the copy leads over the scene: above the scene (z1), below the copy (z3). Real element
   so copy stays legible even before the scene mounts. */
.home-hero[data-spline] .hero-well{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,5,7,.94) 0%,rgba(4,5,7,.72) 30%,rgba(4,5,7,.26) 56%,transparent 78%),
    linear-gradient(0deg,#050608 1%,rgba(5,6,8,.22) 30%,transparent 48%)}
.home-hero[data-spline] .hero-in{z-index:3}
/* DESKTOP: LEFT-composed. Copy holds the left column; the scene gets the right half to itself, sized
   down so it reads as a deliberate portrait rather than a full bleed the text sits on top of
   (Mano 2026-07-22: centered copy obscured the robot and read as unfinished). */
@media(min-width:901px){
  .home-hero[data-spline]{justify-content:flex-start}
  .home-hero[data-spline] .hero-in{width:100%;max-width:var(--container);margin:0 auto;text-align:left;
    display:flex;flex-direction:column;align-items:flex-start;padding:0 var(--gut) 48px}
  /* 15ch was sized for the old four-word headline. The 2026-07-26 line is two sentences;
     at 15ch it broke into four lines and the fold was headline and nothing else. 20ch lets
     "Everyone will sell you AI." hold one line and the promise take two. Still clears the
     right-docked scene: the copy column ends well short of where Pluto stands. */
  .home-hero[data-spline] h1{max-width:20ch;margin-left:0;margin-right:0}
  .home-hero[data-spline] .lede{max-width:40ch;margin-left:0;margin-right:0}
  .home-hero[data-spline] .hero-cta{justify-content:flex-start}
  .home-hero[data-spline-pos="right"] .spline-stage{inset:0 0 0 auto;width:min(44vw,600px)}
  /* left-weighted well: dark under the copy, clear over the scene on the right */
  .home-hero[data-spline] .hero-well{background:
    linear-gradient(90deg,rgba(4,5,7,.93) 0%,rgba(4,5,7,.66) 34%,rgba(4,5,7,.12) 56%,transparent 72%),
    linear-gradient(0deg,#050608 0%,rgba(5,6,8,.14) 26%,transparent 46%)}
}
@media(max-width:900px){
  /* 2026-07-26: the scene used to full-bleed behind centred copy, held legible only by a
     radial well that was clear in the middle. That was tuned to a four-word headline; the
     longer line landed straight across Pluto's face and the hero was unreadable at 390px.
     STACK instead — copy in the top half, Pluto in a band along the bottom. Same greeting,
     nothing overlapping, and the well drops back to a simple floor fade. */
  .home-hero[data-spline]{align-items:flex-start;min-height:clamp(680px,96vh,920px);
    padding-top:clamp(26px,5vh,52px)}
  .home-hero[data-spline] .hero-in{padding-bottom:0}
  /* Portrait-ish box, centred. A full-width band cropped him to a floating head: the scene
     fills whatever canvas it is given, so the box has to be roughly his own proportions. */
  .home-hero[data-spline-pos="right"] .spline-stage{inset:auto auto 0 50%;
    transform:translateX(-50%);width:min(88vw,370px);height:52%}
  .home-hero[data-spline] .hero-well{background:
    linear-gradient(0deg,#050608 1%,rgba(5,6,8,.30) 22%,transparent 46%)}
  /* platform lighting follows him down into the band */
  .home-hero .pe-glow{top:auto;bottom:0;height:56%}
  .home-hero .pe-disc{bottom:3%}
}

/* ===== Pluto's environment: calm high-tech stage, pure CSS, behind the robot.
   z-order: env(0) < robot(1) < well(2, left-dark for copy) < copy(3). ===== */
.home-hero .pluto-env{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.home-hero[data-spline] .spline-stage{z-index:1}
/* The starfield photo that used to sit here was replaced 2026-07-26 by the generated
   .hero-field canvas (see the HOME, HERO block above). Same job, no photograph, no
   licence question, and it moves. */
/* cool ambient bloom behind/above Pluto (upper-right) */
/* glow + disc centers are tied to the SCENE's center — the right-docked stage is
   min(44vw,600px) wide, so Pluto's center sits min(22vw,300px) from the right edge.
   (Was right:5%/15%, which parked the platform ~8vw left of the robot — Mano 07-23.) */
.home-hero .pe-glow{position:absolute;right:calc(min(22vw,300px) - min(24vw,340px));top:0;width:min(48vw,680px);height:72%;
  background:radial-gradient(52% 52% at 62% 42%,rgba(120,170,255,.15),rgba(80,130,255,.05) 46%,transparent 72%);
  filter:blur(12px)}
/* faint perspective grid floor, lower-right under Pluto, fading up into the dark */
.home-hero .pe-floor{position:absolute;right:-8%;bottom:-4%;width:min(72vw,940px);height:48%;
  background:
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(150,185,255,.11) 47px 48px),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(150,185,255,.11) 47px 48px);
  transform:perspective(720px) rotateX(75deg);transform-origin:bottom center;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 100%,#000 26%,transparent 80%);
  mask-image:radial-gradient(120% 92% at 50% 100%,#000 26%,transparent 80%);opacity:.75}
/* lit platform disc Pluto stands on */
.home-hero .pe-disc{position:absolute;right:calc(min(22vw,300px) - min(15vw,200px));bottom:7%;width:min(30vw,400px);height:130px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(150,190,255,.26),rgba(120,160,255,.07) 55%,transparent 76%);
  filter:blur(7px)}
@media(max-width:900px){
  .home-hero .pe-glow{right:auto;left:50%;transform:translateX(-50%);width:92vw}
  .home-hero .pe-floor{right:auto;left:50%;transform:translateX(-50%) perspective(600px) rotateX(76deg);width:124vw}
  .home-hero .pe-disc{right:auto;left:50%;transform:translateX(-50%)}
}

/* ============================================================= LEGAL PAGES */
.legal-hero{padding:104px 0 16px}
.legal-hero h1{font-size:clamp(36px,4.4vw,56px)}
.legal-body{max-width:760px;padding-bottom:112px}
.legal-body h2{color:var(--tx-0);font-size:22px;font-weight:600;letter-spacing:-.02em;
  margin:44px 0 12px}
.legal-body p{margin:0 0 14px}
.legal-body ul{margin:0 0 14px;padding-left:20px}
.legal-body li{margin:6px 0}
.legal-body .fence{border:1px solid var(--ln-2);border-left:2px solid var(--c);
  border-radius:var(--r-3);padding:16px 18px;margin:18px 0;color:var(--tx-0)}

/* ============================================================= PHASE 3 — EXACT-COPY CALIBRATION (2026-07-20)
   Measured against reveriext LIVE (fresh Chrome, 1440): h1 = 64px SITEWIDE (the old
   92/88 clamps were teardown misreads), home hero is CENTER-composed, hero/section
   buttons are sentence-case with a FILLED gradient primary. Overrides layered here
   so the original foundation rules above stay readable as the base. */

/* ---- type scale: 64px ceiling everywhere ---- */
/* home hero minimum lowered 40px->34px (2026-07-23 Gaia polish pass, .home-hero ONLY, .prac-hero
   untouched): measured at 375px the authored break "AI that earns its place," / "then gets
   used." needs 375.7px for the first line but only has 327px of content width at 40px, so it
   silently wrapped into a 3rd line mid-emphasis ("AI that earns" / "its place,"). 34px keeps
   ~8px of margin (measured ~319px) so the intended 2-line break holds at the 375px reference
   width and every wider phone; zero change above the existing 764px crossover into the vw curve. */
.home-hero h1{font-size:clamp(34px,4.45vw,64px)}
.prac-hero h1{font-size:clamp(40px,4.45vw,64px)}

/* ---- home hero: centered composition over grid texture ---- */
.home-hero{align-items:center;justify-content:center;min-height:calc(100svh - var(--nav-h))}
.home-hero .hero-in{text-align:center;max-width:880px;margin:0 auto;padding:0 24px 40px}
.home-hero .lede{margin-left:auto;margin-right:auto;max-width:56ch}
.home-hero .hero-cta{justify-content:center}
.home-hero .glow{background:
  radial-gradient(52% 46% at 50% 18%,color-mix(in oklab,var(--c) 13%,transparent),transparent 72%),
  radial-gradient(46% 40% at 50% 46%,color-mix(in oklab,var(--c) 10%,transparent),transparent 70%),
  radial-gradient(120% 66% at 50% 100%,transparent 40%,rgba(0,0,0,.5) 100%)}
.home-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(72% 70% at 50% 36%,#000 30%,transparent 100%);
  mask-image:radial-gradient(72% 70% at 50% 36%,#000 30%,transparent 100%)}

/* ---- button grammar: sentence-case, filled gradient primary (nav .as-cta stays mono).
   The primary fill ADAPTS to the page: pillar pages define --grad-pillar, so aiPlan
   buttons are green, aiBuild orange, aiLearn purple; home/company pages fall back
   to the blue brand gradient (Mano ruling 2026-07-20). ---- */
.btn{font-family:var(--f-sans);font-size:14px;font-weight:600;letter-spacing:0;
  text-transform:none;padding:12px 22px}
.btn-primary{background:var(--grad-pillar,var(--grad-brand));color:#0a0a0a}
.btn-primary:hover{filter:brightness(.92);transform:translateY(-1px)} /* own color, slightly darker (Mano 07-24) */
.home-cta .btn-primary{background:#0a0a0a;color:#fff;filter:none}

/* ---- notes/insight cards: photo thumbs ---- */
.note-img{background:#0d0f12}
.note-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.95;filter:saturate(1.02) brightness(1.14)}
.note:hover .note-img img{opacity:1}
.note-meta{display:flex;align-items:center;gap:10px;margin-top:12px;
  font-family:var(--f-mono);font-size:11px;color:var(--tx-2)}
.note-meta .avatar{width:20px;height:20px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:#14171c;border:1px solid var(--ln-2);
  font-size:8px;color:var(--tx-1)}

/* ---- insights page ---- */
.in-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ln-1);
  min-height:clamp(520px,74vh,700px);display:flex;align-items:center}
.in-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%}
.in-hero h1{font-size:clamp(40px,4.45vw,64px);margin:20px 0 22px}
.in-hero .sig{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;
  border-top:1px solid var(--ln-2)}
.in-hero .sig>div{padding:18px 18px 4px 0;border-left:1px solid var(--ln-2);padding-left:18px}
.in-hero .sig>div:first-child{border-left:0;padding-left:0}
.in-hero .sig .k{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c)}
.in-hero .sig .v{font-size:13.5px;color:var(--tx-2);margin-top:8px;line-height:1.5}
.in-visual{position:relative;align-self:stretch;min-height:420px}
.in-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
  -webkit-mask-image:radial-gradient(85% 85% at 60% 45%,#000 40%,transparent 100%);
  mask-image:radial-gradient(85% 85% at 60% 45%,#000 40%,transparent 100%)}
/* fallback render: darkened + vignetted so Pluto melts into the page instead of sitting in a
   hard light card box (Mano 07-23: "cuts off because it's in a box" — blend it) */
.in-visual.is-card img{opacity:.9;filter:brightness(.5) saturate(1.08);
  -webkit-mask-image:radial-gradient(56% 56% at 52% 46%,#000 32%,transparent 74%);
  mask-image:radial-gradient(56% 56% at 52% 46%,#000 32%,transparent 74%);
  border-radius:0;border:0}
.in-visual.is-card{overflow:visible}
/* ---- Insights hero: FULL-BLEED cinematic light-bar background (moved off home), copy on top ----
   (Mano 2026-07-22: the light bar must be the whole background, not a panel on the right.) */
.in-hero.is-cine-hero{background:#050608}
.in-hero.is-cine-hero .wrap{grid-template-columns:1fr;position:relative;z-index:3}
.in-hero.is-cine-hero .in-hero-copy{max-width:640px}
/* 2026-07-24: light-bar restored as the BACKGROUND while Pluto keeps the hero — copy and the
   stage/scene stack over the clip; the clip's own ::after scrims keep the left copy readable */
.in-hero.has-lightbar .wrap{position:relative;z-index:3;pointer-events:none} /* no links in this copy; lets the cursor reach Pluto's scene */
.in-hero.has-lightbar .in-stage{z-index:1}
/* readability well: dark under the left copy, clearer toward the right where the streaks read */
.in-hero.is-cine-hero .hero-well{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,8,.92) 0%,rgba(5,6,8,.66) 34%,rgba(5,6,8,.2) 60%,rgba(5,6,8,.08) 100%),
    linear-gradient(0deg,#050608 0%,rgba(5,6,8,.2) 22%,transparent 44%)}
.in-filter{position:sticky;top:var(--nav-h);z-index:5;background:color-mix(in oklab,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ln-1)}
.in-filter .wrap{display:flex;align-items:center;gap:26px;padding-top:0;padding-bottom:0}
.in-filter button{background:none;border:0;cursor:pointer;font-family:var(--f-sans);
  font-size:14px;color:var(--tx-2);padding:16px 2px 14px;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:7px}
.in-filter button:hover{color:var(--tx-0)}
.in-filter button.on{color:var(--tx-0);border-bottom-color:var(--c)}
.in-filter .n{font-family:var(--f-mono);font-size:10px;padding:2px 6px;border-radius:3px;
  background:#14171c;border:1px solid var(--ln-2);color:var(--tx-2)}
.in-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.in-count{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2)}

/* ---- about page ---- */
.ab-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ln-1);
  min-height:clamp(480px,64vh,640px);display:flex;align-items:center;justify-content:center}
.ab-hero .in{text-align:center;max-width:820px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.ab-hero h1{font-size:clamp(40px,4.45vw,64px)}
.ab-hero .lede{margin:20px auto 30px;max-width:52ch}
.ab-hero .glow2{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(56% 50% at 50% 0%,color-mix(in oklab,var(--c) 14%,transparent),transparent 72%)}
.ab-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.ab-story h2{position:sticky;top:calc(var(--nav-h) + 32px)}
.ab-story .prose p{margin:0 0 18px;line-height:1.65}
/* :where() drops this to (0,0,1) so it still colours ordinary <strong> but stops outranking
   a keyword that carries its OWN colour. Written the obvious way it was (0,2,1) and silently
   killed .k-plan / .k-build / .k-learn on this page — the practice names rendered plain white
   despite the rule existing since 2026-07-24. Third instance of this exact specificity trap in
   this stylesheet; when a generic rule sets a property a specific class also sets, wrap the
   ancestor part in :where(). */
:where(.ab-story .prose) strong{color:var(--tx-0)}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:64px}
.mv-card{background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4);padding:28px}
.mv-card h3{font-size:20px;color:var(--tx-0);margin:14px 0 10px}
.mv-card>p{font-size:14.5px;color:var(--tx-2);margin:0 0 18px}
.mv-row{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--ln-1)}
.mv-row .ic{width:30px;height:30px;flex:none;border-radius:var(--r-2);background:#14171c;
  border:1px solid var(--ln-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;color:var(--c)}
.mv-row .t{font-size:14.5px;font-weight:600;color:var(--tx-0)}
.mv-row .d{font-size:13px;color:var(--tx-2);margin-top:3px;line-height:1.5}
/* dotted WORLD map (Mano 2026-07-24): reveriext-style — the whole world dimly stippled,
   only the served regions lit. Philippines (home base) + Canada, each labeled. */
.ab-map{position:relative;aspect-ratio:2.6/1;width:100%;max-width:1000px;height:auto;margin:34px auto 0}
.ab-map canvas{position:absolute;inset:0;width:100%;height:100%}
/* served-region marker: a small filled square + a pulsing square ring, per-region colour
   (reveriext about-us style — the name lives in the card below, not on the map) */
.ab-pin{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;z-index:3;pointer-events:none}
/* static bracket ring: always readable, even in a still */
.ab-pin::before{content:"";position:absolute;inset:0;border-radius:5px;border:1px solid var(--pin);opacity:.5}
.ab-pin-dot{position:absolute;inset:7px;border-radius:2px;background:var(--pin);box-shadow:0 0 12px 3px var(--pin)}
.ab-pin-dot::after{content:"";position:absolute;inset:-7px;border-radius:5px;border:1px solid var(--pin);
  animation:abPinPulse 2.6s ease-out infinite}
.ab-pin--ph{--pin:#4FA8FF}.ab-pin--ca{--pin:#4ADE9C;opacity:.85}
@keyframes abPinPulse{0%{transform:scale(.8);opacity:.8}100%{transform:scale(2.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.ab-pin-dot::after{animation:none;opacity:0}}
.ab-pin-label{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-1);background:color-mix(in oklab,var(--bg-2) 82%,transparent);border:1px solid var(--ln-2);
  border-radius:100px;padding:4px 10px;backdrop-filter:blur(6px)}
@media(max-width:640px){.ab-pin{width:14px;height:14px}.ab-pin-dot{inset:5px}.ab-pin-label{display:none}}
.loc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:18px;justify-content:center}
.loc-card{display:flex;gap:12px;align-items:center;background:var(--bg-2);
  border:1px solid var(--ln-2);border-radius:var(--r-3);padding:16px 18px}
.loc-card .dot{width:8px;height:8px;border-radius:2px;background:var(--c);flex:none}
.loc-card .t{font-size:14.5px;font-weight:600;color:var(--tx-0)}
.loc-card .d{font-family:var(--f-mono);font-size:11px;color:var(--tx-2);margin-top:3px}
/* about — disciplines grid (no faces, no headcount; reads as a full team) */
.disc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px;max-width:980px;
  margin-left:auto;margin-right:auto}
.disc-card{background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4);padding:26px 26px 24px;
  position:relative;overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.disc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:color-mix(in oklab,var(--c) 70%,transparent)}
.disc-card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--c) 40%,transparent)}
.disc-card .ic{font-family:var(--f-mono);font-size:13px;color:var(--c)}
.disc-card .t{font-size:18px;font-weight:600;color:var(--tx-0);margin-top:12px}
.disc-card .d{font-size:14px;color:var(--tx-2);margin-top:9px;line-height:1.6}
.disc-card .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.disc-card .tags span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--tx-1);
  background:var(--bg-2);border:1px solid var(--ln-2);border-radius:100px;padding:4px 10px}
.disc-join{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  max-width:980px;margin:22px auto 0;text-align:left;background:var(--bg-1);border:1px solid var(--ln-2);
  border-radius:var(--r-4);padding:28px 32px}
.disc-join h3{font-size:20px;color:var(--tx-0);margin:12px 0 8px}
.disc-join .muted{font-size:14.5px;line-height:1.6;max-width:52ch;margin:0}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ln-1);
  border:1px solid var(--ln-1);margin-top:52px}
.val{background:var(--bg);padding:26px 22px}
.val .ic{font-family:var(--f-mono);font-size:13px;color:var(--c)}
.val .t{font-size:15.5px;font-weight:600;color:var(--tx-0);margin-top:12px}
.val .d{font-size:13px;color:var(--tx-2);margin-top:7px;line-height:1.55}

/* ---- contact page ---- */
.ct-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.ct-left h1{font-size:clamp(40px,4.45vw,64px);margin:20px 0 24px}
.ct-left p{line-height:1.65;margin:0 0 16px;max-width:46ch}
.ct-reach{display:flex;gap:22px;align-items:baseline;margin-top:34px;flex-wrap:wrap}
/* second reach row (click-to-chat) sits tighter under the email row */
.ct-reach + .ct-reach{margin-top:14px}
.ct-reach a + a{position:relative}
.ct-reach a + a::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;
  border-radius:1px;background:var(--ln-3);transform:translateY(-50%)}
.ct-reach .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2)}
.ct-reach a{font-family:var(--f-mono);font-size:13px;color:var(--c)}
.ct-form{background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4);
  padding:34px;border-bottom:2px solid color-mix(in oklab,var(--c) 55%,transparent)}
/* each field is its own group: label sits tight to its box, a clear gap separates groups.
   row2 grids by field-GROUP (label+input as one cell) so the two inputs always align even when
   one label is longer (Mano 07-25: make the spacing organized + easy to scan). */
.ct-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:22px}
.ct-form .row2>div{display:flex;flex-direction:column}
.ct-form .row2:first-of-type{margin-top:0}
.ct-form label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-2);margin:0 0 8px;line-height:1.2}
/* standalone (full-width) labels get the group gap above them */
.ct-form>label{margin-top:22px}
.ct-form .row2>div>label{margin-top:0}
.ct-form input,.ct-form select,.ct-form textarea{width:100%;box-sizing:border-box;margin-top:auto;
  background:var(--bg);border:1px solid var(--ln-2);border-radius:var(--r-2);color:var(--tx-0);
  font-family:var(--f-sans);font-size:14.5px;padding:13px 14px;outline:none;
  transition:border-color .15s ease}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{
  border-color:color-mix(in oklab,var(--c) 60%,transparent)}
.ct-form textarea{min-height:130px;resize:vertical}
/* The Timeline dropdown was the one native control left on the site (Mano 2026-07-28: "a
   generic shitty box"). It already carried our background and border, but without
   appearance:none the browser paints its own chrome straight over the top — on macOS that
   is the grey gradient pill with the tiny stepper arrows, which is why it was the single
   element on a black bespoke form that looked like a 2009 OS widget. Reset it and draw our
   own chevron in the same grey as the labels. The open list is still drawn by the OS; the
   option colours below are what the browsers that DO honour them will use. */
.ct-form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  padding-right:40px;background-repeat:no-repeat;background-position:right 15px center;
  background-size:11px 7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23959aa2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ct-form select:hover{border-color:var(--ln-3)}
.ct-form select option{background:#0b0d11;color:#f5f5f4}
.ct-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ct-form label.ct-pill,.ct-pill{display:flex;align-items:center;gap:8px;justify-content:center;
  cursor:pointer;margin:0;text-transform:none;letter-spacing:.02em;
  background:var(--bg);border:1px solid var(--ln-2);border-radius:var(--r-2);
  font-family:var(--f-mono);font-size:12px;color:var(--tx-1);padding:12px 8px;
  transition:border-color .15s ease,color .15s ease}
.ct-pill input{display:none}
.ct-pill .pd{width:6px;height:6px;border-radius:2px;background:var(--pc,#8a8d94);flex:none}
.ct-pill.on{border-color:color-mix(in oklab,var(--pc,#fff) 60%,transparent);color:var(--tx-0)}
.ct-agree{display:flex;gap:10px;align-items:flex-start;margin:20px 0 22px;
  font-family:var(--f-mono);font-size:11.5px;color:var(--tx-2);line-height:1.6}
.ct-agree input{margin-top:2px}
.ct-agree a{color:var(--c);text-decoration:underline;text-underline-offset:2px}

/* ---- article template ---- */
.ar-hero{padding:96px 0 26px;max-width:820px;margin:0 auto}
.ar-hero h1{font-size:clamp(34px,3.6vw,52px)}
/* image sits a step wider than the reading column, not a different layout entirely */
.ar-img{aspect-ratio:16/8;overflow:hidden;border-radius:var(--r-4);border:1px solid var(--ln-2);
  max-width:860px;margin:26px auto 0}
.ar-img img{width:100%;height:100%;object-fit:cover;opacity:.88}
.ar-body{max-width:700px;margin:0 auto;padding:44px 0 112px;font-size:16.5px}
.ar-body p{line-height:1.75;margin:0 0 20px;color:var(--tx-1)}
:where(.ar-body p) strong{color:var(--tx-0)}   /* same trap, same fix: article bodies use the keywords too */
/* first paragraph carries the weight of a standfirst */
.ar-body > p:first-of-type{font-size:19px;line-height:1.62;color:var(--tx-0)}
.ar-body h2{color:var(--tx-0);font-size:24px;margin:44px 0 14px;letter-spacing:-.01em}
.ar-body h2::before{content:"";display:block;width:26px;height:2px;background:var(--c);
  border-radius:2px;margin-bottom:16px;opacity:.85}
/* reading progress: thin brand rule pinned to the top of the viewport */
.ar-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;background:var(--c);
  box-shadow:0 0 8px var(--c);transition:width .08s linear;pointer-events:none}
@media(prefers-reduced-motion:reduce){.ar-prog{transition:none}}
.ar-note{border:1px dashed var(--ln-3);border-radius:var(--r-3);padding:14px 18px;
  font-family:var(--f-mono);font-size:12px;color:var(--tx-2);margin-bottom:30px}

/* ---- pillar hero photo layer (the reveriext move: large darkened photo on the right,
   fading into the black; graceful absence via onerror) ---- */
.prac-hero .hero-photo{position:absolute;inset:0;z-index:0;pointer-events:none}
.prac-hero .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:65% center;
  opacity:.5;filter:saturate(.78) brightness(.88);
  -webkit-mask-image:linear-gradient(90deg,transparent 24%,rgba(0,0,0,.45) 44%,#000 68%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 24%,rgba(0,0,0,.45) 44%,#000 68%,#000 100%)}
/* seam killer: page black bleeds INTO the photo's left edge and the pillar accent carries
   ONTO the photo, so the left glow and the image share the transition zone instead of
   meeting at a visible edge (Mano 07-23: "blend between those two photos seamless") */
.prac-hero .hero-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,var(--bg) 0%,color-mix(in oklab,var(--bg) 55%,transparent) 24%,transparent 54%),
    radial-gradient(72% 62% at 68% 30%,color-mix(in oklab,var(--c) 9%,transparent),transparent 70%)}
.prac-hero .hero-photo::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 55%,var(--bg) 98%)}
@media(max-width:900px){.prac-hero .hero-photo{inset:0;opacity:.7}}

/* interactive flow-field hero: owned WebGL liquid-light, sits above the grid/photo,
   below the copy (z2). Cursor-reactive; hides .home-photo on success (hero-flow.js). */
.home-hero canvas.flow{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;display:block}
/* Central dark WELL behind the copy: keeps the middle calm/subtle so the eye lands on the headline,
   while the clip's motion + colour glow through AROUND the text at the edges (Mano's comp note). */
.home-hero.has-flow::after,.home-hero.has-cine::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 56% at 50% 46%,rgba(4,5,7,.9),rgba(4,5,7,.62) 40%,rgba(4,5,7,.16) 66%,transparent 82%)}

/* ===== THE HERO LUME — the room light, at hero scale (2026-07-27) =====
   Mano's two rulings this session land here. Insights: the light bars go, the same owned
   room light carries that hero instead. About: the unprovenanced Spline scene goes, and
   that hero folds into this same light. So the site now has ONE background idea in three
   sizes — ambient behind every page (.pres-room), hero-scale here, and a pool on the
   cursor — instead of three unrelated treatments.

   Insights lineage, so nobody rebuilds a rejected thing: a 9.4MB MotionSites clip → the
   same equalizer rebuilt as our own shader (hero-field.js "bars") → this. His verdict on
   the bars was precise: "pretty ugly, but the transition looks good and movement is nice
   and smooth." The bars are gone; the two things he named are kept.

   Costs nothing: no canvas, no WebGL, no script, no request. Two elements' worth of CSS
   replaced ~1KB of shader on one page and a third-party 3D runtime on the other. */

/* the stacking well the lume, the grid and the readability scrim all live in */
.in-hero .hero-cine{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

/* THE LIGHT ITSELF. Two stacked radials, not one: a single soft falloff scaled to hero size
   reads as fog rather than as a light — measured on the first pass, the whole upper half of
   Insights went flat grey. A tight bright core inside a wide ambient bloom is what gives it
   a source and a direction, which is the only thing the bars were really doing.
   One rule, two hosts: the element itself on About (static), and each of the four stacked
   copies on Insights (cross-faded, see below). --lume-c is what varies between them. */
.hero-lume,.hero-lume.is-cycle > i{
  background:
    radial-gradient(34% 36% at 50% 48%,
      color-mix(in oklab,var(--lume-c) 46%,transparent) 0%,
      color-mix(in oklab,var(--lume-c) 20%,transparent) 42%,
      transparent 74%),
    radial-gradient(50% 50% at 50% 50%,
      color-mix(in oklab,var(--lume-c) 17%,transparent) 0%,
      color-mix(in oklab,var(--lume-c) 8%,transparent) 40%,
      color-mix(in oklab,var(--lume-c) 3%,transparent) 68%,
      transparent 100%)}
.hero-lume{position:absolute;z-index:1;border-radius:50%;pointer-events:none;
  --lume-c:var(--c);                      /* default: the page's own accent */
  transform:translate(-50%,-50%);
  animation:heroLumeDrift 37s ease-in-out infinite}
/* transform only, so the drift never touches layout or paint — just the compositor */
@keyframes heroLumeDrift{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  33%{transform:translate(-54%,-47%) scale(1.07)}
  66%{transform:translate(-47%,-53%) scale(.97)}
}

/* INSIGHTS — off-centre right, where the bars used to cluster, so the headline still sits
   on clean ground. It CYCLES: this is the one page whose content is all three practices at
   once, and the 28s blue → green → orange → purple loop is the part of the old hero Mano
   actually liked. The cycle moved OFF a mix-blend-mode:color wash — that wash existed to
   recolour footage, and with nothing underneath to recolour it would only have fought the
   light's own hue. */
.in-hero .hero-lume{left:64%;top:50%;width:min(1360px,108%);height:142%}

/* THE PHOTOGRAPH (2026-07-28). Mano on the light-only version: "a little bit bland… it looks
   a little bit strange and out of place." He was right — a coloured blob is a gradient, not an
   idea. He asked for something quick and pretty that matches, and the answer was already in
   the repo: hero-home.jpg, licensed and logged, unused since About lost its fallback.
   Graded down hard and masked so it lives on the RIGHT half only, which keeps the headline,
   lede and the three signature columns on clean ground. The light still cycles behind it, so
   Insights stays part of the same system rather than becoming a page with a picture on it. */
.in-hero .hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:70% 45%;
  opacity:.62;filter:saturate(.92) brightness(.78) contrast(1.04);
  -webkit-mask-image:linear-gradient(90deg,transparent 6%,#000 46%,#000 100%),
    linear-gradient(0deg,transparent 0%,#000 26%,#000 82%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 6%,#000 46%,#000 100%),
    linear-gradient(0deg,transparent 0%,#000 26%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* with a photograph underneath it, the light is support rather than the subject */
.in-hero.has-lume .hero-lume{opacity:.55}
@media(max-width:760px){
  /* phone: the copy is full-width, so the photo drops to a top-corner accent like the light */
  .in-hero .hero-photo{object-position:82% 18%;opacity:.42;
    -webkit-mask-image:linear-gradient(0deg,transparent 34%,#000 88%);
    mask-image:linear-gradient(0deg,transparent 34%,#000 88%);
    -webkit-mask-composite:source-over;mask-composite:add}
}

/* HOW the cycle is built, because the obvious way is twice as expensive. Animating
   --lume-c inside the gradient's color-mix() repaints a 1360x944 gradient on EVERY frame:
   measured 33.3ms/frame against 16.7ms with the light removed, i.e. it halved the frame
   rate on its own. So instead: four fixed-colour copies of the same light, stacked, with
   only OPACITY animating. Opacity is compositor-only — no repaint, no layout, nothing on
   the main thread. Re-measured after the change; the numbers are in the session report.
   The four are offset by a quarter-cycle each, and the 20-25% fade windows line up so one
   is always fading out exactly as the next fades in — during that overlap both are on at
   half, which reads as the two colours briefly mixing rather than as a hard swap. */
/* the host paints nothing; its four children are the light. (0,2,0) beats the (0,1,0)
   gradient rule above, so this wins regardless of order in the file. */
.hero-lume.is-cycle{background:none}
/* will-change is load-bearing here, not a superstition. Without it these four layers get
   promoted and dropped as their opacity crosses 0, and the p95 frame during a scroll goes
   32.5ms; with it, 17.7ms — identical to the page with no light at all. Measured both ways. */
.hero-lume.is-cycle > i{position:absolute;inset:0;border-radius:50%;display:block;opacity:0;
  will-change:opacity;animation:heroLumeFade 28s linear infinite}
/* ...but four permanently-promoted layers is GPU memory a phone should not spend on a light.
   Below 900px the lume is a quarter the size and the cost it buys back is not worth the
   reservation, so the hint comes off. Same call as .pres-cursor in the presence block. */
@media(max-width:900px){.hero-lume.is-cycle > i{will-change:auto}}
.hero-lume.is-cycle > i:nth-child(1){--lume-c:#0084FF;animation-delay:0s}
.hero-lume.is-cycle > i:nth-child(2){--lume-c:#4ADE9C;animation-delay:-7s}
.hero-lume.is-cycle > i:nth-child(3){--lume-c:#FF8F4A;animation-delay:-14s}
.hero-lume.is-cycle > i:nth-child(4){--lume-c:#BF86FF;animation-delay:-21s}
@keyframes heroLumeFade{0%,20%{opacity:1}25%,95%{opacity:0}100%{opacity:1}}
/* The neutral white bloom was calibrated to sit ABOVE the bars as their light source. With
   the bars gone it only desaturates the light that replaced them into grey haze, so this
   hero drops it — the lume is its own source now. Every other .hero-cine keeps it. */
.in-hero.has-lume .hero-cine-glow{display:none}
/* On a phone the copy is full-width, so "off to the right" stops existing and the light
   lands square behind the lede. Pushed up into the corner instead, where it grazes the
   headline (large, white, unbothered) rather than sitting under body text. */
@media(max-width:760px){
  .in-hero .hero-lume{left:78%;top:24%;width:132%;height:76%}
}

/* ABOUT — centred copy, so the light is centred and high, reading as a source above the
   headline rather than a shape beside it. Static page accent, no cycle: About is the
   quiet page, and one cycling hero on the site is a signature where two is a habit. */
.ab-hero .hero-lume{left:50%;top:34%;width:min(1500px,120%);height:150%}

@media(prefers-reduced-motion:reduce){
  /* Both per-hero selectors have to be named. A bare `.hero-lume` is (0,1,0) and LOSES to
     `.in-hero .hero-lume` at (0,2,0) no matter where it sits in the file, so writing it the
     obvious way left the Insights colour cycle running under reduce — verified, not
     assumed. Same trap as `.presence > i.pres-cursor` in the presence block below. */
  .hero-lume,.in-hero .hero-lume,.ab-hero .hero-lume{animation:none}
  /* the four cross-fade children carry their own animation at (0,2,1) and are not covered
     by any selector above — under reduce they stop, and ONE of them stays lit so the hero
     is still a light rather than a black rectangle */
  .hero-lume.is-cycle > i{animation:none;opacity:0}
  .hero-lume.is-cycle > i:nth-child(1){opacity:1}
}
/* left + bottom dark gradients for readability (over our near-black bg #070b0a) */
.in-hero .hero-cine::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(5,6,8,.5) 0%,rgba(5,6,8,.12) 38%,transparent 60%),
    linear-gradient(0deg,#050608 2%,transparent 40%)}
/* central light-source glow, top area, soft-blurred. Neutral cool-white so it reads as a
   light bloom under EVERY phase of the brand-colour cycle (a fixed blue clashed on green/orange). */
.in-hero .hero-cine-glow{position:absolute;left:50%;top:-14%;transform:translateX(-50%);
  z-index:3;width:min(1200px,120%);height:52%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(224,236,255,.34),
    rgba(200,220,255,.12) 45%,transparent 72%);
  filter:blur(25px)}
/* three thin vertical grid lines at 25/50/75% (desktop only) */
.in-hero .hero-grid{position:absolute;inset:0;z-index:4;
  background:
    linear-gradient(90deg,transparent calc(25% - .5px),rgba(255,255,255,.06) 25%,transparent calc(25% + .5px)),
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.06) 50%,transparent calc(50% + .5px)),
    linear-gradient(90deg,transparent calc(75% - .5px),rgba(255,255,255,.06) 75%,transparent calc(75% + .5px))}
@media(max-width:760px){.in-hero .hero-grid{display:none}}
/* The bars used to give this hero its architecture. With a soft light in their place the
   three rules are the only straight edges left, so they carry a little more weight — still
   hairlines, just visible enough for the light to have something to fall across. */
.in-hero.has-lume .hero-grid{
  background:
    linear-gradient(90deg,transparent calc(25% - .5px),rgba(255,255,255,.10) 25%,transparent calc(25% + .5px)),
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.10) 50%,transparent calc(50% + .5px)),
    linear-gradient(90deg,transparent calc(75% - .5px),rgba(255,255,255,.10) 75%,transparent calc(75% + .5px));
  -webkit-mask-image:linear-gradient(0deg,transparent 2%,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(0deg,transparent 2%,#000 26%,#000 74%,transparent 100%)}

/* home hero photo: full-bleed ambient layer under glow/grid, radially masked to the center */
.home-hero .home-photo{position:absolute;inset:0;z-index:0;pointer-events:none}
.home-hero .home-photo img{width:100%;height:100%;object-fit:cover;opacity:.3;
  filter:saturate(.55) brightness(.72) contrast(1.04);
  -webkit-mask-image:radial-gradient(78% 74% at 50% 42%,#000 30%,transparent 100%);
  mask-image:radial-gradient(78% 74% at 50% 42%,#000 30%,transparent 100%)}

/* The home hero's fallback is no longer a photograph, it is Pluto himself (2026-07-26), so
   it has to be a docked figure standing on the platform rather than a full-bleed wash. It
   reuses .home-photo purely to inherit the existing hide-on-first-paint / reveal-on-failure
   wiring from spline-hero.js; everything visual is overridden here. Centred on the same
   point the .pe-disc platform is centred on, so the still lands where the live scene does. */
.home-hero .pluto-fallback{display:flex;align-items:flex-end;justify-content:center}
.home-hero .pluto-fallback img{width:auto;height:auto;max-height:52%;max-width:34vw;
  object-fit:contain;opacity:1;filter:none;-webkit-mask-image:none;mask-image:none;
  margin:0 calc(min(22vw,300px) - min(9vw,120px)) 8% auto}
@media(max-width:900px){
  .home-hero .pluto-fallback img{max-height:40%;max-width:52vw;margin:0 auto 10%}
}

/* ===== The dashboard demo on phones (Mano 2026-07-28) ==========================
   The demo is a desktop dashboard. Measured at 375px: its tab row is 414px wide, its
   table 480px, and its controls 27-32px tall against the 44px a thumb needs. It never
   broke the page (it scrolls inside its own box) but the one section whose whole job is
   proving "we build good software" arrived cut off at the edge and fiddly to press.
   Phones get a still rendered from the REAL demo at desktop width, and the caption says
   plainly that the live version is on desktop rather than pretending nothing changed.
   Desktop is untouched. The phone-native rebuild is the proper fix and is still owed. */
.dd-still{display:none}
.dd-try .dd-mob{display:none}
@media(max-width:900px){
  .home-dashdemo .frame{display:none}
  .dd-try .dd-desk{display:none}
  .dd-try .dd-mob{display:inline}
  .dd-still{display:block;margin-top:8px;text-decoration:none}
  .dd-still img{display:block;width:100%;height:auto;border-radius:var(--r-2);
    border:1px solid var(--ln-2);background:#fff}
  .dd-still-note{display:block;margin-top:12px;text-align:center;
    font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--tx-3);line-height:1.5}
}

/* ---- contact hero: hosts the glyph ripple (moved off home 2026-07-20) ---- */
.ct-hero{position:relative;overflow:hidden}
.ct-hero canvas.ripple{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.ct-hero .ct-wrap{position:relative;z-index:1}
.ct-hero .ct-form{background:color-mix(in oklab,var(--bg-1) 88%,transparent);
  backdrop-filter:blur(8px)}

/* ---- contact form polish (Mano 2026-07-20: even proportions, tidy agree row) ---- */
.ct-form .btn{width:100%;justify-content:center;padding:14px 24px;font-size:14.5px}
.ct-form .btn .ar{margin-left:2px}
.ct-pills{grid-auto-rows:1fr}
.ct-pill{min-height:44px;padding:10px 8px;font-size:11.5px;letter-spacing:.02em}
.ct-agree{align-items:center;font-family:var(--f-sans);font-size:12.5px;color:var(--tx-2);
  margin:22px 0 20px;line-height:1.5}
.ct-agree input{margin:0;width:15px;height:15px;flex:none;accent-color:var(--c)}
.ct-agree a{color:var(--tx-1);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ln-3)}
.ct-agree a:hover{color:var(--tx-0)}
/* the global p{max-width:66ch} left this line hugging the left edge while text-align:center
   centered it inside that narrower box — unclamp so it truly centers under the Send button */
.ct-form .muted{text-align:center;max-width:none}

/* ---- video hero knob: mounts ONLY when a source is set on the hero (data-video).
   The slot for the blue/orange light-beam loop (MotionSites "Luminex" direction). ---- */
.video-stage{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1.1s ease}
.video-stage.on{opacity:1}
.video-stage video{width:100%;height:100%;object-fit:cover}
.video-stage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,8,.42),rgba(5,6,8,.18) 40%,rgba(5,6,8,.66) 92%)}

/* ---- responsive for the new pages ---- */
@media(max-width:1000px){
  .in-hero .wrap{grid-template-columns:1fr}
  .in-visual{min-height:300px;order:-1}
  .in-grid{grid-template-columns:1fr 1fr}
  .ab-story{grid-template-columns:1fr}
  .ab-story h2{position:static}
  .mv-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr 1fr}
  .ct-wrap{grid-template-columns:1fr}
  .ct-pills{grid-template-columns:1fr 1fr}
  .disc-grid{grid-template-columns:1fr}
  .disc-join{flex-direction:column;align-items:flex-start;padding:24px}
  .loc-cards{grid-template-columns:1fr}
}
@media(max-width:640px){
  .in-grid{grid-template-columns:1fr}
  .in-hero .sig{grid-template-columns:1fr;gap:0}
  .in-hero .sig>div{border-left:0;padding-left:0}
  .values-grid{grid-template-columns:1fr}
  .ct-form .row2{grid-template-columns:1fr}
  .ct-form{padding:24px}
}
@media(max-width:700px){
  /* the filter bar scrolls inside itself; it must never widen the page */
  .in-filter .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:18px}
  .in-filter .wrap::-webkit-scrollbar{display:none}
  .in-filter button{flex:none;white-space:nowrap}
  #in-search{width:110px;flex:none;min-width:0}
}

/* ============================================================= REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .grain{display:none}
}

/* ============================================================= PORTFOLIO PAGE
   portfolio.html — case studies. Appended 2026-07-20 (review draft). Reuses
   .note / .stat-band / .logo-chip / .home-cta; only the case-specific bits below
   are new. Kept on the dark system; no light bands. */
.case{border-top:1px solid var(--ln-1);scroll-margin-top:80px}
/* wordmark name-plate centered on a card's image area (stands in for a real
   screenshot until Mano supplies one — the "logo-on-photo" card treatment) */
.case-plate{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  background:radial-gradient(80% 90% at 50% 30%,color-mix(in oklab,var(--c) 14%,transparent),transparent 65%)}
.case-plate .wm{font-family:var(--f-mono);font-weight:600;letter-spacing:.08em;
  font-size:clamp(24px,2.6vw,38px);color:var(--tx-0);text-transform:uppercase;
  text-shadow:0 2px 30px rgba(0,0,0,.55)}
/* honest [[placeholder]] marker — visually flags anything Mano must confirm */
.pf-ph{display:inline-block;font-family:var(--f-mono);font-size:11px;line-height:1.5;
  letter-spacing:.02em;color:var(--tx-3);border:1px dashed var(--ln-3);border-radius:var(--r-2);
  padding:3px 9px;text-transform:none}
.case-grid2{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start;margin-top:38px}
.case-block .ch{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-2)}
.case-list{margin-top:16px}
.case-list li{position:relative;padding-left:22px;margin:0 0 12px;color:var(--tx-1);
  font-size:15px;line-height:1.6}
.case-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:1px;background:var(--c)}
.stack-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.case-repitch{background:var(--bg-1);border:1px solid var(--ln-2);border-radius:var(--r-4);
  padding:28px 30px;margin-top:40px}
@media(max-width:820px){.case-grid2{grid-template-columns:1fr;gap:28px}}

/* ============================ PRODUCT DEMO DASHBOARD (#stack-demo) ============================ */
.home-dashdemo .dd-head{max-width:740px;margin:0 auto;text-align:center}
.home-dashdemo .dd-try{margin:26px 0 0;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.02em;color:var(--tx-2)}
.home-dashdemo .dd-try b{color:#8fd3ff;font-weight:500}

.dd{
  --surface:#fbfbfd; --card:#ffffff; --card-2:#f4f6fa;
  --ink:#181b20; --ink-2:#5b626c; --ink-3:#8a919c;
  --line:#e9ebf1; --line-2:#f0f2f6;
  --accent:#2e63ff; --accent-soft:#eaf0ff;
  --good:#12a150; --good-soft:#e7f6ec;
  --bad:#e5484d; --bad-soft:#fdecec;
  --warn:#c98a00; --warn-soft:#fbf3df;
  --ddr:14px;
  --dk-accent:#8fd3ff;
  --f-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  color:var(--ink-2);line-height:1.5;
}
.dd .stage{position:relative;margin-top:52px}
.dd .stage::before{content:"";position:absolute;inset:-8% 6% 12%;z-index:0;
  background:radial-gradient(60% 60% at 50% 0%,rgba(46,99,255,.28),rgba(46,99,255,0) 70%);filter:blur(30px)}
.dd .frame{position:relative;z-index:1;border-radius:20px;padding:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.4)}
.dd .app{background:var(--surface);border-radius:12px;overflow:hidden;color:var(--ink)}

.dd .topbar{display:flex;align-items:center;gap:14px;padding:11px 16px;background:var(--card);
  border-bottom:1px solid var(--line)}
.dd .brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:13.5px;color:var(--ink)}
.dd .brand .mark{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#2e63ff,#5b8bff);
  color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.dd .brand .chev{color:var(--ink-3);font-size:11px}
.dd .search{flex:1;max-width:320px;display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  background:var(--card-2);border:1px solid var(--line);border-radius:9px;color:var(--ink-3);font-size:12.5px}
.dd .search .k{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);
  background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.dd .top-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.dd .ddcta{display:flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:9px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:550;cursor:pointer;border:0;font-family:inherit}
.dd .ddcta:hover{background:#000}
.dd .icobtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;color:var(--ink-2);cursor:pointer;position:relative}
.dd .icobtn:hover{background:var(--card-2)}
.dd .icobtn .rd{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--bad)}
.dd .avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3a8f7a,#246b52);
  color:#fff;display:grid;place-items:center;font-size:11px;font-weight:650}

.dd .dbody{display:flex;min-height:576px}
.dd .side{width:190px;flex:none;background:var(--card);border-right:1px solid var(--line);
  padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.dd .side .sgroup{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 10px 6px}
.dd .ddnav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13px;
  color:var(--ink-2);cursor:pointer;border:0;background:none;width:100%;text-align:left;font-family:inherit}
.dd .ddnav .ni{width:15px;text-align:center;flex:none;color:var(--ink-3);font-size:13px}
.dd .ddnav:hover{background:var(--card-2);color:var(--ink)}
.dd .ddnav.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.dd .ddnav.active .ni{color:var(--accent)}
.dd .ddnav .badge{margin-left:auto;font-size:10.5px;font-weight:650;border-radius:20px;padding:1px 7px;font-family:var(--f-mono)}
.dd .badge.dk{background:var(--ink);color:#fff}
.dd .badge.rd{background:var(--bad);color:#fff}
.dd .side .dfoot{margin-top:auto;padding:10px;border-top:1px solid var(--line-2);font-size:11px;color:var(--ink-3);line-height:1.45}

.dd .dmain{flex:1;min-width:0;background:var(--surface);padding:18px 22px 24px;overflow:hidden}
.dd .greet{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.dd .greet h3{margin:0;font-size:19px;font-weight:680;letter-spacing:-.01em;color:var(--ink);font-family:inherit}
.dd .greet .sub{font-size:12.5px;color:var(--ink-3)}

.dd .sources{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;font-size:11px;color:var(--ink-3)}
.dd .sources .lbl{font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;font-size:9.5px}
.dd .chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:3px 10px 3px 8px;font-size:11px;color:var(--ink-2)}
.dd .chip .sw{width:8px;height:8px;border-radius:3px;flex:none}
.dd .chip.live .sw{box-shadow:0 0 0 3px rgba(18,161,80,.14)}

.dd .controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.dd .tabs{display:flex;gap:4px;background:var(--card-2);border:1px solid var(--line);border-radius:11px;padding:3px}
.dd .tab{border:0;background:none;font-family:inherit;font-size:12.5px;color:var(--ink-2);
  padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.dd .tab:hover{color:var(--ink)}
.dd .tab.active{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.dd .tab .dot{width:7px;height:7px;border-radius:50%;flex:none}
.dd .ranges{margin-left:auto;display:flex;gap:3px;background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.dd .range{border:0;background:none;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);padding:5px 10px;border-radius:7px;cursor:pointer}
.dd .range:hover{color:var(--ink)}
.dd .range.active{background:var(--ink);color:#fff}

.dd .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 14px}
.dd .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--ddr);padding:14px 15px}
.dd .kpi .lab{font-size:11.5px;color:var(--ink-3);margin:0 0 9px}
.dd .kpi .ddval{font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.dd .kpi .delta{margin-top:9px;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.dd .delta.up{color:var(--good)} .dd .delta.down{color:var(--bad)} .dd .delta.warn{color:var(--warn)}
.dd .delta .pill{border-radius:20px;padding:1px 7px}
.dd .delta.up .pill{background:var(--good-soft)} .dd .delta.down .pill{background:var(--bad-soft)} .dd .delta.warn .pill{background:var(--warn-soft)}

.dd .row2{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin:0 0 14px}
.dd .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--ddr);padding:16px 17px}
.dd .panel .ph{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px}
.dd .panel .ph h4{margin:0;font-size:13.5px;font-weight:650;color:var(--ink);font-family:inherit}
.dd .panel .ph .meta{font-size:11.5px;color:var(--ink-3)}
.dd .chart-val{font-size:26px;font-weight:750;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;margin:2px 0}
.dd .chart-sub{font-size:11.5px;color:var(--ink-3);margin:0 0 6px;display:flex;gap:12px}
.dd .chart-sub b{font-weight:600}
.dd .chartwrap{position:relative}
.dd svg.area{display:block;width:100%;height:140px;overflow:visible}
.dd .tip{position:absolute;transform:translate(-50%,-140%);background:var(--ink);color:#fff;font-size:11px;
  padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;
  font-variant-numeric:tabular-nums;z-index:5}
.dd .tip b{color:var(--dk-accent)}
.dd .tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink)}

.dd .bd{display:flex;flex-direction:column;gap:13px;margin-top:8px}
.dd .bd-row .bd-top{display:flex;justify-content:space-between;font-size:12px;margin:0 0 5px;color:var(--ink-2)}
.dd .bd-row .bd-top b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.dd .track{height:7px;background:var(--card-2);border-radius:20px;overflow:hidden}
.dd .fill{height:100%;border-radius:20px;transition:width .5s cubic-bezier(.4,0,.1,1)}

.dd .pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dd .pcol{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:9px 9px 11px}
.dd .pcol .pc-h{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 9px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.dd .pcol .pc-h .n{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:20px;padding:0 7px}
.dd .lead{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin-bottom:7px;cursor:grab}
.dd .lead:last-child{margin-bottom:0}
.dd .lead:hover{border-color:#cfd6e4}
.dd .lead .ln{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:4px}
.dd .lead .lm{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3)}
.dd .lead .lm .sw{width:7px;height:7px;border-radius:2px;flex:none}
.dd .lead.warn{border-left:3px solid var(--warn)}
.dd .lead .flag{margin-top:6px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;
  color:var(--warn);background:var(--warn-soft);border-radius:20px;padding:2px 7px}

.dd .txwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--ddr);overflow:hidden}
.dd .txhead{display:flex;align-items:center;justify-content:space-between;padding:14px 17px 10px}
.dd .txhead h4{margin:0;font-size:13.5px;font-weight:650;color:var(--ink);font-family:inherit}
.dd .txhead a{font-size:12px;color:var(--accent);text-decoration:none;font-weight:550;cursor:pointer}
.dd .txhead .meta{font-size:11.5px;color:var(--ink-3)}
.dd table{width:100%;border-collapse:collapse;font-size:12.5px}
.dd thead th{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;text-align:left;padding:8px 17px;border-top:1px solid var(--line-2)}
.dd thead th.r,.dd tbody td.r{text-align:right}
.dd tbody td{padding:11px 17px;border-top:1px solid var(--line-2);color:var(--ink-2);vertical-align:middle}
.dd tbody tr:hover{background:var(--card-2)}
.dd td .who{color:var(--ink);font-weight:600}
.dd td .snip{color:var(--ink-3);font-size:11.5px}
.dd td .chan{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.dd td .chan .sw{width:8px;height:8px;border-radius:3px;flex:none}
.dd .status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.dd .status.done{background:var(--good-soft);color:var(--good)}
.dd .status.pending{background:var(--warn-soft);color:var(--warn)}
.dd .status.miss{background:var(--bad-soft);color:var(--bad)}
.dd .status.reply{background:var(--bad-soft);color:var(--bad)}
.dd .status .sd{width:6px;height:6px;border-radius:50%;background:currentColor}

.dd .dd-hidden{display:none!important}
/* views stack in one grid cell so the frame always sizes to the tallest view (Overview) and never jumps between tabs */
.dd .dd-views{display:grid}
.dd .dd-views > div{grid-column:1;grid-row:1;min-width:0;visibility:hidden;pointer-events:none}
.dd .dd-views > div.dd-active{visibility:visible;pointer-events:auto}
.dd .caption{position:relative;z-index:1;max-width:780px;margin:26px auto 0;text-align:center;font-size:13.5px;color:var(--tx-2);line-height:1.6}
.dd .caption b{color:var(--tx-1);font-weight:600}

@media(max-width:820px){
  .dd .kpis{grid-template-columns:repeat(2,1fr)}
  .dd .row2{grid-template-columns:1fr}
  .dd .side,.dd .search{display:none}
  .dd .pipe{grid-template-columns:repeat(2,1fr)}
  /* Needs-a-reply / Unified inbox / Today's schedule tables: measured 440px natural width vs a
     265px mobile card, and .txwrap's overflow:hidden was silently clipping the When + Status
     columns with no way to reach them (2026-07-23 Gaia polish pass — real data loss, not just
     tight spacing). Scroll the table only, so the txhead title/link stays put while the grid swipes. */
  .dd .tx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dd .tx-scroll table{min-width:480px}
}

/* ============================================================= COOKIE CONSENT
   reveriext-style bottom bar: a rounded pill, text + Privacy policy link, an accent Accept pill
   and a ghost Decline. Injected by site.js on every page until the visitor chooses. */
/* 2026-07-25: docked bottom-LEFT instead of bottom-centre. Now that the home hero opens on the
   live dashboard frame, a centred pill landed square on the middle of the product on first paint,
   which is the one thing the first screen exists to show. */
.ck-bar{position:fixed;left:22px;bottom:22px;transform:translateY(150%);z-index:120;
  display:flex;align-items:center;gap:26px;width:max-content;max-width:min(760px,calc(100vw - 44px));
  background:color-mix(in oklab,var(--bg-1) 90%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--ln-2);border-radius:999px;padding:13px 15px 13px 26px;
  box-shadow:0 22px 60px rgba(0,0,0,.5);opacity:0;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s ease}
.ck-bar.on{transform:translateY(0);opacity:1}
.ck-txt{margin:0;max-width:none;font-size:14px;color:var(--tx-1)}
.ck-txt a{color:var(--c);text-decoration:underline;text-underline-offset:2px}
.ck-txt a:hover{color:var(--tx-0)}
.ck-btns{display:flex;gap:10px;flex:none}
.ck-accept,.ck-decline{font-family:var(--f-sans);font-size:13.5px;font-weight:600;line-height:1;
  border-radius:999px;padding:10px 22px;cursor:pointer;border:1px solid transparent;
  transition:filter .15s ease,border-color .15s ease,color .15s ease}
.ck-accept{background:var(--grad-brand);color:#04121f}
.ck-accept:hover{filter:brightness(.94)}
.ck-decline{background:transparent;border-color:var(--ln-3);color:var(--tx-2)}
.ck-decline:hover{color:var(--tx-0);border-color:var(--tx-3)}
@media(max-width:640px){
  .ck-bar{left:16px;right:16px;width:auto;max-width:none;border-radius:16px;
    flex-direction:column;align-items:stretch;gap:14px;padding:18px 20px;transform:translateY(150%)}
  .ck-bar.on{transform:translateY(0)}
  .ck-btns{justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){.ck-bar{transition:opacity .3s ease}}

/* ============================================================= TIER 1 CRAFT
   (2026-07-25) Four additions, all reduced-motion aware:
   1. cursor-tracked accent wash on cards      2. hairline seams between sections
   3. odometer on the proof numbers            4. the four-dot mark as a scroll rail */

/* ---- 1. cursor-tracked accent wash -------------------------------------
   .hv-l is injected by site.js, so no HTML changes and no pseudo-element
   collisions with the card styles that already use ::before/::after. */
.hv-host{position:relative}
/* z-index only applies to positioned elements, so this promotes the card's children above
   the wash. `:where()` drops it to zero added specificity on purpose (2026-07-27): at its
   original weight of (0,2,0) it outranked plain class selectors and FORCED position:relative
   onto children the design had deliberately positioned. That is precisely how the package
   card's "Most popular" tag lost its `position:absolute` and rendered as a full-width slab
   across the top of the card. Anything with its own position must be able to win here. */
.hv-host > :where(*:not(.hv-l)){position:relative;z-index:1}
.hv-l{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .28s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    color-mix(in oklab,var(--c) 16%,transparent), transparent 68%)}
.hv-host:hover > .hv-l{opacity:1}
.hv-host{transition:transform .22s ease,border-color .22s ease,box-shadow .28s ease}
.hv-host:hover{box-shadow:0 10px 34px -18px color-mix(in oklab,var(--c) 60%,transparent)}
@media(prefers-reduced-motion:reduce){.hv-l{display:none}.hv-host:hover{box-shadow:none}}
@media(hover:none){.hv-l{display:none}}

/* ---- 2. hairline seams --------------------------------------------------
   A section boundary you feel rather than notice: 1px, fading out at both ends. */
.sec-seam{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--ln-2) 18%,var(--ln-2) 82%,transparent)}

/* ---- 4. four-dot scroll rail -------------------------------------------
   The logo mark doing a job: one dot per section, filling as you pass it. */
.dot-rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:13px;padding:12px 8px;
  opacity:0;transition:opacity .4s ease;pointer-events:none}
.dot-rail.on{opacity:1;pointer-events:auto}
.dot-rail button{display:block;width:8px;height:8px;padding:0;border-radius:2px;
  background:var(--ln-3);position:relative;
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease}
.dot-rail button:hover{transform:scale(1.35)}
.dot-rail button.past{background:color-mix(in oklab,var(--d) 55%,var(--ln-3))}
.dot-rail button.now{background:var(--d);transform:scale(1.45);box-shadow:0 0 10px 1px var(--d)}
/* label appears on hover, to the left, never covering content */
.dot-rail button::after{content:attr(data-label);position:absolute;right:20px;top:50%;
  transform:translateY(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-1);
  background:color-mix(in oklab,var(--bg-2) 88%,transparent);border:1px solid var(--ln-2);
  border-radius:100px;padding:4px 10px;opacity:0;transition:opacity .2s;pointer-events:none}
.dot-rail button:hover::after{opacity:1}
@media(max-width:1180px){.dot-rail{display:none}}
@media(prefers-reduced-motion:reduce){.dot-rail button{transition:none}}

/* ============================================================= PLUTO
   The recurring character (Mano ruling R2, 2026-07-25). Pluto used to be one big set piece:
   a live Spline scene filling the right half of the home hero. The hero now belongs to the
   dashboard (R1), so he is redistributed rather than retired — the same scene, rendered once
   to assets/img/pluto.png (see img/SOURCES.md), appearing small in six places for ~70KB
   instead of a ~1MB WebGL runtime.

   The one hard constraint: the scene's materials are near-black, so Pluto is a SILHOUETTE
   with cyan eyes. He reads beautifully on a light ground and vanishes on the dark page.
   Hence two variants: bare on the bright CTA bands, and .pluto-halo (an accent bloom in the
   page's own --c) everywhere else. */
.pluto{position:absolute;bottom:0;z-index:2;line-height:0;pointer-events:none;width:var(--pw,116px)}
.pluto img{display:block;width:100%;height:auto}
/* accent bloom for the dark grounds. drop-shadow follows the alpha channel, so the glow
   traces his actual outline instead of a box */
.pluto-halo::before{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:190%;height:150%;border-radius:50%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in oklab,var(--c) 26%,transparent),transparent 72%);
  filter:blur(14px)}
.pluto-halo img{filter:drop-shadow(0 0 10px color-mix(in oklab,var(--c) 55%,transparent))
  drop-shadow(0 0 26px color-mix(in oklab,var(--c) 22%,transparent))}
/* the ground he stands on: a thin lit ellipse, so he is placed rather than pasted */
.pluto-stand::after{content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  width:118%;height:12px;border-radius:50%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.30),transparent 70%)}
.pluto-halo.pluto-stand::after{background:radial-gradient(50% 50% at 50% 50%,
  color-mix(in oklab,var(--c) 40%,transparent),transparent 70%)}
/* idle breathing, 4px over 6s: enough to feel alive, not enough to pull the eye */
@media(prefers-reduced-motion:no-preference){.pluto img{animation:plutoIdle 6s ease-in-out infinite}}
@keyframes plutoIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* -- the closing CTA bands carried Pluto (home plus all three practice pages) until
   Mano's 2026-07-26 ruling: the bottom-left placement read as decoration on every page,
   so all four were removed. The bands keep position:relative for .glow2. */
.home-cta,.prac-cta{position:relative}

/* -- 5: the 404, the one page where a character does real work.
   overflow:hidden because .pluto-halo's bloom is 190% of his width and at 390px it pushed
   ~25px past the right edge, which the sweep caught as horizontal overflow. The band's
   height is auto, so nothing real can be clipped. */
.legal-hero{position:relative;overflow:hidden}
.pluto-404{right:clamp(16px,8vw,140px);bottom:6px;--pw:clamp(92px,13vw,168px)}
@media(max-width:860px){.pluto-404{--pw:86px;right:14px}}

/* -- 6: contact, at the foot of the copy column. The one moment a visitor is deciding
   whether a human is on the other end of the form. */
.pluto-ct-row{display:flex;align-items:flex-end;gap:20px;margin-top:34px}
.pluto-ct{position:relative;bottom:auto;--pw:96px;flex:none}
.pluto-ct-row p{margin:0 0 8px;font-size:14px;color:var(--tx-2);max-width:32ch;line-height:1.6}
@media(max-width:900px){.pluto-ct-row{margin-top:26px;gap:16px}.pluto-ct{--pw:78px}}

/* ============================================================= PRESENCE (2026-07-27)
   The spine of the presence pass — moves 1, 2, 3, 4, 9 built as ONE system rather than
   five separate tricks. Everything below is light and focus; nothing here moves layout.

   1 + 2  ONE light in two scales, living behind every page. The ROOM orb is anchored to
          whatever you are reading and carries that thing's accent (a pillar card's green,
          orange or purple; otherwise the page's own --c). The CURSOR orb is a smaller,
          dimmer pool of the same light attached to your pointer. Both are children of a
          single fixed layer at z-index:-1, so they sit above the page background and
          below every piece of content — no text is ever read through them.
   3      Headlines below the fold arrive a hair out of focus and sharpen (~420ms).
   4      Film grain. The canvas already existed and was a NO-OP: `overlay` blend against a
          near-black page multiplies to zero (measured stddev 0.000 across flat ground on
          2026-07-27). `screen` makes it read. Same cost it was already paying.
   9      Cross-document view transitions, so the eleven pages feel like one application.

   Budget: no library, no new request, transform + opacity only on the hot path, the rAF
   loop parks itself when the light has settled, and the whole layer is skipped under
   Save-Data. Reduced motion gets a single static light and no cursor pool. */

/* registered so the accent can be interpolated instead of snapping between sections */
@property --pres-c{syntax:'<color>';inherits:false;initial-value:#4FA8FF}

.presence{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  contain:layout paint}
.presence > i{position:absolute;top:0;left:0;display:block;border-radius:50%;
  transition:--pres-c 900ms cubic-bezier(.4,0,.2,1),opacity 900ms ease}
/* wider than tall on purpose: a shallow pool reads as light in a room, where a circle of
   the same area reads as a spotlight aimed at the page */
.pres-room{width:1680px;height:1120px;margin:-560px 0 0 -840px;will-change:transform;
  /* Calibrated against aiPlan's green, the most luminous of the four accents — set the
     level where green is tasteful and blue, orange and purple all land under it. */
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in oklab,var(--pres-c) 10%,transparent) 0%,
    color-mix(in oklab,var(--pres-c) 5%,transparent) 38%,
    color-mix(in oklab,var(--pres-c) 2%,transparent) 66%,
    transparent 100%)}
.pres-cursor{width:620px;height:620px;margin:-310px 0 0 -310px;opacity:0;will-change:transform;
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in oklab,var(--pres-c) 7%,transparent) 0%,
    color-mix(in oklab,var(--pres-c) 3%,transparent) 45%,
    transparent 100%)}
.pres-cursor.on{opacity:1}
/* A 1680px composited layer is ~7.5MB of GPU memory, which is not a phone's to spend for a
   light wider than the screen. The pool is hover-only and never even mounts a moving layer
   on touch, so only the room orb needs resizing. */
@media(max-width:900px){
  .pres-room{width:820px;height:700px;margin:-350px 0 0 -410px}
  .pres-cursor{will-change:auto}
}

/* 3 — out of focus, then sharp. Applied by JS only to headlines that start below the
   fold, so a headline already on screen is never touched and nothing can flash. Both
   classes are stripped once the transition ends, so the finished text carries no filter
   and keeps its normal subpixel rendering. */
.pres-sharp{opacity:0;filter:blur(8px);transform:translateY(7px);will-change:filter,opacity,transform}
.pres-sharp.in{opacity:1;filter:blur(0);transform:none;
  transition:opacity 420ms cubic-bezier(.22,.61,.36,1),
             filter 460ms cubic-bezier(.22,.61,.36,1),
             transform 560ms cubic-bezier(.22,.61,.36,1)}

/* 9 — cross-dim between pages. The outgoing page leaves faster than the incoming one
   arrives, so the seam passes through a darker beat instead of a flat crossfade. No JS,
   no navigation interception: browsers without cross-document view transitions simply
   do what they do today. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pres-dim-out 200ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:pres-dim-in 420ms cubic-bezier(0,0,.2,1) both}
@keyframes pres-dim-out{to{opacity:0}}
@keyframes pres-dim-in{from{opacity:0}}

@media(prefers-reduced-motion:reduce){
  /* `.presence > i` is (0,1,1) and would outrank a bare `.pres-cursor`, so this has to be
     written at matching weight or the rule silently does nothing */
  .presence > i.pres-cursor{display:none}
  .pres-sharp,.pres-sharp.in{opacity:1;filter:none;transform:none;transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}