/* ============================================================================
   Accountech4U - scroll site. Page styles only.
   The engine (scrollcraft.css / scrollcraft.js) is the mechanism and is never
   edited. This file overrides the six colour roles and two faces, then styles
   the page's own markup. Grammar: live surface. Everything here is authored to
   the taste floor: transform/opacity motion, ease-out, tinted depth, one accent.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
/* Palette, surfaces and faces follow the accountech4u.com brand site
   (its Tailwind tokens, read from the deployed stylesheet 2026-09-02):
   midnight #050810, navy-deep #0a1120, white #f4f6fb / dim #9ba3b8 /
   muted #5a6478, electric #2b7fff with electric-light #5ba0ff, teal #00c2d1,
   success #00d68f, danger #ff4e6a, gold #f6c90e; hero gradient
   135deg electric -> electric-light -> teal; glass borders are electric at
   8-25 percent over navy; glows are electric at 10-12 percent. Display and
   text faces are the brand's Space Grotesk + DM Sans; the data face stays
   Geist Mono because the brand site ships no monospace and the console
   needs tabular figures. Radii 6/10/14 are kept for panels; CTAs and
   badges are pills, as on the brand site. */
:root {
  --sc-canvas:      #050810;   /* brand midnight, the accountech4u.com ground  */
  --sc-surface:     #0a1120;   /* brand navy-deep, the raised surface          */
  --sc-ink:         #f4f6fb;   /* brand white                                  */
  --sc-ink-soft:    #9ba3b8;   /* brand white-dim                              */
  --sc-accent:      #2b7fff;   /* brand electric blue, the site's primary      */
  --sc-accent-ink:  #f4f6fb;   /* white on electric, as the brand site's CTAs  */
  --sc-accent-2:    #00c2d1;   /* brand teal, the far stop of the hero gradient */
  --sc-accent-light:#5ba0ff;   /* brand electric-light: eyebrows, badges, hover */
  --sc-gradient-hero:     linear-gradient(135deg, #2b7fff 0%, #5ba0ff 40%, #00c2d1 100%);
  --sc-gradient-electric: linear-gradient(135deg, #2b7fff, #00c2d1);
  --sc-glow-sm: 0 0 30px rgba(43, 127, 255, 0.10);
  --sc-glow-md: 0 0 60px rgba(43, 127, 255, 0.12);

  /* app radii scale (r-1 / r-2 / r-3) instead of the engine defaults */
  --sc-r-sm: 6px;  --sc-r-md: 10px;  --sc-r-lg: 14px;

  /* shadows tinted to the navy canvas */
  --sc-shadow-color: 225 50% 2%;

  /* second surface tint, a deeper panel floor, and glass hairlines: electric
     blue at 14 / 25 percent over navy-deep, the brand site's card borders */
  --ae-surface-2:   #0d1526;   /* brand bg-elevated */
  --ae-panel:       #080d18;   /* between midnight and navy-deep, panel floor */
  --ae-line:        #0f203f;   /* electric 14 percent over navy-deep */
  --ae-line-strong: #122d58;   /* electric 25 percent over navy-deep */
  --ae-navy:        #0a1120;   /* brand navy-deep (kept for any later use) */
  --ae-accent-dim:  color-mix(in oklab, var(--sc-accent) 60%, var(--sc-ink-soft));
  --ae-accent-wash: color-mix(in oklab, var(--sc-accent) 12%, transparent);

  /* functional severity - the brand site's own status colours. Used ONLY
     inside the demo console, where colour is information, never as a second
     brand accent scattered as decoration. */
  --ae-ok:    #00d68f;
  --ae-warn:  #f6c90e;
  --ae-info:  #00c2d1;
  --ae-crit:  #ff4e6a;

  --sc-font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --sc-font-text:    "DM Sans", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --ae-bar-h: 52px;
  --ae-ledger-h: 54px;
}

/* Fixed chrome tightens the ground so nothing tunnels under the bars. */
body {
  background: var(--sc-canvas);
  -webkit-font-smoothing: antialiased;
}
html, body { overflow-x: clip; }

/* A calm ambient field behind everything: the two brand hues only, no purple. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 85% -10%, color-mix(in oklab, var(--sc-accent) 7%, transparent), transparent 55%),
    radial-gradient(90% 70% at 8% 108%, color-mix(in oklab, var(--sc-accent-2) 6%, transparent), transparent 60%);
  opacity: 0.9;
}
main { position: relative; z-index: 1; }

/* Scroll progress rides the brand's electric-to-teal gradient. This overrides the
   engine token from site.css (loaded after scrollcraft.css); the engine is untouched. */
[data-sc-progress] { background: var(--sc-gradient-electric); }

/* Tabular figures everywhere numbers appear in the console. */
.ae-mono, .ae-val, .ae-time, .ae-num { font-variant-numeric: tabular-nums; }

/* Sprite icons: a <use> clone does not inherit the sprite group's presentation
   attributes, so without this the line icons paint as filled blobs. fill and
   stroke are inheritable CSS properties, so setting them on the use element
   styles the cloned paths (paths carrying their own attributes still win). */
svg use { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------- shared atoms -- */
.ae-eyebrow {
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-accent-light);
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 0;
}
.ae-eyebrow::before {
  content: ""; width: 1.4rem; height: 1px;
  background: linear-gradient(90deg, var(--sc-accent), transparent);
}

.ae-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sc-font-mono);
  font-size: 0.72rem; letter-spacing: 0.01em;
  color: var(--sc-ink-soft);
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--ae-line);
  border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--sc-surface) 60%, transparent);
  white-space: nowrap;
}
.ae-chip svg { width: 13px; height: 13px; color: var(--ae-accent-dim); }

.ae-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 0 3px var(--ae-accent-wash);
  flex: none;
}

.ae-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sc-font-text); font-weight: 600;
  font-size: 0.95rem; line-height: 1;
  padding: 0.85rem 1.45rem;
  border-radius: var(--sc-r-pill);
  border: 1px solid transparent;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
  box-shadow: var(--sc-e2), var(--sc-glow-sm);
}
.ae-btn:hover { transform: translateY(-1px); background: var(--sc-accent-light); box-shadow: var(--sc-e2), var(--sc-glow-md); }
.ae-btn:active { transform: translateY(0) scale(0.985); }
.ae-btn svg { width: 17px; height: 17px; }
.ae-btn--ghost {
  background: color-mix(in oklab, var(--sc-surface) 55%, transparent); color: var(--sc-ink);
  border-color: var(--ae-line-strong);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: none;
}
.ae-btn--ghost:hover { background: color-mix(in oklab, var(--sc-accent) 10%, transparent); border-color: color-mix(in oklab, var(--sc-accent) 40%, transparent); transform: translateY(-1px); }

