/* ═══════════════════════════════════════════════════════════════════════════
   ascend.css — the Ascend landing page.

   Ported from design/Alioro Ascend.dc.html (Claude Design), which is the
   canonical design source for this product. Values here are extracted verbatim
   from that file; see DESIGN_MANIFEST.md "ASCEND INGESTION" for the DNA table.

   EVERY selector in this file is namespaced `asc-` and every token is scoped to
   `.asc`. Nothing here may leak into the app shell: a previous phase broke the
   Template Center by shipping un-namespaced marketing classes.

   Layer order: this file loads AFTER app.css (marketing layer, per the
   stylesheet order rule in the redesign prompt §8.3).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── design tokens: Command (dark) ── */
.asc {
  --s0: #070b16; --s1: #0e1526; --s2: #151f36; --s3: #1d2a47;
  --t1: #eef2fa; --t2: #a9b4c9; --t3: #8492ab;
  --l1: rgba(151, 173, 220, .22); --l2: rgba(151, 173, 220, .11);
  --brand: #0089eb; --brand-fg: #ffffff; --brand-hov: #2ba0ff; --brand-soft: rgba(0, 137, 235, .16);
  /* White on the logo blue is 3.63:1 — short of AA for text at 13.5/14.5/16px,
     and that is the "Create an account" button. The FILLED BUTTONS ONLY stand
     on DESIGN_TOKENS §0 --brand-fill (#0070c1, 5.14:1 with white, the same
     value in both themes). The hue itself is untouched: the mark, rings,
     glows, chips, focus outline and every non-text use stay #0089eb. */
  --brand-fill: #0070c1;
  --sig1: #ff3229; --sig2: #ffa00a; --sig3: #ffcc00; --sig4: #00b842; --sig5: #0089eb; --sig6: #2ba0ff;
  --elev1: inset 0 1px 0 rgba(151, 173, 220, .10), 0 1px 2px rgba(0, 0, 0, .45);
  --elev2: inset 0 1px 0 rgba(151, 173, 220, .14), 0 8px 24px rgba(0, 0, 0, .55);
  --elev3: inset 0 1px 0 rgba(151, 173, 220, .18), 0 0 0 1px rgba(0, 137, 235, .10), 0 20px 56px rgba(0, 0, 0, .60), 0 0 32px rgba(0, 137, 235, .08);
  --glass: rgba(14, 21, 38, .55); --glass-brd: rgba(151, 173, 220, .28); --glass-hi: inset 0 1px 0 rgba(151, 173, 220, .28);
  --fc-solid: rgba(11, 17, 32, .78);
  --nav-bg: rgba(10, 16, 30, .52);
  /* ONE glass recipe in the whole product: blur 20-22 with saturate 1.15.
     This file shipped 1.5 dark and 1.9 light, a second recipe, and 1.9 is
     above the 1.7 that turned the blue ambient violet in phase-41. */
  --frost: blur(22px) saturate(1.15);
  /* the phone's opaque chrome: --fc-solid at full alpha, same hue */
  --chrome-solid: #0b1120;
  --aw-bg: linear-gradient(180deg, #131c31, #0a1120);
  --aw-shadow: 0 40px 110px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(151, 173, 220, .14), 0 0 130px rgba(0, 137, 235, .20);
  --aw-rail: rgba(4, 8, 17, .5); --aw-well: rgba(4, 8, 17, .5);
  --page-bg:
    radial-gradient(60% 34% at 50% 0%, rgba(0, 137, 235, .16), transparent 70%),
    radial-gradient(40% 26% at 88% 30%, rgba(0, 184, 66, .07), transparent 70%),
    radial-gradient(38% 26% at 8% 62%, rgba(255, 160, 10, .05), transparent 70%), #070b16;
  --hero-grid: radial-gradient(rgba(151, 173, 220, .22) 1px, transparent 1.4px);
  --floor: radial-gradient(50% 90% at 50% 0%, rgba(0, 137, 235, .22), transparent 70%);
  --band-bg:
    radial-gradient(58% 88% at 50% 0%, rgba(0, 137, 235, .14), transparent 72%),
    radial-gradient(38% 64% at 10% 100%, rgba(255, 160, 10, .08), transparent 72%),
    radial-gradient(38% 64% at 90% 100%, rgba(0, 184, 66, .08), transparent 72%), #0b1222;
  --selection: rgba(0, 137, 235, .30);
  --tile-red: #3d1210; --tile-orange: #42280a; --tile-yellow: #3a2f07; --tile-green: #0d3a22; --tile-blue: #0c2748;
  --tile-ring: rgba(151, 173, 220, .30);
  --ai-1: #6cc0ff; --ai-2: #0b66be; --bolt-1: #ffd75e; --bolt-2: #e88f00;
  --on-ok: #00b842; --on-warn: #ffa00a; --on-info: #2ba0ff; --on-danger: #ff5a52;
  --ink-warm: #241206; --ink-cool: #04240f;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ── design tokens: Studio (light) — white surfaces, same five hues ── */
[data-theme="light"] .asc {
  --s0: #ffffff; --s1: #ffffff; --s2: #f0f3fa; --s3: #e3e9f5;
  --t1: #12203a; --t2: #42506b;
  /* Ascend ships --t3:#6b7891, which measures 4.45:1 on white and 3.96:1 on the
     tinted wells: below WCAG AA for body text. Darkened along its own hue until
     it clears 4.5:1 on every light ground (white 5.6, --s2 5.05, --aw-well 5.0,
     --s3 4.6). One token, so the whole class of light-mode contrast failures is
     closed rather than patched per instance. Dark theme is untouched. */
  --t3: #5d687e;
  /* Ascend ships --l2 at .10, which is 1.17:1 on white — under the perceptible
     floor. It draws the hero table's row rules, the view demos, the calendar
     cells, the register lines and the audit rail, so light theme read as one
     flat block where dark read correctly. Raised at the token level (the same
     move --t3 got above): --l2 .22 = 1.44:1 on white, --l1 .28 = 1.61:1.
     Dark is untouched. */
  --l1: rgba(48, 74, 128, .28); --l2: rgba(48, 74, 128, .22);
  --brand: #0089eb; --brand-fg: #ffffff; --brand-hov: #0077d0; --brand-soft: rgba(0, 137, 235, .09);
  --brand-fill: #0070c1;
  --sig1: #ff3229; --sig2: #ffa00a; --sig3: #ffcc00; --sig4: #00b842; --sig5: #0089eb; --sig6: #0089eb;
  --elev1: 0 0 0 1px rgba(48, 74, 128, .07), 0 1px 2px rgba(18, 32, 58, .05);
  --elev2: 0 0 0 1px rgba(48, 74, 128, .07), 0 2px 6px rgba(18, 32, 58, .05), 0 10px 26px rgba(18, 32, 58, .09);
  --elev3: 0 0 0 1px rgba(0, 137, 235, .10), 0 4px 12px rgba(18, 32, 58, .07), 0 22px 52px rgba(18, 32, 58, .14), 0 0 32px rgba(0, 137, 235, .07);
  --glass: rgba(255, 255, 255, .66); --glass-brd: rgba(84, 110, 160, .22); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .95);
  --fc-solid: rgba(255, 255, 255, .8);
  --nav-bg: rgba(255, 255, 255, .6);
  --frost: blur(22px) saturate(1.15);
  --chrome-solid: #ffffff;
  --aw-bg: linear-gradient(180deg, #ffffff, #f4f7fd);
  --aw-shadow: 0 40px 110px rgba(18, 32, 58, .16), 0 2px 8px rgba(18, 32, 58, .07), 0 0 110px rgba(0, 137, 235, .10);
  --aw-rail: rgba(240, 243, 250, .75); --aw-well: #eef2fa;
  --page-bg:
    radial-gradient(60% 34% at 50% 0%, rgba(0, 137, 235, .10), transparent 70%),
    radial-gradient(40% 26% at 88% 30%, rgba(0, 184, 66, .05), transparent 70%),
    radial-gradient(38% 26% at 8% 62%, rgba(255, 160, 10, .04), transparent 70%), #ffffff;
  --hero-grid: radial-gradient(rgba(18, 32, 58, .15) 1px, transparent 1.4px);
  --floor: radial-gradient(50% 90% at 50% 0%, rgba(0, 137, 235, .14), transparent 70%);
  --band-bg:
    radial-gradient(58% 88% at 50% 0%, rgba(0, 137, 235, .08), transparent 72%),
    radial-gradient(38% 64% at 10% 100%, rgba(255, 160, 10, .05), transparent 72%),
    radial-gradient(38% 64% at 90% 100%, rgba(0, 184, 66, .05), transparent 72%), #ffffff;
  --selection: rgba(0, 137, 235, .18);
  --tile-red: #ffe1de; --tile-orange: #ffeac9; --tile-yellow: #fff3c6; --tile-green: #d5f3e1; --tile-blue: #daebff;
  --tile-ring: rgba(48, 74, 128, .24);
  --ai-1: #4aa8f0; --ai-2: #0a5aa8; --bolt-1: #e88f00; --bolt-2: #a85c00;
  /* --on-ok darkened one notch from Ascend's #0a7a35: the SEALED chip stacks a
     green tint over glass over white, and the composite left it at 4.39:1. */
  --on-ok: #08682c; --on-warn: #9a5a00; --on-info: #0069c4; --on-danger: #c81c14;
}

/* The page owns the document ground while it is mounted, so overscroll and
   any gap below the footer show Ascend's surface rather than the app shell's. */
body.asc-body { background: #070b16; }
[data-theme="light"] body.asc-body { background: #ffffff; }

/* ── base ── */
.asc {
  min-height: 100vh;
  overflow-x: clip;
  position: relative;
  isolation: isolate;
  background: var(--page-bg);
  font-family: "Alioro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--t1);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}
.asc *,
.asc *::before,
.asc *::after { box-sizing: border-box; }
.asc ::selection { background: var(--selection); }
/* Only UNSTYLED links take the brand colour. A classed anchor is a component
   and owns its own colour: `.asc a` and `.asc-thing` tie on specificity, and a
   tie here would paint button labels brand-on-brand. */
.asc a { text-decoration: none; }
.asc a:not([class]) { color: var(--brand); }
.asc a:not([class]):hover { color: var(--brand-hov); }
.asc h1, .asc h2, .asc h3, .asc h5, .asc h6 { font-family: "Alioro", sans-serif; }
.asc-mono { font-family: "Alioro Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* keyboard access: every interactive element keeps a visible ring */
.asc a:focus-visible,
.asc button:focus-visible,
.asc input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── logo mark: hover wave + sync heartbeat ──
   NOTE: namespaced `asc-mark`; the app shell owns `.logo-mark` and the two
   must never share a selector. */
.asc-mark circle { transform-box: fill-box; transform-origin: center; }
.asc-loghov:hover .asc-mark circle { animation: ascLogoWave .65s ease both; }
.asc-loghov:hover .asc-mark circle:nth-child(n+6) { animation-delay: .07s; }
.asc-loghov:hover .asc-mark circle:nth-child(n+11) { animation-delay: .14s; }
.asc-loghov:hover .asc-mark circle:nth-child(n+16) { animation-delay: .21s; }
.asc-loghov:hover .asc-mark circle:nth-child(n+21) { animation-delay: .28s; }
.asc-mark.asc-beat circle { animation: ascLogoBeat .55s var(--ease-spring); }
.asc-mark.asc-beat circle:nth-child(n+6) { animation-delay: .06s; }
.asc-mark.asc-beat circle:nth-child(n+11) { animation-delay: .12s; }
.asc-mark.asc-beat circle:nth-child(n+16) { animation-delay: .18s; }
.asc-mark.asc-beat circle:nth-child(n+21) { animation-delay: .24s; }

/* ── keyframes (all prefixed asc*) ── */
@keyframes ascLogoWave { 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes ascLogoBeat { 0%, 100% { opacity: 1; transform: scale(1); } 35% { opacity: .5; transform: scale(1.3); } }
@keyframes ascGradPan { to { background-position: -300% 0; } }
@keyframes ascChipIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ascRowLand { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ascFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ascGrowW { from { width: 0; } }
@keyframes ascGrowH { from { height: 0; } }
@keyframes ascSpinIn { from { transform: rotate(-120deg) scale(.85); opacity: 0; } }
@keyframes ascLivePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 184, 66, .45); } 55% { box-shadow: 0 0 0 6px rgba(0, 184, 66, 0); } }
@keyframes ascCaretBlink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ascSealIn { 0% { opacity: 0; transform: scale(1.5); } 60% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ascHeroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ascStageIn { from { opacity: 0; transform: translateY(60px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ascCustodyOn { 0%, 18% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes ascCustodyOff { 0%, 18% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes ascCustodyHold { 0%, 20% { opacity: .45; transform: none; } 30% { opacity: 1; transform: translateY(-1px); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes ascStA1 { 0%, 20% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes ascStA2 { 0%, 20% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes ascStB1 { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes ascStB2 { 0%, 30% { opacity: 0; } 36%, 100% { opacity: 1; } }
@keyframes ascCurA {
  0% { opacity: 0; transform: translate(-120px, 48px) scale(1); }
  8% { opacity: 1; transform: translate(-104px, 42px) scale(1); }
  24% { opacity: 1; transform: translate(0, 0) scale(1); }
  28% { opacity: 1; transform: translate(0, 0) scale(.82); }
  32% { opacity: 1; transform: translate(0, 0) scale(1); }
  62% { opacity: 1; transform: translate(0, 0) scale(1); }
  76%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
@keyframes ascCurB { 0%, 26% { transform: translate(0, 0); } 36% { transform: translate(-5px, -4px); } 54%, 100% { transform: translate(0, 0); } }
@keyframes ascLandSweep { 0%, 28% { transform: translateX(-100%); } 46%, 100% { transform: translateX(140%); } }
@keyframes ascLandLine { 0%, 30% { opacity: 0; transform: scaleX(0); } 38% { opacity: 1; transform: scaleX(1); } 70% { opacity: 1; transform: scaleX(1); } 86%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes ascSignDraw { 0% { stroke-dashoffset: 112; } 34%, 100% { stroke-dashoffset: 0; } }
@keyframes ascSealStamp { 0%, 8% { opacity: 0; transform: scale(1.7) rotate(-7deg); } 17% { opacity: 1; transform: scale(.93) rotate(-7deg); } 23%, 100% { opacity: 1; transform: scale(1) rotate(-7deg); } }
@keyframes ascHashPend { 0%, 12% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes ascHashDone { 0%, 12% { opacity: 0; } 19%, 100% { opacity: 1; } }

/* Ambient loops stay parked until their group scrolls into view. */
.asc [data-live-group] [data-pa] { animation-play-state: paused; }
.asc [data-live-group][data-live="on"] [data-pa] { animation-play-state: running; }

/* ── shared atoms ── */
.asc-sec {
  padding: clamp(84px, 11vh, 132px) 5vw;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  scroll-margin-top: 90px;
  position: relative;
  z-index: 1;
}
.asc-head { max-width: 660px; margin: 0 auto; text-align: center; }
.asc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Alioro Mono", monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t2); margin-bottom: 18px; padding: 7px 15px; border-radius: 999px;
}
.asc-eyebrow svg { flex: none; }
.asc-h2 {
  font-size: clamp(30px, 3.8vw, 50px); letter-spacing: -.03em; line-height: 1.06;
  font-weight: 800; margin: 0 0 .4em; text-wrap: balance;
}
.asc-sub { color: var(--t2); font-size: 16.5px; line-height: 1.6; margin: 0; text-wrap: pretty; }
.asc-mchip {
  font-family: "Alioro Mono", monospace; font-size: 10px; letter-spacing: .06em;
  color: var(--t2); padding: 5px 11px; border-radius: 999px;
}
.asc-tick { flex: none; }
.asc-bullet {
  padding: 6px 0; display: flex; align-items: center; gap: 13px;
  color: var(--t2); font-weight: 500; font-size: 14px;
}
.asc-glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd);
}
/* Solid fallback wherever backdrop-filter is unavailable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .asc-glass, .asc-nav, .asc-fcard, .asc-btn-glass { background: var(--fc-solid); }
}

/* buttons */
.asc-btn-primary {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 15px 30px; font-weight: 700; font-size: 16px;
  background: var(--brand-fill); color: var(--brand-fg);
  box-shadow: 0 14px 40px rgba(0, 137, 235, .35);
  transition: box-shadow .25s ease;
}
.asc-btn-primary:hover { box-shadow: 0 18px 50px rgba(0, 137, 235, .5); color: var(--brand-fg); }
.asc-btn-glass {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 15px 30px; font-weight: 700; font-size: 16px;
  color: var(--t1); background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-hi);
  transition: transform .15s ease;
}
.asc-btn-glass:hover { transform: translateY(-2px); color: var(--t1); }
.asc-btn-sm {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 14.5px;
  background: var(--brand-fill); color: var(--brand-fg);
  transition: transform .12s ease, box-shadow .2s ease;
}
.asc-btn-sm:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 137, 235, .35); color: var(--brand-fg); }

/* ═══ NAV ═══ */
.asc-nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 8px 8px 16px; border-radius: 999px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--elev2), var(--glass-hi);
  white-space: nowrap;
  transition: box-shadow .3s ease;
}
.asc-nav.asc-nav-lift { box-shadow: 0 12px 36px rgba(8, 15, 32, .26), var(--glass-hi); }
.asc-brand { display: inline-flex; align-items: center; margin-right: 8px; padding: 2px 4px; }
.asc-brand .asc-mark { width: 30px; height: auto; flex: none; overflow: visible; }
.asc-nav-login { margin-right: 2px; }
.asc-nav-link {
  color: var(--t2); font-weight: 600; font-size: 13.5px;
  padding: 7px 12px; border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}
.asc-nav-link:hover { color: var(--t1); background: var(--brand-soft); }
.asc-nav-div { width: 1px; height: 20px; background: var(--l1); margin: 0 6px; }
.asc-nav-theme {
  background: transparent; border: none; cursor: pointer; padding: 8px;
  border-radius: 50%; color: var(--t1); display: inline-flex;
  transition: background .15s ease;
}
.asc-nav-theme:hover { background: var(--brand-soft); }
/* Dark shows the sun (click for light); light shows the moon. */
.asc-only-dark, .asc-only-light { display: inline-flex; }
.asc-only-light { display: none; }
[data-theme="light"] .asc-only-dark { display: none; }
[data-theme="light"] .asc-only-light { display: inline-flex; }
.asc-nav-cta {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 9px 18px; font-weight: 700; font-size: 13.5px;
  background: var(--brand-fill); color: var(--brand-fg);
  transition: transform .12s ease, box-shadow .2s ease;
}
.asc-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 137, 235, .35); color: var(--brand-fg); }

/* ═══ HERO ═══ */
.asc-hero { position: relative; padding: clamp(120px, 16vh, 170px) 5vw 0; text-align: center; z-index: 1; }
.asc-dots-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
}
.asc-hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--hero-grid); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 50% 30%, #000 30%, transparent 75%);
  opacity: .5;
}
.asc-hero-copy { position: relative; z-index: 1; animation: ascHeroIn .8s var(--ease-out) both; }
.asc-h1 {
  font-weight: 800; font-size: clamp(52px, 8vw, 116px); line-height: .98;
  letter-spacing: -.03em; margin: 0; text-wrap: balance;
}
.asc-grad {
  background: linear-gradient(90deg, #0089eb, #2ba0ff, #00b842, #ffcc00, #ffa00a, #0089eb);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ascGradPan 8s linear infinite;
}
[data-theme="light"] .asc-grad { filter: brightness(.82) saturate(1.2); }
.asc-lede {
  max-width: 640px; margin: 28px auto 0;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--t2); text-wrap: pretty;
}
.asc-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.asc-truth {
  margin-top: 34px; font-family: "Alioro Mono", monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t3);
}
.asc-install {
  text-align: center; padding: 18px 5vw 0;
  font-family: "Alioro Mono", monospace; font-size: 12.5px; color: var(--t3);
  position: relative; z-index: 1;
}

/* hero stage */
.asc-stage {
  position: relative; max-width: 1280px; margin: clamp(56px, 8vh, 92px) auto 0;
  perspective: 1600px; z-index: 1;
  animation: ascStageIn 1s .15s var(--ease-out) both;
}
.asc-stage-glow { position: absolute; inset: -16% -6% -20%; z-index: 0; pointer-events: none; }
.asc-stage-glow i { position: absolute; border-radius: 50%; }
.asc-glow-a { left: 0; top: 0; width: 60%; height: 64%; background: radial-gradient(closest-side, rgba(0, 137, 235, .20), transparent 72%); }
.asc-glow-b { right: 0; bottom: 0; width: 54%; height: 58%; background: radial-gradient(closest-side, rgba(0, 184, 66, .13), transparent 72%); }
.asc-scene { position: relative; transform-style: preserve-3d; will-change: transform; transform: rotateX(6deg); }
.asc-slab {
  position: absolute; z-index: 0; border-radius: 26px; pointer-events: none;
  background: var(--glass); border: 1px solid var(--glass-brd); box-shadow: var(--elev2);
}
.asc-slab-l { left: -4%; width: 36%; top: 6%; height: 52%; transform: translateZ(-90px) rotate(-6deg); }
.asc-slab-r { right: -3.5%; width: 32%; top: 30%; height: 58%; transform: translateZ(-60px) rotate(5deg); }
.asc-floor {
  height: 150px; margin-top: -10px; background: var(--floor);
  transform: perspective(600px) rotateX(58deg) scale(1.1); transform-origin: top;
  filter: blur(2px); opacity: .8;
}

/* the app window */
.asc-win {
  position: relative; z-index: 1; display: flex; text-align: left; color: var(--t1);
  background: var(--aw-bg); border: 1px solid var(--glass-brd);
  border-radius: 20px; overflow: hidden; box-shadow: var(--aw-shadow);
}
.asc-glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(58% 42% at 50% -4%, rgba(255, 255, 255, .08), transparent 62%);
}
.asc-rail {
  width: 54px; flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 14px 0; background: var(--aw-rail); border-right: 1px solid var(--l2);
}
.asc-rail-mark { display: block; margin-bottom: 4px; width: 22px; height: auto; }
.asc-rail-i {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px;
  color: var(--t3); transition: color .15s ease, background .15s ease;
}
/* REMOVED this phase: .asc-rail-i:hover and .asc-rail-i.asc-spark:hover (both
   lifted to --brand-soft). The rail inside the hero window is a picture of the
   app, not the app: nothing here takes a click, so a hover state was inviting
   one three screens above the tabs that do work. The .asc-on pill stays, because
   it is telling you which page the picture is showing. */
.asc-rail-i.asc-on { color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-soft); }
.asc-rail-i.asc-spark { color: var(--sig5); }
.asc-win-body { flex: 1; min-width: 0; }
.asc-win-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px 12px; }
.asc-win-title { font-family: "Alioro", sans-serif; font-weight: 700; font-size: 17px; }
.asc-tabs { display: inline-flex; gap: 2px; background: var(--aw-well); border-radius: 8px; padding: 3px; }
.asc-tabs i {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--t3);
  padding: 4px 11px; border-radius: 6px; white-space: nowrap;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* REMOVED this phase, for the same reason as the rail above: .asc-tabs i:hover.
   These are <i> elements drawn to look like the board's view tabs; the real,
   clickable ones are .asc-vtab further down the page. */
.asc-tabs i.asc-on { color: var(--t1); background: var(--s1); box-shadow: var(--elev1); }
.asc-presence {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 7px; border-radius: 999px; background: var(--aw-well);
  box-shadow: inset 0 0 0 1px var(--l2); font-size: 11px; font-weight: 700; color: var(--on-ok);
}
.asc-av {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; color: var(--t1);
}
.asc-av-stack { margin-left: -7px; }
.asc-av-blue { background: rgba(0, 137, 235, .28); box-shadow: inset 0 0 0 1px rgba(0, 137, 235, .5); }
.asc-av-green { background: rgba(0, 184, 66, .28); box-shadow: inset 0 0 0 1px rgba(0, 184, 66, .5); }
.asc-av-yellow { background: rgba(255, 204, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 204, 0, .5); }
.asc-av-red { background: rgba(255, 50, 41, .28); box-shadow: inset 0 0 0 1px rgba(255, 50, 41, .5); }
.asc-av-orange { background: rgba(255, 160, 10, .28); box-shadow: inset 0 0 0 1px rgba(255, 160, 10, .5); }
.asc-presence .asc-av { box-shadow: inset 0 0 0 1px rgba(0, 137, 235, .5), 0 0 0 2px var(--s1); }
.asc-presence .asc-av-green { box-shadow: inset 0 0 0 1px rgba(0, 184, 66, .5), 0 0 0 2px var(--s1); }
.asc-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--sig4); display: inline-block; animation: ascLivePulse 2s ease infinite; }

