/* ==== base.css ==== */
/* ==========================================================================
   AURA landing · design system + shell (nav, hero, footer)
   Theme C · Grid Operator. Spec: docs/audit.md §4, docs/FEEDBACK.md.

   COMPONENT VOCABULARY (use these; do not re-invent them in modules)
   Type      .label (+ .label__num)   "NN / NAME": Geist Mono 12px uppercase; index --text, name --dim
             .h2  .h3  .lead  .mono  .small  .muted       (.eyebrow = legacy alias of .label)
   Layout    .wrap (fluid container ≤1760px)  .grid12  .section  .section__head (centred stack, #64)  .hairline
   Buttons   .btn + .btn--primary (violet, ONE per viewport, markup arrow <span class="arrow">→</span>)
                  + .btn--light (white pill: nav)  + .btn--ghost (1px --line-2)  + .btn--sm
   Links     .link  (text + 1px underline, 2px on hover; never violet)
   Square UI .tab  .chip  .toggle  .input  .select   (active = --text border + text)
   Status    .sq.sq--person (filled ink = a person did it / closed)   .sq.sq--open (hollow = open/idle)
             .sq.sq--aura[data-aura-acted] (violet 6px = AURA acted)   .aura-rule[data-aura-acted] (2px violet)
             [data-warn] (the one BPEM ▲ only) — form errors use .form-error / [aria-invalid="true"]
   Media     .feather (edge-masked stage)   (registration marks removed: FEEDBACK #26)
             .seq  .seq-stage  .seq-poster (AURA.sequence canvas stages)
   Surfaces  [data-surface="concrete"] (also #demos, #architecture)  [data-surface="dark"]  (themes.css)
   V7 shared (09-29, FEEDBACK #72; documented in the V7 SHARED COMPONENTS block below)
             .split-head (+ .split-head--long, .split-head__side)   H2 left / paragraph right from 1100px
             .seg > .seg__tab[role=tab] (+ .seg__prog)              pill segmented tabs, neutral active, progress hairline
             .car-arrows > .car-arrow   .car-dots > .car-dot        round neutral arrows, bar dots (24px hit areas)
             links and buttons: calm 180ms hover/focus transitions
   Motion    [data-reveal] (+ [data-reveal-group] auto-stagger 80ms): V7 never hides text; .is-in marks entry for draws
   Colour    violet (#594FEE) ONLY on .btn--primary and [data-aura-acted]; --warn ONLY on [data-warn]
             and form errors; no cyan / green / orange / red anywhere.
   ========================================================================== */

/* ---------- GLOBAL RULES (the only ones outside .aura-lp; they matter when the landing is embedded in a site) ----------
   html.aura-rem   set by the inline head script (index.html / the package's head snippet). rem is document-wide, so on
                   the landing's page the HOST's rem-based header/footer follow it too:
                   - up to 1600px: 16px (100%); overrides Astra's html{font-size:91.2%} at ≤921px, which shrank the
                     landing by 9% on tablets and phones
                   - above 1600px (FEEDBACK #10): grows with the screen → 18px at 1920, 22px at 2560, 26px max
                   Opt-out: delete h.classList.add('aura-rem') in the head script (the landing then keeps the host's rem).
   html:has(.aura-lp--embed)   scroll-padding under the host's sticky header (--aura-host-offset; see the S10 block)
   html.lenis …    only while Lenis runs (AURA_CONFIG.smoothScroll; off in the WordPress package)
   html.aura-menu-open   only with our own nav (the draft), while its phone menu is open
   The page background of the standalone page (body) is set in index.html, not here. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.aura-rem { font-size: 100%; }
@media (min-width: 1600px) { html.aura-rem { font-size: min(calc(16px + (100vw - 1600px) * 0.00625), 26px); } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

.aura-lp {
  /* ---- palette (dark chapters); concrete + dark surface variants live in themes.css ---- */
  --bg: #0D0D15;
  --bg-2: #12121B;
  --raised: #191923;
  --raised-2: #21212D;
  --line: #26262F;
  --line-2: #35353F;
  --text: #ECEBF2;
  --muted: #A09FAE;
  --dim: #8A899A;
  --accent: #594FEE;          /* Tachyon violet: .btn--primary fill + [data-aura-acted] only */
  --accent-hover: #4A3CC7;
  --accent-text: #A49DFF;     /* focus rings only (accessibility, exempt from the colour rule) */
  --warn: #EE8574;            /* [data-warn] + form errors only */
  --on-accent: #FFFFFF;
  --bg-rgb: 13 13 21;
  --grid: rgb(236 235 242 / 0.055);
  --logo: #FFFFFF;
  --media-filter: none;       /* imagery is graded at build time (audit §4.6) */

  /* retired colour roles (audit §4.5): kept only as neutral aliases so old code can't paint colour */
  --accent-2: var(--text);
  --data: var(--muted);
  --human: var(--text);
  --violet: var(--accent);
  --violet-deep: var(--accent);
  --violet-hot: var(--accent);
  --violet-text: var(--text);
  --cyan: var(--muted);
  --green: var(--text);
  --amber: var(--muted);
  --red: var(--text);

  /* ---- type (Mona Sans + Geist Mono only) ---- */
  --f-display: 'Mona Sans', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Mona Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --f-serif: var(--f-display);
  --w-display: 340;
  --w-h2: 380;
  --w-h3: 500;
  --stretch-display: 112%;
  --stretch-h2: 108%;
  --ls-display: -0.035em;
  --ls-h2: -0.03em;
  --lh-display: 1;

  --t-hero: clamp(2.5rem, 0.9rem + 5vw, 6.75rem);
  --t-h2: clamp(2rem, 1rem + 2.8vw, 4.25rem);
  --t-h3: clamp(1.25rem, 1rem + 0.6vw, 1.625rem);
  --t-lead: clamp(1.0625rem, 0.98rem + 0.3vw, 1.3125rem);
  --t-lead-s: clamp(1rem, 0.92rem + 0.26vw, 1.1875rem);   /* 09-29 user: split-head paragraphs "a little smaller" (≈ −8%) */
  --t-body: clamp(0.9375rem, 0.9rem + 0.12vw, 1.0625rem);
  --t-small: 0.875rem;
  --t-label: 0.75rem;         /* 12px minimum on every device */
  --t-mono: 0.75rem;

  /* ---- space / grid / shape / motion ---- */
  --gutter: clamp(16px, 4.6vw, 66px);
  --col-gap: clamp(16px, 1.8vw, 32px);
  --maxw: 1760px;
  --figure-w: 68rem;          /* the one width of a centred figure block (demos card, fabric cake): they align, on purpose */
  --content-w: calc(min(100%, var(--maxw)) - 2 * var(--gutter));
  --s-section: clamp(96px, 8.4vw, 168px);   /* V7 gate 09-29: was 9vw/176px; −7% keeps the page ≤ 12 screens at 1440 and 1920 */
  --s-label-h2: 16px;
  --s-h2-lead: 24px;
  --s-lead-content: clamp(56px, 5vw, 72px);
  --r-btn: 999px;             /* FEEDBACK #16: buttons are pills; everything else is square */
  --r-xs: 0;
  --r-sm: 0;
  --r-md: 0;
  --r-pill: 0;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-reveal: 400ms;
  --nav-h: 4rem;
  --admin-h: var(--wp-admin--admin-bar--height, 0px);
  --tap: 2.75rem;             /* 44px: the minimum touch target (phone round 09-30) */

  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ---------- PHONE / TABLET TOKENS (phone round 09-30, FEEDBACK #78) ----------
   Every rule here is inside a max-width, pointer: coarse or height query: the approved desktop (1440×900, 1920×1080,
   mouse) never matches one. Owners use the tokens; they do not re-declare them in section CSS.
   ≤760   S6 rhythm: --s-section 72px (was 96: two same-colour sections were 192px apart), --s-lead-content 40px.
   ≤400   S8 H2: 1.875rem at 104% stretch, so "every team in your / utility" and the problem H2 stop breaking badly. */
@media (max-width: 760px) {
  .aura-lp { --s-section: 72px; --s-lead-content: 40px; }
}
@media (max-width: 400px) {
  .aura-lp { --t-h2: 1.875rem; --stretch-h2: 104%; }
}
/* gate 09-30 (owners B and C): landscape phones (≤980 wide, ≤500 tall) kept the 96px / 56px desktop minimums, so a
   section gap was half of a 390px screen; a short screen gets a short rhythm */
@media (max-width: 980px) and (max-height: 500px) {
  .aura-lp { --s-section: 56px; --s-lead-content: 32px; }
}
/* S10: anything the browser scrolls into view (focused fields, a hash jump before core.js runs) lands under the nav */
@media (max-width: 1100px), (pointer: coarse) {
  html { scroll-padding-top: calc(4rem + var(--wp-admin--admin-bar--height, 0px)); }
}
/* review 09-30 (must): the sticky nav sits inside that padded zone, so focusing any nav control (logo, Talk to us,
   Menu / Close, pause; the open menu's Tab cycle) made the browser "reveal" it by scrolling the page up half a screen.
   A negative scroll-margin equal to the padding tells it the nav is already in view: focus there moves the page 0px.
   Same query as S10, so the mouse desktop (1440, 1920) never sees it. */
@media (max-width: 1100px), (pointer: coarse) {
  .aura-lp .nav :is(a, button) { scroll-margin-top: calc(-4rem - var(--wp-admin--admin-bar--height, 0px)); }
}
/* review 09-30: landscape phones (<=500px tall) get a 52px bar (was 64, 16% of a 390px screen); the logo link, the pill
   and the burger keep 44px targets. The scroll padding and the nav's scroll-margin follow the bar. */
@media (max-width: 980px) and (max-height: 500px) {
  .aura-lp { --nav-h: 3.25rem; }
  html { scroll-padding-top: calc(3.25rem + var(--wp-admin--admin-bar--height, 0px)); }
  .aura-lp .nav :is(a, button) { scroll-margin-top: calc(-3.25rem - var(--wp-admin--admin-bar--height, 0px)); }
}
/* S2 scroll lock while the phone menu is open (core.js toggles html.aura-menu-open). The root only: overflow on <body>
   as well would make body its own scroller, and the sticky nav would jump back to the top of the document. */
html.aura-menu-open { overflow: hidden; }
/* Embedded (no .nav; core.js / the package set .aura-lp--embed): the host's sticky header covers the top instead of our
   nav. The host sets its height ONCE on :root, e.g. :root { --aura-host-offset: 80px; } (default 0). Every width, so
   the browser's own jumps (a #hash before core.js runs, a focused field) land under that header too. */
html:has(.aura-lp--embed) { scroll-padding-top: calc(var(--aura-host-offset, 0px) + var(--wp-admin--admin-bar--height, 0px)); }
.aura-lp.aura-lp--embed { --nav-h: 0px; }

/* In-page pause control (embedded only; with our nav, its own pause icon does the job). A 0-height sticky dock at the
   end of .aura-lp: the button stays at the bottom right of the screen while the landing is on screen and stops at
   the landing's end, so it never covers the host's footer. Round, neutral, calm (the nav pause's look).
   Height from the bottom: ONE variable, --aura-pause-bottom (default 84px), so it sits centred ABOVE a chat launcher
   (tachyontech.com loads Intercom site-wide: 48px at 20px from the bottom and right). A site without one: 24px. */
.aura-lp .aura-pause-dock { display: none; }
html.js .aura-lp--embed .aura-pause-dock { display: block; position: sticky; bottom: 0; z-index: 60; height: 0; pointer-events: none; }
.aura-lp .aura-pause {
  position: absolute; right: 24px; bottom: calc(var(--aura-pause-bottom, 84px) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgb(var(--bg-rgb) / 0.72); border: 1px solid var(--line-2); color: var(--muted);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  pointer-events: auto; transition: color 0.18s, border-color 0.18s;
}
@media (hover: hover) { .aura-lp .aura-pause:hover { color: var(--text); border-color: var(--muted); } }
@media (pointer: coarse) { .aura-lp .aura-pause { width: var(--tap); height: var(--tap); right: 22px; } }

.aura-lp *, .aura-lp *::before, .aura-lp *::after { box-sizing: border-box; }
.aura-lp img, .aura-lp video, .aura-lp canvas, .aura-lp svg { display: block; max-width: 100%; }
.aura-lp a { color: inherit; text-decoration: none; }
.aura-lp button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
.aura-lp p, .aura-lp h1, .aura-lp h2, .aura-lp h3, .aura-lp h4, .aura-lp ul, .aura-lp ol, .aura-lp figure { margin: 0; }
.aura-lp ul, .aura-lp ol { padding: 0; list-style: none; }
.aura-lp em, .aura-lp i { font-style: normal; }
.aura-lp ::selection { background: var(--text); color: var(--bg); }
/* Host-theme shield (WordPress / Astra). Element rules of the host theme reach inside the landing wherever our classes
   declare nothing: Astra's h1–h6 (font-family, clear), button box-shadow and input height:40px. These restore the
   browser defaults the design was built on; same specificity as the theme's rules, so they need our stylesheet to load
   after the theme's (it does in every option of LEEME.md); our class rules still win over them. No effect standalone. */
.aura-lp :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; clear: none; }
.aura-lp button { box-shadow: none; }
.aura-lp :is(input, select, textarea) { height: auto; }

/* Focus: accessibility, exempt from the colour rule. Never changes the element's shape. */
.aura-lp :focus { outline: none; }
.aura-lp :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }   /* 2px: a 1.5px ring snaps to a hairline at DPR 1 */

/* ---------- utilities ---------- */
/* S1 safe areas (phone round 09-30): with viewport-fit=cover a landscape phone puts the notch inside the page, so the
   gutter is never narrower than the inset. env() is 0 on every desktop/laptop screen: identical there. */
.aura-lp .wrap {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}
.aura-lp .grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.aura-lp .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.aura-lp .muted { color: var(--muted); }
.aura-lp .small { font-size: var(--t-small); }

/* ---------- typography ---------- */
.aura-lp :is(h1, h2, h3, .h2, .h3) { text-wrap: balance; }
.aura-lp .mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Chapter label "NN / NAME" */
.aura-lp :is(.label, .eyebrow) {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.aura-lp :is(.label, .eyebrow) :is(.label__num, .num) { color: var(--text); }
.aura-lp .display {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--text);
}
/* One H2 style for every chapter. Single tone: only the hero H1 is two-tone.
   The measure is in em, so it scales with the type (never a px cap). */
.aura-lp .h2 {
  max-width: 18em;
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: var(--w-h2);
  font-stretch: var(--stretch-h2);
  letter-spacing: var(--ls-h2);
  line-height: 1.05;
  color: var(--text);
}
/* Large displays: rem keeps growing but the container stops at --maxw, so the H2 follows the
   container (4% of its width, = the 1440 ratio) instead of the viewport. Same line breaks as 1440. */
@media (min-width: 1600px) {
  .aura-lp { --t-h2: min(4.25rem, 1rem + 2.8vw, min(100vw, var(--maxw)) * 0.04); }
}
.aura-lp :is(.h2, .display, .h3) :is(em, .serif) { font: inherit; letter-spacing: inherit; color: inherit; }
.aura-lp .h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--w-h3);
  font-stretch: 100%;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
}
.aura-lp .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 58ch; text-wrap: pretty; }

/* ---------- section scaffold ---------- */
.aura-lp .section { position: relative; padding-block: var(--s-section); }
/* FEEDBACK #64 (09-27, client: "everything leaning to the left… it has to be centred"): every chapter head (label, H2,
   lead) stacks CENTRED; the H2 keeps its balanced wrap and em measure, the lead a comfortable centred measure (60ch).
   The hero keeps its photo composition (it has no .section__head). */
.aura-lp .section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--s-lead-content);
}
.aura-lp .section__head > :is(.label, .eyebrow) + * { margin-top: var(--s-label-h2); }
.aura-lp .section__head > .h2 + .lead { margin-top: var(--s-h2-lead); }
.aura-lp .section__head > .lead { max-width: 60ch; }
.aura-lp .hairline { height: 1px; background: var(--line); border: 0; margin: 0; width: 100%; }

/* ---------- buttons: pills; exactly one arrow, from markup, on primaries only ---------- */
.aura-lp .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.aura-lp .btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--f-body);
  font-size: 0.9375rem;
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  background: var(--btn-bg);
  transition: background-color 0.2s var(--ease-out), border-color 0.2s, color 0.2s;
}
.aura-lp .btn--primary { --btn-bg: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .aura-lp .btn--primary:hover { --btn-bg: var(--accent-hover); } }
.aura-lp .btn--light { --btn-bg: var(--text); color: var(--bg); }
@media (hover: hover) { .aura-lp .btn--light:hover { --btn-bg: color-mix(in srgb, var(--text) 86%, var(--bg)); } }
.aura-lp .btn--ghost { border-color: var(--line-2); color: var(--text); }
@media (hover: hover) { .aura-lp .btn--ghost:hover { border-color: var(--dim); background: color-mix(in srgb, var(--text) 6%, transparent); } }
.aura-lp .btn--sm { min-height: 2.5rem; padding: 0 1.125rem; font-size: 0.875rem; }
.aura-lp .btn .arrow { display: inline-block; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) { .aura-lp .btn:hover .arrow { transform: translateX(3px); } }

/* ---------- links: ink + 1px underline, 2px on hover (never violet, never a CSS arrow) ---------- */
.aura-lp :is(.link, .linkish, .arrow-link) {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.2s;
}
@media (hover: hover) { .aura-lp :is(.link, .linkish, .arrow-link):hover { text-decoration-thickness: 2px; text-decoration-color: var(--text); } }

/* ---------- square UI: tabs, chips, toggles, inputs ---------- */
.aura-lp .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aura-lp :is(.chip, .tab, .toggle) {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--line-2);
  border-radius: 0;
  font-family: var(--f-body);
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--muted);
  background: transparent;
  transition: border-color 0.2s, color 0.2s;
}
@media (hover: hover) { .aura-lp :is(.chip, .tab, .toggle):hover { color: var(--text); border-color: var(--dim); } }
.aura-lp :is(.chip, .tab, .toggle):is(.is-active, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) {
  border-color: var(--text); color: var(--text);
}
.aura-lp :is(.input, .select) {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--dim);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.aura-lp :is(.input, .select):focus { outline: none; border-bottom: 2px solid var(--text); padding-bottom: calc(0.5rem - 1px); }
.aura-lp :is(.input, .select)::placeholder { color: var(--dim); }
.aura-lp :is(.form-error, [data-form-error]) { color: var(--warn); font-size: var(--t-small); }
/* S4 (phone round 09-30): iOS zooms into any field under 16px on focus. On phones, tablets and any touch screen every
   text field and select is ≥16px; the selector outranks a section's own .x__input size (0,3,1 vs 0,2,0).
   Fields also keep 24px clear of the nav / keyboard when the browser scrolls them into view. Desktop (mouse, >1100px)
   never matches: at 1440 fields are already ≈16.1px. */
@media (max-width: 1100px), (pointer: coarse) {
  .aura-lp :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea)[class] { font-size: max(16px, var(--t-body)); }
  .aura-lp :is(input, select, textarea) { scroll-margin-block: 24px; }
}

/* neutral mono tag (no colour roles) */
.aura-lp .tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

/* ---------- status marks (HMI grammar) ---------- */
.aura-lp .sq { display: inline-block; flex: none; width: 8px; height: 8px; vertical-align: 0.05em; }
.aura-lp :is(.sq--person, .sq--done) { background: var(--text); }
.aura-lp .sq--open { border: 1px solid var(--line-2); background: transparent; }
.aura-lp :is(.sq--aura[data-aura-acted], [data-aura-acted] .sq--aura) { width: 6px; height: 6px; background: var(--accent); }
.aura-lp .aura-rule[data-aura-acted] { display: block; height: 2px; background: var(--accent); }