.ae-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--sc-ink); font-weight: 500;
  text-decoration: none;
  transition: gap 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.ae-link svg { width: 15px; height: 15px; color: var(--sc-accent); transition: transform 160ms var(--sc-ease-out); }
.ae-link:hover { color: var(--sc-accent); }
.ae-link:hover svg { transform: translateX(3px); }

/* ======================================================= top status bar == */
.ae-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--ae-bar-h);
  z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 2.2rem);
  background: color-mix(in oklab, var(--ae-panel) 98%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ae-line);
}
/* The wordmark treatment mirrors the accountech4u.com nav: display face,
   "Accountech" in ink, "4U" in the brand cyan (flat, not a gradient). */
.ae-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.ae-brand__word { font-family: var(--sc-font-display); font-size: 1.05rem; letter-spacing: -0.015em; }
.ae-brand__word b { font-weight: 600; color: var(--sc-ink); }
.ae-brand__word span { font-weight: 600; color: var(--sc-accent); }
.ae-bar__sep { width: 1px; height: 18px; background: var(--ae-line); }
.ae-bar__workspace {
  font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.ae-bar__right { margin-left: auto; display: inline-flex; align-items: center; gap: 1rem; }
.ae-bar__status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft); }
.ae-bar__clock { font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft); }
.ae-bar__demo {
  font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-accent-light); border: 1px solid color-mix(in oklab, var(--sc-accent) 35%, transparent);
  background: color-mix(in oklab, var(--sc-accent) 8%, transparent);
  border-radius: var(--sc-r-pill); padding: 0.22rem 0.55rem;
}
.ae-bar__signin {
  font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft);
  text-decoration: none; padding: 0.3rem 0.2rem; border-bottom: 1px solid transparent;
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.ae-bar__signin:hover, .ae-bar__signin:focus-visible { color: var(--sc-ink); border-bottom-color: var(--ae-line-strong); }
.ae-bar__status, .ae-bar__demo, .ae-bar__signin, .ae-brand__word { white-space: nowrap; }
@media (max-width: 720px) {
  .ae-bar__workspace, .ae-bar__sep, .ae-bar__clock { display: none; }
  .ae-bar { gap: 0.6rem; }
  .ae-bar__right { gap: 0.6rem; }
  .ae-bar__status { font-size: 0.68rem; }
  .ae-bar__demo { font-size: 0.66rem; letter-spacing: 0.06em; }
}
/* On the narrowest screens the honesty tag outranks the headcount, which the
   hero copy repeats anyway. */
@media (max-width: 480px) {
  .ae-bar__status { display: none; }
}

/* progress line sits just under the bar */
[data-sc-progress] { top: var(--ae-bar-h); height: 2px; }

/* Generic stage padding so console content clears the fixed bars. */
[data-sc-stage] { padding-top: var(--ae-bar-h); padding-bottom: var(--ae-ledger-h); }
.ae-wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 4rem); }

/* ============================================================ ACT 1 boot = */
.ae-boot { display: grid; place-items: center; height: 100%; }
.ae-boot__grid {
  width: 100%; max-width: 74rem; margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.ae-boot__say .ae-eyebrow { margin-bottom: 1.4rem; }
.ae-boot h1 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-2xl); line-height: 1.06; letter-spacing: -0.025em;
  margin: 0 0 1.1rem; text-wrap: balance;
}
/* The highlighted phrase carries the brand's hero gradient (electric -> teal),
   exactly as the headline on accountech4u.com. Solid accent is the fallback. */
.ae-boot h1 .ae-hl {
  color: var(--sc-accent);
  background: var(--sc-gradient-hero);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ae-boot__lede { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); max-width: 34ch; margin: 0 0 1.9rem; text-wrap: pretty; }
.ae-boot__lede b { color: var(--sc-ink); font-weight: 600; }
.ae-boot__cta { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }

/* the boot console: a real element whose rows light as --sc-p advances */
.ae-console {
  background: linear-gradient(180deg, var(--ae-surface-2), var(--ae-panel));
  border: 1px solid var(--ae-line-strong);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e3);
  overflow: hidden;
}
.ae-console__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--ae-line);
  font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft);
  letter-spacing: 0.04em;
}
.ae-console__head .ae-status-dot { margin-right: 0.1rem; }
.ae-console__head .ae-spacer { margin-left: auto; }
.ae-boot__log { padding: 0.4rem 0.35rem; }
.ae-bootrow {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.7rem; border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-mono); font-size: 0.8rem; color: var(--sc-ink-soft);
  opacity: 0.25; transition: opacity 220ms var(--sc-ease-out), color 220ms var(--sc-ease-out);
}
.ae-bootrow.is-on { opacity: 1; color: var(--sc-ink); }
.ae-bootrow__mark { width: 15px; height: 15px; color: var(--sc-ink-soft); flex: none; }
.ae-bootrow.is-on .ae-bootrow__mark { color: var(--sc-accent); }
.ae-bootrow .ae-t { margin-left: auto; font-size: 0.72rem; color: var(--sc-ink-soft); opacity: 0.7; }

/* ============================================================ ACT 2 team = */
.ae-rail {
  display: flex; align-items: stretch; gap: 1.25rem; height: 100%;
  padding: 0 clamp(1.15rem, 5vw, 4rem);
  align-items: center;
}
.ae-rail__lead { flex: none; width: min(30rem, 78vw); padding-right: 1rem; }
.ae-rail__lead .ae-eyebrow { margin-bottom: 1.2rem; }
.ae-rail__lead h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); letter-spacing: -0.025em; line-height: 1.04; margin: 0 0 1rem; text-wrap: balance; }
.ae-rail__lead p { color: var(--sc-ink-soft); font-size: var(--sc-t-base); max-width: 40ch; margin: 0; text-wrap: pretty; }

/* Department panels: one card per team, personas as hairline-divided rows
   inside it (no card-in-card). The portrait treatment reproduces the live
   app's AgentPortrait: the product's illustrated SVG portraits, rounded to
   the app's corner cap, with the persistent "AI" honesty chip. */