.asc-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px 126px 76px; gap: 12px;
  padding: 8px 20px; font-family: "Alioro Mono", monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--t3);
  border-bottom: 1px solid var(--l2);
}
.asc-group {
  display: flex; align-items: center; gap: 8px; padding: 11px 20px 6px;
  font-size: 11.5px; font-weight: 700;
}
.asc-group i { width: 3px; height: 14px; border-radius: 2px; }
.asc-group span { font-family: "Alioro Mono", monospace; font-size: 9.5px; font-weight: 500; color: var(--t3); }
.asc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px 126px 76px; gap: 12px;
  align-items: center; padding: 10px 20px; border-top: 1px solid var(--l2);
  transition: background .3s ease;
}
.asc-row:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.asc-row-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asc-chip {
  display: inline-flex; align-items: center; gap: 7px; color: var(--t1);
  font-weight: 600; font-size: 11px; padding: 3px 10px; border-radius: 6px;
}
.asc-chip i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.asc-date {
  font-family: "Alioro Mono", monospace; font-size: 10.5px; color: var(--t3);
  background: var(--aw-well); border-radius: 5px; padding: 3px 7px; text-align: center;
}
.asc-newrow { visibility: hidden; }
.asc-meter { display: flex; gap: 4px; height: 4px; margin: 12px 20px 16px; opacity: .9; }
.asc-meter i { border-radius: 4px; transition: flex .6s var(--ease-out); }

