/* Self-hosted variable fonts. Previously a render-blocking Google Fonts
   stylesheet: HTML -> CSS (51ms) -> woff2 (70ms), so the swap landed DURING the
   hero's entry animation. One file per family covers every weight. */
@font-face{
  font-family:"Geist";src:url("https://cdn.prod.website-files.com/6789021db7b1eb2a4e86ccba/6a9722281e0c8bee7ef06d13_geist-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Geist Mono";src:url("https://cdn.prod.website-files.com/6789021db7b1eb2a4e86ccba/6a97237464abdd5b17b83f98_geistmono-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* ============================================================
   AccountsIQ · First Light
   Two registers by design: the film's night, then paper.
   ============================================================ */
:root{
  --paper:#FAFAF8;
  --ink:#12141A;
  --ink-soft:#5B6068;
  --line:#E7E7E2;
  --night:#070B16;
  /* motion scale. Everything new uses these; the five specific incoherences
     the audit found are fixed below, but existing values within ~30ms of a step
     are left alone rather than churning an approved feel. */
  --t-1:.2s; --t-2:.3s; --t-3:.45s; --t-4:.6s; --t-5:.8s;
  --ease:cubic-bezier(.16,1,.3,1);

  --blue:#426EFF;      /* brand blue: logo, glows, decoration (no text on it) */
  --blue-cta:#3457E8;  /* AA-safe accent for anything carrying white text (5.72:1) */
  --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",monospace;

  /* one type ladder; tracking tightens as size grows */
  --fs-d1:clamp(2.7rem,6vw,5.2rem);        /* hero headline */
  --fs-d2:clamp(1.8rem,3.8vw,3.3rem);      /* scene leads */
  --fs-d3:clamp(3.1rem,8vw,7.4rem);        /* the statement */
  --fs-d4:clamp(1.9rem,4.2vw,3.6rem);      /* section display */
  --fs-lede:clamp(1.02rem,1.28vw,1.2rem);
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --radius:16px;
}
.aiq-fl,.aiq-fl *,.aiq-fl *::before,.aiq-fl *::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
.aiq-fl{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.aiq-fl :where(img,video){display:block;max-width:100%}
.aiq-fl :where(a){color:inherit;text-decoration:none}
::selection{background:var(--blue-cta);color:#fff}

.aiq-fl :where(h1,h2),.aiq-fl .d1,.aiq-fl .d2,.aiq-fl .d3,.aiq-fl .d4{font-weight:600;text-wrap:balance}
.d1{font-size:var(--fs-d1);line-height:1.02;letter-spacing:-.034em}
.d2{font-size:var(--fs-d2);line-height:1.06;letter-spacing:-.028em}
.d3{font-size:var(--fs-d3);line-height:.98;letter-spacing:-.038em}
.d4{font-size:var(--fs-d4);line-height:1.05;letter-spacing:-.03em}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink-soft);font-weight:400;max-width:38rem}

/* ---------------- the CTA pill (shared: finale) ---------------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 1.35rem;border-radius:999px;
  background:var(--blue-cta);color:#fff;font-weight:500;font-size:.95rem;
  letter-spacing:-.01em;white-space:nowrap;
  transition:transform .18s ease, background .3s ease;
}
.pill:hover{background:#2647D6}
.pill:active{transform:scale(.98)}
@media (max-width:820px){
  .pill{height:38px;padding:0 1.1rem;font-size:.9rem}
}

/* progress hairline: the film's own timeline, nothing else */
/* Host-page navbar offsets, measured at boot (see NAV OFFSETS in the script).
   --aiq-nav-h  the sticky offset for in-page sticky sections (platform nav,
                quote pin). Defaults to the 68px the design was drawn at.
   --aiq-nav-off how far the fixed progress bar sits below the top. 0 with no
                navbar, the navbar's height when the host page has one. */
.aiq-fl{--aiq-nav-h:68px;--aiq-nav-off:0px}
.prog{
  position:fixed;inset:var(--aiq-nav-off,0px) 0 auto 0;height:2px;z-index:41;
  background:var(--blue);transform-origin:0 50%;transform:scaleX(0);
  opacity:0;pointer-events:none;
}

/* ---------------- the film ---------------- */
#film{height:170svh;position:relative;background:var(--night)}
.film__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:var(--paper); /* the lights come on behind the shrinking film */
}
.shot__shadow{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  border-radius:26px;box-shadow:0 42px 90px -42px rgba(9,18,54,1);
}
.shot.is-card{border-radius:26px}
.shot{
  position:absolute;inset:0;overflow:hidden;
  transform-origin:50% 50%;
  will-change:transform;
  background:var(--night);
  /* the backdrop root for the flutes: it must CONTAIN the video, or the frost
     samples nothing but its own tint */
  isolation:isolate;
}
.shot video,.shot .shot__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.shot__poster{z-index:1;transition:opacity .5s ease}
.shot__poster.is-gone{opacity:0}
/* the static ladder: rungs 1..n sit on top of the poster and cross-fade with
   it. The poster's own .5s transition has to go in static mode, or every
   per-frame opacity write arrives half a second late. */
.shot__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0}
.shot.is-static .shot__poster{transition:none}
#film.is-static{height:130svh}

/* printed scenes over the film */
.hold{
  position:absolute;inset:0;z-index:3;display:flex;visibility:hidden;
  padding:0 var(--gutter);
}
.hold__box{position:relative;z-index:1;max-width:44rem;will-change:transform,opacity}
.hold::before{ /* directional grading, driven per frame by --scrim */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(var(--scrim,0)*.9);
}

/* the hero is the only copy on the film: H1, sub, buttons, centred */
.hold--hero{align-items:center;justify-content:center;text-align:center}
.hold--hero::before{background:radial-gradient(58% 46% at 50% 54%,rgba(4,8,20,.58) 0%,rgba(4,8,20,.30) 55%,rgba(4,8,20,0) 100%)}

.hold .ln{color:#fff;overflow:hidden}
.hold .ln--sub{
  font-size:var(--fs-lede);line-height:1.5;color:rgba(255,255,255,.76);
  font-weight:400;max-width:34rem;margin-top:1rem;overflow:visible;
}

/* ============ the arrival ============
   The page used to hard-cut: the nav, both logos, the sub and the CTA all
   appeared fully formed at frame 1 while only the two headline lines animated.
   This stages the landing on the surface that is already there, and it is gated
   on fonts.ready so the swap cannot land mid-rise. */
/* 1 Oct 2026: the arrival now runs in CSS from FIRST PAINT, not from the
   script's boot. PSI's filmstrip showed the poster painted at 1.2s and the hero
   sitting bare until the bundle booted at 4.3s, when the frost, the headline
   and the copy all arrived at once; that late change was most of a 10s Speed
   Index. Same staging, same easing, but compositor-only (transform/opacity),
   so a busy main thread can neither delay nor stutter it. The script still
   owns everything after it: its inline values at p=0 equal these end states. */
@keyframes heroUp{from{opacity:0;translate:0 14px}}
@media (prefers-reduced-motion:reduce){.hold--hero .ln,.hero__rate,.hero__sub,.hero__cta{animation:none}}
@keyframes lnRise{from{transform:translateY(112%)}}
.hold--hero{visibility:visible;--scrim:1}
.hold--hero .ln{animation:lnRise 1.1s cubic-bezier(.16,1,.3,1) .12s backwards}
.hold--hero .ln + .ln{animation-delay:.24s}
.hero__rate{animation:heroUp .9s cubic-bezier(.16,1,.3,1) .45s backwards}
.hero__sub{animation:heroUp .9s cubic-bezier(.16,1,.3,1) .62s backwards}
.hero__cta{animation:heroUp .9s cubic-bezier(.16,1,.3,1) .80s backwards}
/* the baked panelling: 13 flutes wide, 8 on a narrow screen (the script's own
   counts), so the frost is in the first frame instead of arriving at boot */
.slat[data-set="n"]{display:none}
@media (max-width:820px){.slat[data-set="d"]{display:none}.slat[data-set="n"]{display:block}}

/* hero scene */
.hero__h1{font-size:var(--fs-d1);line-height:1.02;letter-spacing:-.034em;color:#fff;font-weight:600}
/* the six-word H1 sits on two lines: a wider box and a step down from the display size */
.hold--hero .hold__box{max-width:60rem}
.hero__h1{font-size:clamp(2.3rem,4.6vw,4rem)}
.hero__h1 .ln{display:block}
.hero__sub{margin:1.25rem auto 0;font-size:var(--fs-lede);line-height:1.5;color:rgba(255,255,255,.78);max-width:30rem}
.hero__cta{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:2rem}
/* the interactive demo: it was a hairline underline on a bright plate and kept
   disappearing. Now a glass pill with a shimmer that crosses every few seconds. */
.hero__alt{
  position:relative;overflow:hidden;isolation:isolate;
  font-size:.95rem;font-weight:600;color:#fff;border:0;
  padding:.62rem 1.15rem;border-radius:100px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  transition:background .25s ease,box-shadow .25s ease;
}
.hero__alt:hover{background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.hero__alt::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  translate:-130% 0;animation:shimmer 4.2s var(--ease) 1.6s infinite;
}
@keyframes shimmer{0%{translate:-130% 0}26%,100%{translate:130% 0}}
@media (prefers-reduced-motion:reduce){.hero__alt::after{animation:none}}
/* ============ the ratings strip (Figma 3212:22273) ============
   Figma metrics kept exactly: 32px between the two chips, 8px inside one,
   a 16px star, a 14px/600/1.5 label with a dotted underline, and a 32px
   white disc holding a 20px mark. The family is the page's Geist, not the
   file's Inter, so the hero stays one typeface.
   Hidden unless the page opts in (see RATINGS in the script), which is why
   the images are lazy: a page without the meta tag fetches nothing. */
.hero__rate{display:none}
.aiq-rate .hero__rate{
  display:flex;align-items:center;justify-content:center;
  gap:32px;flex-wrap:wrap;margin:0 0 clamp(1rem,1.6vw,1.4rem);
}
.rate{display:inline-flex;align-items:center;gap:8px;height:32px}
.rate__star{display:block;width:16px;height:16px;flex:0 0 16px}
.rate__label{
  font-size:14px;font-weight:600;line-height:1.5;color:#fff;white-space:nowrap;
  text-decoration:underline;text-decoration-style:dotted;
  text-underline-position:from-font;text-decoration-skip-ink:none;
  text-shadow:0 1px 8px rgba(4,10,36,.45);
  transition:text-decoration-color .2s ease;
}
.rate__logo{
  display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:100px;
  background:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:transform .3s var(--ease);
}
.rate__logo img{display:block;width:20px;height:20px}
.rate:hover .rate__logo{transform:scale(1.06)}
.rate:hover .rate__label{text-decoration-color:rgba(255,255,255,.55)}
@media (max-width:640px){.aiq-rate .hero__rate{gap:18px}.rate__label{font-size:13px}}
.hero__alt:hover{border-color:#fff}

/* ---------------- the panelling ----------------
   The AccountsIQ frosted-flute panel (Figma 2529:44573, the insightsIQ hero
   component). The page opens on this surface with the film behind it; scroll
   defrosts it flute by flute from the centre out, then it is gone.

   Layer order and the split into three elements are both load-bearing:
   backdrop-filter and mix-blend-mode must never share an element (Safari drops
   the blend), and the frost can only sample what lives inside its backdrop
   root, which is why .shot (the element holding the video) is the isolate. */
.pan{position:absolute;inset:0;z-index:2;pointer-events:none}
.pan__tint{
  position:absolute;inset:0;
  /* 2026-09-04: was .41 top and bottom, which flattened the film to a single
     lavender wash — Emer could not recognise her own hero from it. The frost
     is the brand, the tint was only ever there to hold the white type, and the
     type already has its own radial scrim (.hold--hero::before). So the tint
     drops to a whisper and keeps a little more weight low, where the copy is. */
  background:linear-gradient(to bottom,rgba(146,138,255,.08),rgba(28,8,58,.16));
}
.pan__slats{position:absolute;inset:0;display:flex}
.pan__slats--v{flex-direction:column}
.slat__spec--v{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(214,228,255,.5) 46%,rgba(255,255,255,0) 100%)}
.slat{
  position:relative;flex:1 1 0;height:100%;
  will-change:opacity;
  /* --b varies flute to flute so this reads as separate panes, not one sheet */
  -webkit-backdrop-filter:blur(var(--b,8px)) saturate(1.15);
  backdrop-filter:blur(var(--b,8px)) saturate(1.15);
}
/* the Figma sheen, on its own child */
.slat__sheen{
  position:absolute;inset:0;mix-blend-mode:overlay;
  background-image:linear-gradient(-90deg,rgba(255,255,255,.008) 20%,rgba(40,40,40,.093) 123.62%,rgba(255,255,255,.008) 123.64%);
}
/* the specular band that travels just ahead of each clearing flute */
.slat__spec{
  position:absolute;inset:0;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(214,228,255,.5) 46%,rgba(255,255,255,0) 100%);
}

/* ---------------- the paper run: attio.com anatomy, AccountsIQ material ----------------
   Rebuilt 2026-08-31 from Emer's screen recording of attio.com (frames in
   _attio/). Their homepage system, reproduced detail for detail: a bordered
   hairline grid, blue-tinted label pills, two-tone statements, a sticky
   section nav driving a scrolling content column, a full dark chapter with an
   icon row and wireframe art, and a hatched ascending chart. Every word and
   image is AccountsIQ's own. */
:root{
  --pri:#FBFBFB; --sec:#F7F8FA; --hair:#E8E9EB; --hairsoft:#EFF0F2;
  --dark:#0C0C0D; --darkhair:#232325; --darkink:#F4F4F5; --darkgrey:#8A8A90;
  --grey:#676C76;               /* the second tone of every statement */
  --tint:#EEF1FE;               /* label pill ground */
  --at-shell:1400px;
}

/* the bordered grid: full-height vertical rules either side of every band */
.at-shell{
  width:min(var(--at-shell),92%);margin-inline:auto;
  border-inline:1px solid var(--hair);
}
.at-band{background:var(--pri)}
.at-band--alt{background:var(--sec)}
.at-band--seam{border-bottom:1px solid var(--hair)}
.at-pad{padding:clamp(3rem,7vh,5.5rem) clamp(1.25rem,3.4vw,3.25rem)}

/* label pill: blue tint, blue ink */
.at-label{
  display:inline-block;background:var(--tint);color:#3457E8;
  font-size:.8rem;font-weight:500;letter-spacing:-.005em;
  padding:.3rem .68rem;border-radius:7px;
}
/* the two-tone statement: one size, one weight, two colours */
.at-state{
  margin-top:1.5rem;font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.16;
  letter-spacing:-.022em;font-weight:500;max-width:30ch;text-wrap:balance;color:var(--ink);
}
.at-state .g{color:var(--grey)}
.at-lead{font-size:clamp(1.02rem,1.2vw,1.12rem);line-height:1.5;color:var(--grey);margin-top:1rem;max-width:34rem}

/* ============ persona wash (Platform intro) ============
   At rest this is invisible and the section renders exactly as before. Picking
   a role washes ONLY this intro box and swaps its two supporting lines; the
   H2/H3 headings never change, so the indexed copy is untouched. */
.plat-wash{position:relative}
.plat-wash__panel{
  position:absolute;inset:-1.2rem calc(-1 * clamp(1.25rem,3.4vw,3.25rem)) calc(-1 * clamp(3rem,7vh,5.5rem)) calc(-1 * clamp(1.25rem,3.4vw,3.25rem));z-index:0;overflow:hidden;
  opacity:0;background:linear-gradient(180deg,var(--p-deep,#253AAE) 0%,var(--p-base,#162C5E) 100%);
  transition:opacity .34s cubic-bezier(.22,1,.36,1);
}
.plat-wash.is-washed .plat-wash__panel{opacity:1}
.plat-wash .plat-labelrow,.plat-wash .at-state,.plat-wash .at-lead{position:relative;z-index:1}
.plat-wash__pan{position:absolute;inset:0;display:flex;overflow:hidden}
.plat-wash__pan i{
  position:relative;flex:1 1 0;overflow:hidden;
  border-right:1px solid rgb(from var(--p-pale,#C2DCFF) r g b / .10);
  background:linear-gradient(180deg,
    rgb(from var(--p-mid,#2A42D8) r g b / calc(.30 * var(--k,1))) 0%,
    rgb(from var(--p-deep,#253AAE) r g b / calc(.16 * var(--k,1))) 62%,
    rgb(from var(--p-base,#162C5E) r g b / 0) 100%);
}
/* a pale front slides down each flute, staggered — the persona-page wave, but a
   soft blue front rather than white so it never washes out the white type */
.plat-wash__pan i::after{
  content:"";position:absolute;left:0;right:0;top:-32%;height:52%;
  background:linear-gradient(180deg,
    rgb(from var(--p-pale,#C2DCFF) r g b / .20) 0%,
    rgb(from var(--p-pale,#C2DCFF) r g b / 0) 100%);
  animation:platWave 9s ease-in-out infinite;animation-delay:calc(var(--i,0) * -0.72s);
  will-change:transform;
}
@keyframes platWave{0%,100%{transform:translateY(0)}50%{transform:translateY(190%)}}
.plat-labelrow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.plat-pills{display:inline-flex;flex-wrap:wrap;gap:.4rem}
.plat-pill{
  font:inherit;font-size:.78rem;font-weight:500;letter-spacing:-.005em;
  padding:.3rem .64rem;border-radius:7px;border:1px solid var(--hair);
  background:#fff;color:var(--grey);cursor:pointer;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.plat-pill:hover{color:var(--ink);border-color:rgb(from var(--p-mid,#2A42D8) r g b / .5)}
.plat-swap{transition:opacity .26s ease}
.plat-swap.out{opacity:0}
.plat-wash.is-washed .at-label{background:#fff}
.plat-wash.is-washed .at-state{color:#fff}
.plat-wash.is-washed .at-state .g,
.plat-wash.is-washed .at-state:hover .g{color:rgba(255,255,255,.86)}
.plat-wash.is-washed .at-lead{color:rgba(255,255,255,.82)}
.plat-wash.is-washed .plat-pill{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.82)}
.plat-wash.is-washed .plat-pill:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55);color:#fff}
.plat-wash.is-washed .plat-pill[aria-pressed=true]{background:#fff;border-color:#fff;color:var(--p-base,#162C5E)}
@media (prefers-reduced-motion:reduce){.plat-wash__panel,.plat-swap{transition:none}.plat-wash__pan i::after{animation:none}}

/* bordered pill with the travelling arrow */
.at-more{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.5rem;
  background:#fff;border:1px solid var(--hair);border-radius:8px;
  padding:.44rem .8rem;font-size:.86rem;font-weight:500;color:var(--ink);
  transition:border-color .2s ease,background .2s ease;
}
.at-more::after{content:"\2192";transition:translate var(--t-1) var(--ease)}
.at-more:hover{border-color:#D7D8DC;background:#F4F5F7}
.at-more:hover::after{translate:3px 0}


/* ============ 2 · logo wall: a bordered grid ============ */
.at-logos{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.at-logo{
  position:relative;display:grid;place-items:center;min-height:132px;padding:1.4rem;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.at-logo:nth-child(4n){border-right:0}
.at-logo:nth-child(n+5){border-bottom:0}
/* bigger: max-height so wordmarks and marks both sit right, ~1.7x the old size */
.at-logo img{max-height:38px;max-width:78%;width:auto;opacity:.8;filter:grayscale(1);transition:opacity .25s ease,filter .25s ease}
.at-logo:hover img{opacity:1;filter:grayscale(0)}
/* the "+" that opens a customer's stat card. Matches AccountsIQ's own strip. */
.at-logo__more{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid var(--hair);color:#3457E8;
  box-shadow:0 4px 14px -6px rgba(20,24,40,.3);
  transition:transform .2s var(--ease),background .2s ease,color .2s ease,border-color .2s ease;
}
.at-logo__more svg{width:18px;height:18px}
.at-logo__more:hover,.at-logo__more:focus-visible{background:#3457E8;color:#fff;border-color:#3457E8;transform:scale(1.08)}
.at-logo__more:focus-visible{outline:2px solid #3457E8;outline-offset:2px}
.at-logo--more::after{ /* a hairline ring hinting the card, only on hover of the cell */
  content:"";position:absolute;inset:0;border:1.5px solid transparent;transition:border-color .25s ease;pointer-events:none;
}
.at-logo--more:hover::after{border-color:rgba(52,87,232,.16)}

/* ============ the story card: it opens IN the wall ============
   The "+" opens a customer story that grows from its own corner and covers
   its own column of the logo grid (the clicked logo and the one beneath it),
   rather than floating over the page. The rest of the wall steps back while
   it is open. A plain disclosure: the X, Esc, or a click outside closes it. */
.statcard-pop{
  position:absolute;top:0;bottom:0;left:calc((var(--col,1) - 1) * 25%);width:25%;
  z-index:6;padding:4px;transform-origin:top right;color:var(--ink);
}
.statcard-pop[hidden]{display:none}
.at-logos{perspective:1600px}
.statcard-pop{transform-style:preserve-3d}
/* the card is a flap hinged on the top edge of the logo cell: it folds down over
   the column, and the quote inside types itself word by word as it lands */
.statcard{
  height:100%;display:flex;flex-direction:column;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(9,14,32,.55),0 0 0 1px rgba(9,14,32,.06);
  opacity:0;transform-origin:50% 0;transform:rotateX(-88deg);backface-visibility:hidden;
  transition:opacity .25s ease,transform .75s cubic-bezier(.2,.9,.25,1.05);
}
.statcard-pop.is-open .statcard{opacity:1;transform:none}
.statcard__media{position:relative;flex:0 0 47%;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.statcard__media--panel{
  background:
    radial-gradient(70% 90% at 8% 6%,rgba(255,255,255,.28),transparent 60%),
    linear-gradient(150deg,#1B22C7,#2448FE 52%,#4E86FF);
}
.statcard__grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,14,32,.32) 0%,rgba(9,14,32,.12) 42%,rgba(9,14,32,.78) 100%)}
.statcard__portrait{position:absolute;right:-4px;bottom:0;height:106%;width:auto;z-index:1;filter:saturate(.92)}
.statcard__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:0}
.statcard-pop.is-open .statcard__bg{animation:cardKen 20s ease-in-out infinite alternate}
@keyframes cardKen{from{transform:scale(1.05)}to{transform:scale(1.13) translate(-2%,-1.5%)}}
@media (prefers-reduced-motion:reduce){.statcard-pop.is-open .statcard__bg{animation:none;transform:scale(1.04)}}
.statcard__logo{
  position:absolute;top:12px;left:14px;max-height:20px;max-width:46%;width:auto;z-index:2;
  filter:brightness(0) invert(1);   /* force the dark customer mark to white on the media */
}
.statcard__x{
  position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.22);color:#fff;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s ease;
}
.statcard__x:hover{background:rgba(255,255,255,.4)}
.statcard__x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.statcard__stat{position:relative;z-index:2;padding:0 14px 11px;color:#fff}
.statcard__stat b{display:block;font-size:clamp(1.45rem,1.9vw,1.85rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.statcard__stat span{display:block;margin-top:.22rem;font-size:.7rem;color:rgba(255,255,255,.86)}
.statcard__body{flex:1;min-height:0;display:flex;flex-direction:column;padding:.7rem .85rem .75rem}
.statcard__q{font-size:.76rem;line-height:1.42;color:var(--ink);max-height:calc(3 * 1.42em);overflow:hidden}
.statcard__q .awm{padding-bottom:.1em;margin-bottom:-.1em}
.statcard__who{margin-top:auto;padding-top:.45rem;font-size:.66rem;color:var(--grey);line-height:1.35}
.statcard__who b{display:block;color:var(--ink);font-weight:500}
.statcard__link{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;
  font-size:.74rem;font-weight:500;color:#3457E8;
}
.statcard__link span{transition:translate .2s var(--ease)}
.statcard__link:hover span{translate:4px 0}
.statcard__link:focus-visible{outline:2px solid #3457E8;outline-offset:3px;border-radius:4px}
/* the spotlight: the rest of the wall steps back while a story is open, and
   on hover the wall lights one logo at a time */
.at-logos.has-open .at-logo img{opacity:.3;filter:grayscale(1)}
@media (hover:hover){
  .at-logo img{transition:opacity .35s ease,filter .35s ease,transform .45s var(--ease)}
  .at-logos:not(.has-open):hover .at-logo:not(:hover) img{opacity:.4}
  .at-logo:hover img{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .statcard{transition:opacity .35s ease;transform:none}
}

/* ============ 3 · platform: sticky nav + scrolling column ============ */
.at-plat__grid{display:grid;grid-template-columns:280px 1fr;border-top:1px solid var(--hair)}
.at-plat__nav{
  position:sticky;top:var(--aiq-nav-h,68px);align-self:start;z-index:5;
  border-right:1px solid var(--hair);background:var(--pri);
  padding:clamp(2rem,5vh,3.4rem) 0;
}
.at-plat__nav ol{list-style:none}
.at-plat__nav li{
  position:relative;padding:.52rem 1.5rem;font-size:.95rem;font-weight:500;
  color:#8A9099;letter-spacing:-.008em;
  transition:color .35s ease;cursor:default;
}
.at-plat__nav li::before{
  content:"";position:absolute;left:-1px;top:.28rem;bottom:.28rem;width:2px;
  background:#3457E8;opacity:0;transition:opacity .35s ease;
}
.at-plat__nav li.on{color:var(--ink)}
.at-plat__nav li.on::before{opacity:1}
/* 2 Oct 2026 (Daniel): the items jump to their block. The link stretches over
   the whole row through ::after, so the hit area is the row, not the words, and
   no padding moves at any breakpoint. */
.at-plat__nav li{cursor:pointer}
.at-plat__nav .aiq-fl :where(a){color:inherit;text-decoration:none}
.at-plat__nav a::after{content:"";position:absolute;inset:0}
.at-plat__nav li:hover{color:#3F4550}
.at-plat__nav a:focus-visible{outline:none}
.at-plat__nav li:has(a:focus-visible){outline:2px solid #3457E8;outline-offset:-2px;border-radius:4px}
.at-plat__col > section{border-bottom:1px solid var(--hair)}
.at-plat__col > section:last-child{border-bottom:0}
.at-plat__txt{padding:clamp(2.6rem,6vh,4.4rem) clamp(1.4rem,3vw,3rem)}
.at-plat__txt .at-state{margin-top:0;font-size:clamp(1.28rem,1.9vw,1.62rem);line-height:1.28;max-width:34ch;letter-spacing:-.015em}
/* the art band goes full bleed: a cinematic strip, edge to edge in the shell */
.at-plat__art{
  border-top:1px solid var(--hair);background:var(--sec);
  padding:0;
}

/* ============ the terrain strip ============
   A generated landscape whose geography IS the claim, with the AccountsIQ
   flute panel over it defrosting as the strip rises into view, and a glass
   data graphic assembling on what it reveals.

   `isolation:isolate` makes the strip its own backdrop root and it CONTAINS
   the plate, so the flutes and the glass frost the landscape rather than
   nothing. Never put a transform on this element or any ancestor. */
.pstrip{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:16/7;background:var(--night);
}
.pstrip__plate{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.pstrip .pan{position:absolute;inset:0;z-index:2;pointer-events:none}


/* ============ the glass system, v2: one product grammar ============
   Every graphic is built from the same four parts, so the seven strips read as
   one product rather than seven illustrations: a glass CHIP (an input, a
   source, a level), a white SURFACE (the ledger, where the figures land), MONO
   for codes and times (accounts, entity keys, timestamps, endpoints) and a
   status DOT. Copy inside is written like the product, not like a caption.
   `--g` is the strip's own scroll progress, so every graphic is reversible. */
.gfx{position:absolute;inset:0;z-index:4;pointer-events:none}
.gfx__in{position:absolute;inset:0;display:grid;place-content:center;padding:clamp(1rem,3vw,2.6rem)}
.gcard,.gsurf{
  --e:calc(var(--g,0));
  opacity:var(--e);
  translate:0 calc((1 - var(--e)) * 14px);
  min-width:0;
}
.gcard{
  border-radius:12px;padding:.6rem .8rem .62rem;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 18px 44px -26px rgba(4,10,36,.6);
  color:#fff;
}
.gcard small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:.24rem;text-shadow:0 1px 6px rgba(4,10,36,.4)}
.gcard b{display:block;font-size:.84rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;text-shadow:0 1px 8px rgba(4,10,36,.45)}
.gcard span{display:block;margin-top:.14rem;font-size:.7rem;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(4,10,36,.4)}
/* one-line chip: label left, code right */
.gcard--row{display:flex;align-items:center;justify-content:space-between;gap:.9rem;padding:.5rem .75rem}
.gcard--row b,.gcard--row span{margin:0}
/* a child of the chip above it: the tree connector says "groups within groups" */
/* the sub-group card sits FLUSH in the column: the 1.1rem indent it used to
   carry read as a misalignment rather than as nesting. The relationship is
   carried by an inset rule at the card's leading edge instead. */
.gcard--sub{position:relative;padding-left:1.15rem}
.gcard--sub::before{
  content:"";position:absolute;left:.55rem;top:.5rem;bottom:.5rem;width:2px;border-radius:2px;
  background:rgba(255,255,255,.45);
}
/* the ink variant, for plates too pale to carry white type */
.gcard--ink{
  background:rgba(255,255,255,.64);border-color:rgba(255,255,255,.82);
  color:#0F1633;box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px -26px rgba(20,30,60,.4);
}
.gcard--ink small{color:#6B7490;text-shadow:none}
.gcard--ink b,.gcard--ink span{text-shadow:none}
.gcard--ink span{color:#5B6480}
.gcard--ink.gcard--sub::before{background:rgba(20,34,80,.32)}
.gmono{font-family:var(--mono);font-size:.68rem;letter-spacing:0;font-variant-numeric:tabular-nums}
.gcard .gmono{font-size:.68rem}
/* the status dot; the live one breathes */
.gdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#426EFF;vertical-align:middle;margin-right:.4rem;position:relative;top:-1px;box-shadow:0 0 0 2px rgba(66,110,255,.18)}
.gdot--ok{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.gcard--ink .gdot--ok,.gsurf .gdot--ok{background:#0F1633;box-shadow:0 0 0 2px rgba(15,22,51,.12)}
.gdot--live::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid #426EFF;animation:gping 2.4s var(--ease) infinite}
@keyframes gping{0%{transform:scale(.5);opacity:.9}70%,100%{transform:scale(2);opacity:0}}
/* the surface: white, hairlined, where the figures land */
.gsurf{
  background:#fff;color:#0F1633;border-radius:14px;border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 30px 60px -30px rgba(12,20,90,.55), 0 2px 6px -2px rgba(12,20,90,.12);
  padding:.8rem .95rem .85rem;font-variant-numeric:tabular-nums;
}
.gsurf__h{display:flex;align-items:center;justify-content:space-between;gap:.8rem;font-size:.74rem;font-weight:600;letter-spacing:-.005em;padding-bottom:.55rem;border-bottom:1px solid #E7E9F2}
.gsurf__h .gmono{color:#6B7490;font-weight:500;white-space:nowrap}
.gsurf__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.74rem;border-bottom:1px solid #EEF0F6}
.gsurf__row:last-child,.gsurf__row:has(+ .gsurf__cta){border-bottom:0}
.gsurf__row > :last-child{font-weight:600;white-space:nowrap}
.gsurf__row > :last-child.gmono,.gsurf__row > :last-child .gmono{color:#6B7490;font-weight:500}
.gsurf__row--hi{background:linear-gradient(90deg,rgba(66,110,255,.09),transparent 80%);margin:0 -.95rem;padding-left:.95rem;padding-right:.95rem}
.gsurf__row--hi > :first-child{color:#2B4FFF;font-weight:600}
.gsurf__row--mute,.gsurf__row--mute > :last-child{color:#8A90A0;font-weight:400}
.gsurf__big{font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:600;letter-spacing:-.03em;line-height:1;margin:.65rem 0 .2rem;color:#0F1633}
.gsurf__big small{font-size:.58em;color:#6B7490;font-weight:500;letter-spacing:-.01em;margin-left:.25rem}
.gsurf__meta{font-size:.68rem;color:#6B7490;line-height:1.4}
.gsurf--wide{width:min(340px,88%)}   /* the split-chapter surfaces */
.gsurf__cta{display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;font-size:.72rem;font-weight:600;color:#2B4FFF}
.gsurf__cta::after{content:"\2192"}
/* sparkline: a row of bars, drawn from a custom property so it costs nothing */
.gspark{display:flex;align-items:flex-end;gap:2px;height:16px;margin-top:.42rem}
.gspark i{flex:1;background:rgba(66,110,255,.32);border-radius:1px;height:var(--h)}
.gspark i:last-child{background:#426EFF}
/* the connector: a hairline that draws toward its terminal dot */
.glink{
  display:block;width:clamp(12px,2.2vw,30px);height:1px;justify-self:center;position:relative;
  background:rgba(255,255,255,.55);opacity:var(--g,0);transform:scaleX(var(--g,0));transform-origin:left;
}
.glink::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:inherit}
.glink--l{transform-origin:right}
.glink--l::after{right:auto;left:-2px}
.pstrip--pale .glink{background:rgba(20,34,80,.55)}
/* the flow layouts */
.gflow{display:grid;gap:clamp(.5rem,1.2vw,.85rem);align-items:center;justify-content:center}
.gcol{display:grid;gap:.45rem;align-content:center}
.ghub{grid-template-columns:auto auto minmax(200px,250px) auto auto;grid-template-rows:auto auto auto}
.ghub .gcard--row{gap:.7rem}
/* transparency is a preference, not a requirement */
@media (prefers-reduced-transparency:reduce){
  .gcard{background:rgba(12,20,52,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
  .gcard--ink{background:rgba(255,255,255,.95)}
}

/* ============ 4 · the dark chapter ============ */
.at-dark{background:var(--dark);color:var(--darkink)}
.at-dark .at-shell{border-color:var(--darkhair)}
.at-dark .at-state{color:var(--darkink)}
.at-dark .at-state .g{color:var(--darkgrey)}
.at-dark .at-label{background:rgba(52,87,232,.16);color:#8FA8FF}
.at-dark .at-more{background:transparent;border-color:var(--darkhair);color:var(--darkink)}
.at-dark .at-more:hover{background:rgba(255,255,255,.06);border-color:#333336}

/* 4a · the display moment, on a dashed grid with a colour arc behind */
.at-display{position:relative;overflow:hidden;padding:clamp(6rem,15vh,10rem) 0 clamp(5rem,11vh,7.5rem);text-align:center}
.at-display::after{  /* the colour arc */
  content:"";position:absolute;left:50%;top:56%;width:min(1100px,120%);aspect-ratio:2/1;
  translate:-50% 0;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(126,83,212,.60),transparent 70%),
    conic-gradient(from 196deg at 50% 100%,rgba(160,62,173,.72),rgba(126,83,212,.60) 26%,rgba(111,66,193,.34) 44%,transparent 60%);
  filter:blur(42px);
  opacity:0;transition:opacity 1.1s ease,translate 1.1s ease;
  translate:-50% 26px;
}
.at-display.is-in::after{opacity:1;translate:-50% 0;animation:aiHue 8s ease-in-out infinite}
@keyframes aiHue{
  0%,100%{filter:blur(42px) hue-rotate(0deg);transform:scale(1)}
  50%{filter:blur(54px) hue-rotate(20deg);transform:scale(1.07)}
}
/* the drifting dust, parting around the pointer */
.at-dust{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease .3s}
.at-display.is-in .at-dust{opacity:1}
.at-display__inner{position:relative;z-index:1;padding:0 clamp(1.25rem,3.4vw,3.25rem)}
.at-display__kick{font-size:.95rem;color:var(--darkgrey);opacity:0;transition:opacity .8s ease}
.at-display.is-in .at-display__kick{opacity:1}
.at-display__big{
  margin-top:.6rem;font-size:clamp(2.6rem,7vw,5.6rem);line-height:1;
  letter-spacing:-.04em;font-weight:600;
  opacity:0;translate:0 18px;transition:opacity .78s ease .12s,translate .78s var(--ease) .12s;
}
.at-display.is-in .at-display__big{opacity:1;translate:0 0}
/* the sheen sweeps OVER the headline rather than clipping the text to a
   gradient: clipped-to-text backgrounds fail invisibly if anything goes wrong,
   and an unreadable H2 is not a risk worth a nicer highlight. */
.at-display__big{position:relative}
.at-display__big::after{
  content:"";position:absolute;inset:-8px -14px;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(226,206,255,.34) 48%,transparent 58%);
  background-size:260% 100%;background-position:130% 0;
  mix-blend-mode:screen;opacity:0;transition:opacity .6s ease;
}
.at-display.is-in .at-display__big::after{opacity:1;animation:aiSheen 6s ease-in-out 1.2s infinite}
@keyframes aiSheen{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){
  .at-display.is-in::after,.at-display.is-in .at-display__big::after{animation:none}
}

/* 4b · the five-column icon row */
.at-five{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--darkhair)}
.at-five > div{
  transition:background .25s ease;
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1rem,1.6vw,1.5rem) clamp(2rem,4vw,2.8rem);
  border-right:1px solid var(--darkhair);
}
.at-five > div:last-child{border-right:0}
.at-five > div:hover{background:rgba(255,255,255,.03)}
.at-five > div:hover svg{color:#8FA8FF}
.at-five svg{transition:color .25s ease}
.at-five svg{width:22px;height:22px;color:var(--darkgrey);margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.at-five h3{font-size:.98rem;font-weight:600;letter-spacing:-.012em}
.at-five p{margin-top:.4rem;font-size:.88rem;line-height:1.45;color:var(--darkgrey)}

/* 4c/4d · the dark split rows */
.at-split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--darkhair);align-items:stretch}
.at-split__copy{padding:clamp(2.6rem,6vh,4.2rem) clamp(1.4rem,3vw,3rem);display:flex;flex-direction:column;justify-content:center}
.at-split__art{position:relative;border-left:1px solid var(--darkhair);min-height:clamp(280px,42vh,420px);overflow:hidden}
.at-split__art svg{position:absolute;inset:0;width:100%;height:100%}
/* in the dark chapter the strip fills its half of the split rather than
   setting its own ratio */
.at-split__art .pstrip{position:absolute;inset:0;aspect-ratio:auto;height:100%}

/* ============ 6 · scale, and the group clock ============ */
.at-scale{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.at-scale__copy{padding:clamp(2.8rem,7vh,4.6rem) clamp(1.4rem,3vw,3rem)}
.at-scale__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vh,2.2rem) 1.5rem;margin-top:clamp(2rem,4vh,3rem)}
.at-stat{border-left:2px solid #3457E8;padding-left:.85rem}
.at-stat b{
  display:block;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;
  letter-spacing:-.028em;font-variant-numeric:tabular-nums;
}
.at-stat span{display:block;margin-top:.2rem;font-size:.86rem;color:var(--grey)}
.at-scale__art{
  position:relative;border-left:1px solid var(--hair);
  min-height:clamp(300px,44vh,440px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.4vw,2rem);
  align-items:center;padding:clamp(1.4rem,3vw,2.4rem);
}

/* ============ the group clock ============
   85+ countries is not a line going up. It is the fact that somewhere in the
   group it is always someone's working day. Drag the hand and watch which
   entities are open. It opens on the viewer's own local time. */
.dial{position:relative;width:clamp(210px,26vw,290px);aspect-ratio:1}
.dial svg{width:100%;height:100%;display:block;overflow:visible}
.dial__face{fill:none;stroke:var(--hair);stroke-width:1}
.dial__tick{stroke:#D8DBE2;stroke-width:1}
.dial__tick--maj{stroke:#AEB3BE}
.dial__hr{fill:#6E737D;font-size:13px;font-weight:500;text-anchor:middle;dominant-baseline:middle}
.dial__arc{
  fill:none;stroke-width:6;stroke-linecap:round;opacity:.28;
  transition:opacity var(--t-2) ease,stroke-width var(--t-2) ease;
}
.dial__arc.on{opacity:1;stroke-width:8}
.dial__arc.hi{opacity:1;stroke-width:9;stroke:#101736}
.dial__hand{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.dial__knob{fill:var(--ink);stroke:#fff;stroke-width:2.5}
.dial__hit{fill:transparent;cursor:grab}
.dial__hit:active{cursor:grabbing}
.dial__grip{outline:none}
.dial__grip:focus-visible .dial__knob{stroke:#3457E8;stroke-width:3.5}
.dial__centre{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  text-align:center;pointer-events:none;
}
.dial__centre > *{max-width:54%;white-space:nowrap}
.dial__centre b{
  display:block;font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;
}
.dial__centre span{display:block;margin-top:.15rem;font-size:.74rem;line-height:1.25;color:var(--grey);white-space:nowrap}
.dial__centre em{
  display:block;margin-top:.5rem;font-family:var(--mono);font-style:normal;
  font-size:.7rem;color:var(--grey);font-variant-numeric:tabular-nums;
}
.dial__cities{list-style:none;display:grid;gap:.3rem;min-width:0}
.dial__city{
  display:grid;grid-template-columns:8px 1fr auto;gap:.5rem;align-items:center;
  width:100%;background:none;border:0;padding:.34rem .1rem;
  font:inherit;text-align:left;cursor:pointer;color:var(--grey);
  border-radius:6px;transition:color var(--t-2) ease,background var(--t-2) ease;
}
.dial__city:hover{background:#F1F2F6;color:var(--ink)}
.dial__city i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity var(--t-2) ease}
.dial__city.on{color:var(--ink)}
.dial__city.on i{opacity:1}
.dial__city b{font-size:.83rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dial__city em{
  font-family:var(--mono);font-style:normal;font-size:.74rem;
  font-variant-numeric:tabular-nums;
}
.dial__note{margin-top:.3rem;font-size:.68rem;color:#6E737D;line-height:1.35}

/* ============ 7 · the quote, pinned and unveiled ============
   Attio's mechanism, measured off the live page: the quote is split into
   per-word spans that transition from a muted grey to full ink, left to right,
   while the block is pinned for a full viewport. A colour wipe, not a fade. */
/* the unveil: the dark chapter is the front layer and scrolls up off this one.
   `margin-top` slides this section up underneath it, so the pin engages while
   still covered and the quote is then uncovered from the bottom edge upward
   rather than scrolling into place. The extra 100svh of height pays for the
   overlap. */
.at-dark{position:relative;z-index:2}
.at-reveal{position:relative;z-index:1;margin-top:-100svh}
.at-quote{height:300svh;position:relative}
.at-quote__pin{
  position:sticky;top:var(--aiq-nav-h,68px);height:calc(100svh - var(--aiq-nav-h,68px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(1.4rem,3vh,2.4rem);
  padding:0 clamp(1.4rem,3vw,3rem);
}
.at-quote__eyebrow{
  font-size:.74rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);
  opacity:0;translate:0 6px;
  transition:opacity .6s ease,translate .6s cubic-bezier(.16,1,.3,1);
}
.at-quote.is-lit .at-quote__eyebrow{opacity:1;translate:0 0}
.at-quote__q{
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.16;letter-spacing:-.022em;
  font-weight:400;max-width:19em;text-wrap:balance;
}
.at-quote__q .w{
  color:#83899A;
  transition:color .5s ease-out;   /* Attio uses duration-500 ease-out */
}
.at-quote__q .w.on{color:var(--ink)}
.at-quote__q .w.crest{color:#3457E8}   /* the crest at the head of the wipe */
.at-quote__foot{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  opacity:0;translate:0 10px;
  transition:opacity .7s ease,translate .7s cubic-bezier(.16,1,.3,1);
}
.at-quote.is-done .at-quote__foot{opacity:1;translate:0 0}
.at-quote__who{font-size:.88rem;color:var(--grey);line-height:1.45}
.at-quote__who b{display:block;color:var(--ink);font-weight:500}
.at-quote__foot .at-more{margin-top:0}

/* ============ 8 · resources grid + the comb ============ */
.at-res{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.at-res__card{
  display:block;
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1rem,1.8vw,1.6rem) clamp(2.4rem,5vw,3.4rem);
  border-right:1px solid var(--hair);
  transition:background .25s ease;
}
.at-res__card:last-child{border-right:0}
.at-res__card:hover{background:#fff}
.at-res small{font-size:.8rem;color:var(--grey)}
.at-res h3{
  margin-top:.5rem;font-size:.98rem;font-weight:600;letter-spacing:-.012em;
  display:flex;align-items:baseline;gap:.4rem;
}
.at-res h3::after{content:"\2192";font-weight:500;opacity:0;transition:opacity var(--t-1) ease,translate var(--t-1) var(--ease)}
.at-res__card:hover h3::after,.at-res__card:focus-visible h3::after{opacity:.55;translate:3px 0}
.at-res p{margin-top:.35rem;font-size:.88rem;line-height:1.45;color:var(--grey)}
/* the icon tile: brand tint ground, blue glyph, solid blue on hover */
.at-ico{
  width:42px;height:42px;border-radius:11px;margin-bottom:clamp(1.1rem,2.4vw,1.7rem);
  display:grid;place-items:center;
  background:var(--tint);color:#3457E8;
  border:1px solid rgba(52,87,232,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.at-ico svg{width:21px;height:21px}
.at-res__card:hover .at-ico,.at-res__card:focus-visible .at-ico{background:rgba(52,87,232,.16);color:#3457E8;border-color:rgba(52,87,232,.36)}


/* ============ 10 · the finale: landscape + panelling + slim footer ============ */
footer.at-finale{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--dark);color:#fff;
  min-height:clamp(560px,82vh,760px);display:flex;flex-direction:column;justify-content:space-between;
}
.at-finale__plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* the REAL brand panelling: frosted glass flutes over the landscape, exactly as
   the hero. The footer is the backdrop root (isolation) and contains the plate,
   so the flutes frost the image behind them. */
.at-finale__tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,72,242,.34),rgba(7,21,72,.52));
}
.at-finale__slats{position:absolute;inset:0;z-index:2;display:flex;pointer-events:none}
.fslat{
  position:relative;flex:1 1 0;height:100%;
  -webkit-backdrop-filter:blur(var(--b,20px)) saturate(1.15);
  backdrop-filter:blur(var(--b,20px)) saturate(1.15);
}
.fslat__sheen{
  position:absolute;inset:0;mix-blend-mode:overlay;
  background-image:linear-gradient(-90deg,rgba(255,255,255,.01) 20%,rgba(40,40,40,.10) 123.62%,rgba(255,255,255,.01) 123.64%);
}
/* a darker grade top and bottom so the nav (top) and the footer row (bottom)
   both hold white text */
.at-finale__grade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,14,32,.66) 0%,rgba(9,14,32,.12) 30%,rgba(9,14,32,.20) 62%,rgba(9,14,32,.86) 100%);
}
.at-finale__inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;flex:1;padding:clamp(2rem,5vh,3.4rem) clamp(1.4rem,3vw,3rem) clamp(1.6rem,3vh,2.2rem)}
.at-finale__cta{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2rem}
.at-finale__cta h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.04;max-width:18ch;text-shadow:0 2px 30px rgba(6,10,30,.5)}
.pill--light{background:#fff;color:var(--dark);height:48px;padding:0 1.5rem;font-size:1rem;border-radius:10px}
.pill--light:hover{background:#E9E9EC}
.pill--glass{
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.4);
  height:48px;padding:0 1.5rem;font-size:1rem;border-radius:10px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pill--glass:hover{background:rgba(255,255,255,.2)}


/* ============ text animation ============
   Every display line rises out of its own mask, a word at a time. The mask
   carries padding-bottom with a matching negative margin so descenders are not
   clipped, which is the trap with per-word overflow:hidden. */
.awm{
  display:inline-block;vertical-align:top;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.aw{
  display:inline-block;
  /* the host's scroll progress --wp is staggered across its --n words: word i
     runs from wp = 0.7i/1.7n to (1 + 0.7i/n)/1.7, so the last word lands
     exactly as the host reaches the top of the reveal band */
  --q:clamp(0, calc(var(--wp,0) * 1.7 - var(--i,0) * 0.7 / var(--n,1)), 1);
  opacity:var(--q);
  transform:translateY(calc((1 - var(--q)) * 108%));
}
.aw-in .aw{--q:1}

/* ============ Ask AIQ: a chat on the shrunk card ============
   Appears as the film settles into its card. Scripted preview: the prompt chips
   ask about real features and the answers are the page's own feature copy,
   typed word by word with the same word mechanism as the display type. */
.askiq{
  /* centred in the shrunk card, not hung off its bottom edge: the label used to
     collide with the card's top and the whole block sat low in the frame */
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5;
  width:min(780px, calc(var(--sc,.72) * 58%));   /* ~58% of the card, capped */
  display:grid;gap:.55rem;opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.askiq.is-on{pointer-events:auto}
/* the Landbot agent lives in this frame; its own stage is transparent (see
   _landbot/askiq-landbot.css) so the page's glass shows through the iframe */
.askiq__bot{
  display:none;height:min(240px,27vh);border-radius:16px;overflow:hidden;
  transition:height .55s var(--ease);
  background:rgba(10,16,40,.42);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 44px -26px rgba(4,10,36,.7);
}
.askiq.is-bot{gap:.4rem}
.askiq.is-bot .askiq__bot{display:block}
.askiq.is-bot .askiq__kick{opacity:.8}
/* compact while the card is just scenery; it grows the moment someone engages,
   so the panel fits the image at rest and reads properly in conversation */
.askiq.is-deep .askiq__bot{height:min(360px,40vh)}
.askiq.is-bot .askiq__log,.askiq.is-bot .askiq__bar{display:none}
.askiq__bot iframe{display:block;width:100% !important;height:100% !important;border:0 !important;background:transparent !important}
.askiq__log{display:grid;gap:.45rem;justify-items:start}
.askiq__msg{
  max-width:88%;padding:.6rem .8rem;border-radius:14px;font-size:.84rem;line-height:1.45;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 40px -24px rgba(4,10,36,.6);
  text-shadow:0 1px 8px rgba(4,10,36,.4);
}
.askiq__msg--u{justify-self:end;background:rgba(66,110,255,.55);border-color:rgba(255,255,255,.35)}
.askiq__msg a{display:inline-flex;align-items:center;gap:.3rem;margin-top:.35rem;color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.5)}
.askiq__msg a::after{content:"\2192"}
.askiq__bar{
  display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem .4rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 44px -26px rgba(4,10,36,.7);
  transition:border-color .2s ease,background .2s ease;
}
.askiq__bar:focus-within{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.2)}
.askiq__spark{width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:conic-gradient(from 200deg,#8FC0FF,#426EFF,#fff,#426EFF);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.askiq__in{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:.9rem;padding:.35rem 0}
.askiq__in::placeholder{color:rgba(255,255,255,.72)}
.askiq__send{
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:#fff;color:#2B4FFF;font-size:1rem;transition:transform .25s var(--ease),background .2s ease;
}
.askiq__send:hover{transform:scale(1.06)}
.askiq__send:focus-visible{outline:2px solid #fff;outline-offset:2px}
.askiq__chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.askiq__chip{
  border-radius:999px;padding:.38rem .75rem;font:inherit;font-size:.76rem;font-weight:500;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .2s ease,border-color .2s ease,transform .25s var(--ease);
}
.askiq__chip:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.6);transform:translateY(-1px)}
.askiq__chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.askiq__kick{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);text-align:center;text-shadow:0 1px 6px rgba(4,10,36,.5)}

/* ============ 9 · FAQs ============ */
.at-faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)}
.at-faq__head{padding:clamp(3rem,7vh,5.5rem) clamp(1.25rem,3.4vw,3.25rem);border-right:1px solid var(--hair)}
.at-faq__head .at-more{margin-top:1.4rem}
.at-faq__list{padding:clamp(1.25rem,4vh,3rem) clamp(1.25rem,3.4vw,3.25rem)}
.at-faq__item{border-bottom:1px solid var(--hair)}
.at-faq__item:last-child{border-bottom:0}
.at-faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.3rem 0;font-size:1.02rem;font-weight:500;line-height:1.35;color:var(--ink);
}
.at-faq__item summary::-webkit-details-marker{display:none}
.at-faq__item summary::after{
  content:"";flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--hair);
  background:linear-gradient(var(--ink),var(--ink)) center/11px 1.5px no-repeat,
             linear-gradient(var(--ink),var(--ink)) center/1.5px 11px no-repeat;
  transition:transform .35s var(--ease),background-color .25s ease,box-shadow .25s ease;
}
.at-faq__item summary:hover::after{background-color:var(--tint);box-shadow:inset 0 0 0 1px rgba(52,87,232,.3)}
.at-faq__item[open] summary::after{transform:rotate(45deg)}
.at-faq__item summary:focus-visible{outline:2px solid #3457E8;outline-offset:4px;border-radius:6px}
.at-faq__a{padding:0 3.25rem 1.5rem 0;color:var(--grey);font-size:.95rem;line-height:1.62}
.at-faq__a > * + *{margin-top:.75rem}
.at-faq__a a{color:#3457E8;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.at-faq__a ul{padding-left:1.15rem;list-style:disc}
.at-faq__a li{margin:.25rem 0}
.at-faq__cols{columns:2;column-gap:2rem}
@media (max-width:820px){
  .at-faq{grid-template-columns:1fr}
  .at-faq__head{border-right:0;border-bottom:1px solid var(--hair);padding-bottom:2rem}
  .at-faq__a{padding-right:0}
}

/* ============ ExpenseIn cards + cashback (after Platform) ============
   Platform's last step names ExpenseIn among the connections; this is the one
   that pays you back. The card is the solid coral ExpenseIn card from the
   xsell page, drawn as a flat image on CSS 3D planes (a face and a darker
   edge a few px behind it, so a lean shows its thickness). No WebGL on the
   homepage. It turns into its resting lean on scroll, then leans toward the
   pointer; mobile, coarse pointers and reduced motion get the resting pose. */
.at-cb{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.at-cb__copy{padding:clamp(2.8rem,7vh,4.6rem) clamp(1.4rem,3vw,3rem)}
.at-cb__rates{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(2rem,4vh,2.8rem)}
.at-cb__rate{border-left:2px solid #3457E8;padding-left:.85rem}
.at-cb__rate b{display:block;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.at-cb__rate span{display:block;margin-top:.2rem;font-size:.86rem;color:var(--grey)}
.at-cb__rate--none{border-left-color:var(--hair)}
.at-cb__rate--none b{color:var(--grey)}
.at-cb__cap{margin-top:.9rem;font-size:.86rem;color:var(--grey)}
.at-cb__legal{margin-top:1.6rem;max-width:40rem;font-size:.72rem;line-height:1.5;color:var(--grey)}
.at-cb__art{
  position:relative;border-left:1px solid var(--hair);background:var(--sec);
  min-height:clamp(360px,54vh,540px);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.6rem,4vh,2.6rem);padding:clamp(1.6rem,3vw,2.6rem);
}
.cb-stage{position:relative;width:min(430px,82%);aspect-ratio:1000/630;perspective:1300px;container-type:inline-size}
.cb-tap{position:absolute;inset:0;transform-style:preserve-3d}
.cb-card{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(7deg) rotateY(-15deg) rotateZ(-3deg);
}
.cb-card > *{position:absolute;inset:0;border-radius:3.7% / 5.87%}
.cb-card__edge{background:#B9433D;transform:translateZ(-4px)}
.cb-card__edge + .cb-card__edge{background:#CF524A;transform:translateZ(-2px)}
.cb-card__face{width:100%;height:100%;object-fit:cover;display:block;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* the back: same coral, a mag stripe, a signature strip and the small print.
   Sits 6px behind the face, turned round, so a full turn shows a real card. */
.cb-card__back{
  background:linear-gradient(180deg,#EF5F59,#F5827A);overflow:hidden;
  transform:rotateY(180deg) translateZ(6px);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.cb-back__mag{position:absolute;left:0;right:0;top:11%;height:14%;background:linear-gradient(180deg,#2A2530,#3A3340 50%,#2A2530)}
.cb-back__sig{
  position:absolute;left:6%;top:33%;width:64%;height:15%;border-radius:4px;
  background:repeating-linear-gradient(180deg,#F7F4EE 0 26%,#E9E4D9 26% 30%,#F7F4EE 30%);
  display:grid;grid-template-columns:1fr auto;align-items:center;
}
.cb-back__sig svg{height:88%;width:auto;margin-left:5%;overflow:visible}
.cb-back__sig svg path{fill:none;stroke:#1B2233;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cb-back__cvv{font-family:var(--mono);font-size:clamp(.7rem,1.6cqw,.9rem);letter-spacing:.14em;color:#3A3A3F;padding:0 .8em;height:100%;display:flex;align-items:center;background:#fff;border-radius:0 4px 4px 0}
.cb-back__range{position:absolute;left:6%;bottom:19%;color:#fff;font-size:clamp(.62rem,1.9cqw,.82rem);font-weight:500;letter-spacing:.01em}
.cb-back__legal{position:absolute;left:6%;right:6%;bottom:8%;color:rgba(255,255,255,.72);font-size:clamp(.4rem,1.2cqw,.54rem);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* which side faces the viewer is decided in JS from the yaw, not left to
   backface-visibility: WebKit painted the mirrored front through the back. */
.cb-live .cb-card.is-back .cb-card__face,.cb-live .cb-card.is-back .cb-card__sheen{visibility:hidden}
.cb-live .cb-card:not(.is-back) .cb-card__back{visibility:hidden}
/* the real card: the xsell three.js module in a transparent canvas over the
   panel. The CSS card underneath is its poster and the fallback when the
   module is gated or fails; it hides the moment the first GL frame is drawn. */
.cb-gl{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s ease}
.cb-gl.is-live{opacity:1}
.at-cb__art.gl-live .cb-card{visibility:hidden}
.at-cb__art.gl-live .cb-shadow{opacity:calc(var(--cb-so,1) * .85)}
.cb-stage{z-index:3}
.cb-live .cb-stage{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.cb-live .cb-stage.is-drag{cursor:grabbing}
.cb-hint{font-size:.8rem;color:var(--grey);margin-top:-1rem;transition:opacity .4s var(--ease)}
.at-cb__art:not(.cb-live) .cb-hint{display:none}
.cb-live.is-touched .cb-hint{opacity:0}
/* one specular band that travels with the card's turn and the pointer */
.cb-card__sheen{
  pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.12) 54%,rgba(255,255,255,0) 66%) no-repeat;
  background-size:260% 100%;background-position:var(--cb-sh,62%) 0;
}
.cb-shadow{
  position:absolute;left:8%;right:8%;bottom:-16%;height:22%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(16,22,48,.30),rgba(16,22,48,0));
  transform:translateY(var(--cb-sy,0px)) scale(var(--cb-ss,1));opacity:var(--cb-so,1);
}
/* the payoff: the card has paid. Same fixture as the xsell page. */
.cb-stamp{
  position:relative;margin-top:clamp(.6rem,1.6vh,1.2rem);display:grid;gap:.2rem;justify-items:center;text-align:center;
  background:#fff;border-radius:14px;padding:.85rem 1.2rem;
  box-shadow:inset 0 0 0 1px var(--hair),0 18px 40px -22px rgba(16,22,48,.35);
  font-size:.82rem;color:var(--grey);
}
.cb-stamp b{font-size:.98rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.cb-stamp__k{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;color:#1F8A5B}
.cb-stamp__k i{width:8px;height:8px;border-radius:50%;background:#22A06B;box-shadow:0 0 0 4px rgba(34,160,107,.16)}
.cb-live .cb-stamp{opacity:0;translate:0 14px;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.cb-live.is-paid .cb-stamp{opacity:1;translate:0 0}
.cb-live.is-paid .cb-tap{animation:cbTap .7s var(--ease)}
.cb-live.is-paid .cb-stamp__k i{animation:cbPing 1.2s ease-out .15s}
@keyframes cbTap{0%{transform:translateZ(0)}35%{transform:translateZ(-26px) translateY(4px)}100%{transform:translateZ(0)}}
@keyframes cbPing{0%{box-shadow:0 0 0 0 rgba(34,160,107,.45)}100%{box-shadow:0 0 0 12px rgba(34,160,107,0)}}
@media (min-width:821px) and (max-width:1100px){
  .at-cb__rates{gap:1rem}
}
@media (max-width:820px){
  .at-cb{grid-template-columns:1fr}
  .at-cb__art{border-left:0;border-top:1px solid var(--hair);min-height:0;padding:2.4rem 1.25rem 2.6rem}
  .cb-stage{width:min(330px,80vw)}
  .at-cb__rates{gap:1rem}
}
@media (prefers-reduced-motion:reduce){.cb-live.is-paid .cb-tap,.cb-live.is-paid .cb-stamp__k i{animation:none}}

/* ============ section dock — desktop wayfinding (a real deeplink) ==========
   A fixed bottom pill that jumps to each chapter and writes the URL hash, so
   any point is shareable and Back/Forward walk the jumps. Ported from the
   ExpenseIn cross-sell film. Desktop only; mirrors the film's own gate. */
.dock{display:none}
@media (min-width:821px){
  .dock{
    display:flex;align-items:center;gap:.3rem;
    position:fixed;left:50%;bottom:clamp(16px,3vh,28px);
    transform:translateX(-50%) translateY(14px);
    z-index:60;padding:.4rem;border-radius:999px;
    background:rgba(255,255,255,.72);
    box-shadow:inset 0 0 0 1px var(--hair),0 12px 40px rgba(6,10,26,.18);
    opacity:0;pointer-events:none;
    transition:opacity .5s var(--ease),transform .5s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease);
  }
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .dock{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
  }
  .dock.is-on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .dock__b{
    appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
    font:inherit;font-size:.8rem;font-weight:500;line-height:1;
    color:var(--grey);background:transparent;white-space:nowrap;
    padding:.6rem .85rem;border-radius:999px;
    transition:background-color .25s var(--ease),color .25s var(--ease);
  }
  .dock__b:hover{color:var(--ink);background:rgba(18,20,26,.06)}
  .dock__b[aria-current="true"]{color:#fff;background:var(--blue-cta)}
  .dock__sep{width:1px;height:20px;margin:0 .15rem;background:var(--hair)}
  .dock__cta{
    text-decoration:none;font-size:.8rem;font-weight:600;line-height:1;
    color:#fff;background:var(--blue-cta);white-space:nowrap;
    padding:.6rem 1.05rem;border-radius:999px;transition:filter .2s var(--ease);
  }
  .dock__cta:hover{filter:brightness(1.08)}
  .dock--dark{background:rgba(10,14,30,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 12px 40px rgba(6,10,26,.4)}
  .dock--dark .dock__b{color:rgba(255,255,255,.72)}
  .dock--dark .dock__b:hover{color:#fff;background:rgba(255,255,255,.12)}
  .dock--dark .dock__b[aria-current="true"]{color:#fff;background:var(--blue)}
  .dock--dark .dock__sep{background:rgba(255,255,255,.18)}
  .dock__b:focus-visible,.dock__cta:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
}

/* ============ the scroll cue ============
   The film is a scrub, which is not obvious from a still first frame. A small
   cue says so, and clicking it rides the whole sequence to the chat for anyone
   who would rather not wheel through it. */
.scue{
  position:absolute;left:50%;translate:-50% 0;bottom:clamp(1.2rem,3.5vh,2.4rem);z-index:6;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;border:0;border-radius:100px;cursor:pointer;font:inherit;
  font-size:.82rem;font-weight:500;color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  opacity:0;transition:opacity .6s ease .9s,background .25s ease,transform .25s ease;
}
body.is-ready .scue{opacity:1}
.scue:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.scue:focus-visible{outline:2px solid #fff;outline-offset:3px}
.scue.is-gone{opacity:0;pointer-events:none;transition:opacity .3s ease}
.scue__m{
  width:15px;height:22px;border-radius:8px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8);
  position:relative;flex:0 0 15px;
}
.scue__m::after{
  content:"";position:absolute;left:50%;top:4px;width:2px;height:5px;border-radius:2px;
  background:#fff;translate:-50% 0;animation:scue 1.8s var(--ease) infinite;
}
@keyframes scue{0%,100%{opacity:0;transform:translateY(0)}25%{opacity:1}60%{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.scue__m::after{animation:none;opacity:1}}
@media (max-width:820px){.scue{display:none}}

/* ============ the product video, and its lightbox ============
   Evan wants the product film reachable from the platform section. It sits on
   the first strip as a control in the page's own glass language rather than a
   play triangle stamped over the landscape: the plate is abstract terrain, not
   a still from the video, so a full-bleed play button would promise something
   the image is not.

   No third-party player script is loaded until the control is clicked. The page
   just gained a fallback ladder to protect slow connections; shipping a video
   SDK to every visitor on the chance one of them presses play would undo it. */
.gplay{
  position:absolute;left:50%;translate:-50% 0;bottom:clamp(1rem,2.2vw,2rem);z-index:6;
  display:none;align-items:center;gap:.6rem;
  padding:.55rem;border:0;border-radius:100px;cursor:pointer;   /* equal on all four sides */
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 30px -12px rgba(8,14,40,.45);
  font:inherit;color:var(--ink);text-align:left;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.has-video .gplay{display:inline-flex}
.gplay:hover{transform:translateY(-2px);background:rgba(255,255,255,.94)}
.gplay:focus-visible{outline:2px solid #426EFF;outline-offset:3px}
.gplay__disc{
  display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(-90deg,#385ecc,#426eef);color:#fff;
  transition:transform .3s var(--ease);
}
.gplay:hover .gplay__disc{transform:scale(1.08)}
.gplay__disc svg{width:13px;height:13px;margin-left:2px;display:block}
.gplay__t{display:block;font-size:.9rem;font-weight:600;line-height:1;padding-right:.5rem}
@media (max-width:820px){
  .gplay{bottom:1rem;padding:.45rem}
  .gplay__t{font-size:.84rem}
}
/* the lightbox: our own, so there is no player SDK and no styling fight */
.vbox{
  position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(6,10,24,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s ease;
}
.vbox.is-on{display:grid}
.vbox.is-in{opacity:1}
.vbox__in{position:relative;width:min(1100px,100%);aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 50px 120px -40px rgba(0,0,0,.8)}
.vbox__in iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vbox__x{
  position:absolute;top:-2.6rem;right:0;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;
  display:grid;place-items:center;transition:background .2s ease;
}
.vbox__x:hover{background:rgba(255,255,255,.3)}
.vbox__x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:820px){.vbox__x{top:auto;bottom:-2.6rem}}

/* the exit intent (2 Oct 2026). The old homepage carried its own exit modal
   (an article in that page's markup, never site-wide), so /home had none. Same
   trigger, cookie and tracking events as that one; the bot is the new V2 agent
   (H-3521938) and the frame is this page's glass, built only when it fires. */
.xit{
  position:fixed;inset:0;z-index:9998;display:none;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(6,10,24,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s ease;
}
.xit.is-on{display:grid}
.xit.is-in{opacity:1}
.xit__card{
  position:relative;width:min(560px,100%);height:min(640px,calc(100svh - 3rem));
  border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#e9f0ff 0%,#dfe6fb 55%,#f3ead9 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 50px 120px -40px rgba(4,8,24,.85);
  translate:0 18px;scale:.97;transition:translate .5s cubic-bezier(.16,1,.3,1),scale .5s cubic-bezier(.16,1,.3,1);
}
.xit.is-in .xit__card{translate:0 0;scale:1}
.xit__bot{position:absolute;inset:0}
.xit__bot iframe{border:0}
.xit__x{
  position:absolute;top:.85rem;right:.85rem;z-index:2;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.62);color:#15225A;font:400 18px/1 system-ui,sans-serif;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(104,139,255,.22) inset,0 6px 18px -8px rgba(21,34,90,.45);
  display:grid;place-items:center;transition:background .2s ease,transform .2s ease;
}
.xit__x:hover{background:rgba(255,255,255,.85);transform:scale(1.05)}
.xit__x:focus-visible{outline:2px solid #3457E8;outline-offset:2px}
.xit__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.xit,.xit__card{transition:opacity .2s ease}.xit__card{translate:none;scale:none}}


/* ============ the dial tooltip ============ */
.dial__tip{
  position:absolute;z-index:5;pointer-events:none;min-width:150px;
  background:#fff;color:var(--ink);border:1px solid var(--hair);border-radius:12px;
  padding:.5rem .7rem;box-shadow:0 18px 40px -22px rgba(9,14,32,.45);
  font-size:.74rem;line-height:1.4;
}
.dial__tip[hidden]{display:none}
.dial__tip b{display:block;font-weight:600;letter-spacing:-.01em;margin-bottom:.15rem}
.dial__tip span{display:block;color:var(--grey);font-variant-numeric:tabular-nums}
.dial__tip span i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3457E8;margin-right:.35rem;vertical-align:middle;position:relative;top:-1px}
.dial__tip .gmono{font-size:.7rem}

/* ============ hover interactions ============ */
/* the cursor lights the glass: a soft specular follows the pointer over every
   panelled surface. Pointer devices only; sits between the flutes and the
   graphic on a strip, under the flutes on the finale. */
@media (hover:hover) and (pointer:fine){
  [data-spec]::after{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:radial-gradient(30% 44% at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 72%);
    mix-blend-mode:screen;opacity:0;transition:opacity .6s ease;
  }
  [data-spec]:hover::after{opacity:1}
  .at-finale[data-spec]::after{z-index:1}
  /* magnetic: the closing pills lean toward the cursor */
  .mag{translate:var(--magx,0px) var(--magy,0px);transition:translate .45s var(--ease),background var(--t-2) ease,border-color var(--t-2) ease,color var(--t-2) ease}
}
.pstrip__plate{will-change:transform}
/* the two-tone statement lifts its grey half to ink when you touch it */
.at-state .g{transition:color .55s cubic-bezier(.16,1,.3,1)}
.at-state:hover .g{color:var(--ink)}

/* nav: a blue rule sweeps in under the link */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:#3457E8;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .38s cubic-bezier(.16,1,.3,1);
}

/* the travelling arrow goes blue */
.at-more{transition:border-color .2s ease,background .2s ease,color .2s ease}
.at-more:hover{color:#2B4FFF;border-color:#C3CEFB}

/* stats: the bar grows and the figure takes the accent */
.at-stat{transition:border-color .3s ease}
.at-stat b{transition:color .3s ease}
.at-stat:hover{border-left-color:#0F1FA8}
.at-stat:hover b{color:#2B4FFF}

/* the platform indicator grows rather than blinking on */
.at-plat__nav li::before{transform:scaleY(.18);transform-origin:50% 50%;
  transition:opacity var(--t-3) ease,transform var(--t-3) var(--ease)}
.at-plat__nav li.on::before{transform:scaleY(1)}

/* footer links slide and take the light blue */
.at-foot a{transition:color var(--t-1) ease,translate var(--t-1) var(--ease)}
.at-foot a:hover{color:#8FB0FF;translate:3px 0}


/* scroll-in reveals for the paper run */
/* scroll-linked: --rv is the element's own progress through the lower third
   of the viewport, written by the frame loop. It fades and rises with the
   hand, and reverses. .rv2-4 only shift where in that band it starts. */
.js-boot .rv{opacity:var(--rv,0);translate:0 calc((1 - var(--rv,0)) * 26px)}
.js-boot .rv.is-in{--rv:1}
.skip{
  position:fixed;top:0;left:50%;translate:-50% -110%;z-index:60;
  background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 9px 9px;
  font-size:.9rem;font-weight:500;transition:translate .22s cubic-bezier(.16,1,.3,1);
}
.skip:focus{translate:-50% 0;outline:2px solid #8FB0FF;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* keyboard focus */
.aiq-fl a:focus-visible,.aiq-fl button:focus-visible{outline:2px solid #3457E8;outline-offset:3px;border-radius:4px}

/* ---------------- mobile ---------------- */
/* ============ 821-1100px ============
   The only breakpoints were 820 and a dead 560, so this whole band ran the full
   desktop layout: a 5-up icon row at ~150px per cell, a 16/7 platform strip only
   ~220px tall holding a graphic that could not fit, and the dial's entity names
   truncating. Grid counts and the strip ratio only. */
@media (min-width:821px) and (max-width:1100px){
  .at-plat__grid{grid-template-columns:216px 1fr}
  .at-plat__nav li{font-size:.9rem;padding:.5rem 1.1rem}
  .pstrip{aspect-ratio:16/9}
  .gcard{padding:.5rem .68rem;border-radius:11px}
  .gcard b{font-size:.78rem}
  .gcard span{font-size:.66rem}
  .gsurf{padding:.7rem .8rem .75rem}
  .gsurf__row,.gsurf__h{font-size:.7rem}
  .ghub{grid-template-columns:auto auto minmax(180px,220px) auto auto}
  .statcard__q{-webkit-line-clamp:2}
  /* the 5-up icon row wrapped every heading to three lines */
  .at-five{grid-template-columns:repeat(3,1fr)}
  .at-five > div{border-bottom:1px solid var(--darkhair)}
  .at-five > div:nth-child(3n){border-right:0}
  .at-five > div:nth-last-child(-n+2){border-bottom:0}
  /* the dial list truncated its entity names for the whole band */
  .at-scale__art{grid-template-columns:1fr;justify-items:center;gap:1.1rem}
  .dial{width:min(230px,30vw)}
  .dial__cities{width:100%;max-width:420px}
  .at-res{grid-template-columns:repeat(2,1fr)}
  .at-res__card{border-bottom:1px solid var(--hair)}
  .at-res__card:nth-child(2n){border-right:0}
  .at-res__card:nth-last-child(-n+2){border-bottom:0}
  .at-logos{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:820px){
  #film{height:160svh}
  .hold{padding:0 1.25rem}
  .hold .ln--sub{margin-top:.75rem}
  /* the paper run collapses: hairline grid folds to one column */
  .at-shell{width:100%;border-inline:0}
  .at-ctas{flex-wrap:wrap}
  .at-logos{grid-template-columns:repeat(2,1fr)}
  .at-logo{min-height:112px;padding:1.1rem}
  .at-logo img{max-height:32px}
  .at-logo:nth-child(2n){border-right:0}
  .at-logo{border-right:1px solid var(--hair)}
  .at-logo:nth-child(n+7){border-bottom:0}
  /* the sticky nav becomes a horizontal scroller above the column */
  .at-plat__grid{grid-template-columns:1fr}
  .at-plat__nav{
    position:sticky;top:var(--aiq-nav-h,60px);border-right:0;border-bottom:1px solid var(--hair);
    padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .at-plat__nav::-webkit-scrollbar{display:none}
  .at-plat__nav ol{display:flex;gap:0;min-width:max-content}
  .at-plat__nav li{padding:.85rem 1rem;white-space:nowrap;font-size:.9rem}
  .at-plat__nav li::before{left:0;right:0;top:auto;bottom:0;width:auto;height:2px}
  /* persona pills: one horizontal-scroll row rather than wrapping to two */
  .plat-labelrow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .plat-labelrow::-webkit-scrollbar{display:none}
  .plat-pills{flex-wrap:nowrap}
  .plat-pill{white-space:nowrap;flex:0 0 auto}
  /* terrain strips: taller frame, simplified graphics, lighter glass */
  .pstrip{aspect-ratio:4/3}
  .gfx__in{padding:.9rem}
  /* one surface per strip: chips and connectors do not survive 390px honestly */
  .pstrip .gcard,.pstrip .glink{display:none}
  .gflow,.ghub{grid-template-columns:1fr!important;grid-template-rows:auto;justify-items:center}
  .ghub .gsurf{grid-area:auto!important}
  .gsurf,.gsurf--wide{width:min(330px,92%);padding:.7rem .8rem .75rem;border-radius:12px}
  .gsurf__row,.gsurf__h{font-size:.7rem}
  .gsurf__big{font-size:1.25rem}
  .gsurf__cta{display:none}
  .askiq{display:none}
  /* the story card is a centred modal on a phone, sized to its content, with a
     bigger image and larger type (no stretched dead space in the body) */
  .statcard-pop{position:fixed;inset:0;left:0;width:100%;z-index:200;display:grid;place-items:center;padding:1.15rem;background:rgba(9,14,32,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .statcard{height:auto;max-height:88vh;width:min(100%,420px);transform:translateY(12px) scale(.98)}
  .statcard-pop.is-open .statcard{transform:none}
  .statcard__media{flex:0 0 auto;aspect-ratio:3/2}
  .statcard__body{padding:1.15rem 1.2rem 1.25rem}
  .statcard__q{font-size:1.08rem;line-height:1.42;-webkit-line-clamp:unset;max-height:none}
  .statcard__who{padding-top:1.1rem;font-size:.82rem}
  .statcard__who b{font-size:.98rem}
  .statcard__link{font-size:.94rem;margin-top:.6rem}
  .statcard__stat b{font-size:1.85rem}
  .statcard__stat span{font-size:.85rem;margin-top:.3rem}
  .statcard__logo{max-height:24px}
  .at-five{grid-template-columns:1fr 1fr}
  .at-five > div{border-bottom:1px solid var(--darkhair)}
  .at-five > div:nth-child(2n){border-right:0}
  .at-five > div:last-child{grid-column:1 / -1;border-right:0;border-bottom:0}
  .at-split,.at-scale{grid-template-columns:1fr}
  .at-split__art,.at-scale__art{border-left:0;border-top:1px solid var(--darkhair);min-height:clamp(220px,32vh,300px)}
  .at-scale__art{border-top-color:var(--hair)}
  .at-quote{height:270svh}
  .aiq-fl{--aiq-nav-h:60px}
  .at-quote__pin{top:var(--aiq-nav-h,60px);height:calc(100svh - var(--aiq-nav-h,60px))}
  /* the clock stacks above its list so the entity names are not truncated */
  .at-scale__art{grid-template-columns:1fr;justify-items:center;gap:1.2rem;padding:1.6rem 1.25rem}
  .dial{width:min(250px,72vw)}
  .dial__cities{width:100%}
  .dial__city{grid-template-columns:8px 1fr auto}
  .at-scale__grid{gap:1.2rem 1rem}
  .at-res{grid-template-columns:repeat(2,1fr)}
  .at-res__card{border-bottom:1px solid var(--hair)}
  .at-res__card:nth-child(2n){border-right:0}
  .at-res__card:nth-last-child(-n+2){border-bottom:0}
  .at-ico{width:38px;height:38px;border-radius:10px}
  }

/* ---------------- reduced motion: the film is a still, the page is a page ---------------- */
@media (prefers-reduced-motion:reduce){
  #film{height:auto}
  .film__stage{position:static;height:100svh}
  .shot video{display:none}
  .shot__poster.is-gone{opacity:1}
  /* the panelling stays: fully frosted over the poster IS the branded state */
  .hold{display:none}
  .hold--hero{display:flex;visibility:visible}
  .hold--hero::before{opacity:.9}
  /* movement removed, opacity fade kept: a fade is not motion-sickness motion,
     and it is the "text fades in as you scroll" the reduced-motion path lost */
  .rv{translate:0 0;transition:opacity .6s ease}
  .aw{transform:none;transition:opacity .5s ease}
  .js-boot .hero__sub,.js-boot .hero__cta,.js-boot .hero__rate{translate:0 0;transition:opacity .6s ease}
  .at-quote__eyebrow{translate:0 0;transition:opacity .5s ease}
  .prog{display:none}
}