.ae-dept {
  flex: none; width: min(21.5rem, 84vw);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--ae-surface-2), var(--ae-panel));
  border: 1px solid var(--ae-line-strong);
  border-radius: var(--sc-r-lg);
  padding: 1.05rem 1.2rem 0.6rem;
  box-shadow: var(--sc-e2);
}
.ae-dept__head { display: flex; align-items: baseline; gap: 0.6rem; padding-bottom: 0.55rem; }
.ae-dept__head h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; margin: 0; }
.ae-dept__n { margin-left: auto; font-family: var(--sc-font-mono); font-size: 0.7rem; color: var(--sc-ink-soft); border: 1px solid var(--ae-line); border-radius: var(--sc-r-pill); padding: 0.08rem 0.5rem; }
.ae-dept__list { list-style: none; margin: 0; padding: 0; }
.ae-p {
  display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto;
  column-gap: 0.8rem; row-gap: 0.15rem; align-items: start;
  padding: 0.6rem 0; border-top: 1px solid var(--ae-line);
}
.ae-p__id { grid-column: 2; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; min-width: 0; }
.ae-p__name { font-family: var(--sc-font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--sc-ink); }
.ae-p__role { font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.05em; color: var(--ae-accent-dim); text-transform: uppercase; }
.ae-p__does { grid-column: 2; color: var(--sc-ink-soft); font-size: 0.78rem; line-height: 1.45; text-wrap: pretty; }

/* the portrait mark, as the product draws it */
.ae-pf { position: relative; display: inline-flex; width: 42px; height: 42px; flex: none; grid-row: 1 / span 2; }
/* The portraits are drawn on translucent brand tints for the app's light
   surfaces, so they sit on the app's light ground here too. */
.ae-pf img { width: 100%; height: 100%; display: block; border-radius: 11px; background: #F7F8FB; }
.ae-pf__ai {
  position: absolute; right: -3px; bottom: -3px;
  font-family: var(--sc-font-text); font-size: 8px; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  padding: 1.5px 3.5px; border-radius: 4px;
  background: var(--ae-panel); color: var(--sc-ink-soft); border: 1px solid var(--ae-line);
}
.ae-pf--sm { width: 26px; height: 26px; }
.ae-pf--sm img { border-radius: 7px; }
.ae-agent__note { flex: none; width: min(24rem, 82vw); display: grid; align-content: center; gap: 1rem; padding-left: 1rem; }
.ae-agent__note h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
.ae-agent__note p { color: var(--sc-ink-soft); margin: 0; }

/* ======================================================= ACT 3 the drop = */
.ae-drop { padding-block: clamp(3rem, 7vw, 6rem); }
.ae-drop__inner { display: grid; grid-template-columns: 1fr; gap: 2rem; justify-items: center; text-align: center; }
.ae-drop h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.ae-drop p { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); margin: 0; max-width: 30ch; text-wrap: pretty; }
.ae-queue { width: 100%; max-width: 30rem; }
.ae-invoice {
  text-align: left;
  background: linear-gradient(180deg, var(--ae-surface-2), var(--ae-panel));
  border: 1px solid var(--ae-line-strong); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2);
  overflow: hidden;
}
.ae-invoice__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--ae-line); font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); }
.ae-invoice__bar svg { width: 15px; height: 15px; color: var(--ae-accent-dim); }
.ae-invoice__bar .ae-spacer { margin-left: auto; }
.ae-invoice__body { padding: 1rem 1.1rem; display: grid; gap: 0.55rem; }
.ae-kv { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; }
.ae-kv dt { color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: 0.76rem; }
.ae-kv dd { margin: 0; color: var(--sc-ink); font-family: var(--sc-font-mono); }
.ae-queued { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-family: var(--sc-font-mono); font-size: 0.78rem; color: var(--ae-accent-dim); }

/* ======================================================= ACT 4 the peak = */
/* NOTE: .ae-peak IS the [data-sc-stage] element, so the engine's .sc-stage
   already sets height:100vh + position:sticky. Never set height here or it
   overrides the pin (equal specificity, this file loads later) and the stage
   grows to the full act height, pushing content off screen. */
.ae-peak { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: stretch; padding: calc(var(--ae-bar-h) + 1rem) clamp(1.15rem, 4vw, 3rem) calc(var(--ae-ledger-h) + 1rem); }

/* left column: the narration cues */
.ae-peak__side { display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; position: relative; }
.ae-peak__side .ae-eyebrow { margin-bottom: 0.2rem; }
.ae-phase {
  border-left: 2px solid var(--ae-line); padding: 0.15rem 0 0.15rem 1rem;
  display: grid; gap: 0.25rem;
}
.ae-phase h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; margin: 0; }
.ae-phase p { color: var(--sc-ink-soft); font-size: 0.86rem; margin: 0; line-height: 1.45; }

/* right column: the working console */
.ae-work {
  background: linear-gradient(180deg, var(--ae-surface-2), var(--ae-panel));
  border: 1px solid var(--ae-line-strong); border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e3);
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-height: 0;
}
.ae-work__head { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--ae-line); font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft); }
.ae-work__who { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--sc-ink); }
.ae-work__phaselabel { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ae-accent-dim); }
.ae-work__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
@media (max-width: 1180px) { .ae-work__grid { grid-template-columns: 1fr; } }
.ae-work__col { padding: 0.9rem 1rem; min-width: 0; min-height: 0; overflow: hidden; }
.ae-work__col + .ae-work__col { border-left: 1px solid var(--ae-line); }
@media (max-width: 1180px) { .ae-work__col + .ae-work__col { border-left: 0; border-top: 1px solid var(--ae-line); } }
.ae-work__coltitle { font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); opacity: 0.8; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.5rem; }

/* document read: fields extract with a highlight */
.ae-doc { display: grid; gap: 0.5rem; }
.ae-field {
  display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline;
  font-family: var(--sc-font-mono); font-size: 0.8rem;
  padding: 0.4rem 0.55rem; border-radius: var(--sc-r-sm);
  background: transparent; border: 1px solid transparent;
  opacity: 0.3; transition: opacity 200ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
}
.ae-field.is-read { opacity: 1; background: var(--ae-accent-wash); border-color: color-mix(in oklab, var(--sc-accent) 30%, transparent); }
.ae-field dt { color: var(--sc-ink-soft); }
.ae-field dd { margin: 0; color: var(--sc-ink); }