/* floating cast cards over the stage */
.asc-fc {
  position: absolute; z-index: 2;
  transform: translateZ(60px) translateY(14px) scale(.96);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-spring), visibility 0s;
}
.asc-fc.asc-in { opacity: 1; visibility: visible; transform: translateZ(60px); }
.asc-fc-auto { right: 22px; bottom: 26px; }
.asc-fc-claude { left: 22px; bottom: 26px; }
.asc-fc-sam { left: -16px; top: 14%; }
.asc-fc-ana { right: -14px; top: 38%; }
.asc-fcard {
  display: flex; gap: 10px; align-items: flex-start; max-width: 280px; text-align: left;
  padding: 13px 15px; border-radius: 16px; font-size: 12.5px; line-height: 1.45; color: var(--t1);
  background: var(--fc-solid);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd); box-shadow: var(--elev3), var(--glass-hi);
}
.asc-fcard b {
  display: block; font-family: "Alioro Mono", monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin-bottom: 2px;
}
/* Tile portraits: ground is a per-theme tint, label text is always --t1.
   This is the token-level fix for the light-mode icon-tile contrast bug. */
.asc-tile { display: block; border-radius: 50%; flex: none; box-shadow: 0 3px 8px rgba(0, 0, 0, .18), 0 0 0 1px var(--tile-ring); }
.asc-badge {
  position: absolute; right: -4px; top: -3px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; color: #fff; background: #0089eb;
  box-shadow: 0 1px 3px rgba(10, 14, 24, .3);
}
.asc-cursor {
  position: absolute; z-index: 3; opacity: 0; pointer-events: none;
  transition: left 1.1s var(--ease-out), top 1.1s var(--ease-out), opacity .4s ease;
}
.asc-cursor svg { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35)); }
.asc-cursor span {
  display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 999px;
  padding: 3px 9px; margin: 3px 0 0 12px;
}