/* ==========================================================================
   V7 SHARED COMPONENTS (lead, 09-29 · FEEDBACK #72, docs/client-html-0929/6-critic.md §B)
   Owners USE these and add only their own spacing/placement in their section CSS; they never restyle them there.
   All are neutral (no violet: that stays on .btn--primary and [data-aura-acted]), square except the pill tabs and the
   round arrows (#16), and follow the surface tokens, so they work on dark and concrete sections alike.
   ========================================================================== */

/* ---------- calm hover / focus (links, buttons, tabs) ----------
   One quiet timing for every interactive colour change: 180ms, ease-out. :where() keeps it at the lowest specificity,
   so any component or module transition (e.g. .btn, .demos__arrow) still wins. Colours only: never transform or
   opacity here (entrances and GSAP own those). The focus ring itself is the global :focus-visible outline above. */
.aura-lp :where(a, button, [role="tab"], summary, label) {
  transition-property: color, background-color, border-color, text-decoration-color, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}

/* ---------- .split-head: H2 left, paragraph right (#69; problem = D2, SAP = D6) ----------
   Markup:  <header class="split-head"><h2 class="h2" id="…">…</h2><p class="lead">…</p></header>
            The right-hand side may instead be ONE <div class="split-head__side"> (paragraph + anything under it).
   ≥1100px: a 12-column grid. H2 in columns 1–6, paragraph in columns 7–12 (≤56ch; 09-29 user: "fit in fewer lines"),
            both left-aligned and top-aligned;
            the paragraph drops by --split-nudge (0.45em) so its first line sits on the H2's first line.
   <1100px: the centred stack of every other head (#64): H2, then the paragraph at 60ch.
   .split-head--long: a long H2 (the problem's ~100-character thesis) at 0.92 × the H2 scale (her file: 60px vs 64px),
            given a wider column (1–7, paragraph 8–12) so it still holds 3 lines.
   The block ends with the standard gap to the content (--s-lead-content); override margin-bottom in the section CSS. */
.aura-lp .split-head {
  --split-nudge: 0.45em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--s-lead-content);
}
.aura-lp .split-head > .h2 + :is(.lead, .split-head__side) { margin-top: var(--s-h2-lead); }
.aura-lp .split-head > .lead,
.aura-lp .split-head__side > .lead { max-width: 60ch; font-size: var(--t-lead-s); }
@media (min-width: 1100px) {
  .aura-lp .split-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: start;
    text-align: left;
  }
  .aura-lp .split-head > .h2 { grid-row: 1; grid-column: 1 / span 6; max-width: none; }
  .aura-lp .split-head > .h2 + :is(.lead, .split-head__side) { grid-row: 1; grid-column: 7 / -1; margin-top: var(--split-nudge); }
  .aura-lp .split-head > .lead,
  .aura-lp .split-head__side > .lead { max-width: 56ch; }
  .aura-lp .split-head--long > .h2 { grid-column: 1 / span 7; font-size: calc(var(--t-h2) * 0.92); line-height: 1.08; }
  .aura-lp .split-head--long > .h2 + :is(.lead, .split-head__side) { grid-column: 8 / -1; }
}

/* ---------- .seg: segmented tabs (SAP "Within SAP / Across SAP and non-SAP", D6/D8/D9) ----------
   Markup (WAI-ARIA tabs; the module moves focus with ←/→/Home/End and sets tabindex="-1" on the inactive tab):
     <div class="seg" role="tablist" aria-label="…">
       <button class="seg__tab" type="button" role="tab" id="…" aria-controls="…" aria-selected="true">Within SAP<span class="seg__prog" aria-hidden="true"></span></button>
       <button class="seg__tab" type="button" role="tab" id="…" aria-controls="…" aria-selected="false" tabindex="-1">…</button>
     </div>
   Shape: a hairline pill track, 4px inset, pill tabs 44px tall (#16: tabs are pills). Active (aria-selected="true" or
   .is-active): NEUTRAL, a light ink fill + a 1px ink ring + full ink text (never violet: a control is not AURA acting).
   Progress hairline (optional, for the gated auto-switch): .seg__prog inside the tab, 1px --muted, along the pill's inner
   bottom edge across the whole tab (not under the label, where a still reads as a text underline). Either set
   --seg-p (0–1) from JS, or add .is-timing to the tab for a CSS fill over --seg-dur (default 5s); html.is-paused
   freezes it (base rule below) and reduced motion ends it at once. Remove .is-timing to reset it. */
.aura-lp .seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  background: transparent;
  max-width: 100%;
}
.aura-lp .seg__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.375rem;
  border-radius: var(--r-btn);
  font-family: var(--f-body);
  font-size: 0.9375rem;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px transparent;
  cursor: pointer;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
@media (hover: hover) { .aura-lp .seg__tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); } }
.aura-lp .seg__tab:is([aria-selected="true"], .is-active) {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: inset 0 0 0 1px var(--text);
  cursor: default;
}
.aura-lp .seg__tab:focus-visible { outline-offset: 1px; }   /* the 2px ring stays inside the 4px track gap */
.aura-lp .seg__prog {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  color: var(--muted);
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.aura-lp .seg__prog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(var(--seg-p, 0));
}
.aura-lp .seg__tab.is-timing .seg__prog::after { animation: aura-seg-prog var(--seg-dur, 5s) linear forwards; }
@keyframes aura-seg-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 560px) {
  .aura-lp .seg__tab { padding: 0 1rem; font-size: 0.875rem; }
  /* phone round 09-30: on a 44px pill 1px under the label read as a stray text underline, not a timer: phones drop it
     (the auto-switch still runs; the active pill itself shows which view is on) */
  .aura-lp .seg__prog { display: none; }
}
/* 320–359px phones: the two SAP tabs still fit one track (312px of 328 at 360) */
@media (max-width: 359px) {
  .aura-lp .seg { gap: 2px; padding: 3px; }
  .aura-lp .seg__tab { padding: 0 0.75rem; font-size: 0.8125rem; }
}

/* ---------- carousel controls (Built-for D12; available to demos) ----------
   Arrows — markup: <div class="car-arrows">
                      <button class="car-arrow" type="button" aria-label="Previous" disabled><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 12H5M11 6l-6 6 6 6"/></svg></button>
                      <button class="car-arrow" type="button" aria-label="Next"><svg …><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
                    </div>
     48px round (3rem, so it scales with the page type on large screens), 1px --line-2 ring, ink glyph, NEUTRAL (no violet
     "Next"). At a track end use the real `disabled` attribute: it dims to 35% and ignores hover.
   Dots — markup:   <div class="car-dots" role="group" aria-label="…">
                      <button class="car-dot" type="button" aria-label="Show cards 1 and 2" aria-current="true"></button> …
                    </div>
     Each dot is a 24px-tall hit area around a short square bar. The ACTIVE dot (aria-current="true", aria-selected="true"
     or .is-active) is longer (48px vs 28px), thicker (3px vs 2px) and its track turns --dim, so it reads as active even
     while its ink fill is empty; the fill is scaleX(var(--car-p, 1)): leave it (full) or drive --car-p for a timed advance. */
.aura-lp .car-arrows { display: flex; align-items: center; gap: 12px; }
.aura-lp .car-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.aura-lp .car-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .aura-lp .car-arrow:hover:not(:disabled) { border-color: var(--dim); background: color-mix(in srgb, var(--text) 6%, transparent); } }
.aura-lp .car-arrow:disabled { opacity: 0.35; cursor: default; }
.aura-lp .car-dots { display: flex; align-items: center; gap: 2px; }
.aura-lp .car-dot {
  position: relative;
  display: block;
  flex: none;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 200ms var(--ease-out);
}
.aura-lp .car-dot::before,
.aura-lp .car-dot::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}
.aura-lp .car-dot::before { background: var(--line-2); transition: background-color 180ms var(--ease-out); }
.aura-lp .car-dot::after { background: var(--text); transform-origin: 0 50%; transform: scaleX(0); transition: transform 200ms var(--ease-out); }
@media (hover: hover) { .aura-lp .car-dot:hover::before { background: var(--dim); } }
.aura-lp .car-dot:is([aria-current="true"], [aria-selected="true"], .is-active) { width: 48px; cursor: default; }
.aura-lp .car-dot:is([aria-current="true"], [aria-selected="true"], .is-active)::before,
.aura-lp .car-dot:is([aria-current="true"], [aria-selected="true"], .is-active)::after { height: 3px; margin-top: -1.5px; }
.aura-lp .car-dot:is([aria-current="true"], [aria-selected="true"], .is-active)::before { background: var(--dim); }
.aura-lp .car-dot:is([aria-current="true"], [aria-selected="true"], .is-active)::after { transform: scaleX(var(--car-p, 1)); }
/* S3 (phone round 09-30): on touch screens and phones each dot is a 44×44 hit area (active 56×44). The bars keep their
   exact lengths (20px, active 40px) through wider side insets, so only the air between them grows; the negative block
   margin keeps the row's layout height at 24px, so nothing above or below the dots moves (demos, Built-for). */
@media (pointer: coarse), (max-width: 760px) {
  .aura-lp .car-dots { gap: 0; }
  .aura-lp .car-dot { width: var(--tap); height: var(--tap); margin-block: calc((24px - var(--tap)) / 2); }
  .aura-lp .car-dot::before, .aura-lp .car-dot::after { left: calc((var(--tap) - 20px) / 2); right: calc((var(--tap) - 20px) / 2); }
  .aura-lp .car-dot:is([aria-current="true"], [aria-selected="true"], .is-active) { width: calc(var(--tap) + 12px); }
  .aura-lp .car-dot:is([aria-current="true"], [aria-selected="true"], .is-active)::before,
  .aura-lp .car-dot:is([aria-current="true"], [aria-selected="true"], .is-active)::after { left: 8px; right: 8px; }
}

/* review 09-30: every control :hover in this file sits in @media (hover: hover), so on a touch screen the last tapped
   control no longer keeps a stuck hover look; touch screens get the same look only while the finger is down (:active).
   A mouse desktop (hover: hover) matches exactly what it matched before. */
@media (hover: none) {
  .aura-lp .btn--primary:active { --btn-bg: var(--accent-hover); }
  .aura-lp .btn--light:active { --btn-bg: color-mix(in srgb, var(--text) 86%, var(--bg)); }
  .aura-lp .btn--ghost:active { border-color: var(--dim); background: color-mix(in srgb, var(--text) 6%, transparent); }
  .aura-lp :is(.chip, .tab, .toggle):active { color: var(--text); border-color: var(--dim); }
  .aura-lp .seg__tab:active { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
  .aura-lp .car-arrow:active:not(:disabled) { border-color: var(--dim); background: color-mix(in srgb, var(--text) 6%, transparent); }
  .aura-lp .car-dot:active::before { background: var(--dim); }
  .aura-lp :is(.nav__links a, .nav__pause):active { color: var(--text); }
}

/* ---------- retired v1 decorations (kept inert so stale markup can't reintroduce them) ---------- */
.aura-lp .frame { position: relative; }
.aura-lp .frame::before { content: none; }
.aura-lp :is(.dot, .live-dot) { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 0; background: var(--line-2); }
.aura-lp [popover].popover {
  margin: auto; max-width: min(420px, calc(100vw - 32px)); padding: 22px 24px;
  border: 1px solid var(--line-2); border-radius: 0; background: var(--raised-2); color: var(--text);
}
.aura-lp [popover].popover::backdrop { background: rgb(0 0 0 / 0.4); }

/* ---------- reveal: RETIRED as a hiding state (V7, FEEDBACK #68/#72 D20: nothing appears or disappears on scroll) ----------
   [data-reveal] / [data-split] content is visible from the first frame: no opacity or transform rule here any more.
   core.js still adds .is-in once as the element enters (stagger delay in --d), so a stroke draw keyed to it (the icons,
   the value connectors) plays with its text already on screen. Never hide TEXT behind .is-in or data-ent="armed". */

/* ---------- media helpers ---------- */
.aura-lp :is(.hero__still, .hero__video, canvas.seq, .media-grade) { filter: var(--media-filter); }
.aura-lp .seq { position: absolute; inset: 0; width: 100%; height: 100%; }
.aura-lp .seq-stage { position: relative; overflow: hidden; background: var(--bg); }
.aura-lp .seq-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aura-lp .seq-stage.is-seq-ready .seq-poster { visibility: hidden; }
/* feathered edges so a plate never reads as a rectangle */
.aura-lp .feather {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
          mask-composite: intersect;
}

/* ---------- skip link ---------- */
.aura-lp .skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 200;
  padding: 12px 16px; background: var(--text); color: var(--bg); font-weight: 500; font-size: var(--t-small);
  transition: top 0.2s;
}
.aura-lp .skip-link:focus { top: 16px; }

/* ==========================================================================
   NAV · logos · Demos · Use cases · SAP + AURA · Integrations · Why AURA · pause · Talk to us
   ========================================================================== */
.aura-lp .nav {
  position: sticky;
  top: var(--admin-h);
  z-index: 70;
  height: var(--nav-h);
  background: rgb(var(--bg-rgb) / 0.97);   /* practically opaque: one colour over the dark AND the concrete bands */
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* V7 (FEEDBACK #72 D20): the nav never hides on scroll (core.js no longer sets .is-hidden) */
.aura-lp .nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.aura-lp .nav__brand { display: inline-flex; align-items: center; gap: 14px; color: var(--logo); flex: none; padding: 6px 0; }
.aura-lp .logo { display: block; color: var(--logo); }
.aura-lp .logo svg { width: auto; height: 100%; }
.aura-lp .logo path { fill: currentColor; }
/* AURA mark inside UI labels (card and console headers): white on dark, one label-line tall (FEEDBACK #33) */
.aura-lp .brandmark { display: inline-block; height: 1.15em; vertical-align: -0.28em; }
.aura-lp .brandmark svg { display: block; height: 100%; width: auto; }
.aura-lp .nav .logo--tachyon { height: 1.35rem; }
.aura-lp .nav .logo--aura { height: 1.75rem; }
.aura-lp .nav__divider, .aura-lp .footer__divider { width: 1px; height: 1.375rem; background: var(--line-2); flex: none; }
.aura-lp .nav__links { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); font-size: 0.875rem; color: var(--muted); }
.aura-lp .nav__links a { position: relative; display: inline-block; padding: 8px 0; transition: color 0.2s; }
.aura-lp .nav__links a.is-current { color: var(--text); }
@media (hover: hover) { .aura-lp .nav__links a:hover { color: var(--text); } }
.aura-lp .nav__links a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--text); }
.aura-lp .nav__pause-row { display: none; }
.aura-lp .nav__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.aura-lp .nav__pause { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--muted); transition: color 0.2s; }
@media (hover: hover) { .aura-lp .nav__pause:hover { color: var(--text); } }
/* pause / play glyph (icon only; the button carries the aria-label) */
.aura-lp .pause-icon { display: block; flex: none; width: 10px; height: 11px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.aura-lp [data-motion-toggle].is-still > .pause-icon { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.aura-lp .nav__backdrop { display: none; }
.aura-lp .nav__menu { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; margin-right: -10px; }
.aura-lp .nav__burger, .aura-lp .nav__burger::before, .aura-lp .nav__burger::after {
  display: block; width: 20px; height: 1.5px; background: var(--text); position: relative; transition: transform 0.3s var(--ease-out), background-color 0.2s;
}
.aura-lp .nav__burger::before, .aura-lp .nav__burger::after { content: ""; position: absolute; left: 0; }
.aura-lp .nav__burger::before { top: -6px; }
.aura-lp .nav__burger::after { top: 6px; }
.aura-lp .nav__menu[aria-expanded="true"] .nav__burger { background: transparent; }
.aura-lp .nav__menu[aria-expanded="true"] .nav__burger::before { transform: translateY(6px) rotate(45deg); }
.aura-lp .nav__menu[aria-expanded="true"] .nav__burger::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .aura-lp .nav__menu { display: inline-flex; }
  .aura-lp .nav__pause { display: none; }
  .aura-lp .nav__links {
    position: fixed; left: 0; right: 0; top: calc(var(--nav-h) + var(--admin-h));
    flex-direction: column; align-items: stretch; gap: 0;
    /* phone round 09-30 (S1/S2): safe-area gutters; the panel never runs past the screen (a landscape phone is 390px
       tall): it scrolls inside itself and never hands the scroll to the page underneath */
    padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    max-height: calc(100vh - var(--nav-h) - var(--admin-h));
    max-height: calc(100dvh - var(--nav-h) - var(--admin-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    font-family: var(--f-display); font-size: 1.5rem; font-weight: 380; font-stretch: 108%; color: var(--text);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
  }
  /* the page under the open panel: dimmed, and a tap on it closes the menu (the old box-shadow dim could not be tapped).
     A sibling of .nav (index.html), fixed below the bar; core.js closes the menu on click. */
  .aura-lp .nav__backdrop {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--nav-h) + var(--admin-h));
    z-index: 69;
    background: rgb(var(--bg-rgb) / 0.66);
    touch-action: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s, visibility 0s linear 0.25s;
  }
  .aura-lp .nav.is-open + .nav__backdrop { opacity: 1; visibility: visible; transition: opacity 0.25s, visibility 0s; }
  /* the logo link gets the bar's full height as its tap area (was 138×31) */
  .aura-lp .nav__brand { align-self: stretch; padding-block: 0; }
  .aura-lp .nav__links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .aura-lp .nav__links a.is-current::after { content: none; }
  .aura-lp .nav__pause-row { display: block; }
  .aura-lp .nav__pause-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 3rem; padding: 12px 0 0;
    font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  }
  .aura-lp .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.35s var(--ease-out), visibility 0s; }
}
@media (max-width: 760px) {
  .aura-lp .nav__cta { min-height: 2.75rem; }
}
/* landscape phones (≤500px tall): a compact menu so all five links and the pause item fit without scrolling */
@media (max-width: 980px) and (max-height: 500px) {
  .aura-lp .nav__links { font-size: 1.25rem; padding-top: 4px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .aura-lp .nav__links a { padding: 10px 0; }
  /* review 09-30: the panel ran to 385 of 390px, leaving nothing to tap to close it; a 48px strip of the dimmed page
     always shows under it; 44px link rows (line-height 1.2) keep all five links and the pause item inside it */
  .aura-lp .nav__links { max-height: calc(100dvh - var(--nav-h) - var(--admin-h) - 48px); }
  .aura-lp .nav__links a { line-height: 1.2; }
  .aura-lp .nav__pause-item { min-height: var(--tap); padding-top: 4px; }
}
/* S3 touch targets on tablets (touch screens wider than the collapsed nav, 981–1366px): pill, links and pause ≥44px.
   The approved desktop is a mouse (pointer: fine) and never matches. */
@media (pointer: coarse) {
  .aura-lp .nav__cta { min-height: var(--tap); }
  .aura-lp .nav__pause { width: var(--tap); height: var(--tap); }
}
@media (pointer: coarse) and (min-width: 981px) {
  .aura-lp .nav__links a { padding-block: 12px; }
  /* gate 09-30: the logo link takes the bar's full height on touch tablets too (it was 202×40) */
  .aura-lp .nav__brand { align-self: stretch; padding-block: 0; }
}
/* gate 09-30: at 981–1100 on touch the 44px pill and pause took the 4px the links needed, and "See AURA in action",
   "Use cases" and "Why AURA" wrapped onto two lines (67px tall at 1024×768). Keep every link on one line. */
@media (pointer: coarse) and (min-width: 981px) and (max-width: 1100px) {
  .aura-lp .nav__links { gap: 20px; }
  .aura-lp .nav__links a { white-space: nowrap; }
}
@media (max-width: 560px) {
  .aura-lp .nav .logo--tachyon { height: 1rem; }
  .aura-lp .nav .logo--aura { height: 1.3rem; }
  .aura-lp .nav__brand { gap: 10px; }
  .aura-lp .nav__divider { height: 1.125rem; }
}
/* Phones: logos + the full "Talk to us" pill + menu on one row, no overflow down to 320px */
@media (max-width: 400px) {
  .aura-lp .nav__inner { gap: 12px; }
  .aura-lp .nav__actions { gap: 6px; }
  .aura-lp .nav__cta { padding: 0 1rem; }
  .aura-lp .nav .logo--tachyon { height: 0.9375rem; }
  .aura-lp .nav .logo--aura { height: 1.1875rem; }
  .aura-lp .nav__brand { gap: 9px; }
  .aura-lp .nav__divider { height: 1rem; }
}
@media (max-width: 350px) {
  .aura-lp .nav__cta { padding: 0 0.8125rem; font-size: 0.8125rem; }
  .aura-lp .nav .logo--tachyon { height: 0.8125rem; }
  .aura-lp .nav .logo--aura { height: 1.0625rem; }
  .aura-lp .nav__brand { gap: 7px; }
}

/* ==========================================================================
   HERO · graded corridor plate, text bottom-left in columns 1–7
   ========================================================================== */
.aura-lp .hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h) - var(--admin-h) - var(--aura-host-offset, 0px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(4.5rem, 12vh, 9rem) clamp(3.5rem, 9vh, 6.5rem);
  overflow: hidden;
  background: var(--bg);
}
.aura-lp .hero__media { position: absolute; inset: 0; z-index: 0; }
.aura-lp :is(.hero__still, .hero__video) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% 50%; }
/* the still is the exact frame the loop starts on (core.js HERO_T0): a short fade, never a second image */
.aura-lp .hero__video { opacity: 0; transition: opacity 0.28s linear; }
.aura-lp .hero__video.is-playing { opacity: 1; }
/* neutral scrim: text side left, dissolve into the next chapter at the bottom */
.aura-lp .hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--bg-rgb) / 0.9) 0%, rgb(var(--bg-rgb) / 0.78) 28%, rgb(var(--bg-rgb) / 0.36) 52%, rgb(var(--bg-rgb) / 0.06) 72%, rgb(var(--bg-rgb) / 0) 100%),
    linear-gradient(0deg, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 0.55) 16%, rgb(var(--bg-rgb) / 0) 42%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.5) 0%, rgb(var(--bg-rgb) / 0) 20%),
    rgb(var(--bg-rgb) / 0.14);
}
.aura-lp .hero__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.aura-lp .hero__inner > * { grid-column: 1 / span 7; justify-self: start; }
.aura-lp .hero__title {
  margin-top: 20px;
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--text);
}
.aura-lp .hero__from { color: var(--dim); }
.aura-lp .hero__to { color: var(--text); }
.aura-lp .hero__lead {
  margin-top: clamp(20px, 2vw, 32px);
  max-width: 50ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.aura-lp .hero__actions { margin-top: clamp(28px, 2.6vw, 44px); }

/* Load reveal: H1 → sub → CTAs, opacity + 8px, 400ms, 80ms stagger (motion only; V6 splits the H1 in hero.css) */
html.motion .aura-lp :is(.hero__title, .hero__lead, .hero__actions) { opacity: 0; transform: translate3d(0, 8px, 0); }
html.motion:is(.is-booted, .is-ready) .aura-lp :is(.hero__title, .hero__lead, .hero__actions),
html.is-paused .aura-lp :is(.hero__title, .hero__lead, .hero__actions) {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}
html.motion.is-booted .aura-lp .hero__title { transition-delay: 80ms; }
html.motion.is-booted .aura-lp .hero__lead { transition-delay: 160ms; }
html.motion.is-booted .aura-lp .hero__actions { transition-delay: 240ms; }

@media (min-width: 1101px) {
  /* the container caps at 1760px while --t-hero follows vw: keep the H1 on 3 lines inside columns 1–7 */
  .aura-lp .hero__inner { container-type: inline-size; }
  .aura-lp .hero__title { font-size: min(var(--t-hero), 6.9cqi); }
}
@media (max-width: 1100px) {
  .aura-lp .hero__inner > * { grid-column: 1 / span 9; }
}

/* Large screens (FEEDBACK #31, 27" 2K): a composition, not the laptop layout scaled up. The copy block is centred
   in the hero's height (no empty band above it), the H1 keeps to the left half of the column so it never runs into
   the towers (which travel across 36–78% of the frame over the loop), and the text side of the plate is quieter. */
@media (min-width: 1600px) {
  .aura-lp .hero { justify-content: center; padding-block: clamp(5rem, 10vh, 9rem) clamp(4.5rem, 9vh, 8rem); }
  .aura-lp .hero__inner > * { grid-column: 1 / span 6; }
  .aura-lp .hero__title { font-size: min(var(--t-hero), 5.6cqi); }
  .aura-lp .hero__lead { max-width: 34em; }
  .aura-lp .hero__scrim {
    background:
      linear-gradient(90deg, rgb(var(--bg-rgb) / 0.93) 0%, rgb(var(--bg-rgb) / 0.86) 32%, rgb(var(--bg-rgb) / 0.56) 50%, rgb(var(--bg-rgb) / 0.16) 66%, rgb(var(--bg-rgb) / 0) 80%),
      linear-gradient(0deg, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 0.5) 14%, rgb(var(--bg-rgb) / 0) 36%),
      linear-gradient(180deg, rgb(var(--bg-rgb) / 0.5) 0%, rgb(var(--bg-rgb) / 0) 18%),
      rgb(var(--bg-rgb) / 0.12);
  }
}