/* reasoning stream */
.ae-reason { display: grid; gap: 0.55rem; }
.ae-reason__line {
  display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 0.82rem; color: var(--sc-ink-soft); line-height: 1.4;
  opacity: 0; transform: translateY(4px);
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.ae-reason__line.is-on { opacity: 1; transform: none; }
.ae-reason__line b { color: var(--sc-ink); font-weight: 600; }
.ae-reason__dot { color: var(--sc-accent); flex: none; margin-top: 0.15rem; font-family: var(--sc-font-mono); }
.ae-think { display: inline-flex; gap: 0.28rem; align-items: center; padding: 0.2rem 0; }
.ae-think i { width: 6px; height: 6px; border-radius: 50%; background: var(--ae-accent-dim); display: inline-block; animation: ae-blink 1.1s var(--sc-ease-in-out) infinite; }
.ae-think i:nth-child(2) { animation-delay: 0.18s; }
.ae-think i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ae-blink { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* plan checklist */
.ae-plan { display: grid; gap: 0.4rem; }
.ae-planstep {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--sc-font-mono); font-size: 0.78rem; color: var(--sc-ink-soft);
  opacity: 0.35; transition: opacity 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
.ae-planstep__box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--ae-line-strong); display: grid; place-items: center; flex: none; transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out); }
.ae-planstep__box svg { width: 11px; height: 11px; color: var(--sc-accent-ink); opacity: 0; transition: opacity 160ms var(--sc-ease-out); }
.ae-planstep.is-active { opacity: 1; color: var(--sc-ink); }
.ae-planstep.is-done { opacity: 1; color: var(--sc-ink); }
.ae-planstep.is-done .ae-planstep__box { background: var(--sc-accent); border-color: var(--sc-accent); }
.ae-planstep.is-done .ae-planstep__box svg { opacity: 1; }
.ae-planstep.is-active .ae-planstep__box { border-color: var(--sc-accent); }

/* tool trace */
.ae-trace { display: grid; gap: 0.35rem; font-family: var(--sc-font-mono); font-size: 0.74rem; }
.ae-traceline { display: flex; gap: 0.5rem; align-items: baseline; color: var(--sc-ink-soft); opacity: 0; transform: translateY(3px); transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); }
.ae-traceline.is-on { opacity: 1; transform: none; }
.ae-traceline .ae-t-call { color: var(--sc-ink); }
.ae-traceline .ae-t-arrow { color: var(--ae-accent-dim); }
.ae-traceline .ae-t-ret { color: var(--ae-accent-dim); margin-left: auto; }

/* validation */
.ae-checks { display: grid; gap: 0.4rem; }
.ae-check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; color: var(--sc-ink-soft); opacity: 0; transform: translateY(3px); transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); }
.ae-check.is-on { opacity: 1; transform: none; color: var(--sc-ink); }
.ae-check svg { width: 15px; height: 15px; color: var(--sc-accent); flex: none; }

/* deliverable */
.ae-deliver {
  border: 1px solid color-mix(in oklab, var(--sc-accent) 32%, transparent);
  background: var(--ae-accent-wash);
  border-radius: var(--sc-r-md); padding: 0.9rem 1rem;
  display: flex; align-items: center; gap: 0.9rem;
  opacity: 0; transform: translateY(6px) scale(0.99);
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
.ae-deliver.is-on { opacity: 1; transform: none; }
.ae-deliver__ic { width: 34px; height: 34px; border-radius: var(--sc-r-sm); background: var(--sc-accent); color: var(--sc-accent-ink); display: grid; place-items: center; flex: none; }
.ae-deliver__ic svg { width: 18px; height: 18px; }
.ae-deliver__txt { min-width: 0; }
.ae-deliver__file { font-family: var(--sc-font-mono); font-size: 0.82rem; color: var(--sc-ink); }
.ae-deliver__meta { font-size: 0.74rem; color: var(--sc-ink-soft); }
.ae-vatbox { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; margin-top: 0.7rem; }
.ae-vatcell { border: 1px solid var(--ae-line); border-radius: var(--sc-r-sm); padding: 0.5rem 0.6rem; }
.ae-vatcell .ae-vlab { font-family: var(--sc-font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ae-vatcell .ae-vval { font-family: var(--sc-font-mono); font-size: 0.92rem; color: var(--sc-ink); margin-top: 0.15rem; }

/* ==================================================== ACT 5 the pipeline = */
.ae-pipe { padding-block: clamp(3rem, 6vw, 5.5rem); }
.ae-pipe__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ae-pipe__head .ae-eyebrow { margin-bottom: 1.1rem; }
.ae-pipe__head h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 0.9rem; text-wrap: balance; }
.ae-pipe__head p { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); margin: 0; max-width: 52ch; text-wrap: pretty; }
.ae-stages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--ae-line); border-radius: var(--sc-r-lg); overflow: hidden; background: color-mix(in oklab, var(--ae-panel) 70%, transparent); }
@media (max-width: 980px) { .ae-stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ae-stages { grid-template-columns: 1fr; } }
.ae-stage { padding: 1.3rem 1.15rem 1.4rem; border-right: 1px solid var(--ae-line); position: relative; display: grid; gap: 0.6rem; align-content: start; }
.ae-stage:last-child { border-right: 0; }
@media (max-width: 980px) { .ae-stage:nth-child(2n) { border-right: 0; } .ae-stage { border-bottom: 1px solid var(--ae-line); } }
.ae-stage__n { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ae-accent-dim); }
.ae-stage__ic { width: 34px; height: 34px; border-radius: var(--sc-r-sm); background: color-mix(in oklab, var(--sc-accent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--sc-accent) 26%, transparent); display: grid; place-items: center; }
.ae-stage__ic svg { width: 18px; height: 18px; color: var(--sc-accent); }
.ae-stage h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; margin: 0.1rem 0 0; }
.ae-stage p { color: var(--sc-ink-soft); font-size: 0.84rem; line-height: 1.45; margin: 0; text-wrap: pretty; }
.ae-stage__flow { position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ae-line-strong); z-index: 2; }
@media (max-width: 980px) { .ae-stage__flow { display: none; } }