/* ═══ THREE PROMISES ═══ */
.asc-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; max-width: 1240px; margin: 56px auto 0; }
.asc-card {
  position: relative; background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd); border-radius: 22px; padding: 28px; overflow: hidden;
  box-shadow: var(--elev2), var(--glass-hi);
  transition: transform .2s var(--ease-out), box-shadow .3s ease; will-change: transform;
}
.asc-card:hover { box-shadow: var(--elev3), var(--glass-hi); }
.asc-card-bar { position: absolute; inset: 0 0 auto 0; height: 3px; }
.asc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.asc-card-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
.asc-card-num { font-family: "Alioro Mono", monospace; font-size: 10px; letter-spacing: .14em; color: var(--t3); }
.asc-card h3 { font-size: 23px; font-weight: 800; margin: 0 0 8px; }
.asc-card p { color: var(--t2); font-size: 15px; line-height: 1.55; margin: 0; text-wrap: pretty; }
.asc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.asc-demo {
  margin-top: 20px; background: var(--s2); border-radius: 12px; padding: 14px;
  min-height: 120px; border: 1px solid var(--l2);
}
.asc-demo-term { font-family: "Alioro Mono", monospace; font-size: 12.5px; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.asc-caret { font-style: normal; width: 7px; height: 15px; background: var(--brand); animation: ascCaretBlink 1.1s step-end infinite; display: inline-block; }
.asc-custody { display: flex; align-items: center; gap: 10px; margin-top: 3px; padding-top: 10px; border-top: 1px solid var(--l2); }
.asc-custody-slot { position: relative; display: block; flex: none; width: 118px; height: 15px; }
.asc-custody-slot span {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: .04em; color: var(--t3); white-space: nowrap;
}
.asc-custody-slot i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.asc-hold {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--on-ok); white-space: nowrap;
}
/* two-browser vignette */
.asc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-content: center; }
.asc-pane { position: relative; background: var(--s1); border: 1px solid var(--l2); border-radius: 9px; padding: 8px 8px 24px; overflow: hidden; }
.asc-pane-h {
  display: flex; align-items: center; gap: 7px; font-family: "Alioro Mono", monospace;
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); padding: 1px 5px 8px;
}
.asc-pane-h i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.asc-pane-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 11px; font-weight: 600; padding: 7px 8px; border-radius: 6px; background: var(--s2);
  white-space: nowrap; overflow: hidden;
}
.asc-pane-row > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.asc-slot { position: relative; display: block; flex: none; width: 70px; height: 16px; }
.asc-slot span {
  position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px;
}
.asc-slot i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.asc-pane-dim { font-size: 11px; font-weight: 600; padding: 7px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t2); }
.asc-sweep { position: absolute; inset: 0; transform: translateX(-100%); }
.asc-landline { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: left; }
.asc-note { margin-top: 10px; font-family: "Alioro Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
/* signed register vignette */
.asc-reg { position: relative; border-radius: 12px; padding: 12px 16px; background: var(--s2); border: 1px solid var(--l2); overflow: hidden; }
.asc-reg-wash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 92% -10%, rgba(0, 184, 66, .10), transparent 55%),
              radial-gradient(100% 70% at 0% 115%, rgba(0, 137, 235, .08), transparent 60%);
}
.asc-reg-h {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: "Alioro Mono", monospace; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t3); padding-bottom: 7px;
}
.asc-reg-row {
  position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--l2); font-size: 12.5px; font-weight: 600; overflow: hidden;
}
.asc-sign { position: relative; display: block; flex: none; width: 46px; height: 22px; }
.asc-sign svg { position: absolute; left: 0; top: 0; overflow: visible; }
.asc-sign path { stroke-dasharray: 112; stroke-dashoffset: 112; }
.asc-sealed {
  font-family: "Alioro Mono", monospace; font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--on-ok); padding: 3px 8px; border-radius: 5px;
  background: color-mix(in srgb, var(--sig4) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig4) 32%, transparent);
}
.asc-hash { position: relative; display: block; flex: none; width: 88px; height: 13px; }
.asc-hash i {
  position: absolute; right: 0; top: 0; font-style: normal;
  font-family: "Alioro Mono", monospace; font-size: 9.5px; color: var(--t3); white-space: nowrap;
}
.asc-reg-line {
  position: relative; display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--l2); font-size: 12.5px; font-weight: 600;
}
.asc-reg-line i { font-style: normal; font-family: "Alioro Mono", monospace; font-size: 9.5px; color: var(--t3); white-space: nowrap; }