@media (max-width: 980px) {
  /* Tablet + phone (the collapsed-nav layouts; desktop, 981px and up, keeps its scrim untouched): the text
     block sits mid-frame, over the tower lattice and wires. A neutral bottom-up scrim anchored to the text
     block (not to the hero's height) quiets the plate behind the label and H1 and fades out above them,
     so the towers stay clear in the upper frame. */
  .aura-lp .hero__inner { --scrim-ramp: clamp(120px, 18svh, 220px); }
  .aura-lp .hero__inner::before {
    content: "";
    position: absolute; z-index: -1;
    top: calc(-1 * var(--scrim-ramp)); right: 0; bottom: 0; left: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgb(var(--bg-rgb) / 0) 0,
      rgb(var(--bg-rgb) / 0.1) calc(var(--scrim-ramp) * 0.25),
      rgb(var(--bg-rgb) / 0.32) calc(var(--scrim-ramp) * 0.5),
      rgb(var(--bg-rgb) / 0.6) calc(var(--scrim-ramp) * 0.75),
      rgb(var(--bg-rgb) / 0.8) var(--scrim-ramp),
      rgb(var(--bg-rgb) / 0.86) 100%);
  }
}
@media (min-width: 761px) and (max-width: 980px) {
  /* tablet: the text column is ~70% wide, so the scrim fades out sideways and the city lights on the right stay lit */
  .aura-lp .hero__inner::before {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 58%, transparent 84%);
            mask-image: linear-gradient(90deg, #000 0, #000 58%, transparent 84%);
  }
}
@media (max-width: 760px) {
  .aura-lp .hero { padding-block: 40vh 40px; }
  /* still and video share framing and grade (no filter on one only: the fade must be invisible) */
  .aura-lp :is(.hero__still, .hero__video) { object-position: 61% 50%; }
  .aura-lp .hero__scrim {
    background:
      linear-gradient(0deg, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 0.92) 38%, rgb(var(--bg-rgb) / 0.55) 58%, rgb(var(--bg-rgb) / 0.08) 82%),
      linear-gradient(180deg, rgb(var(--bg-rgb) / 0.4) 0%, rgb(var(--bg-rgb) / 0) 14%);
  }
  .aura-lp .hero__inner > * { grid-column: 1 / -1; }
  .aura-lp .hero__title { margin-top: 0; }
  .aura-lp .hero__actions { width: 100%; flex-direction: column; }
  .aura-lp .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.aura-lp .footer { position: relative; padding: 0 0 clamp(32px, 4vw, 56px); color: var(--muted); font-size: var(--t-small); background: var(--bg); }
.aura-lp .footer__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(40px, 4vw, 64px);
  padding-top: clamp(48px, 5vw, 80px);
  border-top: 1px solid var(--line);
}
.aura-lp .footer__brand { grid-column: 1 / span 5; display: grid; gap: 14px; align-content: start; }
.aura-lp .footer__logos { display: flex; align-items: center; gap: 14px; color: var(--logo); }
.aura-lp .footer .logo--tachyon { height: 1.35rem; }
.aura-lp .footer .logo--aura { height: 1.75rem; }
.aura-lp .footer__tagline { color: var(--muted); font-size: 0.9375rem; }
.aura-lp .footer__links { grid-column: 6 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: start; gap: 12px clamp(20px, 2.4vw, 40px); font-size: 0.9375rem; }
.aura-lp .footer__links a { display: inline-block; padding: 4px 0; }
.aura-lp .footer__fine {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--t-label); line-height: 1.5; color: var(--dim);
}
@media (max-width: 760px) {
  .aura-lp .footer__brand, .aura-lp .footer__links { grid-column: 1 / -1; }
  .aura-lp .footer__links { justify-content: flex-start; gap: 8px 24px; }
  .aura-lp .footer__links a { padding: 10px 0; }
  .aura-lp .footer__fine { flex-direction: column; }
}

/* ==========================================================================
   Reduced motion / paused: designed end states, nothing moving
   ========================================================================== */
html.is-paused .aura-lp *, html.is-paused .aura-lp *::before, html.is-paused .aura-lp *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .aura-lp *, .aura-lp *::before, .aura-lp *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* review 09-30: without JavaScript the menu button cannot open the panel, so it is not shown (the "Talk to us" pill
   stays and the page scrolls as usual) */
html.no-js .aura-lp .nav__menu { display: none; }


/* ==== hero.css ==== */
/* ==========================================================================
   V7 · HERO (#top) · layer over the V5 hero in base.css (media, scrim, grid, phone and tablet layouts).
   FEEDBACK #72 (09-29, Lekha's microsite, D1): her composition, text first on a calm dark field, the tower plate on
   the right, with our corridor loop inside the plate (#23). D20/#68: nothing moves on scroll and the text is present
   from the first frame (the V6 scroll hand-off and the load entrance of the copy are gone).
   ========================================================================== */

/* ---- the copy is there from the first frame: no load entrance (overrides base.css "Load reveal") ---- */
html.motion .aura-lp .hero :is(.hero__eyebrow, .hero__title, .hero__from, .hero__to, .hero__lead, .hero__actions) {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---- H1: two phrases, dim → ink, line-height 1.0 (FEEDBACK #25). Her line breaks: "Your pilot worked." /
   "AURA takes it" / "to production." (the second break is a <br> in the markup, so it holds at every width) ---- */
.aura-lp .hero .hero__from,
.aura-lp .hero .hero__to { display: block; }
.aura-lp .hero .hero__title { line-height: var(--lh-display); }

/* ---- the category line above the H1 (FEEDBACK #55): ink, a step larger than a chapter label ---- */
.aura-lp .hero .hero__eyebrow {
  font-size: clamp(0.8125rem, 0.72rem + 0.3vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--text);
}
.aura-lp .hero .hero__eyebrow + .hero__title { margin-top: clamp(16px, 1.6vw, 28px); }

/* ---- desktop (≥981px): her composition ----
   The media box (plate + scrim) starts at 43% of the page container and runs to the viewport's right edge, so at
   1920/2560 the plate bleeds to the edge (#31) instead of stopping with the container. Inside it:
     plate  the still + the loop, object-fit cover; the frame is placed so the corridor's vanishing point sits at about
            60% of the plate and the near tower at about 75% (her crop), clear of the left fade, at every desktop size
     scrim  a long eased fade from the page colour on its left (the first ~60% of the plate), a bottom fade into the
            next chapter, and a light shade under the nav. No scrim over the text: the text sits on the flat page colour.
   The copy block is centred in the hero's height. */
@media (min-width: 981px) {
  .aura-lp .hero {
    justify-content: center;
    padding-block: clamp(4rem, 9vh, 8rem);
  }
  .aura-lp .hero .hero__media {
    left: calc(max(0px, (100% - var(--maxw)) / 2) + 0.43 * min(100%, var(--maxw)));
  }
  .aura-lp .hero :is(.hero__still, .hero__video) { object-position: 46% 50%; }
  .aura-lp .hero .hero__scrim {
    background:
      linear-gradient(90deg,
        rgb(var(--bg-rgb) / 1) 0%,
        rgb(var(--bg-rgb) / 0.94) 8%,
        rgb(var(--bg-rgb) / 0.8) 18%,
        rgb(var(--bg-rgb) / 0.58) 29%,
        rgb(var(--bg-rgb) / 0.34) 40%,
        rgb(var(--bg-rgb) / 0.14) 50%,
        rgb(var(--bg-rgb) / 0.04) 58%,
        rgb(var(--bg-rgb) / 0) 64%),
      linear-gradient(0deg,
        rgb(var(--bg-rgb) / 1) 0%,
        rgb(var(--bg-rgb) / 0.7) 9%,
        rgb(var(--bg-rgb) / 0.3) 19%,
        rgb(var(--bg-rgb) / 0) 30%),
      linear-gradient(180deg, rgb(var(--bg-rgb) / 0.45) 0%, rgb(var(--bg-rgb) / 0) 14%);
  }
  .aura-lp .hero .hero__inner > * { grid-column: 1 / span 6; }
  /* "Your pilot worked." (≈7.75em) holds one line: at ≤6vw it needs ≈47vw, 7 columns give ≈52vw */
  .aura-lp .hero .hero__inner > .hero__title { grid-column: 1 / span 7; }
  .aura-lp .hero .hero__title { font-size: max(2.5rem, min(var(--t-hero), 6.9cqi, 6vw)); }
  .aura-lp .hero .hero__lead { max-width: 36em; }
}
/* large screens: base.css caps the H1 at 5.6cqi of the (1760px-capped) container */
@media (min-width: 1600px) {
  .aura-lp .hero .hero__title { font-size: min(var(--t-hero), 5.6cqi); }
  .aura-lp .hero .hero__lead { max-width: 34em; }
}

/* tablets and phones: the category line sits over the plate (base.css scrim), so it keeps a soft shadow */
@media (max-width: 980px) {
  .aura-lp .hero .hero__eyebrow { text-shadow: 0 1px 12px rgb(var(--bg-rgb) / 0.6); }
}

/* phones: the nav pill already reads "Talk to us" just above, so the hero keeps one full-width CTA (no duplicate).
   Embedded (.aura-lp--embed: no nav of ours), the hero keeps its "Talk to us": it is the only one on the first screen. */
@media (max-width: 760px) {
  .aura-lp:not(.aura-lp--embed) .hero .hero__talk { display: none; }
  /* embedded: the in-page pause control (bottom right, base.css .aura-pause, --aura-pause-bottom up) must not sit on
     "Talk to us": the copy ends above it */
  .aura-lp.aura-lp--embed .hero { padding-bottom: calc(var(--aura-pause-bottom, 84px) + var(--tap) + 16px); }
}

/* 320-class phones: "Your pilot worked." stays on one line */
@media (max-width: 359px) {
  .aura-lp .hero .hero__title { font-size: 2.25rem; }
}

/* ---- phone / tablet round (09-30, FEEDBACK #78). Every rule below sits in a max-width (≤980) or a landscape-phone
   height query: the approved desktop (≥981px wide, 1440×900 and 1920×1080) never matches one. ---- */
/* (the category line's wrap on phones, "…ACCELERATOR / FOR UTILITIES", is a no-break space in hero.html) */
/* portrait phones: the copy is bottom-aligned in a hero one screen tall (base.css), so the top padding only decides
   what happens when the copy does NOT fit: 40vh pushed the CTA under the fold on short phones (375×667: 691px).
   16svh keeps the towers' band above the text and lets the hero grow only when it must. */
@media (max-width: 760px) {
  .aura-lp .hero { padding-top: max(88px, 16svh); }
}
/* landscape phones (≤500px tall: 667×375 to 932×430). The hero is one screen under the nav, CTA included (it was
   511px in a 390px screen, the CTA below the fold). Copy stacked on the left over the plate's scrim, the H1 at
   34–40px on its three lines, the lead wide enough for two lines, the pills side by side (not the portrait stack). */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
  .aura-lp .hero { padding-block: 20px 24px; }
  .aura-lp .hero .hero__inner > * { grid-column: 1 / span 9; }
  .aura-lp .hero .hero__inner > .hero__lead { grid-column: 1 / -1; max-width: 62ch; }
  .aura-lp .hero .hero__title { font-size: clamp(2.125rem, 4.8vw, 2.5rem); }
  .aura-lp .hero .hero__eyebrow + .hero__title { margin-top: 12px; }
  .aura-lp .hero .hero__lead { margin-top: 14px; font-size: 1rem; }
  .aura-lp .hero .hero__actions { width: auto; flex-direction: row; margin-top: 18px; }
  .aura-lp .hero .hero__actions .btn { width: auto; }
  /* review 09-30: the two-line lead runs to ~75% of the width, past the tablet scrim's 58->84% fade, so "specialist
     agents," sat on the near tower's lattice (#31). Landscape phones hold the scrim to 74% and fade it out by 94%. */
  .aura-lp .hero .hero__inner::before {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 74%, transparent 94%);
            mask-image: linear-gradient(90deg, #000 0, #000 74%, transparent 94%);
  }
}

/* review 09-30: large portrait tablets (iPad Pro 12.9" portrait, 1024x1366) are >=981px wide, so they took the desktop
   landscape composition: the copy centred in a 1302px-tall hero with ~450px of empty field above and below, and the
   plate squeezed into the right 57% and upscaled. Portrait screens 981-1199 get the <=980 tablet hero instead: the
   full-bleed plate (the 4:5 hero-tp crop, hero.html / core.js), the copy at the bottom over the text scrim, 9 columns.
   The approved desktop (1440x900, 1920x1080) is landscape and wider than 1199: it never matches. */
@media (min-width: 981px) and (max-width: 1199px) and (orientation: portrait) {
  .aura-lp .hero { justify-content: flex-end; padding-block: clamp(4.5rem, 12vh, 9rem) clamp(3.5rem, 9vh, 6.5rem); }
  .aura-lp .hero .hero__media { left: 0; }
  .aura-lp .hero :is(.hero__still, .hero__video) { object-position: 58% 50%; }
  .aura-lp .hero .hero__scrim {
    background:
      linear-gradient(90deg, rgb(var(--bg-rgb) / 0.9) 0%, rgb(var(--bg-rgb) / 0.78) 28%, rgb(var(--bg-rgb) / 0.36) 52%, rgb(var(--bg-rgb) / 0.06) 72%, rgb(var(--bg-rgb) / 0) 100%),
      linear-gradient(0deg, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 0.55) 16%, rgb(var(--bg-rgb) / 0) 42%),
      linear-gradient(180deg, rgb(var(--bg-rgb) / 0.5) 0%, rgb(var(--bg-rgb) / 0) 20%),
      rgb(var(--bg-rgb) / 0.14);
  }
  .aura-lp .hero .hero__inner > *,
  .aura-lp .hero .hero__inner > .hero__title { grid-column: 1 / span 9; }
  .aura-lp .hero .hero__inner { --scrim-ramp: clamp(120px, 18svh, 220px); }
  .aura-lp .hero .hero__inner::before {
    content: "";
    position: absolute; z-index: -1;
    top: calc(-1 * var(--scrim-ramp)); right: 0; bottom: 0; left: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgb(var(--bg-rgb) / 0) 0,
      rgb(var(--bg-rgb) / 0.1) calc(var(--scrim-ramp) * 0.25),
      rgb(var(--bg-rgb) / 0.32) calc(var(--scrim-ramp) * 0.5),
      rgb(var(--bg-rgb) / 0.6) calc(var(--scrim-ramp) * 0.75),
      rgb(var(--bg-rgb) / 0.8) var(--scrim-ramp),
      rgb(var(--bg-rgb) / 0.86) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 58%, transparent 84%);
            mask-image: linear-gradient(90deg, #000 0, #000 58%, transparent 84%);
  }
  .aura-lp .hero .hero__eyebrow { text-shadow: 0 1px 12px rgb(var(--bg-rgb) / 0.6); }
}