/* =================================================== ACT 6 trust/balance = */
/* .ae-trust IS the stage: no height here (see .ae-peak note). */
.ae-trust { display: grid; grid-template-rows: auto 1fr; gap: 1.5rem; padding: calc(var(--ae-bar-h) + 1.5rem) clamp(1.15rem, 5vw, 4rem) calc(var(--ae-ledger-h) + 1.5rem); align-content: center; }
.ae-trust__head { max-width: 50rem; margin-inline: auto; text-align: center; }
.ae-trust__head .ae-eyebrow { margin-bottom: 1.1rem; justify-content: center; }
.ae-trust__head h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); letter-spacing: -0.025em; margin: 0 0 0.9rem; line-height: 1.06; text-wrap: balance; }
.ae-trust__head p { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); margin: 0 auto; max-width: 54ch; text-wrap: pretty; }
.ae-balance { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: stretch; max-width: 68rem; margin-inline: auto; width: 100%; }
@media (max-width: 900px) { .ae-balance { grid-template-columns: 1fr; } .ae-balance__mid { display: none; } }
.ae-side { border: 1px solid var(--ae-line-strong); border-radius: var(--sc-r-lg); padding: 1.5rem 1.5rem 1.3rem; background: linear-gradient(180deg, var(--ae-surface-2), var(--ae-panel)); box-shadow: var(--sc-e2); display: grid; gap: 0.9rem; align-content: start; }
.ae-side__label { font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ae-accent-dim); display: flex; align-items: center; gap: 0.55rem; }
.ae-side__label svg { width: 16px; height: 16px; }
.ae-side h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: -0.02em; margin: 0; line-height: 1.08; text-wrap: balance; }
.ae-side ul { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.ae-side li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--sc-ink-soft); font-size: 0.9rem; line-height: 1.45; }
.ae-side li svg { width: 16px; height: 16px; color: var(--sc-accent); flex: none; margin-top: 0.15rem; }
.ae-side li b { color: var(--sc-ink); font-weight: 600; }
.ae-balance__mid { display: grid; place-items: center; }
.ae-balance__pillar { width: 2px; background: linear-gradient(180deg, transparent, var(--ae-line-strong), transparent); height: 100%; position: relative; }
.ae-balance__node { position: absolute; left: 50%; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); top: calc(15% + var(--ae-tilt, 0.5) * 70%); background: var(--sc-accent); color: var(--sc-accent-ink); display: grid; place-items: center; box-shadow: var(--sc-e2), 0 0 0 6px var(--ae-accent-wash); transition: none; }
.ae-balance__node svg { width: 18px; height: 18px; }

/* =================================================== ACT 7 coverage ====== */
/* The regional roadmap: one console board, rows hairline-divided like the
   department panels (no card-in-card). Status is carried by the one accent:
   cyan marks the live market, muted ink marks the roadmap. No severity
   colours out here; they stay inside the demo console. */
.ae-regions { padding-block: clamp(3rem, 6vw, 5.5rem); }
.ae-regions__head { max-width: 46rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.ae-regions__head .ae-eyebrow { margin-bottom: 1.1rem; }
.ae-regions__head h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 0.9rem; text-wrap: balance; }
.ae-regions__head p { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); margin: 0; max-width: 56ch; text-wrap: pretty; }
.ae-board {
  border: 1px solid var(--ae-line-strong); border-radius: var(--sc-r-lg);
  background: linear-gradient(180deg, var(--ae-surface-2), var(--ae-panel));
  box-shadow: var(--sc-e2); overflow: hidden;
}
.ae-board__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.1rem; font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); letter-spacing: 0.04em; }
.ae-board__head svg { width: 15px; height: 15px; color: var(--ae-accent-dim); }
.ae-board__head .ae-spacer { margin-left: auto; }
.ae-rgn {
  display: grid; grid-template-columns: minmax(12rem, 15rem) auto 1fr;
  column-gap: clamp(0.8rem, 2vw, 1.6rem); row-gap: 0.35rem; align-items: baseline;
  padding: 0.9rem 1.1rem; border-top: 1px solid var(--ae-line);
}
.ae-rgn__name { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--sc-ink); }
.ae-tag {
  display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start;
  font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.24rem 0.6rem; border-radius: var(--sc-r-pill);
  color: var(--sc-ink-soft); border: 1px solid var(--ae-line);
  white-space: nowrap;
}
.ae-tag--live { color: var(--sc-accent); border-color: color-mix(in oklab, var(--sc-accent) 40%, transparent); background: var(--ae-accent-wash); }
.ae-tag--live .ae-status-dot { width: 6px; height: 6px; box-shadow: 0 0 0 2px var(--ae-accent-wash); }
.ae-rgn__note { color: var(--sc-ink-soft); font-size: 0.86rem; line-height: 1.45; text-wrap: pretty; }
.ae-board__foot { padding: 0.8rem 1.1rem; border-top: 1px solid var(--ae-line); font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); }
@media (max-width: 760px) {
  .ae-rgn { grid-template-columns: 1fr auto; }
  .ae-rgn__note { grid-column: 1 / -1; }
}

/* ======================================================== ACT 8 close ==== */
.ae-close { padding: clamp(3.5rem, 8vw, 7rem) 0 0; }
.ae-close__inner { display: grid; gap: 2.2rem; max-width: 60rem; margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 4rem); }
.ae-close__head { text-align: center; }
.ae-close__head .ae-eyebrow { justify-content: center; margin-bottom: 1.2rem; }
.ae-close h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-3xl); letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 1rem; text-wrap: balance; }
.ae-close__head p { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); margin: 0 auto; max-width: 46ch; text-wrap: pretty; }

/* the task line inside the request form - the console-style field */
.ae-prompt__field {
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--ae-panel); border: 1px solid var(--ae-line-strong);
  border-radius: var(--sc-r-md); padding: 0.5rem 0.5rem 0.5rem 1rem;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: border-color 160ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.ae-prompt__field:focus-within { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); box-shadow: var(--sc-e2), 0 0 0 3px var(--ae-accent-wash); }
.ae-prompt__caret { width: 15px; height: 15px; color: var(--ae-accent-dim); flex: none; }
.ae-prompt__field input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0;
  color: var(--sc-ink); font-family: var(--sc-font-text); font-size: 1rem;
}
/* Keyboard focus indicator must be instant and visible (no outline:0). The
   engine's :focus-visible outline paints with no transition. */