/* ═══ FIVE VIEWS ═══ */
.asc-vtabs {
  display: flex; gap: 4px; background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-hi);
  padding: 5px; border-radius: 999px; width: max-content; max-width: 100%;
  margin: 44px auto 0; overflow-x: auto;
}
.asc-vtab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; border: none;
  background: none; color: var(--t2); padding: 10px 16px; border-radius: 999px;
  font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
  font-family: "Alioro", sans-serif; transition: color .18s ease, background .18s ease;
}
.asc-vtab[aria-pressed="true"] { background: var(--t1); color: var(--s0); }
.asc-vtab span { display: inline-flex; }
.asc-vstage {
  margin: 32px auto 0; max-width: 1320px; background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd); border-radius: 26px;
  box-shadow: var(--elev2), var(--glass-hi); padding: clamp(20px, 3vw, 36px);
}
.asc-vsplit { display: flex; gap: 4vw; align-items: center; flex-wrap: wrap; }
.asc-vwin { border-radius: 16px; overflow: hidden; background: var(--s0); border: 1px solid var(--l2); box-shadow: var(--elev2); }
.asc-vwin-h { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--l2); background: var(--s1); }
.asc-traffic { display: flex; gap: 5px; }
.asc-traffic i { width: 9px; height: 9px; border-radius: 50%; opacity: .75; }
.asc-vwin-t { font-family: "Alioro Mono", monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.asc-vwin-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: "Alioro Mono", monospace; font-size: 9px; font-weight: 600;
  letter-spacing: .1em; color: var(--on-ok);
}
.asc-vwin-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--sig4); animation: ascLivePulse 2s ease infinite; }
.asc-vbody { padding: 14px; min-height: 218px; animation: ascFadeUp .4s ease both; }
.asc-vrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px 96px; gap: 10px; align-items: center;
  background: var(--s1); border: 1px solid var(--l2); border-radius: 8px; padding: 8px 10px;
}
.asc-vhead {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px 96px; gap: 10px; padding: 2px 10px 8px;
  font-family: "Alioro Mono", monospace; font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--t3);
}
.asc-vname { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asc-av-sm { width: 20px; height: 20px; font-size: 8.5px; }
.asc-av-xs { width: 16px; height: 16px; font-size: 7px; }
.asc-vchip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 10px; padding: 3px 8px; border-radius: 6px; }
.asc-vchip i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
/* kanban */
.asc-klanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-items: start; }
.asc-klane { background: var(--s2); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.asc-klane-h {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 2px 0;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t2); font-family: "Alioro", sans-serif;
}
.asc-klane-h i:first-child { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.asc-klane-h i:last-child { font-style: normal; margin-left: auto; font-family: "Alioro Mono", monospace; color: var(--t3); }
.asc-kcard { background: var(--s1); border: 1px solid var(--l2); border-radius: 7px; padding: 8px 9px; }
.asc-kcard > span:first-child { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asc-kmeta { display: flex; align-items: center; margin-top: 7px; }
.asc-kmeta i { font-style: normal; margin-left: auto; font-family: "Alioro Mono", monospace; font-size: 8.5px; color: var(--t3); }
/* calendar */
.asc-calh { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 2px 8px; }
.asc-calh b { font-size: 11.5px; font-family: "Alioro", sans-serif; color: var(--t1); }
.asc-calh span { font-family: "Alioro Mono", monospace; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.asc-caldow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  font-family: "Alioro Mono", monospace; font-size: 7.5px; color: var(--t3);
  text-align: center; padding-bottom: 5px;
}
.asc-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.asc-cell {
  position: relative; border-radius: 6px; background: var(--s1); border: 1px solid var(--l2);
  height: 36px; padding: 3px 5px; font-family: "Alioro Mono", monospace; font-size: 8px; color: var(--t3);
}
.asc-cell.asc-today { box-shadow: inset 0 0 0 1.5px var(--brand); }
.asc-cal-ev {
  position: absolute; left: 3px; right: 3px; bottom: 3px; height: 12px; border-radius: 6px;
  color: var(--t1); font-style: normal; font-family: "Alioro", sans-serif;
  font-size: 7.5px; font-weight: 700; line-height: 12px; padding: 0 4px;
  overflow: hidden; white-space: nowrap;
}
/* timeline */
.asc-gcols { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding-bottom: 4px; }
.asc-gcols span:last-child { display: flex; justify-content: space-between; font-family: "Alioro Mono", monospace; font-size: 8.5px; letter-spacing: .08em; color: var(--t3); }
.asc-gwrap { position: relative; padding-top: 16px; }
.asc-gtoday { position: absolute; top: 0; bottom: 2px; left: calc(106px + (100% - 106px) * .42); border-left: 1.5px dashed var(--brand); opacity: .7; }
.asc-gtoday-t {
  position: absolute; top: -6px; left: calc(106px + (100% - 106px) * .42); transform: translateX(-50%);
  font-style: normal; font-family: "Alioro Mono", monospace; font-size: 7.5px; font-weight: 600;
  letter-spacing: .08em; background: var(--brand); color: #fff; padding: 2px 6px; border-radius: 4px;
}
.asc-grow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; }
.asc-grow > span:first-child { font-size: 10.5px; font-weight: 600; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asc-gtrack { position: relative; height: 14px; }
.asc-gbar { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
/* dashboard */
.asc-dash { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.asc-donut { position: relative; width: 116px; height: 116px; border-radius: 50%; animation: ascSpinIn 1s var(--ease-out) both; }
.asc-donut i {
  position: absolute; inset: 25px; background: var(--s0); border-radius: 50%;
  display: grid; place-content: center; text-align: center; font-style: normal;
  font-family: "Alioro", sans-serif; font-weight: 800; font-size: 21px; line-height: 1; color: var(--t1);
}
.asc-donut i span { display: block; font-family: "Alioro Mono", monospace; font-size: 7px; font-weight: 500; letter-spacing: .12em; color: var(--t3); margin-top: 3px; }
.asc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 14px; }
.asc-legend span { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; color: var(--t2); }
.asc-legend i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.asc-wl { font-family: "Alioro Mono", monospace; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-bottom: 7px; }
.asc-bars { display: flex; align-items: flex-end; gap: 8px; height: 52px; }
.asc-bars i { flex: 1; border-radius: 4px 4px 2px 2px; }
.asc-bars-x { display: flex; gap: 8px; margin-top: 5px; font-family: "Alioro Mono", monospace; font-size: 7.5px; color: var(--t3); text-align: center; }
.asc-bars-x em { font-style: normal; flex: 1; }
.asc-vcopy h3 { font-size: 22px; font-weight: 800; margin: 0 0 .4em; }
.asc-vcopy p { color: var(--t2); line-height: 1.65; font-size: 14.5px; margin: 0; }

/* ═══ RECORDS ═══ */
.asc-split { display: flex; gap: 6vw; align-items: center; flex-wrap: wrap; }
.asc-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.asc-flow-chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 6px; }
.asc-flow-chip i { width: 7px; height: 7px; border-radius: 50%; }
.asc-audit {
  position: relative; border-radius: 18px; background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd); box-shadow: var(--elev3), var(--glass-hi); overflow: hidden;
}
.asc-audit-wash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 90% -10%, rgba(0, 184, 66, .12), transparent 55%),
              radial-gradient(100% 70% at 0% 112%, rgba(0, 137, 235, .12), transparent 60%);
}
.asc-audit-h {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 16px 20px 10px;
  font-family: "Alioro Mono", monospace; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t3);
}
.asc-audit-h span { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--on-ok); font-weight: 600; }
.asc-audit-h span i { width: 7px; height: 7px; border-radius: 50%; background: var(--sig4); animation: ascLivePulse 2s ease infinite; }
.asc-tl { position: relative; padding: 2px 20px 6px; }
.asc-tl-row { position: relative; display: flex; gap: 14px; padding: 9px 0; }
.asc-tl-rail { position: relative; flex: none; width: 14px; display: flex; justify-content: center; }
.asc-tl-rail em { position: absolute; top: 20px; bottom: -12px; width: 1.5px; background: var(--l2); font-style: normal; }
.asc-tl-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.asc-tl-txt { min-width: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--t2); }
.asc-tl-txt b { color: var(--t1); }
.asc-tl-meta { display: block; font-family: "Alioro Mono", monospace; font-size: 9.5px; color: var(--t3); margin-top: 2px; }
.asc-stamp {
  position: relative; display: flex; align-items: center; gap: 11px; margin: 8px 16px 16px;
  padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--sig4) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig4) 30%, transparent);
}
.asc-stamp-ico {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
  color: var(--sig4); background: color-mix(in srgb, var(--sig4) 16%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--sig4) 35%, transparent);
}
.asc-stamp-txt { min-width: 0; font-size: 12.5px; line-height: 1.45; }
.asc-stamp-txt span { color: var(--t3); font-family: "Alioro Mono", monospace; font-size: 10px; }
.asc-stamp-seal {
  margin-left: auto; flex: none; font-family: "Alioro Mono", monospace; font-size: 9.5px;
  font-weight: 600; color: var(--on-ok); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--sig4), 0 0 18px color-mix(in srgb, var(--sig4) 30%, transparent);
  animation: ascSealIn .5s var(--ease-spring) .4s both;
}