/* ==== problem.css ==== */
/* ==========================================================================
   01 · THE PROBLEM (#problem, #impact inside) · FEEDBACK #63 (09-27): one screen in normal flow, icons, no pin.
   V7 (FEEDBACK #72): the text never hides (D20); the head is the shared .split-head (D2); her line breaks (<br>).
   Owner: problem.html / problem.css / problem.js. The IMPACT block is styled in impact.css.
   Also here: the page's icon style and the icon draw-in for this owner's sections (#problem, #demos, #use-cases,
   #how-it-works).
   Icons: Lucide (lucide.dev), ISC licence. Inlined SVGs, stroke="currentColor", stroke-width 1.5, round caps/joins.
   ========================================================================== */

/* the one icon style for the page (the other owner declares the same rule) */
.aura-lp .ic { width: var(--ic, 44px); height: var(--ic, 44px); stroke-width: 1.5; }

/* this owner's icons: ink, block, never boxed; violet only on [data-aura-acted] (the AURA icon) */
.aura-lp :is(#problem, #demos, #use-cases, #how-it-works) .ic {
  display: block;
  flex: none;
  overflow: visible;
  color: var(--text);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aura-lp :is(#problem, #demos, #use-cases, #how-it-works) .ic[data-aura-acted] { color: var(--accent); }

/* entrance (V7, D20): the TEXT is visible from the first frame (core [data-reveal] no longer hides anything); only the
   icon draws in once as its item enters (.is-in, 80ms stagger per group; pathLength="1" on every shape, so one dash
   covers any path). Reduced motion, paused or no JS: drawn. */
html.motion .aura-lp :is(#problem, #demos, #use-cases, #how-it-works) [data-reveal] .ic > * {
  stroke-dasharray: 1.02 2;   /* a long gap and a hidden offset of 1.1: Chrome's pathLength scaling is inexact, so a tighter margin left round-cap dots on the hidden icons */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--ease-in-out) calc(var(--d, 0s) + 0.12s);
}
html.motion .aura-lp :is(#problem, #demos, #use-cases, #how-it-works) [data-reveal]:not(.is-in) .ic > * { stroke-dashoffset: 1.1; }
html.motion.is-ready:not(.is-booted) .aura-lp :is(#problem, #demos, #use-cases, #how-it-works) [data-reveal] .ic > *,
html.is-paused .aura-lp :is(#problem, #demos, #use-cases, #how-it-works) [data-reveal] .ic > * { stroke-dashoffset: 0; transition: none; }

/* ---------- layout ---------- */
/* FEEDBACK #69 / #72 D2: the head is the shared .split-head.split-head--long (base.css): from 1100px the H2 on the LEFT
   (columns 1–7 at 0.92 × the H2 scale, about four lines) and the paragraph on the RIGHT (columns 9–12, its first line on
   the H2's first line); below 1100px the centred stack. Only the gap to the needs is set here. The four needs and
   IMPACT FOR CUSTOMERS below stay centred (#64). */
.aura-lp .problem__head { margin-bottom: clamp(48px, 4.4vw, 80px); }
@media (min-width: 1100px) {
  .aura-lp .problem__head { margin-bottom: clamp(56px, 4.1vw, 78px); }   /* V7 review: pays for the fuller H2 (page ≤ 12 screens) */
}

.aura-lp .problem__needs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aura-lp .problem__need { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }   /* #64: centred */
.aura-lp .problem__label {
  max-width: 20ch;   /* her line breaks are <br>s; this only guards phones */
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}

/* phone / tablet round (09-30): the four needs stay one row of four down to 720px (tablets portrait and landscape
   phones: the 2 × 2 grid left the sides empty and made the section 1.27 screens at 768), 2 × 2 on phones */
@media (max-width: 899px) {
  .aura-lp .problem { --ic: 40px; }
}
@media (max-width: 719px) {
  .aura-lp .problem__needs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (min-width: 720px) and (max-width: 899px) {
  .aura-lp .problem__label { font-size: 1.0625rem; }
}
@media (max-width: 599px) {
  .aura-lp .problem__head { margin-bottom: 44px; }
  .aura-lp .problem__need { gap: 14px; }
}
/* large screens: the icons at 48px (40–48 on desktop) */
@media (min-width: 1600px) {
  .aura-lp :is(#problem, #demos, #use-cases, #how-it-works) { --ic: 48px; }
}


/* ==== impact.css ==== */
/* ==========================================================================
   02 · IMPACT FOR CUSTOMERS (#impact, inside #problem) · FEEDBACK #63 (09-27): one calm row, no ledger scene.
   Desktop: the eyebrow centred, the three figures centred in three columns, the CTA centred under them (#64).
   The client's figures and labels, verbatim (V7: her "6mo" and her caption line breaks, FEEDBACK #72 D16); no count-up,
   no entrance, no violet (the CTA pill is the one violet).
   ========================================================================== */
.aura-lp .impact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  column-gap: var(--col-gap);
  row-gap: clamp(20px, 2vw, 28px);
  margin-top: clamp(48px, 4.4vw, 80px);
  padding-top: clamp(28px, 2.6vw, 44px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.aura-lp .impact__title { grid-column: 1 / -1; color: var(--muted); }
.aura-lp .impact__item { display: flex; flex-direction: column; align-items: center; }
.aura-lp .impact__row { display: contents; list-style: none; }
.aura-lp .impact__fig {
  font-family: var(--f-display);
  font-size: clamp(3rem, 1.2rem + 3.6vw, 5.5rem);
  font-weight: 300;
  font-stretch: 112%;
  font-variant-numeric: lining-nums proportional-nums;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--text);
  white-space: nowrap;
}
/* units at 0.4em on the numeral's baseline; quieter than the value */
.aura-lp .impact__unit { font-size: 0.4em; letter-spacing: -0.01em; color: var(--muted); }
.aura-lp .impact__cap {
  margin-top: clamp(10px, 1vw, 16px);
  max-width: 22ch;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--muted);
  text-wrap: balance;
}
.aura-lp .impact__cta { grid-column: 1 / -1; justify-content: center; margin-top: clamp(4px, 0.6vw, 12px); }

/* phone / tablet round (09-30): the three figures stay one row down to 600px (tablets, landscape phones); phones stack
   them, tighter (the stack was about 0.75 of a screen at 390) */
@media (max-width: 599px) {
  .aura-lp .impact { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 44px; padding-top: 32px; }
  .aura-lp .impact__fig { font-size: 2.75rem; }
  .aura-lp .impact__cap { margin-top: 8px; }
  .aura-lp .impact__cta { padding-top: 8px; }
}


/* ==== demos.css ==== */
/* ==========================================================================
   03 · SEE AURA IN ACTION (#demos, concrete surface via themes.css) · FEEDBACK #67 (09-28): a carousel, one demo at a
   time, centred (Notable-style slider). The slides sit in one quiet card (a shade lighter than the section, 1px line,
   square corners like every non-button surface) that stays still while the contents change; inside, centred (#64): the label and title, then Before → With AURA as two
   short columns with one icon each (With AURA: the AURA icon in violet [data-aura-acted], plus the ticket / the source
   document in ink). Under the card: prev arrow · segment pagination · next arrow (the shared .car-arrow / .car-dot of
   base.css, V7). The active segment fills in ink with the autoplay's time (demos.js); without autoplay it is simply full.
   V7 (FEEDBACK #72): copy = Lekha's HTML, verbatim; no text entrance (D20), only the icons draw in once (problem.css).
   .demos.is-carousel (demos.js): the slides share ONE grid cell (the tallest sets the height: no layout jump) and only
   .is-current shows; the change is a crossfade with a 16px drift, 400 ms in all (motion only; instant otherwise).
   No JS: both slides stacked, no controls. Icon style and draw-in: problem.css. The icon loop: demos.js; this file's
   base state is the loop's finished state. Icons: Lucide (lucide.dev), ISC licence.
   ========================================================================== */
.aura-lp .demos__head { margin-bottom: clamp(36px, 3.4vw, 56px); }

/* ---------- the slides ---------- */
.aura-lp .demos__carousel { position: relative; width: 100%; max-width: var(--figure-w); margin-inline: auto; }
.aura-lp .demos__list { display: grid; row-gap: var(--col-gap); }
.aura-lp .demos__demo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: clamp(26px, 2.4vw, 40px);
  min-width: 0;
  padding: clamp(32px, 3.4vw, 60px) clamp(20px, 4vw, 72px);
  border: 1px solid var(--line);
  background: var(--raised-2);
  text-align: center;
}
/* carousel: the card surface stays put on the list (one card); only the slides' contents cross-fade inside it */
.aura-lp .demos.is-carousel .demos__list {
  row-gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--raised-2);
  touch-action: pan-y;
}
.aura-lp .demos.is-carousel .demos__demo {
  grid-area: 1 / 1;
  border: 0;
  background: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--x, 0px), 0, 0);
}
.aura-lp .demos.is-carousel .demos__demo.is-current { opacity: 1; visibility: visible; transform: none; }
/* the crossfade (motion only): the leaving slide goes first (180 ms), the new one follows (300 ms after 100 ms) */
html.motion .aura-lp .demos.is-carousel .demos__demo {
  transition: opacity 0.18s var(--ease-in-out), transform 0.18s var(--ease-in-out), visibility 0s linear 0.18s;
}
html.motion .aura-lp .demos.is-carousel .demos__demo.is-current {
  transition: opacity 0.3s var(--ease-out) 0.1s, transform 0.3s var(--ease-out) 0.1s, visibility 0s linear 0s;
}

/* ---------- controls: ‹  ▬ ▬  › ---------- */
.aura-lp .demos__nav { display: none; }
.aura-lp .demos.is-carousel .demos__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.4vw, 22px);
  margin-top: clamp(22px, 2.2vw, 36px);
}
/* the arrows and bars are the shared carousel controls (base.css .car-arrow / .car-dot, V7): round neutral 48px arrows,
   bars with 24px hit areas; the active bar is longer, thicker and on a --dim track, and its ink fill follows the
   autoplay's time through --car-p (demos.js; without autoplay it is simply full). Only the spacing is set here. */
.aura-lp .demos__dots { gap: 4px; }

.aura-lp .demos__name {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--dim);
}
.aura-lp .demos__title {
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: clamp(1.625rem, 1rem + 1.3vw, 2.5rem);
  font-weight: 400;
  font-stretch: 105%;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}

/* Before → With AURA: two centred columns, the arrow in the gap between them */
.aura-lp .demos__ba {
  --ba-gap: calc(var(--col-gap) * 2 + 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ba-gap);
  width: 100%;
  max-width: 64rem;
  margin: 0;
}
.aura-lp .demos__col { position: relative; }
.aura-lp .demos__col dt { font-size: var(--t-small); font-weight: 500; line-height: 1.4; color: var(--text); }
.aura-lp .demos__col dd {
  margin: 8px auto 0;
  max-width: 36ch;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.aura-lp .demos__icons { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; }
.aura-lp .demos__col--with dd { color: var(--text); }
/* the arrow (Lucide arrow-right, as a mask so it takes the ink colour), centred in the gap at icon height */
.aura-lp .demos__col--with::before {
  content: "";
  position: absolute;
  top: calc(var(--ic, 44px) / 2 - 12px);
  left: calc(var(--ba-gap) / -2 - 12px);
  width: 24px;
  height: 24px;
  background: var(--dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 09-27 (client: "the before and after could be an animation… a loop, but one that gives the reader time to finish
   reading"): demos.js plays each slide's change once on its icons, then holds. The base state HERE is the finished state
   (no JS, reduced motion, paused, and the reading hold): the check in the conversation, the ticket and the document in
   place, no dot. The loop animates transform, opacity and stroke-dashoffset only, so nothing reflows.
   .demos__run: the one moving dot (ink, like the icons), positioned by demos.js in the slide's own box. */
.aura-lp .demos__demo { position: relative; }
.aura-lp .demos__run {
  --run: calc(var(--ic, 44px) * 0.105);
  position: absolute;
  top: 0;
  left: 0;
  width: var(--run);
  height: var(--run);
  margin: calc(var(--run) / -2) 0 0 calc(var(--run) / -2);
  border-radius: 50%;
  background: var(--text);
  opacity: 0;
  pointer-events: none;
}
/* the added strokes inside the Lucide shapes: typing dots (hidden when finished), and the pivots the loop turns on
   (SVG user units: the "!" at its middle, the scale's beam at the top of its post) */
.aura-lp #demos .ic .demos__typing { fill: currentColor; stroke: none; opacity: 0; }
.aura-lp #demos .ic :is(.demos__bang, .demos__beam, .demos__pan, .demos__typing) { transform-box: view-box; }
.aura-lp #demos .ic .demos__bang { transform-origin: 12px 10px; }
.aura-lp #demos .ic .demos__beam { transform-origin: 12px 5px; }

/* phones: the halves stack, so the arrow turns down and sits centred in the gap between Before and With AURA (the same
   Lucide arrow, --dim, as the use-case flow on phones): the two halves still read as one change */
@media (max-width: 599px) {
  .aura-lp .demos__ba { grid-template-columns: minmax(0, 1fr); row-gap: 52px; }
  .aura-lp .demos__demo { row-gap: 22px; }
  .aura-lp .demos__icons { margin-bottom: 14px; }
  .aura-lp .demos__col--with::before {
    top: -38px;                 /* the gap's middle: −52/2 − 12 */
    left: 50%;
    margin-left: -12px;
    transform: rotate(90deg);
  }
  .aura-lp .demos { --ic: 40px; }
}

/* 09-26 (client): "AURA" in the H2 wears the logo's corner brackets (proportions from brand/aura.svg: arms about 0.22 of
   the bracket height, rounded outer corners, the middle of each side open). Drawn around the live word, so the text stays
   verbatim and readable ("See AURA in action"), with no layout shift (absolutely positioned pseudo-elements). */
.aura-lp .aura-word { position: relative; display: inline-block; padding: 0 0.32em; margin: 0 0.02em; }
.aura-lp .aura-word::before,
.aura-lp .aura-word::after {
  content: "";
  position: absolute;
  top: 0.03em;
  bottom: -0.05em;
  width: 0.22em;
  border: max(1.5px, 0.036em) solid currentColor;
  -webkit-mask: linear-gradient(#000 0 26%, transparent 26% 74%, #000 74%);
  mask: linear-gradient(#000 0 26%, transparent 26% 74%, #000 74%);
  pointer-events: none;
}
.aura-lp .aura-word::before { left: 0; border-right: 0; border-radius: 0.07em 0 0 0.07em; }
.aura-lp .aura-word::after { right: 0; border-left: 0; border-radius: 0 0.07em 0.07em 0; }


/* ==== usecases.css ==== */
/* ==========================================================================
   04 · USE CASES (#use-cases) · V7, FEEDBACK #72 D4: Lekha's hierarchy (H2 centred → featured BPEM → the rest) with our
   vertical timeline (#70) for the seven cases. Normal flow (#63), no sticky head, square corners (#16).
     .uc__head    the section head, centred (#64); her line break is a <br> in the markup
     .uc-feat     the featured case: a full-width band a shade lighter than the page, 1px line, NO violet border (a use
                  case is not AURA acting; position and scale carry "featured"). Two columns from 1280px:
                    main   the receipt icon, the title (a heading), her body
                    side   "CONTEXT AURA BRINGS TOGETHER" + the five items as a quiet mono list with hairline separators
                           (#18: no boxed chips), then a hairline and her flow: three square single-line steps joined by
                           arrows (the side is as wide as its one-line flow). #38 grammar: done by AURA = FILLED (a
                           lighter step, violet marker [data-aura-acted]); waits for a person = HOLLOW IN FULL INK
                           ("Analyst review").
     .uc__list    the seven cases: a centred block (max 48rem) with left-aligned lines (#64). Each case: a square
                  marker, the title (h3) and its line; a dotted rail joins the markers (drawn per case, so it follows any
                  text length). Titles and lines keep their colours at all times (text first, #68).
   Motion (D20: nothing appears or disappears; text visible throughout)
     once, as the band enters (core [data-reveal] .is-in): the receipt icon draws (problem.css), then the two AURA
     markers fill violet in order (0.25 s, 0.6 s); "Analyst review" stays hollow.
     scroll-linked (usecases.js, .uc.is-live): the timeline marker nearest the screen's centre turns ink (.is-on), a
     colour change only. No JS, reduced motion, paused: the final state (AURA markers filled, every timeline marker quiet).
   ========================================================================== */

.aura-lp .uc__head { margin-bottom: clamp(40px, 3.8vw, 68px); }

/* ---------- the featured case ---------- */
.aura-lp .uc-feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 36px;
  padding: clamp(28px, 3vw, 56px) clamp(22px, 3.9vw, 72px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--raised) 72%, var(--bg));
}
.aura-lp .uc-feat__main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.aura-lp #use-cases .uc-feat__icon { --ic: clamp(36px, 2.6vw, 44px); margin-bottom: clamp(18px, 1.6vw, 26px); }
.aura-lp .uc-feat__title {
  max-width: 16em;
  font-family: var(--f-display);
  font-size: clamp(1.625rem, 1rem + 1.3vw, 2.5rem);
  font-weight: var(--w-h2);
  font-stretch: var(--stretch-h2);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  text-wrap: balance;
}
.aura-lp .uc-feat__body {
  margin-top: clamp(14px, 1.3vw, 20px);
  max-width: 56ch;
  font-size: clamp(0.9375rem, 0.88rem + 0.18vw, 1.0625rem);   /* 09-29 user: "a little smaller" (≈ −7%) */
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.aura-lp .uc-feat__side { min-width: 0; }
.aura-lp .uc-feat__label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--dim);
}
/* the five context items: a quiet mono list, hairline separators drawn in CSS (not text) */
/* every item carries its separator on the left; the list is pulled left by one separator and clipped there, so
   the separator at the start of each line (the first one, and any after a wrap) never shows */
.aura-lp .uc-feat__ctx {
  --sep: clamp(12px, 1.1vw, 18px);
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  margin: 14px 0 0 calc(-2 * var(--sep) - 1px);
  clip-path: inset(-8px -8px -8px calc(2 * var(--sep) + 1px));
  padding: 0;
  list-style: none;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--text);
}
.aura-lp .uc-feat__ctx li { display: inline-flex; align-items: center; white-space: nowrap; }
.aura-lp .uc-feat__ctx li::before {
  content: "";
  width: 1px;
  height: 0.95em;
  margin: 0 var(--sep);
  background: var(--line-2);
}

/* the flow: three square steps, one line each, joined by arrows (Lucide arrow-right as a mask, in --dim) */
.aura-lp .uc-flow {
  --flow-gap: clamp(34px, 2.6vw, 46px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--flow-gap);
  row-gap: 16px;
  margin: clamp(24px, 2.2vw, 32px) 0 0;
  padding: clamp(24px, 2.2vw, 32px) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.aura-lp .uc-flow__step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line-2);
  font-size: 0.9375rem;
  font-weight: 450;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text);
}
.aura-lp .uc-flow__step--aura { background: var(--raised-2); }
.aura-lp .uc-flow__step--person { border-color: var(--text); background: transparent; }
.aura-lp .uc-flow__step + .uc-flow__step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--flow-gap) / -2 - 9px);
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* status markers (#38): AURA done = filled violet; the person = hollow in full ink */
.aura-lp .uc-flow__mark { display: block; flex: none; width: 8px; height: 8px; }
.aura-lp .uc-flow__step--aura .uc-flow__mark { background: var(--accent); }
.aura-lp .uc-flow__step--person .uc-flow__mark { box-shadow: inset 0 0 0 1px var(--text); }
/* once, as the band enters: the two AURA markers fill in order (from a quiet outline); text visible throughout */
html.motion .aura-lp .uc-flow__step--aura .uc-flow__mark {
  transition: background-color 0.35s var(--ease-out) 0.25s, box-shadow 0.35s var(--ease-out) 0.25s;
}
html.motion .aura-lp .uc-flow__step--aura + .uc-flow__step--aura .uc-flow__mark { transition-delay: 0.6s; }
html.motion .aura-lp .uc-flow:not(.is-in) .uc-flow__step--aura .uc-flow__mark {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
html.motion.is-ready:not(.is-booted) .aura-lp .uc-flow .uc-flow__step--aura .uc-flow__mark,
html.is-paused .aura-lp .uc-flow .uc-flow__step--aura .uc-flow__mark { background: var(--accent); box-shadow: none; transition: none; }

/* two columns from 1280px: the side takes the width of its one-line flow (max-content), the main column the rest; below
   1280px the side sits under the main column, where the flow still holds one line down to 761px */
@media (min-width: 1280px) {
  .aura-lp .uc-feat {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: clamp(48px, 4.4vw, 96px);
    align-items: center;
  }
}

/* landscape tablets (1000–1279px, phone/tablet round 09-30): the band's one-line flow is too wide for a side column, so
   the stack left the right half of the band empty beside a 56ch body. Here the context list moves up beside the body
   (the side's own children join the band's grid) and the flow runs full width under both, on its hairline. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .aura-lp .uc-feat {
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(40px, 4.4vw, 64px);
    row-gap: 0;
  }
  .aura-lp .uc-feat__side { display: contents; }
  .aura-lp .uc-feat__main { grid-column: 1; grid-row: 1 / span 2; }
  /* the label starts on the title's line (under the receipt icon's height and gap, main column) */
  .aura-lp .uc-feat__label { grid-column: 2; grid-row: 1; margin-top: calc(clamp(36px, 2.6vw, 44px) + clamp(18px, 1.6vw, 26px) + 6px); }
  .aura-lp .uc-feat__ctx { grid-column: 2; grid-row: 2; align-self: start; }
  .aura-lp .uc-flow { grid-column: 1 / -1; grid-row: 3; }
}

/* ---------- the timeline: a centred block, left-aligned lines ---------- */
.aura-lp .uc__list {
  --mark: 24px;                           /* the square marker */
  --uc-t: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);   /* the title size (the marker centres on its first line) */
  --pad: clamp(10px, 1.15vh, 16px);       /* each case's vertical padding */
  max-width: 48rem;
  margin: clamp(44px, 4vw, 80px) auto 0;
  padding: 0;
  list-style: none;
}
.aura-lp .uc__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--mark) minmax(0, 1fr);
  column-gap: clamp(20px, 2vw, 32px);
  padding-block: var(--pad);
}
.aura-lp .uc__title {
  grid-column: 2;
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--uc-t);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.aura-lp .uc__line {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
/* the marker: a hairline square with a small core; quiet by default (--muted at 60%, visible as a timeline stop),
   ink when it is the case at the reading line */
.aura-lp .uc__mark {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: var(--mark);
  height: var(--mark);
  margin-top: calc((1.3 * var(--uc-t) - var(--mark)) / 2);
  border: 1px solid color-mix(in srgb, var(--muted) 60%, transparent);
}
.aura-lp .uc__mark::after { content: ""; width: 6px; height: 6px; background: color-mix(in srgb, var(--muted) 60%, transparent); }
/* the rail: a solid 1px line from this marker down to the next one (the dotted --line-2 rail was ~1.5:1, invisible) */
.aura-lp .uc__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--mark) / 2 - 0.5px);
  top: calc(var(--pad) + (1.3 * var(--uc-t) - var(--mark)) / 2 + var(--mark) + 6px);
  bottom: calc(-1 * var(--pad) - (1.3 * var(--uc-t) - var(--mark)) / 2 + 6px);
  width: 1px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  pointer-events: none;
}
/* live (usecases.js): the case nearest the screen's centre gets an ink marker; nothing else changes */
.aura-lp .uc.is-live .uc__item.is-on .uc__mark { border-color: var(--text); }
.aura-lp .uc.is-live .uc__item.is-on .uc__mark::after { background: var(--text); }
html.motion:not(.is-paused) .aura-lp .uc.is-live .uc__mark { transition: border-color 0.35s var(--ease-out); }
html.motion:not(.is-paused) .aura-lp .uc.is-live .uc__mark::after { transition: background-color 0.35s var(--ease-out); }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .aura-lp .uc-flow { flex-direction: column; align-items: flex-start; row-gap: 30px; }
  .aura-lp .uc-flow__step { white-space: normal; }
  .aura-lp .uc-flow__step + .uc-flow__step::before { top: -24px; left: 12px; margin-top: 0; transform: rotate(90deg); }
  .aura-lp .uc__list { --mark: 22px; --pad: 12px; }
  .aura-lp .uc__item { column-gap: 16px; }
  /* body size on phones (15px, phone round 09-30: was 14px); 'wrap', because Chrome's 'pretty' broke short lines here */
  .aura-lp .uc__line { text-wrap: wrap; }
}
/* tablets and landscape phones: the timeline is a centred block narrow enough for ≤ ~80 characters a line (at 768–844
   the full-width list ran to 90–95) */