.ae-prompt__field input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: var(--sc-r-sm); }
.ae-prompt__field input::placeholder { color: var(--sc-ink-soft); }
.ae-btn:disabled { opacity: 0.62; cursor: not-allowed; transform: none; }
.ae-prompt__ex { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; justify-content: center; }
.ae-ex {
  font-family: var(--sc-font-mono); font-size: 0.76rem; color: var(--sc-ink-soft);
  border: 1px solid var(--ae-line); border-radius: var(--sc-r-pill);
  padding: 0.34rem 0.7rem; background: color-mix(in oklab, var(--sc-surface) 55%, transparent);
  cursor: pointer;
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.ae-ex:hover { color: var(--sc-ink); border-color: var(--ae-line-strong); transform: translateY(-1px); }
.ae-ex:active { transform: translateY(0); }

/* the early access request form - same field language as the app */
.ae-request { max-width: 44rem; margin-inline: auto; width: 100%; }
.ae-request[hidden], .ae-request__done[hidden], .ae-request__err[hidden], .ae-ffield__err[hidden] { display: none; }
.ae-request__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; text-align: left; }
@media (max-width: 560px) { .ae-request__grid { grid-template-columns: 1fr; } }
.ae-ffield { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
.ae-ffield label {
  font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--sc-ink-soft);
}
.ae-ffield__opt { color: var(--ae-accent-dim); }
.ae-ffield > input {
  background: var(--ae-panel); border: 1px solid var(--ae-line-strong);
  border-radius: var(--sc-r-sm); color: var(--sc-ink);
  font-family: var(--sc-font-text); font-size: 0.95rem; padding: 0.6rem 0.8rem;
  width: 100%;
  transition: border-color 160ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.ae-ffield > input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.ae-ffield > input:hover { border-color: color-mix(in oklab, var(--ae-line-strong) 60%, var(--sc-ink-soft)); }
.ae-ffield > input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 55%, transparent); }
.ae-ffield input[aria-invalid="true"] { border-color: color-mix(in oklab, var(--ae-crit) 70%, transparent); }
.ae-ffield__err { margin: 0; font-size: 0.8rem; line-height: 1.35; color: var(--ae-crit); }
.ae-ffield--wide { margin-top: 1.1rem; }
.ae-ffield--wide .ae-ffield__err { margin-top: 0.35rem; }
.ae-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ae-request__actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; justify-content: center; flex-wrap: wrap; }
.ae-request__note { margin: 0; font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); }
.ae-request__err {
  margin-top: 1.1rem; text-align: left;
  border: 1px solid color-mix(in oklab, var(--ae-crit) 45%, transparent);
  border-radius: var(--sc-r-md); padding: 0.85rem 1rem;
  background: color-mix(in oklab, var(--ae-crit) 8%, transparent);
}
.ae-request__err p { margin: 0 0 0.45rem; color: var(--sc-ink); font-size: 0.9rem; }
.ae-request__done {
  max-width: 34rem; margin-inline: auto; text-align: center;
  border: 1px solid var(--ae-line-strong); border-radius: var(--sc-r-md);
  background: var(--ae-panel); padding: 1.8rem 1.6rem 1.6rem;
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.ae-request__done:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.ae-request__done-mark { width: 30px; height: 30px; color: var(--ae-ok); }
.ae-request__done h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0.7rem 0 0.5rem; }
.ae-request__done p { margin: 0; color: var(--sc-ink-soft); font-size: 0.92rem; line-height: 1.55; text-wrap: pretty; }

/* the session summary - the audit trail resolving */
.ae-summary { border: 1px solid var(--ae-line-strong); border-radius: var(--sc-r-lg); background: linear-gradient(180deg, var(--ae-surface-2), var(--ae-panel)); box-shadow: var(--sc-e2); overflow: hidden; }
.ae-summary__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--ae-line); font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft); letter-spacing: 0.04em; }
.ae-summary__head svg { width: 15px; height: 15px; color: var(--ae-accent-dim); }
.ae-summary__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .ae-summary__grid { grid-template-columns: repeat(2, 1fr); } }
.ae-summary__cell { padding: 1.1rem 1.2rem; border-right: 1px solid var(--ae-line); }
.ae-summary__cell:last-child { border-right: 0; }
.ae-summary__val { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--sc-ink); }
.ae-summary__lab { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: 0.25rem; }