/* ═══ CAST ═══ */
.asc-cast-wrap { position: relative; max-width: 1280px; margin: 56px auto 0; }
.asc-cast-vp {
  overflow: hidden; padding: 24px 10px 48px; margin: -24px -10px -48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(20px, 5vw, 44px), #000 calc(100% - clamp(20px, 5vw, 44px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 clamp(20px, 5vw, 44px), #000 calc(100% - clamp(20px, 5vw, 44px)), transparent 100%);
}
.asc-cast-track { display: flex; gap: 24px; transform: translateX(0); transition: transform .55s var(--ease-out); will-change: transform; }
.asc-cast-card {
  flex: 0 0 min(340px, 80vw); position: relative; border-radius: 24px; overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd); box-shadow: var(--elev2), var(--glass-hi);
  transition: transform .2s var(--ease-out), box-shadow .3s ease; will-change: transform;
}
.asc-cast-card:hover { box-shadow: var(--elev3), var(--glass-hi); }
.asc-cast-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(55% 45% at 50% 0%, rgba(255, 255, 255, .09), transparent 62%); }
.asc-cast-port { position: relative; height: 250px; margin: 10px 10px 0; border-radius: 17px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--l2); }
.asc-cast-port > i { position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 0%, rgba(255, 255, 255, .14), transparent 60%); }
.asc-cast-port svg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 92%; filter: drop-shadow(0 16px 24px rgba(6, 12, 24, .35)); }
.asc-cast-tag {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd); box-shadow: var(--elev2);
  font-size: 11.5px; font-weight: 600; color: var(--t1);
}
.asc-cast-tag i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.asc-cast-body { position: relative; padding: 16px 18px 18px; }
.asc-cast-body b { display: block; font-family: "Alioro", sans-serif; font-size: 17px; }
.asc-cast-body small { font-weight: 400; color: var(--t3); font-family: "Alioro", sans-serif; font-size: 12px; }
.asc-cast-body span { display: block; font-size: 13px; color: var(--t2); line-height: 1.5; margin-top: 4px; }
.asc-cast-nav {
  position: absolute; top: 38%; z-index: 4; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--glass-brd); background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  color: var(--t1); cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--elev2), var(--glass-hi); transition: transform .15s ease;
}
.asc-cast-nav:hover { transform: scale(1.08); }
/* the ends of the deck: the arrow must LOOK spent, not merely ignore the click */
.asc-cast-nav[aria-disabled="true"] { opacity: .38; cursor: default; }
.asc-cast-nav[aria-disabled="true"]:hover { transform: none; }
.asc-cast-prev { left: -14px; }
.asc-cast-next { right: -14px; }
.asc-cast-dots { display: flex; gap: 7px; justify-content: center; margin-top: 24px; }
.asc-cast-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--l1);
  border: none; cursor: pointer; padding: 0; transition: width .25s ease, background .25s ease;
}
.asc-cast-dot[aria-current="true"] { width: 22px; background: var(--brand); }