@media (max-width: 1099px) {
  .aura-lp .uc__list { max-width: 40rem; }
}


/* ==== value.css ==== */
/* ==========================================================================
   05 · HOW AURA DELIVERS VALUE (#how-it-works, concrete surface) · FEEDBACK #63 (09-27)
   The PDF's six steps in one row (≥1200px; 3 × 2 from 700px; one column below). A thin connector joins each icon to the
   next; Learn returns to the start: .value__return (inside the Learn step) runs up from Learn's icon, back over the
   row and down into Understand with an arrowhead. The steps are centred (#64), so every icon sits at its step's 50%:
   Understand's icon centre = Learn's centre − 5 × (step + gap). Icon style and draw-in: problem.css. Icons: Lucide (lucide.dev), ISC licence.
   ========================================================================== */
.aura-lp .value { --gap: calc(var(--col-gap) * 1.25); }
/* room above the icons for the return line */
.aura-lp .value__head { margin-bottom: clamp(80px, 7vw, 120px); }

.aura-lp .value__steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* #64: each step centred: icon, number, name and line on one axis */
.aura-lp .value__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.aura-lp .value__num {
  margin-top: 20px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--dim);
}
.aura-lp .value__name {
  margin-top: 6px;
  font-size: clamp(1.125rem, 0.98rem + 0.4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
.aura-lp .value__line {
  margin-top: 10px;
  max-width: 30ch;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* the connector: from this (centred) icon to the next one, at icon height */
.aura-lp .value__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--ic, 44px) / 2 - 0.75px);
  left: calc(50% + var(--ic, 44px) / 2 + 14px);
  width: calc(100% + var(--gap) - var(--ic, 44px) - 28px);
  border-top: 1.5px solid var(--line-2);
  transform-origin: 0 50%;
}

/* the return: up from Learn, back over the row, down into Understand */
.aura-lp .value__return {
  position: absolute;
  top: -40px;
  height: 30px;
  left: calc(50% - 0.75px - 5 * (100% + var(--gap)));
  right: calc(50% - 0.75px);
  border: 1.5px solid var(--text);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.aura-lp .value__arrowhead {
  position: absolute;
  left: -6.75px;
  bottom: -5px;
  width: 12px;
  height: 8px;
  overflow: visible;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* entrance (motion only): the connectors draw after their step, the return line last, right to left */
html.motion .aura-lp .value__step::after { transition: transform 0.5s var(--ease-out) calc(var(--d, 0s) + 0.35s); }
html.motion .aura-lp .value__step:not(.is-in)::after { transform: scaleX(0); }
html.motion .aura-lp .value__return {
  clip-path: inset(-12px -12px -12px -12px);
  transition: clip-path 0.8s var(--ease-in-out) calc(var(--d, 0s) + 0.5s);
}
html.motion .aura-lp .value__step:not(.is-in) .value__return { clip-path: inset(-12px -12px -12px 100%); }
html.is-paused .aura-lp .value__step::after,
html.is-paused .aura-lp .value__return { transition: none; }

@media (max-width: 1199px) {
  .aura-lp .value__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aura-lp .value__step:nth-child(3n)::after { display: none; }
  .aura-lp .value__return { display: none; }
  .aura-lp .value__head { margin-bottom: var(--s-lead-content); }
}
/* phones (phone round 09-30, FEEDBACK #52/#78: composed for the phone, not the row rotated): the six steps become one
   vertical path, a centred block (≤30rem) with left-aligned lines (#64). Each step: its icon on the left, the number
   hanging before the name, the line under the name; a hairline runs from each icon down to the next, so the path the
   desktop row draws survives (it draws down once, as the step enters). About half the height of the centred stack. */
@media (max-width: 699px) {
  .aura-lp .value { --ic: 36px; }
  .aura-lp .value__steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; max-width: 30rem; margin-inline: auto; }
  .aura-lp .value__step {
    display: grid;
    grid-template-columns: var(--ic) auto minmax(0, 1fr);
    align-items: center;
    text-align: left;
    padding-bottom: 28px;
  }
  .aura-lp .value__step:last-child { padding-bottom: 0; }
  .aura-lp .value__step > .ic { grid-column: 1; grid-row: 1; }
  /* the mono number sits on the name's baseline (centred, its baseline was 3px high) */
  .aura-lp .value__num { grid-column: 2; grid-row: 1; position: relative; top: 3px; width: 1.5rem; margin: 0 0 0 18px; }
  .aura-lp .value__name { grid-column: 3; grid-row: 1; margin: 0; }
  /* the line tucks under the name (the icon row is taller than the name) */
  .aura-lp .value__line { grid-column: 3; grid-row: 2; align-self: start; max-width: none; margin-top: -3px; }
  .aura-lp .value__step:not(:last-child)::after {
    display: block;             /* also after step 3 (the 3 × 2 grid ends its row there) */
    top: calc(var(--ic) + 8px);
    bottom: 8px;
    left: calc(var(--ic) / 2 - 0.75px);
    width: 0;
    border-top: 0;
    border-left: 1.5px solid var(--line-2);
    transform-origin: 50% 0;
  }
  html.motion .aura-lp .value__step:not(.is-in)::after { transform: scaleY(0); }
}


/* ==== fabric.css ==== */
/* ==========================================================================
   ICONS + ICON DRAW · shared by why (#why) and firstlight (#first-light) (09-27, Lekha: "more icon based"). Loaded
   first of the modules that use it (order.json), so it is defined once here.
   Icons: Lucide (https://lucide.dev), ISC licence. Individual SVGs inlined in the partials (no runtime dependency):
   stroke currentColor, 1.5, no fill, round caps and joins; ink colour; violet only on .ic--aura[data-aura-acted].
   ========================================================================== */
.aura-lp .ic { width: var(--ic, 44px); height: var(--ic, 44px); stroke-width: 1.5; }
.aura-lp :is(#fabric, #sap, #integrations, #why, #first-light) .ic {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  color: var(--text);
}
.aura-lp :is(#fabric, #sap, #integrations, #why, #first-light) .ic--aura[data-aura-acted] { color: var(--accent); }

/* Icon draw (motion only, once): a module may set data-ent="armed" on its section, then "in" as it enters; the icons
   inside .ent parts draw in (stroke-dashoffset, pathLength 1), staggered by --k (55ms each).
   V7 (FEEDBACK #68/#72, D20: nothing appears or disappears on scroll): this block NEVER hides text any more. The old
   "armed" rule that faded and lifted every .ent part (text included) is gone; only the stroke draw is left, so the
   words are there from the first frame. No JS / reduced motion / paused: the icons are drawn. */
html.motion .aura-lp [data-ent] .ent .ic > * {
  stroke-dasharray: 1 2;   /* a 2-long gap: while undrawn, no round cap peeks in at a path start */
  transition: stroke-dashoffset 1.2s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 55ms);
}
html.motion .aura-lp [data-ent="armed"] .ent .ic > * { stroke-dashoffset: 1.5; }
html.is-paused .aura-lp [data-ent] .ent .ic > * { stroke-dashoffset: 0; transition: none; }

/* ==========================================================================
   V7 · THE EXECUTION FABRIC (#fabric) · 09-29 her flat layer cake (FEEDBACK #72, D5; #59, #68, #70)
   The head centred on top (her H2 with her line break, her lead). Under it one centred frame, --figure-w at most (68rem,
   the demos card's width: 1088px at 1440, 1224px at 1920), three FLAT layers stacked with a 10px gap, square corners:
     ┌ YOUR SAP, CLOUD, DATA AND OPERATING LANDSCAPE ┐   mono 12px, quiet
     ┌ [AURA]   Productized …   Multi-Agent …   RAG …  ┐   AURA's own layer: a 1px violet frame + a short violet rule
     │  ───     MCP …           SLM …           Guard… │   under the logo, both [data-aura-acted] (the page's colour
     └          Ground …        Evaluation …    AI …   ┘   rule); the nine names as plain text chips, equal rows
     ┌ Hyperscaler or AI/Data Platform / AZURE AI … ┐     name + mono 12px
   Everything else is ink and hairlines. No icons (D5). The logo is the white mark (#7), the protagonist of the drawing
   by position and frame (#59), never bigger than the H2.
   <1024px: AURA's logo sits on top of its chips (3 columns); <600px: 2 columns, the ninth centred.
   ========================================================================== */
.aura-lp .fabric { background: var(--bg); }
.aura-lp .fabric__head { margin-bottom: clamp(44px, 3.9vw, 64px); }
.aura-lp .fabric__head .lead { max-width: 52ch; }

.aura-lp .aura-fab {
  --fab-edge: rgb(236 235 242 / 0.16);
  --fab-gap: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--fab-gap);
  width: min(100%, var(--figure-w));
  margin: 0 auto;
}
.aura-lp .fab-layer { position: relative; border: 1px solid var(--fab-edge); }

/* the two layers that are yours: centred, quiet */
.aura-lp :is(.fab-land, .fab-base) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  text-align: center;
}
.aura-lp .fab-land { min-height: 3.5rem; }
.aura-lp .fab-base { min-height: 5.25rem; }
.aura-lp .fab-mono {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-label);          /* 12px, the page minimum */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-wrap: balance;
}
.aura-lp .fab-nb { white-space: nowrap; }   /* a platform name never breaks inside itself (markup only) */
.aura-lp .fab-base__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 1rem + 0.25vw, 1.25rem);
  font-weight: 450;
  font-stretch: 100%;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* AURA: her layout, the mark on the left, the patterns on the right */
.aura-lp .fab-aura {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1.75rem;
  padding: 1.5rem;
  border-color: var(--accent);        /* inside [data-aura-acted]: AURA's own frame (her violet border, D5) */
  background: var(--bg-2);
}
.aura-lp .fab-aura__id { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.aura-lp .fab-aura__id .logo { height: 3.25rem; color: var(--logo); }
.aura-lp .fab-aura__rule {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--accent);          /* inside [data-aura-acted] */
  transform-origin: 50% 50%;
}
.aura-lp .fab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;                /* equal rows, whatever wraps */
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aura-lp .fab-chip {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid rgb(236 235 242 / 0.12);
  background: var(--bg);
  font-family: var(--f-display);
  font-size: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
  font-weight: 450;
  font-stretch: 100%;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text);
}

@media (max-width: 1023.98px) {
  .aura-lp .fab-aura { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; padding: 1.5rem 1.25rem 1.25rem; }
  .aura-lp .fab-aura__id .logo { height: 2.75rem; }
  .aura-lp .fab-chip { justify-content: center; text-align: center; padding: 0.625rem 0.75rem; }
}
@media (max-width: 599.98px) {
  .aura-lp .aura-fab { --fab-gap: 8px; }
  .aura-lp .fab-aura { padding: 1.25rem 0.875rem 0.875rem; row-gap: 1.25rem; }
  .aura-lp .fab-aura__id .logo { height: 2.25rem; }
  .aura-lp .fab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .aura-lp .fab-chip { min-height: 3rem; font-size: 0.875rem; padding: 0.5rem 0.625rem; }
  /* 9 in two columns: the ninth centred under the last pair */
  .aura-lp .fab-chip:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 3px); }
  .aura-lp .fab-mono { letter-spacing: 0.1em; }
}

/* ---- PHONE / TABLET ROUND (09-30, FEEDBACK #78): max-width / landscape-height queries only (desktop untouched).
   Phones: the head-to-cake step on the phone rhythm (--s-lead-content, 40px), the nine names at 15px (were 14) in
   two columns, the three layers on one steady 8px beat.
   Landscape phones (a short screen): AURA's layer goes back to her desktop layout, the mark on the left and the names
   in three columns on the right, so the cake reads in about one and a half screens instead of 2.2. */
@media (max-width: 760px) {
  .aura-lp .fabric__head { margin-bottom: var(--s-lead-content); }
}
@media (max-width: 599.98px) {
  .aura-lp .fab-chip { font-size: 0.9375rem; padding: 0.5rem; }
  .aura-lp .fab-land { min-height: 3.25rem; }
}
@media (max-width: 1023.98px) and (max-height: 500px) and (orientation: landscape) {
  .aura-lp .fabric__head { margin-bottom: 32px; }
  .aura-lp .aura-fab { --fab-gap: 8px; }
  .aura-lp .fab-aura { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.25rem; padding: 1rem; }
  .aura-lp .fab-aura__id { gap: 0.75rem; }
  .aura-lp .fab-aura__id .logo { height: 2.25rem; }
  .aura-lp .fab-grid { gap: 8px; }
  .aura-lp .fab-chip { min-height: 2.75rem; padding: 0.5rem 0.625rem; }
  .aura-lp .fab-land { min-height: 3rem; }
  .aura-lp .fab-base { min-height: 4.25rem; }
}

/* the one movement (motion only, once): the short violet rule under the logo draws out from its centre as the layer
   enters (core [data-reveal] adds .is-in; no JS, reduced motion and pause: drawn). Text never moves. */
html.motion .aura-lp .fab-aura__rule { transition: transform 0.9s var(--ease-out) 0.25s; }
html.motion .aura-lp .fab-aura__rule:not(.is-in) { transform: scaleX(0); }
html.is-paused .aura-lp .fab-aura__rule { transform: none; transition: none; }