.ae-foot { border-top: 1px solid var(--ae-line); margin-top: 1rem; padding: 1.6rem clamp(1.15rem, 5vw, 4rem) calc(var(--ae-ledger-h) + 1.6rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
/* The official mark ships on a near-white ground, so it sits in its own
   light chip rather than being recoloured. Local file, never hotlinked. */
.ae-foot__logo { display: inline-flex; flex: none; background: #F7F8FB; border: 1px solid var(--ae-line-strong); border-radius: var(--sc-r-md); padding: 0.3rem 0.55rem; }
.ae-foot__logo img { height: 36px; width: auto; display: block; }
.ae-foot__lines { display: grid; gap: 0.2rem; min-width: 0; }
.ae-foot__firm { color: var(--sc-ink); font-size: 0.82rem; font-weight: 500; }
.ae-foot__small { color: var(--sc-ink-soft); font-size: 0.78rem; }
.ae-foot__small a { color: var(--sc-ink-soft); text-decoration-color: var(--ae-line-strong); transition: color 140ms var(--sc-ease-out); display: inline-block; padding: 0.25rem 0; }
.ae-foot__small a:hover { color: var(--sc-ink); }
.ae-foot__disc { margin-left: auto; color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.02em; max-width: 24rem; }

/* ============================================ SIGNATURE MOVE: audit trail = */
.ae-ledger {
  position: fixed; left: 0; bottom: 0; z-index: calc(var(--sc-z-chrome) + 1);
  width: min(560px, 100vw);
  background: color-mix(in oklab, var(--ae-panel) 97%, transparent);
  border-top: 1px solid var(--ae-line-strong);
  border-right: 1px solid var(--ae-line-strong);
  border-top-right-radius: var(--sc-r-md);
  box-shadow: 0 -12px 40px -18px hsl(var(--sc-shadow-color) / 0.6);
}
.ae-ledger__bar {
  height: var(--ae-ledger-h); display: flex; align-items: center; gap: 0.7rem;
  padding: 0 0.9rem; cursor: pointer; width: 100%; text-align: left;
  background: transparent; border: 0; color: inherit;
}
.ae-ledger__title { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ae-accent-dim); flex: none; }
.ae-ledger__title svg { width: 15px; height: 15px; }
.ae-ledger__count { font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); border: 1px solid var(--ae-line); border-radius: var(--sc-r-pill); padding: 0.12rem 0.5rem; flex: none; }
.ae-ledger__latest { font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.ae-ledger__chev { margin-left: auto; width: 16px; height: 16px; color: var(--sc-ink-soft); flex: none; transition: transform 220ms var(--sc-ease-out); }
.ae-ledger.is-open .ae-ledger__chev { transform: rotate(180deg); }
.ae-ledger__list {
  max-height: 0; overflow-y: auto; overflow-x: hidden;
  border-top: 1px solid transparent;
  transition: max-height 300ms var(--sc-ease-drawer), border-color 300ms var(--sc-ease-out);
}
.ae-ledger.is-open .ae-ledger__list { max-height: min(52vh, 420px); border-top-color: var(--ae-line); }
.ae-ledger__entry {
  display: grid; grid-template-columns: auto auto 1fr; gap: 0.6rem; align-items: baseline;
  padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--ae-line);
  font-family: var(--sc-font-mono); font-size: 0.74rem; width: 100%; text-align: left;
  background: transparent; border-left: 0; border-right: 0; border-top: 0; color: inherit; cursor: pointer;
  transition: background-color 140ms var(--sc-ease-out);
}
.ae-ledger__entry:hover { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
.ae-ledger__entry .ae-le-t { color: var(--sc-ink-soft); opacity: 0.8; }
.ae-ledger__entry .ae-le-a { color: var(--ae-accent-dim); white-space: nowrap; }
.ae-ledger__entry .ae-le-x { color: var(--sc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-ledger__empty { padding: 0.9rem; font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft); }

@media (max-width: 620px) {
  .ae-ledger { width: 100vw; border-right: 0; border-top-right-radius: 0; }
  .ae-ledger__latest { display: none; }
}

/* ============================================================= icons ===== */
.ae-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }

/* ============================================================= mobile ==== */
@media (max-width: 900px) {
  .ae-boot__grid { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.25rem; }
  .ae-boot h1 { font-size: var(--sc-t-2xl); }
  .ae-peak { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; padding: calc(var(--ae-bar-h) + 0.75rem) clamp(1rem, 4vw, 2rem) calc(var(--ae-ledger-h) + 0.75rem); }
  .ae-peak__side { flex-direction: row; overflow-x: auto; gap: 0.9rem; justify-content: flex-start; }
  .ae-peak__side .ae-eyebrow { white-space: nowrap; flex: none; }
  .ae-peak__side .ae-phase { min-width: 62vw; }
  .ae-close h2 { font-size: var(--sc-t-2xl); }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .ae-think i { animation: none; opacity: 0.7; }
  .ae-reason__line, .ae-traceline, .ae-check, .ae-deliver { transition-duration: 160ms; }
  .ae-ledger__list, .ae-ledger__chev { transition: none; }
  .ae-btn, .ae-ex, .ae-link, .ae-link svg, .ae-ffield > input, .ae-prompt__field { transition: none; }
}
/* ============================================================ ACT 2 pain = */
/* The before-world, shown in the console's own grammar: rows of the familiar
   month lighting one by one. Amber cost tags are severity information inside
   a demo console, per the one-accent rule; the closing turn row is the only
   cyan in the panel. */
/* .ae-pain IS the [data-sc-stage] element (same as .ae-trust): the engine's
   .sc-stage already sets height:100vh + sticky. Never set height here. */
.ae-pain { display: grid; place-items: center; }
.ae-pain__grid {
  width: 100%; max-width: 74rem; margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 4rem);
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.ae-pain__say .ae-eyebrow { margin-bottom: 1.3rem; }
.ae-pain h2 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-2xl); line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 1rem; text-wrap: balance;
}
.ae-pain__lede { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; max-width: 38ch; margin: 0 0 1.4rem; text-wrap: pretty; }
.ae-pain__turn { color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-lg); margin: 0; max-width: 30ch; text-wrap: balance; }
.ae-pain__log { padding: 0.4rem 0.35rem; }
.ae-painrow {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.52rem 0.7rem; border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-mono); font-size: 0.8rem; color: var(--sc-ink-soft);
  opacity: 0.22; transition: opacity 220ms var(--sc-ease-out), color 220ms var(--sc-ease-out);
}
.ae-painrow.is-on { opacity: 1; color: var(--sc-ink); }
.ae-painrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ae-warn); flex: none; align-self: center; opacity: 0.85; }
.ae-painrow__txt { flex: 1 1 auto; min-width: 0; }
.ae-painrow .ae-t { margin-left: auto; font-size: 0.7rem; color: var(--ae-warn); opacity: 0.85; text-align: right; }
.ae-painrow--turn { border-top: 1px solid var(--ae-line); margin-top: 0.3rem; padding-top: 0.7rem; }
.ae-painrow--turn .ae-t { color: var(--ae-accent-dim); }
.ae-painrow__mark { width: 15px; height: 15px; color: var(--sc-accent); flex: none; align-self: center; }
@media (max-width: 900px) {
  .ae-pain__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  /* Grid, not wrapped flex: flex line-breaking uses max-content base size, so
     a long row text jumped to its own line and orphaned the dot. */
  .ae-painrow { display: grid; grid-template-columns: 15px 1fr; column-gap: 0.55rem; row-gap: 0.15rem; font-size: 0.72rem; }
  .ae-painrow__dot, .ae-painrow__mark { align-self: start; justify-self: center; margin-top: 0.3em; }
  .ae-painrow .ae-t { grid-column: 2; margin-left: 0; text-align: left; }
}

/* ================================================= ACT before and after == */
/* The payoff of the scroll: the numbers ARE the layout. Before values sit in
   soft ink and are struck through as the row lands; after values arrive in
   the accent at display size. One row at a time, so each lands. */