/* ═══ FAQ ═══ */
.asc-faq-list { max-width: 760px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 12px; }
.asc-faq {
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  border: 1px solid var(--glass-brd); border-radius: 16px;
  box-shadow: var(--elev1), var(--glass-hi); overflow: hidden;
}
.asc-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  text-align: left; background: none; border: none; cursor: pointer; padding: 18px 22px;
  color: var(--t1); font-family: "Alioro", sans-serif; font-size: 15.5px; font-weight: 700;
  transition: background .15s ease;
}
.asc-faq-q:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.asc-faq-i {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: var(--t2); background: var(--brand-soft);
  transition: transform .3s var(--ease-spring), background .2s ease, color .2s ease;
}
.asc-faq[data-open="1"] .asc-faq-i { color: var(--brand-fg); background: var(--brand); transform: rotate(45deg); }
/* 0fr hid a closed answer visually only, so aria-expanded="false" lied and a
   screen reader read all six answers. visibility leaves the tree, but only
   after the collapse has finished animating. */
.asc-faq-a {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .35s var(--ease-out), visibility 0s linear .35s;
}
.asc-faq[data-open="1"] .asc-faq-a {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .35s var(--ease-out), visibility 0s;
}
.asc-faq-a > div { overflow: hidden; }
.asc-faq-a p { margin: 0; padding: 0 60px 18px 22px; color: var(--t2); font-size: 14px; line-height: 1.65; text-wrap: pretty; }

/* ═══ FINALE ═══ */
.asc-band { position: relative; border-top: 1px solid var(--l2); background: var(--band-bg); z-index: 1; }
.asc-asm-wrap { height: 128vh; }
.asc-asm-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 5vw; }
.asc-asm-k { font-family: "Alioro Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-bottom: 44px; text-align: center; }
.asc-asm-stage { position: relative; width: min(270px, 60vw); aspect-ratio: 508 / 568; margin-bottom: 52px; }
.asc-asm-glow { position: absolute; inset: -34%; border-radius: 50%; background: radial-gradient(50% 46% at 50% 50%, rgba(0, 137, 235, .22), transparent 70%); opacity: 0; pointer-events: none; }
.asc-asm-dot { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; will-change: transform, opacity; }
.asc-asm-end { text-align: center; opacity: 0; will-change: transform, opacity; }
.asc-asm-end h2 { font-size: clamp(30px, 4.2vw, 54px); letter-spacing: -.03em; line-height: 1.05; font-weight: 800; margin: 0 0 18px; text-wrap: balance; }
.asc-asm-end p { color: var(--t2); font-size: 16.5px; margin: 0 0 32px; text-wrap: pretty; }
.asc-asm-end .asc-truth { margin-top: 24px; font-size: 12px; }

/* ═══ FOOTER ═══ */
.asc-foot { background: var(--s1); border-top: 1px solid var(--l1); position: relative; z-index: 1; overflow: hidden; }
.asc-foot-hair { position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--brand), transparent); opacity: .6; }
.asc-foot-grid {
  max-width: 1400px; margin: 0 auto; padding: 64px 6vw 0;
  display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(150px, 1fr)); gap: 36px 28px;
}
.asc-foot-brand { display: inline-flex; align-items: center; }
.asc-foot-brand .asc-mark { width: 30px; height: auto; }
.asc-foot p { color: var(--t3); font-size: 13.5px; line-height: 1.65; margin: 14px 0 20px; max-width: 280px; text-wrap: pretty; }
.asc-foot-live {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--on-ok); padding: 7px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--sig4) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig4) 28%, transparent);
}
.asc-foot-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--sig4); animation: ascLivePulse 2s ease infinite; }
.asc-foot-col { display: flex; flex-direction: column; }
.asc-foot-col h3 {
  margin: 0 0 14px; color: var(--t3); font-family: "Alioro Mono", monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
/* Scoped under .asc so these out-rank `.asc a:not([class])`, which would
   otherwise paint the unclassed footer links brand-blue. */
.asc .asc-foot-col a { color: var(--t2); padding: 5px 0; font-size: 13.5px; font-weight: 500; transition: color .15s ease; }
.asc .asc-foot-col a:hover { color: var(--brand-hov); }
.asc-foot-col span { padding: 5px 0; font-size: 13.5px; color: var(--t3); }
.asc-foot-ico { display: flex; align-items: center; gap: 10px; }
.asc-foot-ico:hover { color: var(--t1); }
.asc-foot-ico span { width: 22px; height: 22px; border-radius: 6px; flex: none; display: grid; place-items: center; padding: 0; }
.asc-foot-bar {
  max-width: 1400px; margin: 56px auto 0; padding: 20px 6vw 32px; border-top: 1px solid var(--l2);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--t3);
}
.asc-foot-bar b { font-family: "Alioro", sans-serif; font-weight: 800; font-size: 13.5px; color: var(--t2); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1150px) {
  .asc-foot-grid { grid-template-columns: 1fr 1fr; }
  .asc-foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .asc-bento > .asc-card { grid-column: span 12 !important; }
}
@media (max-width: 820px) {
  .asc-tabs { display: none; }
  .asc-nav { top: 10px; padding: 6px 6px 6px 12px; gap: 3px; }
  .asc-fc { display: none; }
  .asc-slab { display: none; }
}
/* Product / Views / Records / Claude used to vanish at 820px with nothing in
   their place, which left a tablet with no route into the page but the footer.
   They fit once the type and the padding tighten (about 570px of pill inside a
   768px window). A hamburger would have been the icon-only affordance the
   design rules forbid, so the labels stay. Phones keep the full-size type. */