/* ==== sap.css ==== */
/* ==========================================================================
   SAP + AURA (#sap) · class prefixes fits- (the section, kept from V5) and sapx- (the drawing) · V7 09-29 her concept
   (FEEDBACK #72: D6 her topology, D8 neutral tab + violet agent frame, D9 seamless marching dashes, gated auto-switch;
   docs/client-html-0929/4-sap.md §6)
   Head: the shared .split-head (base.css): her H2 left, her paragraph right from 1100px; centred stack below (#64, #69).
   Drawing, centred under it, 48rem wide at most (768px at 1440, 864px at 1920; never wider than the head's text, #68):
                    ( Within SAP | Across SAP and non-SAP )       base.css .seg, neutral active tab (D8)
                          ┌──────[AURA]──────┐                    her violet frame = AURA's own mark ([data-aura-acted])
                          └──────AGENT───────┘
                   read ↑ ╎  │ ↓ write           read ↑ ╎  │ ↓ write
                   ┌──────SAP──────┐              ┌──Non-SAP systems──┐   Within: SAP alone, centred
                   └ S/4HANA · IS-U┘              └ OMS · ITSM · …    ┘   Across: both, side by side, equals
                         - - - Reads data     ─── Writes back actions or data
   One design space: the lane zone is 720 × 120 units (an SVG viewBox) and keeps that aspect ratio (it scales with the
   stage), the agent is 1/3 of the stage and each system box 280/720 of it, and sap.js moves the boxes by translateX in %
   of their own width. So HTML boxes and SVG lanes line up at every width without measuring.
   The legend is a contract (#38): each swatch is drawn with the lane's own classes, in the same units (its width is
   28 units of the stage, via container query units), so it matches the lanes exactly at every width:
     .sapx-rd  read lane: grey (--muted) dashes 5/5, flowing toward the agent
     .sapx-wb  write lane: a SOLID violet line (her legend), inside [data-aura-acted]
     .sapx-wf  on it, short pale-violet glints 6/18 flowing toward the system (the "flow" of a solid line)
   Motion (.is-run, set by sap.js only while the drawing is on screen and motion is allowed): the dash offsets march at a
   constant 36 units/s (#66), each animation moving exactly whole periods, so the loop has no seam (her write dashes
   jumped 4px every 1.1s). Pause, reduced motion, no JS: the same drawing, still.
   No JS: the Across state (both systems, 4 lanes), tabs hidden. JS first paint: Within (SAP alone) until sap.js runs.
   Square corners everywhere (#16) except the pill tabs.
   ========================================================================== */
.aura-lp .fits { background: var(--bg); }
.aura-lp .fits__head { margin-bottom: clamp(36px, 3vw, 56px); }
.aura-lp .fits__nb { white-space: nowrap; }
.aura-lp #sap .sapx-nb { white-space: nowrap; }   /* a narrow box breaks her sublabels only after a "·" */   /* "non-SAP" never breaks at its hyphen (markup only; the text is hers) */

.aura-lp #sap .sapx {
  container-type: inline-size;
  width: min(100%, 48rem);
  margin-inline: auto;
}

/* ---- tabs (the shared .seg; only placement here) */
.aura-lp #sap .sapx-tabs { display: flex; justify-content: center; margin-bottom: clamp(28px, 2.4vw, 44px); }

/* ---- the agent: AURA's logo + "AGENT"; her violet frame (the element carries [data-aura-acted]) */
.aura-lp #sap .sapx-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: calc(100% / 3);
  min-height: 5rem;
  margin-inline: auto;
  padding: 0.75rem;
  border: 1px solid var(--accent);
  background: var(--bg-2);
}
.aura-lp #sap .sapx-agent .logo { height: 1.75rem; color: var(--logo); }
.aura-lp #sap .sapx-agent__t {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--text);
}

/* ---- the lane zone (720 × 120 units) */
.aura-lp #sap .sapx-zone { position: relative; width: 100%; aspect-ratio: 720 / 120; }
.aura-lp #sap .sapx-web { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.aura-lp #sap .sapx-rd { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
.aura-lp #sap .sapx-wb { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.aura-lp #sap .sapx-wf { fill: none; stroke: color-mix(in srgb, var(--accent) 38%, #fff); stroke-width: 1.5; stroke-dasharray: 6 18; }
.aura-lp #sap .sapx-mk--r path { fill: var(--muted); }
.aura-lp #sap .sapx-mk--w path { fill: var(--accent); }
html.no-js .aura-lp #sap .sapx-st--within,
html.js .aura-lp #sap .sapx-st--across { display: none; }

/* ---- the systems: two boxes stacked in one grid cell, moved by translateX (% of their own width) */
.aura-lp #sap .sapx-row { display: grid; }
.aura-lp #sap .sapx-sys {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: stretch;               /* both boxes as tall as the taller one, in either state */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: calc(100% * 280 / 720);
  min-height: 4.5rem;
  padding: 0.75rem;
  border: 1px solid rgb(236 235 242 / 0.22);
  background: var(--bg);
  text-align: center;
}
.aura-lp #sap .sapx-sys__t {
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 450;
  font-stretch: 100%;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.aura-lp #sap .sapx-sys__s {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;             /* her long sublabel holds one line in its box at desktop widths */
  color: var(--muted);
  text-wrap: balance;
}
/* first paint with JS: Within (SAP centred, the non-SAP box away); no JS: Across (±210 units = ±75% of a box) */
.aura-lp #sap .sapx-sys--other { transform: translateX(89.29%); opacity: 0; visibility: hidden; }
html.no-js .aura-lp #sap .sapx-sys--sap { transform: translateX(-75%); }
html.no-js .aura-lp #sap .sapx-sys--other { transform: translateX(75%); opacity: 1; visibility: visible; }
html.no-js .aura-lp #sap .sapx-tabs { display: none; }

/* ---- the legend: centred, the swatches in the lanes' own units (28 of 720) */
.aura-lp #sap .sapx-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  margin: clamp(24px, 2.2vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  line-height: 1.3;
  color: var(--muted);
}
.aura-lp #sap .sapx-legend li { display: inline-flex; align-items: center; gap: 0.625rem; }
.aura-lp #sap .sapx-sw { flex: none; width: 1.75rem; width: calc(100cqi * 28 / 720); height: auto; aspect-ratio: 28 / 6; overflow: visible; }

/* ---- motion: marching dashes, whole periods per cycle (seamless), 36 units/s */
.aura-lp #sap .sapx.is-run .sapx-rd { animation: sapx-rd 0.5556s linear infinite; }   /* 20 units = 2 periods of 5/5 */
.aura-lp #sap .sapx.is-run .sapx-wf { animation: sapx-wf 0.6667s linear infinite; }   /* 24 units = 1 period of 6/18 */
@keyframes sapx-rd { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -20; } }
@keyframes sapx-wf { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -24; } }
html.is-paused .aura-lp #sap .sapx :is(.sapx-rd, .sapx-wf) { animation: none; }

/* phones: the drawing scales down with the stage (the agent 1/3, the boxes 280/720 of it); the lanes keep a readable
   weight, and the long mono sublabel wraps in its box */
@media (max-width: 719.98px) {
  .aura-lp #sap .sapx-agent { width: 44%; min-height: 4.5rem; padding: 0.625rem 0.5rem; gap: 0.5rem; }
  .aura-lp #sap .sapx-agent .logo { height: 1.375rem; }
  .aura-lp #sap .sapx-sys { width: calc(100% * 280 / 720); padding: 0.625rem 0.375rem; min-height: 4.25rem; gap: 0.375rem; }
  .aura-lp #sap .sapx-sys__t { font-size: 0.9375rem; }
  .aura-lp #sap .sapx-sys__s { letter-spacing: 0.04em; }
  .aura-lp #sap .sapx :is(.sapx-rd, .sapx-wb, .sapx-wf) { stroke-width: 2.5; }
}

/* ---- PHONE / TABLET ROUND (09-30, FEEDBACK #78). Nothing below matches the approved desktop (1440/1920, a 768px+
   stage): every rule sits in a max-width / landscape-height media query or a stage-width container query.
   sap.js reads three custom properties from the drawing (defaults = the desktop drawing, so desktop is untouched):
     --sapx-zh    the lane zone's height in design units (120; 200 on portrait phones: taller, so the Across lanes
                  climb at ~50° instead of lying almost flat in a 55px strip)
     --sapx-boxw  a system box's width in units (280; 300 on portrait phones: "Non-SAP systems" holds one line at 390)
     --sapx-tip   how far an arrowhead's tip lies beyond its path's end (7.2 for the 9-unit heads; 12.8 for 16)
   The zone and the big heads need sap.js (html.js): without JS the static 720 × 120 lanes keep their 9-unit heads. */

/* a stage under 560px (a landscape phone's narrowed stage): the phone lane weight (2.5 units, ~1.7px at 480) */
@container (max-width: 559.98px) {
  .aura-lp #sap .sapx :is(.sapx-rd, .sapx-wb, .sapx-wf) { stroke-width: 2.5; }
}
/* a stage under 470px (every portrait phone): lanes about 1.7px at 390 instead of 1.2, dashes and glints scaled with
   them (whole periods per cycle, still seamless), arrowheads 16 units (~7.6px) */
@container (max-width: 469.98px) {
  .aura-lp #sap .sapx :is(.sapx-rd, .sapx-wb, .sapx-wf) { stroke-width: 3.5; }
  .aura-lp #sap .sapx .sapx-rd { stroke-dasharray: 8 8; }
  .aura-lp #sap .sapx .sapx-wf { stroke-dasharray: 9 27; }
  .aura-lp #sap .sapx.is-run .sapx-rd { animation-name: sapx-rd-p; animation-duration: 0.5s; }    /* 32 units = 2 periods of 8/8 */
  .aura-lp #sap .sapx.is-run .sapx-wf { animation-name: sapx-wf-p; animation-duration: 0.5625s; } /* 36 units = 1 period of 9/27 */
  html.js .aura-lp #sap .sapx-panel { --sapx-tip: 12.8; }
  html.js .aura-lp #sap .sapx-web .sapx-rd { marker-end: url(#sapx-mk-r-p); }
  html.js .aura-lp #sap .sapx-web .sapx-wb { marker-end: url(#sapx-mk-w-p); }
}
@keyframes sapx-rd-p { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -32; } }
@keyframes sapx-wf-p { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -36; } }

/* portrait phones: a taller lane zone, wider boxes, full-width tabs, a quieter sublabel spacing */
@media (max-width: 599.98px) {
  .aura-lp #sap .sapx-panel { --sapx-boxw: 300; }
  html.js .aura-lp #sap .sapx-panel { --sapx-zh: 200; }
  html.js .aura-lp #sap .sapx-zone { aspect-ratio: 720 / 200; }
  .aura-lp #sap .sapx-sys { width: calc(100% * 300 / 720); padding: 0.75rem 0.375rem; min-height: 4.5rem; }
  .aura-lp #sap .sapx-sys__s { letter-spacing: 0.02em; }
  html.no-js .aura-lp #sap .sapx-sys--sap { transform: translateX(-70%); }     /* ±210 units = ±70% of a 300-unit box */
  html.no-js .aura-lp #sap .sapx-sys--other { transform: translateX(70%); }
  /* the tabs span the drawing (a thumb-wide control, lined up with the stage); each keeps its label centred */
  .aura-lp #sap .sapx-tabs .seg { display: flex; width: 100%; }
  .aura-lp #sap .sapx-tabs .seg__tab { flex: 1 1 auto; }
  .aura-lp #sap .sapx-tabs { margin-bottom: 32px; }
  .aura-lp #sap .sapx-legend { margin-top: 28px; }
}
/* narrow phones: the legend's two entries no longer fit one line; stack them as a list, swatches aligned */
@media (max-width: 379.98px) {
  .aura-lp #sap .sapx-legend { display: grid; justify-content: center; justify-items: start; gap: 0.625rem; }
}

/* landscape phones (a short screen): a narrower stage, so the whole drawing (tabs to legend) fits one screen under
   the nav; tighter steps between the parts */
@media (max-width: 1023.98px) and (max-height: 500px) and (orientation: landscape) {
  .aura-lp #sap .fits__head { margin-bottom: 28px; }
  .aura-lp #sap .sapx { width: min(100%, 30rem); }
  .aura-lp #sap .sapx-tabs { margin-bottom: 16px; }
  .aura-lp #sap .sapx-agent { min-height: 4rem; padding: 0.5rem; gap: 0.5rem; }
  .aura-lp #sap .sapx-agent .logo { height: 1.375rem; }
  .aura-lp #sap .sapx-sys { min-height: 4.25rem; padding: 0.5rem; gap: 0.375rem; }
  .aura-lp #sap .sapx-sys__t { font-size: 1rem; }
  .aura-lp #sap .sapx-sys__s { letter-spacing: 0.02em; }   /* her long sublabel in two lines, not three */
  .aura-lp #sap .sapx-legend { margin-top: 16px; }
}


/* ==== integrations.css ==== */
/* ==========================================================================
   INTEGRATIONS · "Plug into your enterprise. Securely." (#integrations, .int-plug, concrete) · V7 09-29 her layout
   (FEEDBACK #72, D10; #59, #70)
   The pathways band (#sap-pathways, .int-pw) is gone with its CSS (D7).
   ≥1024px: the H2 and her lead on the LEFT (columns 1–6), her eight names on the RIGHT (columns 7–12), vertically
   centred on each other; her footnote under the tiles, left-aligned with them. Each name is a quiet tile: the name
   only (no logo, no icon), medium weight, on the concrete's raised paper with a hairline border, square (#16), 4 × 2.
   <1024px: stacked and centred (#64), 4 columns from 600px, 2 on phones.
   Light (integrations.js adds .is-lit; fine pointer + motion allowed only, never on touch or with reduced motion, out
   while paused): a soft paper-white glow follows the pointer across the tiles, and a slightly darker ink on their
   border near it (the concrete's own tokens: no colour, no neon). Subtle: it never competes with the text.
   ========================================================================== */
.aura-lp .int-plug { background: var(--bg); }
.aura-lp .int-plug__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-lead-content); }
.aura-lp .int-plug__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.aura-lp .int-plug__head > .lead { margin-top: var(--s-h2-lead); max-width: 44ch; }
.aura-lp .int-plug__head > .h2 { max-width: 12em; }
.aura-lp .int-plug__side { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 40rem; margin-inline: auto; }

.aura-lp .int-apps {
  --lit: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aura-lp .int-app {
  --x: -999px;
  --y: -999px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  padding: 0.75rem 0.5rem;
  text-align: center;
  background-color: var(--raised);
  border: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--text) 86%, var(--raised));
}
.aura-lp .int-plug__note {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
@media (min-width: 600px) {
  .aura-lp .int-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .aura-lp .int-app { min-height: 5.5rem; font-size: 1.0625rem; }
}
@media (min-width: 1024px) {
  /* text left (columns 1–6), the names right (columns 7–12, 36rem at most, flush right), centred on each other.
     The H2 breaks where hers does ("Plug into your enterprise." / "Securely."): six columns hold its first sentence
     from 1280px up, and it wraps greedily (not balanced), so the short second sentence lands alone on line two */
  .aura-lp .int-plug__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .aura-lp .int-plug__head { grid-column: 1 / span 6; align-items: flex-start; text-align: left; }
  .aura-lp .int-plug__head > .h2 { max-width: none; text-wrap: wrap; }
  .aura-lp .int-plug__side { grid-column: 7 / span 6; justify-self: end; align-items: stretch; width: 100%; max-width: 36rem; margin: 0; }
  .aura-lp .int-app { min-height: 6rem; font-size: clamp(1.0625rem, 0.95rem + 0.25vw, 1.25rem); }
  .aura-lp .int-apps { gap: 12px; }
  .aura-lp .int-plug__note { text-align: left; font-size: 0.9375rem; }
}

/* ---- PHONE / TABLET ROUND (09-30, FEEDBACK #78): max-width / landscape-height queries only (desktop untouched).
   ≤1023: her footnote at 15px (was 14; ≥1024 already 15). 1024–1279 (tablet landscape): the right half is only
   ~105px a tile at 1024, so "ServiceNow" and "SharePoint" touched their borders at 17.8px; the names drop to 16px
   there with a little more inner room. Landscape phones: shorter tiles, so the names and the footnote sit in one
   screen with the head. */
@media (max-width: 1023.98px) {
  .aura-lp .int-plug__note { font-size: 0.9375rem; text-wrap: balance; }   /* two even lines, no lone "and billing." */
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .aura-lp .int-app { font-size: 1rem; padding-inline: 0.25rem; }
}
@media (max-width: 1023.98px) and (max-height: 500px) and (orientation: landscape) {
  .aura-lp .int-plug__grid { row-gap: 32px; }
  .aura-lp .int-app { min-height: 4rem; }
}

/* the pointer light (.is-lit): --lit (0 → 1, eased in JS) on the grid, --x / --y (the pointer, in each tile's own
   box) on every tile. Surface: a wide paper-white glow; border: a tighter ink ring (a masked 1px frame) */
.aura-lp .int-apps.is-lit .int-app {
  background-image: radial-gradient(circle 190px at var(--x) var(--y), rgb(255 255 255 / calc(0.62 * var(--lit))), rgb(255 255 255 / 0) 72%);
}
.aura-lp .int-apps.is-lit .int-app::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  background: radial-gradient(circle 140px at calc(var(--x) + 1px) calc(var(--y) + 1px), rgb(18 18 24 / calc(0.36 * var(--lit))), rgb(18 18 24 / 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}


/* ==== why.css ==== */
/* ==========================================================================
   V7 · WHY UTILITIES CHOOSE AURA (#why, dark) · 09-29 (FEEDBACK #70 cards; #72 D11)
   The six reasons as six cards in a centred 3 × 2 grid (2 columns on tablets, 1 on phones): each card a subtle surface
   (1px border, one tone above the page, square corners like every non-button surface, #16) with the icon top-left,
   then the client's title and text, left-aligned. V7 review: one fixed rhythm inside every card (icon, a fixed gap,
   the title, 10px, the text); a text simply starts where its title ends. (The earlier subgrid bottom-aligned one-line
   titles to their two-line neighbours, so the icon-to-title gap varied inside a row: 51px vs 77px.)
   Grid width: the container's full width up to 1600px (a 30px inset at 1440 read as a near-miss with the integrations
   head above); 78rem, a clearly deliberate inset, on large screens. Hover (fine pointer only): the border one step
   brighter; nothing moves.
   Nothing appears or disappears on scroll (#68, D20): no entrance, the icons are simply there.
   ========================================================================== */
.aura-lp .why { background: var(--bg); }
.aura-lp .why__h2 { max-width: 18em; margin: 0 auto var(--s-lead-content); text-align: center; }
.aura-lp .why__grid {
  --ic: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(12px, 1.2vw, 20px);
  row-gap: 0;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.aura-lp .why__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(12px, 1.2vw, 20px);   /* the gap between card rows */
  padding: clamp(22px, 2.1vw, 34px) clamp(22px, 2.1vw, 34px) clamp(24px, 2.3vw, 38px);
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0;
}
.aura-lp #why .ic {
  display: block;
  flex: none;
  width: var(--ic);
  height: var(--ic);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  color: var(--text);
}
.aura-lp .why__card > .ic { margin-bottom: clamp(18px, 1.7vw, 26px); }
.aura-lp .why__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 0.98rem + 0.38vw, 1.375rem);
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text);
}
.aura-lp .why__line { margin: 10px 0 0; max-width: 44ch; font-size: var(--t-body); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

@media (hover: hover) and (pointer: fine) {
  .aura-lp .why__card { transition: border-color 0.35s ease, background-color 0.35s ease; }
  .aura-lp .why__card:hover { border-color: var(--line-2); background-color: #15151F; }
}

/* one column: the forced breaks would leave short title lines, so the titles run on */
@media (max-width: 699.98px) {
  .aura-lp .why__name br { display: none; }
}
/* PHONE / TABLET ROUND (09-30, FEEDBACK #78): max-width / landscape-height queries only (desktop untouched).
   One column on phones: the same card, one steadier beat (20px inside, 14px icon to title, 10px between cards), so
   the six reasons read as one list of about 1.7 screens at 390 (was 1.86). Landscape phones: two columns, a tighter
   card, the same rhythm. */
@media (max-width: 699.98px) {
  .aura-lp .why__grid { --ic: 24px; }
  .aura-lp .why__card { margin-bottom: 10px; padding: 20px 20px 22px; }
  .aura-lp .why__card > .ic { margin-bottom: 14px; }
}
@media (max-width: 1023.98px) and (max-height: 500px) and (orientation: landscape) {
  .aura-lp .why__grid { --ic: 24px; column-gap: 10px; }
  /* a small landscape phone (560–699 wide, e.g. 667 × 375) keeps two columns too: one column there ran 3.7 screens */
  .aura-lp .why__grid { grid-template-columns: repeat(auto-fit, minmax(max(15rem, calc(50% - 10px)), 1fr)); }
  .aura-lp .why__card { margin-bottom: 10px; padding: 18px 20px 20px; }
  .aura-lp .why__card > .ic { margin-bottom: 12px; }
}
@media (min-width: 700px) {
  .aura-lp .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .aura-lp .why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .aura-lp .why__grid { max-width: 78rem; }
}
@media (min-width: 1800px) {
  .aura-lp .why__grid { --ic: 30px; }
}


/* ==== builtfor.css ==== */
/* ==========================================================================
   V7 · BUILT FOR UTILITIES THAT… (#fit, dark) · 09-30 round 3 (FEEDBACK #72, #75, #76, #77)
   Lekha's binding visual rules (docs/lekha-visual-rules.md): 1 software only, never physical things (09-26 6:38
   "they're all apps"); 2 icon-based (09-27); 3 no app screens (09-28 45:28); 4 text first, quieter visuals, nothing
   jazzy (09-28 33:00-38:20). The dawn photo is a mood backdrop only, never the subject: its pole-and-substation
   silhouette stays at least ~30px BELOW the cards at every desktop width (--bf-ground grows with the photo, ≥ 1100)
   and is dimmed to a dark mass on phones (the phone crop is ours, not hers).
   The client's concept: H2 left, round NEUTRAL arrows right; a 2-up carousel of four numbered criteria (1-up + peek
   on phones) over ONE continuous dawn photo, the window stopping well before the water tower (#31).
   - Each card: the mono number on a hairline, ONE icon composition, her sentence. A composition is 4–8 Lucide glyphs
     on square tonal tiles with depth (a dot-grid field fading from the hero, opaque tiles with a lit top edge and a
     soft shadow, hairline connectors with square nodes, corner badges), ONE hero tile per card: the only ink glyph,
     a faint halo behind it. Everything else is --dim or quieter, so the sentence stays the loudest thing (Lekha 09-28
     38:04 "it doesn't take your attention away from the text"). Software only; no violet (a criterion is the
     utility's, not an AURA action); no words inside; square corners (glyphs keep their own round joins, #16).
   - The old hairline rail under the cards is gone (#76 "change that line"). The position buttons now sit in the head
     as a MAP of the four cards (four small square plates, the ones in view lit, moving with the track) right beside
     the arrows: one control cluster where the eye already is, nothing trailing under the cards. It differs from the
     demos' .car-dot pager ON PURPOSE (it maps the cards in view, 2 lit at two-up): do not unify the two.
   Motion (builtfor.js): a calm 700 ms slide; each composition settles ONCE, the first time its card is shown (tiles
   rise 6px and fade in, staggered; connectors draw; the hero last). Text is never hidden. Nothing appears or
   disappears on page scroll (#68); no ambient loop. Paused / reduced motion: everything simply there.
   No JS: no carousel; the four cards as a 2 × 2 grid (stacked on phones), whole. Controls hidden.
   ========================================================================== */
.aura-lp .bf {
  --bf-per: 1;                        /* cards fully in view (read by builtfor.js) */
  --bf-gap: 12px;
  --bf-peek: 3.25rem;                 /* how much of the next card shows */
  --bf-pad: clamp(20px, 2.3vw, 40px); /* card padding */
  --bf-w: 100%;                       /* the card window */
  --bf-ground: clamp(300px, 86vw, 380px);   /* room under the cards for the tower */
  --bf-ink-rgb: 236 235 242;          /* = --text as rgb */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  padding-top: var(--s-section);
  padding-bottom: var(--bf-ground);
}

/* --vis (0…1, the share of a card inside the window) is written by builtfor.js every frame of a slide. Registered as
   NON-inherited so a write restyles the card alone (its surface and border); the children's opacity is written inline. */
@property --vis { syntax: '<number>'; inherits: false; initial-value: 1; }

/* ---------- the photo: one image, full width, bottom-right; its top fades into the page ---------- */
.aura-lp .bf__photo { position: absolute; inset: 0; z-index: -2; display: block; pointer-events: none; }
.aura-lp .bf__photo img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(var(--bf-sink, 0%));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 18%, #000 40%);
          mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 18%, #000 40%);
}
.aura-lp .bf__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 0) 20%),
    linear-gradient(0deg, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 0.5) 7%, rgb(var(--bg-rgb) / 0) 18%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.55) 0%, rgb(var(--bg-rgb) / 0.2) 60%, rgb(var(--bg-rgb) / 0) 100%);
}