.ae-out { display: grid; grid-template-rows: auto 1fr auto; gap: 1.2rem; align-content: center; padding: calc(var(--ae-bar-h) + 1.2rem) clamp(1.15rem, 5vw, 4rem) calc(var(--ae-ledger-h) + 1.2rem); max-width: 74rem; margin-inline: auto; width: 100%; }
.ae-out__head { max-width: 46rem; }
.ae-out__head .ae-eyebrow { margin-bottom: 1.1rem; }
.ae-out__head h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 0.8rem; text-wrap: balance; }
.ae-out__head p { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); margin: 0; max-width: 52ch; text-wrap: pretty; }
.ae-out__rows { display: grid; align-content: center; }
.ae-outrow {
  display: grid;
  grid-template-columns: minmax(11rem, 0.9fr) auto auto auto 1fr;
  align-items: baseline; column-gap: clamp(0.8rem, 2.2vw, 1.8rem);
  padding: clamp(0.9rem, 1.8vh, 1.4rem) 0.2rem;
  border-top: 1px solid var(--ae-line);
  opacity: 0.25; transform: translateY(6px);
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
.ae-outrow.is-on { opacity: 1; transform: none; }
.ae-outrow__what { font-family: var(--sc-font-text); font-weight: 500; font-size: clamp(0.95rem, 1.4vw, 1.1rem); color: var(--sc-ink); }
.ae-outrow__before { font-family: var(--sc-font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.3rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; color: var(--sc-ink-soft); position: relative; white-space: nowrap; }
.ae-outrow__before i { font-style: normal; }
.ae-outrow__before::after {
  content: ""; position: absolute; left: -2%; top: 54%; height: 2px; width: 104%;
  background: var(--sc-ink-soft); opacity: 0.8;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--sc-ease-out) 180ms;
}
.ae-outrow.is-on .ae-outrow__before::after { transform: scaleX(1); }
.ae-outrow__arrow { width: 22px; height: 22px; color: var(--ae-accent-dim); align-self: center; }
.ae-outrow__after { font-family: var(--sc-font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.7rem, 3.6vw, 2.9rem); letter-spacing: -0.025em; color: var(--sc-accent); white-space: nowrap; }
.ae-outrow__note { font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); text-align: right; }
.ae-out__basis { font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); max-width: 62ch; margin: 0; line-height: 1.55; }
@media (max-width: 900px) {
  .ae-outrow { grid-template-columns: 1fr auto; row-gap: 0.2rem; }
  .ae-outrow__what { grid-column: 1 / -1; }
  .ae-outrow__before { grid-column: 1; font-size: 1.2rem; }
  .ae-outrow__arrow { display: none; }
  .ae-outrow__after { grid-column: 2; font-size: 1.6rem; text-align: right; }
  .ae-outrow__note { grid-column: 1 / -1; text-align: left; }
}

/* ================================================ ACT knowledge retention */
/* .ae-mem IS the stage too: no height (see .ae-pain note). */
.ae-mem { display: grid; place-items: center; }
.ae-mem__grid {
  width: 100%; max-width: 74rem; margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 4rem);
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.ae-mem__say .ae-eyebrow { margin-bottom: 1.3rem; }
.ae-mem h2 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-2xl); line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 1rem; text-wrap: balance;
}
.ae-mem__lede { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; margin: 0 0 1.4rem; text-wrap: pretty; }
.ae-mem__turn { color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-lg); margin: 0; max-width: 30ch; text-wrap: balance; }
.ae-mem__rows { padding: 0.4rem 0.35rem 0.2rem; }
.ae-memrow {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.5rem 0.7rem; border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-mono); font-size: 0.78rem; color: var(--sc-ink-soft);
  opacity: 0.25; transition: opacity 220ms var(--sc-ease-out), color 220ms var(--sc-ease-out);
}
.ae-memrow.is-on { opacity: 1; color: var(--sc-ink); }
.ae-memrow > span:first-child { flex: 1 1 auto; min-width: 0; }
.ae-memrow__tag { margin-left: auto; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ae-accent-dim); white-space: nowrap; }
.ae-mem__event { border-top: 1px solid var(--ae-line); padding: 0.55rem 0.35rem 0.6rem; display: grid; gap: 0.25rem; }
.ae-memev {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.7rem; border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-mono); font-size: 0.78rem;
  opacity: 0; transform: translateY(4px);
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.ae-memev.is-on { opacity: 1; transform: none; }
.ae-memev svg { width: 14px; height: 14px; flex: none; }
.ae-memev--out { color: var(--ae-warn); }
.ae-memev--ok { color: var(--sc-ink); }
.ae-memev--ok svg { color: var(--sc-accent); }
@media (max-width: 900px) {
  .ae-mem__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .ae-memrow { flex-wrap: wrap; font-size: 0.72rem; }
  .ae-memrow__tag { flex-basis: 100%; margin-left: 0; }
}

/* ===================================================== ACT your stack ==== */
/* Compatibility marks, each vendor's own artwork on the light chip the
   official logo already uses in the footer. Never recoloured, never boxed
   into feature cards: one hairline strip. */
.ae-stack { padding-block: clamp(2.6rem, 5vw, 4.5rem); }
.ae-stack__head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.ae-stack__head .ae-eyebrow { margin-bottom: 1.1rem; }
.ae-stack__head h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 0.9rem; text-wrap: balance; }
.ae-stack__head p { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); margin: 0; max-width: 54ch; text-wrap: pretty; }
.ae-stack__marks { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.2rem); align-items: stretch; border-top: 1px solid var(--ae-line); border-bottom: 1px solid var(--ae-line); padding: 1.3rem 0.2rem; }
.ae-mark { display: grid; gap: 0.55rem; justify-items: center; margin: 0; }
.ae-mark__chip {
  display: grid; place-items: center;
  width: clamp(10rem, 16vw, 12.5rem); min-height: 4.6rem;
  background: #F7F8FB; border: 1px solid var(--ae-line-strong);
  border-radius: var(--sc-r-md); padding: 0.7rem 1rem;
  box-sizing: border-box;
}
/* Deterministic CSS sizes per mark (the Xero source SVG has mm intrinsic
   units and runs away unsized); one dimension fixed, the other auto, so the
   vendor artwork's aspect ratio is never distorted. max-width clamps on the
   narrowest chips with ratio preserved. */
.ae-mark__chip img { max-width: 100%; display: block; height: auto; }
.ae-mark__chip img[src$="zoho.svg"] { height: 44px; width: auto; }
.ae-mark__chip img[src$="xero.svg"] { height: 46px; width: 46px; }
.ae-mark__chip img[src$="quickbooks.svg"] { height: 34px; width: auto; }
.ae-mark figcaption { font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ae-stack__legal { font-family: var(--sc-font-mono); font-size: 0.66rem; color: var(--sc-ink-soft); opacity: 0.8; margin: 0.9rem 0 0; max-width: 62ch; line-height: 1.5; }
@media (max-width: 620px) {
  .ae-stack__marks { gap: 0.8rem; }
  .ae-mark__chip { width: calc(50vw - 2.4rem); min-height: 3.6rem; padding: 0.55rem 0.7rem; }
  .ae-mark__chip img[src$="zoho.svg"] { height: 36px; }
  .ae-mark__chip img[src$="xero.svg"] { height: 38px; width: 38px; }
  .ae-mark__chip img[src$="quickbooks.svg"] { height: 26px; }
}

/* new acts: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ae-painrow, .ae-memrow, .ae-memev, .ae-outrow { transition-duration: 160ms; }
  .ae-outrow { transform: none; }
  .ae-outrow__before::after { transition: none; }
}