@media (min-width: 701px) and (max-width: 820px) {
  .asc-nav-link { font-size: 12.5px; padding: 7px 9px; }
  .asc-nav-cta { font-size: 13px; padding: 9px 15px; }
  .asc-brand { margin-right: 4px; }
  .asc-nav-div { margin: 0 4px; }
}
@media (max-width: 700px) {
  .asc-two { grid-template-columns: minmax(0, 1fr); }
  .asc-dash { grid-template-columns: minmax(0, 1fr); }
  .asc-klanes { grid-template-columns: 1fr; }
  .asc-rail { display: none; }
  .asc-cols, .asc-row { grid-template-columns: minmax(0, 1fr) 44px 108px; }
  .asc-cols > span:last-child, .asc-row > .asc-date { display: none; }
  .asc-asm-wrap { height: 118vh; }
  .asc-cast-nav { display: none; }
  /* No room for the section links at this width; the footer carries them. */
  .asc-nav-link:not(.asc-nav-login) { display: none; }
}
/* 44px hit areas. Nothing grows visually: the padding does the work, and the
   deck's dots keep their 8px body while the button around them becomes the
   target. Dots that stay 7px apart cannot each own 44px without covering
   their neighbour, so the row trades its gap for the targets.
   PORTRAIT ONLY, like app.css:3736: a phone on its side has 375px of height to
   spend, and spending it on padding is exactly what the compact landscape
   layout exists to avoid. */
@media (max-width: 700px) and (min-height: 441px) {
  .asc-brand { padding: 7px 4px; }
  .asc-nav-theme { padding: 14px; }
  .asc-nav-link, .asc-nav-cta { padding-top: 14px; padding-bottom: 14px; }
  .asc-vtab { padding-top: 14px; padding-bottom: 14px; }
  /* The footer's plain links measured 42px: 13px either side of a 16px line
     box, two short. The floor is stated outright as well as padded, so a
     fallback font with a shorter line box cannot drop them under it again. */
  .asc .asc-foot-col a {
    display: flex; align-items: center; min-height: 44px;
    padding-top: 14px; padding-bottom: 14px;
  }
  .asc-cast-dots { gap: 0; }
  .asc-cast-dot {
    width: 44px; height: 44px; background: none; display: grid; place-items: center;
    transition: none;
  }
  .asc-cast-dot::before {
    content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--l1);
    transition: width .25s ease, background .25s ease;
  }
  .asc-cast-dot[aria-current="true"] { width: 44px; background: none; }
  .asc-cast-dot[aria-current="true"]::before { width: 22px; background: var(--brand); }
}
@media (max-width: 460px) {
  .asc-foot-grid { grid-template-columns: 1fr; }
  .asc-vtabs {
    width: 100%; justify-content: flex-start;
    /* Timeline and Dashboard sit past the right edge here with nothing to say
       so. The strip now fades under its own right edge, so the cut-off tab
       dissolving IS the affordance. The blur comes off first: a mask over a
       backdrop-filter leaks a hard-edged rectangle in Safari, and phone chrome
       is solid by convention anyway. */
    background: var(--fc-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .asc-vtab { scroll-snap-align: center; }
  /* the truth line wrapped with "PAY" orphaned on its own row */
  .asc-truth { font-size: 10.5px; letter-spacing: .06em; text-wrap: balance; }
  .asc-asm-end .asc-truth { font-size: 11px; }
  .asc-nav { gap: 2px; padding: 6px 6px 6px 10px; }
  .asc-brand { margin-right: 2px; }
  .asc-nav-cta { padding-left: 14px; padding-right: 14px; }
}
/* Touch targets: hover-only affordances become always-visible. */
@media (hover: none) {
  .asc-cast-nav { display: none; }
  .asc-cast-vp { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .asc-cast-card { scroll-snap-align: center; }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .asc *, .asc *::before, .asc *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .asc-cast-track { transition: none; }
}

/* ═══ PHONES: THE CHROME IS SOLID (phase-61) ═══
   The app has gone fully solid under 700px since phase-37, for a measured
   reason: a per-frame blur under a fixed bar costs real frames on a phone.
   This file never got the rule. Twelve selectors carry blur(22px), and at
   375px twenty-one of them are on screen at once (1 nav, 1 glass button,
   3 bento cards, 1 view stage, 1 audit panel, 4 cast cards, 4 cast tags,
   6 FAQ rows; the four float cards and the two deck arrows are already
   display:none by then, and the view strip already dropped its blur at
   460px). Twenty-one blurred layers is the landing's speed bill.

   Eight of the twelve keep their exact tint and lose only the blur, because
   they stand on the page's static gradient, where a blur hands back the
   pixels it was given. Four do not, and they are the four with something
   real behind them: the nav is fixed over scrolling content, so it goes
   fully opaque (what .board-head does in the app at this width); the glass
   button, the float cards and the deck tag sit over the hero art and the
   portraits, so they take --fc-solid, which is the tint this file already
   falls back to wherever backdrop-filter is unsupported and the one the
   view strip already took at 460px when its blur came off.

   DESKTOP IS UNTOUCHED. This block is the last thing in the file, so no
   later rule can put a blur back under phone chrome.
   ═══ */
@media (max-width: 700px) {
  /* every pane that carried blur(22px) drops it */
  .asc-glass, .asc-btn-glass, .asc-nav, .asc-fcard, .asc-card,
  .asc-vtabs, .asc-vstage, .asc-audit, .asc-cast-card, .asc-cast-tag,
  .asc-cast-nav, .asc-faq {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* the panes this file already thickens wherever backdrop-filter is
     unavailable (the @supports not block above) are thickened here too */
  .asc-glass, .asc-btn-glass, .asc-fcard { background: var(--fc-solid); }
  /* fixed over scrolling content: the only one whose blur was doing real
     work, so it goes opaque rather than merely unblurred */
  .asc-nav { background: var(--chrome-solid); }
  /* the deck tag is the other one with something real behind it: a portrait,
     not a gradient. Same answer the view strip already gives at 460px. */
  .asc-cast-tag { background: var(--fc-solid); }
}