/* ---------- head: H2 left; the control cluster (map + arrows) ending flush with card 2 ---------- */
.aura-lp .bf__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: calc(var(--bf-w) - var(--bf-peek) - var(--bf-gap));
  max-width: 100%;
  margin-bottom: clamp(32px, 3.2vw, 56px);
}
.aura-lp .bf__title { max-width: none; margin: 0; text-align: left; }
.aura-lp .bf__ctl { display: flex; align-items: center; gap: clamp(18px, 1.7vw, 28px); flex: none; }
.aura-lp .bf__arrows { flex: none; gap: 10px; }
/* NEUTRAL (D12, no violet): Previous = a --dim ring over a light veil; the enabled Next = the one ink-filled control */
.aura-lp .bf__arrows .car-arrow { background: rgb(var(--bg-rgb) / 0.35); }
.aura-lp .bf__arrows .car-arrow:not(:disabled) { border-color: var(--dim); }
.aura-lp .bf__arrows [data-bf-next]:not(:disabled) { background: var(--text); color: var(--bg); border-color: var(--text); }
.aura-lp .bf__arrows [data-bf-next]:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 86%, var(--bg)); border-color: color-mix(in srgb, var(--text) 86%, var(--bg)); }
.aura-lp .bf__arrows .car-arrow svg { transition: transform 180ms var(--ease-out); }
.aura-lp .bf__arrows [data-bf-next]:hover:not(:disabled) svg { transform: translateX(2px); }
.aura-lp .bf__arrows [data-bf-prev]:hover:not(:disabled) svg { transform: translateX(-2px); }
.aura-lp .bf__arrows .car-arrow:disabled { opacity: 1; border-color: rgb(236 235 242 / 0.12); color: rgb(236 235 242 / 0.3); background: transparent; }

/* ---------- the map of the four cards (replaces the rail) ----------
   Four small square plates in the cards' proportion; the ones in view are lit and the lit span slides with the track
   (builtfor.js writes --bf-x 0…1 on the map every frame, and --bf-cards on the section). Its hit zones are the
   position buttons (hers: "Show cards 1 and 2" …; --i = the position): hover previews the span that will light up,
   keyboard focus frames it. Each zone ≥ 24px wide, 48px tall (the arrows' height). */
.aura-lp .bf__map {
  --bf-x: 0;
  --c: 16px;                                   /* one plate */
  --ch: 11px;
  --g: 4px;                                    /* between plates */
  --n: var(--bf-cards, 4);
  --span: calc(var(--bf-per) * var(--c) + (var(--bf-per) - 1) * var(--g));
  --off: calc(var(--bf-x) * (var(--n) - var(--bf-per)) * (var(--c) + var(--g)));
  position: relative;
  display: flex;
  flex: none;
  width: calc(var(--n) * var(--c) + (var(--n) - 1) * var(--g));
  height: 3rem;
}
.aura-lp .bf__cells,
.aura-lp .bf__lit {
  position: absolute;
  left: 0;
  top: calc(50% - var(--ch) / 2);
  width: 100%;
  height: var(--ch);
  pointer-events: none;
}
.aura-lp .bf__cells { background: repeating-linear-gradient(90deg, rgb(var(--bf-ink-rgb) / 0.17) 0 var(--c), transparent var(--c) calc(var(--c) + var(--g))); }
.aura-lp .bf__lit {
  background: repeating-linear-gradient(90deg, var(--text) 0 var(--c), transparent var(--c) calc(var(--c) + var(--g)));
  clip-path: inset(0 calc(100% - var(--off) - var(--span)) 0 var(--off));
}
.aura-lp .bf__hit {
  position: static;                           /* its ::before / ::after are placed against the map */
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.aura-lp .bf__hit[aria-current="true"] { cursor: default; }
.aura-lp .bf__hit:focus-visible { outline: none; }
.aura-lp .bf__hit::before,
.aura-lp .bf__hit::after {
  content: "";
  position: absolute;
  left: calc(var(--i, 0) * (var(--c) + var(--g)));
  width: var(--span);
  pointer-events: none;
}
.aura-lp .bf__hit::before {
  top: calc(50% - var(--ch) / 2);
  height: var(--ch);
  background: repeating-linear-gradient(90deg, rgb(var(--bf-ink-rgb) / 0.42) 0 var(--c), transparent var(--c) calc(var(--c) + var(--g)));
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}
.aura-lp .bf__hit::after {
  top: calc(50% - var(--ch) / 2 - 5px);
  left: calc(var(--i, 0) * (var(--c) + var(--g)) - 5px);
  width: calc(var(--span) + 10px);
  height: calc(var(--ch) + 10px);
  outline: 2px solid transparent;
}
.aura-lp .bf__hit:hover:not([aria-current="true"])::before { opacity: 1; }
.aura-lp .bf__hit:focus-visible::after { outline-color: var(--accent-text); }

/* ---------- the window and its native snap track; the peek fades into the photo ---------- */
.aura-lp .bf__window { position: relative; width: var(--bf-w); max-width: 100%; container-type: inline-size; }
.aura-lp .bf__track {
  overflow-x: auto;
  overflow-y: hidden;
  /* x contain (no browser back-swipe), y auto: vendor lenis.css sets overscroll-behavior: contain on BOTH axes of
     [data-lenis-prevent-horizontal], which swallowed vertical swipes / Space / ↓ on the cards. Same specificity, loads later. */
  overscroll-behavior: contain auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  --bf-fade: linear-gradient(90deg, #000 0, #000 calc(100% - var(--bf-peek)), rgb(0 0 0 / 0.55) calc(100% - var(--bf-peek) * 0.55), transparent 100%);
  -webkit-mask-image: var(--bf-fade);
          mask-image: var(--bf-fade);
}
.aura-lp .bf__track::-webkit-scrollbar { display: none; }
.aura-lp .bf__track:focus-visible { outline: none; }
.aura-lp .bf__window:has(> .bf__track:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 6px; }

.aura-lp .bf__cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100cqw - var(--bf-per) * var(--bf-gap) - var(--bf-peek)) / var(--bf-per));
  gap: var(--bf-gap);
  width: max-content;
  margin: 0;
  padding: 0 calc(var(--bf-gap) + var(--bf-peek)) 0 0;
  list-style: none;
}

/* ---------- the card ---------- */
.aura-lp .bf__card {
  --vis: 1;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  padding: var(--bf-pad);
  scroll-snap-align: start;
  background: linear-gradient(180deg, rgb(24 24 34 / calc(0.37 + 0.37 * var(--vis))) 0%, rgb(13 13 21 / calc(0.4 + 0.4 * var(--vis))) 100%);
  border: 1px solid rgb(236 235 242 / calc(0.05 + 0.06 * var(--vis)));
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgb(236 235 242 / 0.05);
  transition: box-shadow 400ms var(--ease-out);
}
.aura-lp .bf__card.is-in { box-shadow: inset 0 1px 0 rgb(236 235 242 / 0.16); }

.aura-lp .bf__top { display: flex; align-items: center; gap: 14px; }
.aura-lp .bf__num { flex: none; font-size: 0.8125rem; line-height: 1; letter-spacing: 0.14em; color: var(--text); }
.aura-lp .bf__rule { position: relative; flex: 1; height: 1px; background: rgb(236 235 242 / 0.14); transform-origin: 0 50%; }
.aura-lp .bf__rule::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; background: var(--dim); }

.aura-lp .bf__fig { display: flex; align-items: center; margin: clamp(20px, 2vw, 32px) 0 clamp(22px, 2.2vw, 36px); container-type: inline-size; will-change: opacity; }
.aura-lp .bf__svg { display: block; width: 100%; height: auto; overflow: visible; }

.aura-lp .bf__text {
  margin: 0;
  max-width: 19em;
  min-height: calc(3 * 1.3em);
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 0.9rem + 0.62vw, 1.5625rem);
  font-weight: var(--w-display);
  font-stretch: 104%;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  .aura-lp .bf__card:hover { box-shadow: inset 0 1px 0 rgb(236 235 242 / 0.16), inset 0 0 0 1px rgb(236 235 242 / 0.12); }
}

/* ---------- the compositions (gen.js): one family ----------
   Tile and glyph strokes are non-scaling (true 1px / 1.5px at every width); connectors keep pathLength for the draw,
   so their width follows --sw (1.35 where the 400-wide drawing renders under 320px). */
.aura-lp .bf__svg { --sw: 1; }
/* narrow cards (phones, small tablets): the compositions' empty side margins run into the card padding, so the tiles
   gain ~10% (every composition lies inside x 18…382 of 400, i.e. within the padding) */
.aura-lp .bf__svg .fld { opacity: 0.5; }                                    /* the dot-grid field, fading from the hero; x 18…382 = the tiles' span */
.aura-lp .bf__svg .tl, .aura-lp .bf__svg .hl, .aura-lp .bf__svg .rl { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.aura-lp .bf__svg .tl { stroke: #2C2D39; }
.aura-lp .bf__svg .tl--ghost { stroke: rgb(236 235 242 / 0.1); }
.aura-lp .bf__svg .tl--badge { stroke: #363745; }
.aura-lp .bf__svg .tl--panel { stroke: rgb(236 235 242 / 0.09); }
.aura-lp .bf__svg .tl--panel-hero { stroke: rgb(236 235 242 / 0.17); }
.aura-lp .bf__svg .tl--hero { stroke: rgb(236 235 242 / 0.3); }
.aura-lp .bf__svg .tl--dash { stroke: rgb(236 235 242 / 0.36); stroke-dasharray: 3 3; }   /* Lekha's unbuilt agent */
.aura-lp .bf__svg .hl { stroke: rgb(255 255 255 / 0.08); }
.aura-lp .bf__svg .hl--hero { stroke: rgb(255 255 255 / 0.2); }
.aura-lp .bf__svg .rl { stroke: rgb(236 235 242 / 0.07); }
.aura-lp .bf__svg .in { fill: none; stroke: rgb(236 235 242 / 0.07); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.aura-lp .bf__svg .gl { fill: none; stroke: currentColor; }
.aura-lp .bf__svg .gl * { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.aura-lp .bf__svg .gl--sm * { stroke-width: 1.25px; }                       /* glyphs under 24 units (the 20-unit badges) */
.aura-lp .bf__svg .gl--ink { color: var(--text); }
.aura-lp .bf__svg .gl--mid { color: #B3B2C1; }
.aura-lp .bf__svg .gl--dim { color: var(--dim); }
.aura-lp .bf__svg .gl--off { color: rgb(138 137 154 / 0.6); }
.aura-lp .bf__svg .cn { stroke: rgb(236 235 242 / 0.2); stroke-width: calc(1px * var(--sw)); }
.aura-lp .bf__svg .cn.bd { stroke: rgb(236 235 242 / 0.2); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; stroke-width: 1px; }   /* card 02's boundaries */
.aura-lp .bf__svg .cn.rt { stroke: rgb(236 235 242 / 0.5); stroke-width: calc(1.5px * var(--sw)); }   /* the short route */
.aura-lp .bf__svg .rg { fill: #15151F; stroke: rgb(236 235 242 / 0.5); stroke-width: calc(1.5px * var(--sw)); }
.aura-lp .bf__svg .rg--end { stroke: rgb(236 235 242 / 0.8); }
.aura-lp .bf__svg .nd { fill: var(--dim); }
.aura-lp .bf__svg .nd--f { fill: rgb(236 235 242 / 0.16); }
.aura-lp .bf__svg .dr { stroke-dasharray: 1 2; stroke-dashoffset: 0; }       /* gap > length: no cap dot at rest or hidden */
/* narrow cards (phones, small tablets): the compositions' empty side margins run into the card padding, so the tiles
   gain ~10% (every composition, field included, lies inside x 18…382 of 400, i.e. within the padding); strokes get
   lighter so the family keeps one weight on a smaller drawing */
@container (max-width: 320px) {
  .aura-lp .bf__svg { --sw: 1.35; flex: none; width: 110%; max-width: none; margin-inline: -5%; }
  .aura-lp .bf__svg .gl * { stroke-width: 1.25px; }
  .aura-lp .bf__svg .gl--sm * { stroke-width: 1.1px; }
}

/* the one entrance, ONCE per card (builtfor.js adds .bf--anim only with motion allowed, so a failed script never hides
   a tile; a card gets .is-drawn the first time it is shown): tiles rise 6px and fade in, staggered by --i;
   connectors draw; the field and the halo come up under them. Text is never hidden. */
.aura-lp .bf--anim .bf__card .bf__svg .st { transition: opacity 650ms var(--ease-out) calc(100ms + var(--i, 0) * 75ms), transform 900ms var(--ease-out) calc(100ms + var(--i, 0) * 75ms); }
.aura-lp .bf--anim .bf__card .bf__svg .dr { transition: stroke-dashoffset 800ms cubic-bezier(0.33, 0, 0.2, 1) calc(180ms + var(--i, 0) * 75ms); }
.aura-lp .bf--anim .bf__card .bf__svg :is(.fld, .halo) { transition: opacity 1200ms var(--ease-out) 150ms; }
.aura-lp .bf--anim .bf__card .bf__rule { transition: transform 900ms var(--ease-out); }
.aura-lp .bf--anim .bf__card:not(.is-drawn) .bf__svg .st { opacity: 0; transform: translateY(6px); }
.aura-lp .bf--anim .bf__card:not(.is-drawn) .bf__svg .dr { stroke-dashoffset: 1.02; }
.aura-lp .bf--anim .bf__card:not(.is-drawn) .bf__svg :is(.fld, .halo) { opacity: 0; }
.aura-lp .bf--anim .bf__card:not(.is-drawn) .bf__rule { transform: scaleX(0.001); }
/* disarmed (paused / reduced motion / no JS): no transition at all */
.aura-lp .bf__svg .st, .aura-lp .bf__svg .dr, .aura-lp .bf__svg .fld, .aura-lp .bf__svg .halo, .aura-lp .bf__rule { transition-property: none; }

/* no JS: no carousel. The four cards show whole as a grid; the controls would do nothing, so they are hidden */
html.no-js .aura-lp .bf [data-bf-ctl] { display: none; }
html.no-js .aura-lp .bf { --bf-peek: 0px; }
html.no-js .aura-lp .bf__track { overflow: visible; -webkit-mask-image: none; mask-image: none; }
html.no-js .aura-lp .bf__cards {
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--bf-per), minmax(0, 1fr));
  width: auto;
  padding: 0;
}

/* ---------- phones: 1 card + peek; the H2 gets the full width; the control cluster under the track, right ---------- */
@media (max-width: 759.98px) {
  .aura-lp .bf__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "window" "ctl";
  }
  .aura-lp .bf__head { display: contents; }
  .aura-lp .bf__title { grid-area: title; margin-bottom: 28px; }
  .aura-lp .bf__window { grid-area: window; }
  .aura-lp .bf__ctl { grid-area: ctl; justify-self: end; margin-top: 18px; }
  .aura-lp .bf__map { --c: 21px; --ch: 14px; }   /* four positions at one-up: each zone 24px wide */
  .aura-lp .bf__text { min-height: 0; }
  .aura-lp .bf__arrows .car-arrow:disabled { border-color: rgb(236 235 242 / 0.28); color: rgb(236 235 242 / 0.45); background: rgb(var(--bg-rgb) / 0.45); }
  /* our phone crop (dawn-end-m) puts the substation large, full contrast, right under the controls: a second mask
     layer (in the photo's own box, so it tracks the crop at every phone width) sinks it to a dim mass; the sky and the
     water tower on the right stay as they are */
  .aura-lp .bf__photo img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 18%, #000 40%), radial-gradient(50% 17% at 27% 69%, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.4) 55%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 18%, #000 40%), radial-gradient(50% 17% at 27% 69%, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.4) 55%, #000 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}

/* ---------- tablets: two cards + peek ---------- */
@media (min-width: 760px) {
  .aura-lp .bf {
    --bf-per: 2;
    --bf-gap: 16px;
    --bf-peek: 4.5rem;
    --bf-ground: clamp(260px, 34vw, 360px);
    --bf-sink: 8%;
  }
}

/* ---------- desktop (her composition): the window on the left, the tower clear on the right ---------- */
@media (min-width: 1100px) {
  .aura-lp .bf {
    --bf-gap: 1.25rem;
    --bf-peek: 6rem;
    --bf-w: min(66rem, 80%);
    /* the photo is full width, so its silhouette rises with the viewport (56.25vw tall, 11% sunk): the ground grows
       with it so the tallest pole / substation tip stays ~30px under the cards (measured 1100…2560, gap.js) */
    --bf-ground: calc(18.5vw + 30px);
    --bf-sink: 11%;
  }
  .aura-lp .bf__scrim {
    background:
      linear-gradient(180deg, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 0) 22%),
      linear-gradient(0deg, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 0.45) 8%, rgb(var(--bg-rgb) / 0) 20%),
      linear-gradient(90deg,
        rgb(var(--bg-rgb) / 0.9) 0%, rgb(var(--bg-rgb) / 0.78) 30%, rgb(var(--bg-rgb) / 0.5) 52%,
        rgb(var(--bg-rgb) / 0.14) 70%, rgb(var(--bg-rgb) / 0) 80%);
  }
}


/* ==== firstlight.css ==== */
/* ==========================================================================
   V7 · THE FIRST LIGHT PROGRAM (#first-light, dark) · 09-29 (FEEDBACK #72)
   The client's own centred section: label, H2 (her line break), paragraph, button, one stack centred (#64) on the page's
   dark, in normal flow. The dawn photo and "Built for utilities that…" now live in #fit (builtfor.css).
   Spacing follows the page's head rhythm (label → H2 16px, H2 → lead 24px, lead → button 36–48px). Nothing moves.
   ========================================================================== */
/* the Book section follows on the same dark and opens with its own H2: a shorter foot keeps the offer and the form
   one conversation apart, not two chapters (the head room above stays the page's standard) */
.aura-lp .firstlight { background: var(--bg); padding-bottom: calc(var(--s-section) * 0.6); }
.aura-lp .fl-offer { display: flex; flex-direction: column; align-items: center; text-align: center; }
.aura-lp .fl-offer__label { margin: 0 0 var(--s-label-h2); color: var(--text); letter-spacing: 0.16em; }
.aura-lp .fl-offer__title { max-width: 15em; text-wrap: balance; }
.aura-lp .fl-offer__body { margin: var(--s-h2-lead) 0 0; max-width: 60ch; }
.aura-lp .fl-offer__cta { justify-content: center; margin-top: clamp(32px, 3vw, 48px); }

/* her forced break holds from tablets up; on phones the H2 wraps on its own (balanced) */
@media (max-width: 759.98px) {
  .aura-lp .fl-br { display: none; }
}
/* phone round 09-30 (FEEDBACK #78): in portrait (≤480) the H2 left alone runs edge to edge at 430 ("production, before
   Q1 2027." fills the line). A narrower measure gives three phrase-length lines at every phone width:
   "Your first agent, / in production, / before Q1 2027." Copy untouched; only the wrap. */
@media (max-width: 480px) {
  .aura-lp .fl-offer__title { max-width: 10.5em; }
}


/* ==== book.css ==== */
/* ==========================================================================
   V7 · LET'S BUILD THE FUTURE OF UTILITIES (#book, dark) · 09-29 (FEEDBACK #72) · copy verbatim (#54)
   Centred (#64): the H2 (her line break) and paragraph on top, then the two-step form as one centred block below it
   (step 1, the question, her eight pills and the button, centred; step 2's fields read left to right inside the block).
   FRAMELESS (#2, #18): on the chapter surface, grouped by space and 1px rules only. The teams are pill toggles
   (999px, FEEDBACK #16): ghost with a 1px border, chosen = ink fill. Native radios keep the semantics.
   Colour: violet only on the one visible .btn--primary; --warn only on .form-error / [aria-invalid].
   In normal flow (D20): no pin and no entrance; the only motion is the pane swap the reader asks for (and the
   progress rule filling on step 2), both instant with reduced motion or paused.
   ========================================================================== */

.aura-lp .book { color-scheme: dark; background: var(--bg); }

.aura-lp .book__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-lead-content);
  align-items: start;
}

/* ---------- the head: H2 + paragraph, centred ---------- */
.aura-lp .book__copy { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; }
.aura-lp .book__title { max-width: 16em; text-wrap: balance; }
.aura-lp .book__lead { margin-top: var(--s-h2-lead); max-width: 60ch; }

/* ---------- the form: no frame, on the chapter surface, one centred block ---------- */
.aura-lp .book__console { grid-column: 1 / -1; justify-self: center; position: relative; width: 100%; max-width: 50rem; min-width: 0; }

/* head: "Step 1 of 2", then a full-width progress rule
   (1px track; the ink part covers half on step 1, all of it on step 2 and when sent) */
.aura-lp .book__head { display: grid; justify-items: center; gap: 16px; margin-bottom: clamp(28px, 2.6vw, 44px); }
.aura-lp .book__progress { width: 100%; }
/* step 1 (a question, its choices, one button) is centred; step 2's fields stay left-aligned inside the block */
.aura-lp .book__pane[data-pane="1"] { justify-items: center; text-align: center; }
.aura-lp .book__pane[data-pane="1"] .book__pills { justify-content: center; }
.aura-lp .book__pane[data-pane="1"] .book__actions { justify-content: center; width: 100%; }
.aura-lp .book__step { color: var(--muted); line-height: 1.4; transition: color 0.4s var(--ease-out); }
.aura-lp .book__progress { position: relative; display: block; height: 1px; background: var(--line-2); overflow: hidden; transform-origin: 0 50%; }
.aura-lp .book__progress i {
  position: absolute; inset: 0; background: var(--text);
  transform: scaleX(0.5); transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
}
.aura-lp :is([data-pane-current="2"], [data-pane-current="done"]) .book__progress i { transform: none; }
/* paused (the nav control): the rule jumps like the panes do */
html.is-paused .aura-lp .book__progress i { transition: none; }
/* called from another chapter (a preset CTA): the step line lights up for a moment */
.aura-lp .book__console.is-called .book__step { color: var(--text); }

.aura-lp .book__form { display: block; }
.aura-lp .book__form:focus { outline: none; }

/* panes: sequential swap (out 160ms, then in 240ms), never overlapping */
.aura-lp .book__pane { display: grid; gap: clamp(32px, 2.8vw, 48px); }
.aura-lp .book__pane[hidden] { display: none; }
html.motion .aura-lp .book__pane { transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out); }
html.motion .aura-lp .book__pane.is-out { opacity: 0; transform: translate3d(0, -6px, 0); transition-duration: 0.16s; transition-timing-function: ease-in; }
html.motion .aura-lp .book__pane.is-enter { opacity: 0; transform: translate3d(0, 8px, 0); transition: none; }

/* pane titles: wide-light display, one step down from the H2 */
.aura-lp .book__pane-title {
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem);
  font-weight: 400; font-stretch: 104%;
  letter-spacing: -0.02em; line-height: 1.15;
}
.aura-lp .book__pane-title:focus { outline: none; }
.aura-lp .book__pane[data-pane="1"] .book__pane-title { max-width: 24em; text-wrap: balance; }
.aura-lp .book__pane-head { display: grid; gap: 12px; }
.aura-lp .book__summary { color: var(--muted); font-size: var(--t-body); line-height: 1.5; }

/* ---------- options: format + team as pill toggles ---------- */
.aura-lp .book__group { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 16px; }
/* floated legend = a normal grid item (no fieldset legend notch, no extra box) */
.aura-lp .book__legend { float: left; width: 100%; padding: 0; margin: 0; color: var(--dim); line-height: 1.4; }
.aura-lp .book__pills { display: flex; flex-wrap: wrap; gap: 10px; }

.aura-lp .book__pill {
  position: relative;
  max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--muted);
  font-family: var(--f-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
/* hover only where there is a real hover (a mouse): on a touch screen the last tapped pill would keep it */
@media (hover: hover) {
  .aura-lp .book__pill:hover { color: var(--text); border-color: var(--dim); }
}
.aura-lp .book__pill:is(:has(input:checked), .is-active) { background: var(--text); border-color: var(--text); color: var(--bg); }
.aura-lp .book__pill:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 3px; }
/* the native radio covers the pill: it takes the click, the arrow keys and the focus */
.aura-lp .book__radio {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  border-radius: inherit;
  opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
}

.aura-lp .book__field[hidden] { display: none; }
.aura-lp .book__else { margin-top: 8px; max-width: 26rem; }
@keyframes book-rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
html.motion:not(.is-paused) .aura-lp .book__else:not([hidden]) { animation: book-rise 0.24s var(--ease-out) both; }

/* ---------- fields: underlined inputs straight on the surface ---------- */
.aura-lp .book__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(20px, 2vw, 32px); }
.aura-lp .book__field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.aura-lp .book__field--full { grid-column: 1 / -1; }
/* role + SAP landscape: side by side only when the long options fit, stacked otherwise */
.aura-lp .book__pair {
  grid-column: 1 / -1;
  display: grid; gap: 28px clamp(20px, 2vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.aura-lp .book__flabel { color: var(--dim); line-height: 1.4; }
.aura-lp .book__input,
.aura-lp .book__select { min-height: 2.75rem; font-size: var(--t-body); }
.aura-lp .book__input[aria-invalid="true"] { border-bottom-color: var(--warn); }
.aura-lp .book__input:-webkit-autofill,
.aura-lp .book__input:-webkit-autofill:hover,
.aura-lp .book__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--bg) inset;
  caret-color: var(--text);
  transition: background-color 9999s 0s;
}
.aura-lp .book__error { min-height: 0; line-height: 1.4; }
.aura-lp .book__error:empty { display: none; }

/* native select, underlined like the inputs, with a drawn chevron (no image, no colour) */
.aura-lp .book__control--select { position: relative; display: block; }
.aura-lp .book__select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; text-overflow: ellipsis; }
.aura-lp .book__select option { background: var(--raised); color: var(--text); }
.aura-lp .book__select.is-empty { color: var(--dim); }
.aura-lp .book__control--select::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 7px; height: 7px; margin-top: -6px;
  border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.aura-lp .book__consent { color: var(--muted); font-size: var(--t-small); line-height: 1.5; }

/* ---------- actions: a 1px rule, then the one primary ---------- */
.aura-lp .book__actions {
  align-items: center; gap: 12px 20px;
  padding-top: clamp(24px, 2.2vw, 32px);
  border-top: 1px solid var(--line);
}
.aura-lp .book__back {
  min-height: 2.75rem; padding: 0 4px;
  color: var(--text); font-size: 0.9375rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent);
  transition: text-decoration-color 0.2s;
}
@media (hover: hover) {
  .aura-lp .book__back:hover { text-decoration-thickness: 2px; text-decoration-color: var(--text); }
}
.aura-lp [data-book-submit][aria-disabled="true"] { cursor: progress; }
.aura-lp [data-book-submit][aria-disabled="true"] .arrow { display: none; }

.aura-lp .book__status { margin-top: 16px; color: var(--text); font-size: var(--t-small); line-height: 1.5; }
/* "Sending…" is already on the button: announce it, don't print it twice */
.aura-lp .book__status.is-quiet {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.aura-lp .book__status:empty { display: none; }
/* honeypot (book.html): off screen, never focusable, hidden from assistive tech */
.aura-lp .book__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- done: a short record that ends on a person ---------- */
.aura-lp .book__done { gap: clamp(28px, 2.6vw, 40px); }
.aura-lp .book__done-title [data-book-thanks] { display: block; }
.aura-lp .book__record { margin: 0; display: grid; }
.aura-lp .book__row {
  display: grid; grid-template-columns: minmax(8.5rem, 32%) 1fr; column-gap: 24px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.aura-lp .book__row:last-child { border-bottom: 1px solid var(--line); }
.aura-lp .book__row dt { color: var(--dim); }
.aura-lp .book__row dd { margin: 0; color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
/* the last line of the record: who answers (ink, one weight up, the record's end) */
.aura-lp .book__person { color: var(--text); font-size: var(--t-lead); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }

/* done reveal: title, rows in order, then the person (motion only; otherwise the end state) */
html.motion:not(.is-paused) .aura-lp .book__done.is-playing :is(.book__done-title, .book__row, .book__person) { opacity: 0; transform: translate3d(0, 8px, 0); }
html.motion:not(.is-paused) .aura-lp .book__done :is(.book__done-title, .book__row, .book__person) {
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--d, 0s);
}

/* ---------- layout breakpoints ---------- */
@media (max-width: 1100px) {
  .aura-lp .book__console { max-width: 46rem; }
}
@media (max-width: 759.98px) {
  .aura-lp .book__br { display: none; }
}
/* ---------- phones and tablets (phone round 09-30, FEEDBACK #78) ----------
   Every rule below is inside a max-width, pointer: coarse or height query: the approved desktop never matches one.
   Phones (≤600): head → form on the page's phone rhythm (--s-lead-content), and her eight teams become one tidy list
   of full-width pills (they were a ragged centred cloud of eight different widths, two of them breaking into two lines
   at 360 with the text touching the curve). A label that still needs two lines at 360 wraps balanced, with room above
   and below it. Consent and error lines read at the body size. */
@media (max-width: 760px) {
  .aura-lp .book__consent,
  .aura-lp .book__error { font-size: var(--t-body); }
  /* "Privacy Policy" never splits across two lines */
  .aura-lp .book__consent .link { white-space: nowrap; }
}
@media (max-width: 600px) {
  .aura-lp .book__head { margin-bottom: 28px; }
  .aura-lp .book__pane { gap: 32px; }
  .aura-lp .book__pane[data-pane="1"] .book__group { justify-self: stretch; width: 100%; }
  .aura-lp .book__pane[data-pane="1"] .book__pills { flex-direction: column; align-items: stretch; gap: 8px; }
  .aura-lp .book__pill { width: 100%; padding: 8px 1rem; }
  .aura-lp .book__pill > span { text-wrap: balance; }
  .aura-lp .book__else { max-width: none; }
  .aura-lp .book__fields { grid-template-columns: 1fr; gap: 24px; }
  .aura-lp .book__actions { flex-direction: column; align-items: stretch; }
  .aura-lp .book__actions .btn { width: 100%; }
  .aura-lp .book__back { align-self: center; }
  .aura-lp .book__row { grid-template-columns: 1fr; row-gap: 4px; }
}
/* review 09-30: at 360 "BPEM Case Resolution & Billing Exceptions" and "Utility Knowledge & Document Intelligence"
   broke into 54px stadiums among 44px pills; 10px side padding gives them one line (type stays 15px, pills 44px) */
@media (max-width: 374px) {
  .aura-lp .book__pill { padding-inline: 10px; }
}
/* touch screens (phones and tablets): the inline "Privacy Policy" link gets a 44px-tall hit area (vertical padding on an
   inline box moves nothing on the line), and "Back" is at least 44px wide */
@media (pointer: coarse) {
  .aura-lp .book__consent .link { padding-block: 0.8125rem; }
  .aura-lp .book__back { min-width: var(--tap); padding-inline: 12px; }
}
/* phones in landscape (≈390px tall): the form's inner spacing tightens so a step reads in fewer screens and more of it
   stays in view above the keyboard */
@media (max-width: 980px) and (max-height: 500px) {
  .aura-lp .book__head { gap: 12px; margin-bottom: 20px; }
  .aura-lp .book__pane { gap: 24px; }
  .aura-lp .book__pills { gap: 8px; }
  .aura-lp .book__fields,
  .aura-lp .book__pair { row-gap: 20px; }
  .aura-lp .book__actions { padding-top: 20px; }
}


/* ==== footer.css ==== */
/* ==========================================================================
   SITE FOOTER SLOT (09-29): tachyontech.com's own footer goes in #site-footer-slot (the site's developer adds it).
   We ship no footer. While the slot is empty (the preview), it reserves a quiet band on the page's own surface;
   as soon as anything is put inside it, the band collapses to the content's own size.
   The old V7 footer styles are kept in src/retired/footer-v7-0929.css (base.css still holds the shared .footer rules,
   now unused).
   ========================================================================== */
.aura-lp .site-footer-slot:empty {
  display: block;
  min-height: clamp(120px, 10vw, 200px);
  background: var(--bg);
}
/* phone round 09-30: on a phone with a home indicator (viewport-fit=cover) the quiet band also clears the bottom safe
   area. env() is 0 on every desktop and laptop screen, so the band is unchanged there. */
.aura-lp .site-footer-slot:empty { min-height: calc(clamp(120px, 10vw, 200px) + env(safe-area-inset-bottom, 0px)); }


/* ==== themes.css ==== */
/* ==========================================================================
   THEME C · Grid Operator (client choice 09-23; pill buttons per FEEDBACK #16)
   Dark tokens are the defaults in base.css. This file (loaded LAST) adds:
   - surfaces: concrete chapters (02 #demos, 05 #architecture, or [data-surface="concrete"])
               and [data-surface="dark"] to restore dark tokens inside a concrete chapter (e.g. a console)
   Selectors use :where() so any module rule overrides them without !important.
   ========================================================================== */

/* ---------- concrete surface ---------- */
.aura-lp :where(#demos, #architecture, [data-surface="concrete"]) {
  --bg: #E5E3DD;
  --bg-2: #DCDAD3;
  --raised: #EEEDE8;
  --raised-2: #F6F5F1;
  --line: #CBC8C0;
  --line-2: #B4B0A6;
  --text: #121218;
  --muted: #4E4D55;
  --dim: #5A5961;
  --accent: #594FEE;
  --accent-hover: #4A3CC7;
  --accent-text: #4A3CC7;
  --warn: #A23A2B;
  --on-accent: #FFFFFF;
  --bg-rgb: 229 227 221;
  --grid: rgb(18 18 24 / 0.06);
  --logo: #121218;
  background-color: var(--bg);
  color: var(--text);
}

/* ---------- dark surface (default page tokens, re-declared for nesting) ---------- */
.aura-lp :where([data-surface="dark"]) {
  --bg: #0D0D15;
  --bg-2: #12121B;
  --raised: #191923;
  --raised-2: #21212D;
  --line: #26262F;
  --line-2: #35353F;
  --text: #ECEBF2;
  --muted: #A09FAE;
  --dim: #8A899A;
  --accent: #594FEE;
  --accent-hover: #4A3CC7;
  --accent-text: #A49DFF;
  --warn: #EE8574;
  --on-accent: #FFFFFF;
  --bg-rgb: 13 13 21;
  --grid: rgb(236 235 242 / 0.055);
  --logo: #FFFFFF;
  color: var(--text);
}

/* (12-column hairlines removed 09-23: over photography they read as rendering artifacts — FEEDBACK #26) */
.aura-lp :is(main, .aura-main) { position: relative; }