/* Elyon inner pages, "Engineered light" (rollout 2026-10-25).
   Loaded after site.css and motion.css on every page except the homepage.
   A split hero (copy left, a small schematic or panel right), then sections
   aligned to the 12-column grid: a heading block on the left four columns,
   glass content on the right eight. Every colour and timing comes from
   MOTION.md. Without JS every section shows its finished state. */

/* ---------- Hero ---------- */
.ph { position: relative; padding: calc(var(--bar) + 40px + clamp(28px, 6vh, 80px)) 0 clamp(56px, 8vw, 112px); }
.ph-grid { display: grid; gap: 48px; align-items: center; }
.ph-solo .ph-copy { max-width: 52rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 28px; font: 500 11px/1.4 var(--f-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--hair-2); }
.crumbs a { display: inline-block; padding: 8px 0; text-decoration: none; transition: color var(--hover) var(--ease); }
.crumbs a:hover { color: var(--bone); }
.crumbs [aria-current] { display: inline-block; padding: 8px 0; color: var(--bone); }
.ph-h1 { font: 500 clamp(40px, 4.4vw, 68px)/1.02 var(--f-d); letter-spacing: -0.035em; color: var(--light); }
.ph-h1 .hw { display: inline-block; }
.ph-sub { max-width: 34em; margin-top: 26px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--night-muted); }
.ph-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.ph-note { max-width: 34em; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.55; color: var(--night-muted); }
.ph-eyebrow { margin-bottom: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .ph-h1 .hw { animation: heroWord 900ms var(--ease) both; }
  .ph-h1 .hw:nth-child(2) { animation-delay: 50ms; }
  .ph-h1 .hw:nth-child(3) { animation-delay: 100ms; }
  .ph-h1 .hw:nth-child(4) { animation-delay: 150ms; }
  .ph-h1 .hw:nth-child(5) { animation-delay: 200ms; }
  .ph-h1 .hw:nth-child(6) { animation-delay: 250ms; }
  .ph-h1 .hw:nth-child(7) { animation-delay: 300ms; }
  .ph-h1 .hw:nth-child(8) { animation-delay: 350ms; }
  .ph-h1 .hw:nth-child(9) { animation-delay: 400ms; }
  .ph-h1 .hw:nth-child(n+10) { animation-delay: 450ms; }
  .ph-sub, .ph-ctas, .ph-note, .ph-eyebrow { animation: riseIn 900ms var(--ease) 420ms both; }
  .ph-fig { animation: riseIn 1100ms var(--ease) 260ms both; }
}
@keyframes heroWord { from { opacity: 0; transform: translateY(0.4em); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (min-width: 1000px) {
  .ph-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .ph-copy { grid-column: 1 / span 6; }
  .ph-fig { grid-column: 7 / span 6; }
}

/* ---------- Tags ---------- */
.soon { display: inline-block; margin-left: 6px; padding: 2px 7px; border: 1px solid var(--hair-2); border-radius: 999px; font: 500 10px/1.5 var(--f-m); letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); vertical-align: 2px; }
.mtag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--hair-2); border-radius: 999px; font: 500 11px/1.4 var(--f-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); }
.mtag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(87, 212, 255, 0.7); }

/* ---------- Sections: heading left (4 of 12), content right (8 of 12) ---------- */
.sec { position: relative; padding-top: clamp(72px, 9vw, 136px); }
.sec:last-child { padding-bottom: clamp(88px, 11vw, 152px); }
.sec-grid { display: grid; gap: 32px 24px; }
.sec-h { font: 500 clamp(30px, 3.2vw, 48px)/1.06 var(--f-d); letter-spacing: -0.03em; color: var(--light); }
.sec-lede { max-width: 30em; margin-top: 18px; font-size: 17px; color: var(--night-muted); }
.sec-head .label { margin-bottom: 14px; }
@media (min-width: 1000px) {
  .sec-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sec-head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--bar) + 40px); }
  .sec-body { grid-column: 5 / span 8; }
}
.sec-rule { border-top: 1px solid var(--night-line); }

/* ---------- Glass cards ---------- */
.glass { border: 1px solid var(--hair); border-radius: 20px; background: rgba(12, 22, 32, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.cards { display: grid; gap: 24px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { position: relative; display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.4vw, 32px); text-decoration: none; }
.card h3 { font: 500 clamp(21px, 1.7vw, 24px)/1.2 var(--f-d); letter-spacing: -0.02em; color: var(--light); }
.card p { font-size: 16px; line-height: 1.6; color: var(--night-muted); }
.card .seen { font-size: 14px; color: var(--night-muted); padding-top: 12px; border-top: 1px solid var(--night-line); }
.card .seen b { font-weight: 600; color: var(--bone); }
.card-num { font: 500 12px/1 var(--f-m); letter-spacing: 0.1em; color: var(--glow); }
a.card { transition: border-color var(--hover) var(--ease), background-color var(--hover) var(--ease); }
a.card:hover { border-color: var(--hair-2); background: rgba(16, 28, 40, 0.72); }
a.card:focus-visible { border-radius: 20px; }
.card-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--bone); }
.card-more .arr { transition: transform var(--hover) var(--ease); }
a.card:hover .card-more .arr, .card-more:hover .arr { transform: translateX(4px); }
.card .card-more { text-decoration: none; min-height: 32px; }
.card-wide { grid-column: 1 / -1; }

/* ---------- Where people decide: chips + a sentence ---------- */
.decide { display: grid; gap: 22px; padding: clamp(24px, 3vw, 40px); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 9px 15px; border: 1px solid var(--hair-2); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--bone); }
.decide p { max-width: 46em; color: var(--night-muted); }

/* ---------- Fact rows (security and control) ---------- */
.rows { border-top: 1px solid var(--night-line); }
.rows li { display: grid; gap: 6px 32px; padding: 22px 0 22px 30px; border-bottom: 1px solid var(--night-line); position: relative; }
.rows li::before { content: ""; position: absolute; left: 3px; top: 30px; width: 11px; height: 6px; border-left: 1.6px solid var(--cyan); border-bottom: 1.6px solid var(--cyan); transform: rotate(-45deg); }
.rows b { font: 500 19px/1.3 var(--f-d); letter-spacing: -0.015em; color: var(--light); }
.rows span { color: var(--night-muted); font-size: 16px; }
@media (min-width: 760px) { .rows li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- Steps (how we work) ---------- */
.steps4 { display: grid; gap: 24px; counter-reset: s; }
@media (min-width: 760px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps4 li { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.4vw, 32px); }
.steps4 .when { font: 500 11px/1.4 var(--f-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--glow); }
.steps4 h3 { font: 500 clamp(24px, 2vw, 30px)/1.1 var(--f-d); letter-spacing: -0.025em; color: var(--light); }
.steps4 p { color: var(--night-muted); font-size: 16px; }
.steps4 .get { padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--night-line); font-size: 15px; color: var(--bone); }
.steps4 .get b { font-weight: 600; color: var(--night-muted); margin-right: 2px; }

/* ---------- Pillars (engineering) ---------- */
.pillar-sec .sec-body { display: grid; gap: 24px; }
.pgrid { display: grid; gap: 24px; }
@media (min-width: 760px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pblock { padding: clamp(24px, 2.4vw, 32px); display: grid; gap: 12px; align-content: start; }
.pblock .label { color: var(--night-muted); }
.pblock p { color: var(--bone); font-size: 16px; }
.pblock ul { display: grid; gap: 8px; }
.pblock li { position: relative; padding-left: 18px; color: var(--night-muted); font-size: 15px; }
.pblock li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1px; background: var(--cyan); }
.pblock .more { justify-self: start; font-size: 15px; }
.lead-p { max-width: 36em; font: 500 clamp(19px, 1.6vw, 23px)/1.45 var(--f-d); letter-spacing: -0.01em; color: var(--light); }

/* ---------- FAQ (accordion from site.js) ---------- */
.acc-panel p a { color: var(--bone); text-underline-offset: 4px; }

/* ---------- Closing panel ---------- */
.cta-panel { position: relative; overflow: hidden; display: grid; gap: 20px; justify-items: start; padding: clamp(32px, 5vw, 72px); }
.cta-panel::before { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; height: 140%; background: radial-gradient(closest-side, rgba(87, 212, 255, 0.09), rgba(87, 212, 255, 0)); pointer-events: none; }
.cta-panel h2 { position: relative; max-width: 14em; font: 500 clamp(34px, 4vw, 60px)/1.02 var(--f-d); letter-spacing: -0.035em; color: var(--light); }
.cta-panel p { position: relative; max-width: 34em; font-size: 17px; color: var(--night-muted); }
.cta-panel .btn { position: relative; margin-top: 8px; }
@media (max-width: 479.98px) { .cta-panel .btn, .ph-ctas .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; } }

/* ---------- Schematics (hero figures): static SVG, drawn once on reveal ---------- */
.sch { position: relative; padding: 0; overflow: hidden; }
.sch-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--night-line); font: 500 11px/1.4 var(--f-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); }
.sch-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(87, 212, 255, 0.7); }
.sch svg { width: 100%; height: auto; }
/* "How a build fits": the whole panel (bar + drawing) fits under the header on
   laptop screens. The figure narrows with the viewport height instead of
   leaving empty glass; 1.4 is the drawing's aspect (560 x 400), 184px is the
   header, the bar and a 24px margin. The anchor lands its content level with
   the sticky heading. */
#architecture { scroll-margin-top: calc(24px - clamp(72px, 9vw, 136px)); }
@media (min-width: 600px) {
  #architecture .sch { max-width: max(480px, calc((100vh - 184px) * 1.4 + 2px)); }
  @supports (height: 100svh) { #architecture .sch { max-width: max(480px, calc((100svh - 184px) * 1.4 + 2px)); } }
}
.sch .sch-p { display: none; }
@media (max-width: 599.98px) { .sch .sch-d { display: none; } .sch .sch-p { display: block; } }
.s-hdr { font: 500 10px/1 var(--f-m); letter-spacing: 0.1em; fill: var(--night-muted); }
.s-node rect { fill: #0C1620; stroke: rgba(154, 168, 180, 0.32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-lab { font: 500 13px/1 var(--f-b); fill: var(--bone); }
.s-wire { fill: none; stroke: rgba(154, 168, 180, 0.26); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Lit wires and comets draw with pathLength="1" dashes. They must not use
   vector-effect: non-scaling-stroke: Chrome then lays the dashes out in screen
   space while pathLength stays in user space, which left broken dashes on the
   lit wires and stray fragments where the parked comets sit. Their widths are
   in user units instead, set per drawing so they land near 1.4px on screen. */
.s-lit { fill: none; stroke: var(--cyan); stroke-width: 1.4; stroke-linecap: round; }
.s-comet { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; }
.s-comet.halo { stroke: var(--glow); stroke-width: 7; opacity: 0.22; }
.sch-d .s-lit { stroke-width: 1; }
.sch-d .s-comet { stroke-width: 1.15; }
.sch-d .s-comet.halo { stroke-width: 5; }
.s-port { fill: var(--glow); }
.s-core .s-ring { fill: #0C1620; stroke: rgba(127, 222, 255, 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-core .s-orbit { fill: none; stroke: rgba(154, 168, 180, 0.2); stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.s-core .s-cross { stroke: rgba(241, 238, 233, 0.4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-core .s-star { fill: var(--light); }
.s-gate rect { fill: rgba(87, 212, 255, 0.05); stroke: rgba(127, 222, 255, 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-gate .s-tick { fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-gate circle { fill: none; stroke: rgba(127, 222, 255, 0.55); vector-effect: non-scaling-stroke; }
.s-glow { fill: url(#sglow); }
.s-step rect { fill: #0C1620; stroke: rgba(154, 168, 180, 0.32); vector-effect: non-scaling-stroke; }
.s-step.on rect { stroke: rgba(127, 222, 255, 0.6); }
.s-when { font: 500 10px/1 var(--f-m); letter-spacing: 0.1em; fill: var(--glow); }
/* Drawn once when the figure enters: lit wires trace in, the gate's check draws last. */
@media (prefers-reduced-motion: no-preference) {
  .js .sch:not(.in) .s-lit, .js .sch:not(.in) .s-tick { stroke-dashoffset: 1; }
  .js .sch .s-lit, .js .sch .s-tick { stroke-dasharray: 1; }
  .js .sch.in .s-lit { animation: sDraw 1200ms var(--ease) both; }
  .js .sch.in .s-lit.d2 { animation-delay: 350ms; }
  .js .sch.in .s-lit.d3 { animation-delay: 700ms; }
  .js .sch.in .s-tick { animation: sDraw 520ms var(--ease) 1250ms both; }
  .js .sch:not(.in) .s-core, .js .sch:not(.in) .s-gate { opacity: 0.4; }
  .js .sch .s-core, .js .sch .s-gate { transition: opacity 600ms var(--ease) 500ms; }
}
@keyframes sDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* The governance stack (engineering hero). Seven layered SVGs share one
   viewBox (560 x 580) inside .stk, so every plate is its own compositor
   layer: the drop, the breathing and the lift move only transform/translate
   and opacity. The labels are real links (one per section) outside the
   aria-hidden drawing; hovering or focusing one lifts its plate and dims
   the rest. --u is one viewBox unit in CSS pixels. */
.stk { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 560 / 580; container-type: inline-size; --u: calc(100cqw / 560); }
.stk-art { position: absolute; inset: 0; }
.stk-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stk-l * { vector-effect: non-scaling-stroke; }
.pl-ghost { fill: none; stroke: rgba(154, 168, 180, 0.12); stroke-width: 1; stroke-dasharray: 2 5; }
.pl-edge { stroke: rgba(87, 212, 255, 0.24); stroke-width: 1; stroke-dasharray: 2 5; }
.pl-uglow { fill: url(#stkUglow); }
.pl-side { stroke: rgba(154, 168, 180, 0.26); stroke-width: 1; }
.pl-l { fill: url(#stkSideL); }
.pl-r { fill: url(#stkSideR); }
.pl-face { fill: url(#stkFace); stroke: rgba(154, 168, 180, 0.3); stroke-width: 1; }
.pl-sheen { fill: url(#stkSheen); }
.pl-rim { fill: none; stroke: url(#stkRim); stroke-width: 1; }
.pl-front { fill: none; stroke: url(#stkEdge); stroke-width: 1.25; opacity: 0.8; transition: opacity var(--hover) var(--ease); }
.pl-low { fill: none; stroke: url(#stkEdge); stroke-width: 1; opacity: 0.3; }
.pl-d { fill: none; stroke: rgba(154, 168, 180, 0.6); stroke-width: 1; }
.pl-dash { stroke-dasharray: 3 4; }
.pl-star { fill: var(--bone); }
.stk-pl[data-pl="2"] .pl-star { fill: var(--cyan); }
.pl-lead { fill: none; stroke: rgba(154, 168, 180, 0.5); stroke-width: 1; }
.pl-port { opacity: 0; }
.pl-port .pp-halo { fill: url(#stkHalo); }
.pl-port .pp-ring { fill: rgba(87, 212, 255, 0.14); stroke: var(--glow); stroke-width: 1; }
.pl-port circle { fill: var(--light); }
/* The lid: a glass seal, cyan-tinted, with a solid rim and the gate across it. */
.pl-lid { fill: url(#stkLid); stroke: rgba(127, 222, 255, 0.72); }
.pl-lidside { fill: url(#stkLidSide); stroke: rgba(127, 222, 255, 0.4); }
.stk-lid .pl-front { opacity: 1; }
.stk-lid .pl-d { stroke: rgba(127, 222, 255, 0.5); }
.pl-gate { stroke: rgba(127, 222, 255, 0.7); }
.pl-gate-lit { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: none; filter: drop-shadow(0 0 3px rgba(87, 212, 255, 0.9)); }
.pl-seal { fill: rgba(87, 212, 255, 0.3); stroke: var(--glow); stroke-width: 1; opacity: 0; }
.stk-axis line { stroke: rgba(87, 212, 255, 0.3); stroke-width: 1; stroke-dasharray: 2 5; }
.stk-comet { opacity: 0; }
.c-tail { fill: none; stroke: url(#stkTail); stroke-width: 2.2; stroke-linecap: round; vector-effect: none; }
.c-halo { fill: url(#stkHalo); }
.c-head { fill: var(--light); }
.stk-pl { transition: opacity var(--hover) var(--ease), translate var(--hover) var(--ease); }
/* Tags: JetBrains Mono, as the original drawing, now links to each part. */
.stk-tags { position: absolute; inset: 0; pointer-events: none; }
.stk-tag { position: absolute; right: calc(10% - 7px); display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 7px; isolation: isolate; font: 500 12px/1 var(--f-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); text-decoration: none; pointer-events: auto; transition: color var(--hover) var(--ease), translate var(--hover) var(--ease); }
.stk-tag::before { content: ""; width: 12px; height: 1px; background: var(--cyan); box-shadow: 0 0 6px rgba(87, 212, 255, 0.8); opacity: 0; transform: scaleX(0); transform-origin: 100% 50%; transition: opacity var(--hover) var(--ease), transform var(--hover) var(--ease); }
.stk-tag::after { content: ""; position: absolute; inset: 3px 0; z-index: -1; border-radius: 6px; background: rgba(6, 11, 16, 0.78); }
.stk-tag:hover, .stk-tag:focus-visible { color: var(--light); }
.stk-tag:hover::before, .stk-tag:focus-visible::before { opacity: 1; transform: none; }
.stk-tag[data-pl="0"] { top: calc(80.95% - 16px); }
.stk-tag[data-pl="1"] { top: calc(65.43% - 16px); }
.stk-tag[data-pl="2"] { top: calc(49.91% - 16px); }
.stk-tag[data-pl="3"] { top: calc(34.4% - 16px); }
@media (max-width: 599.98px) { .stk-tag { font-size: 11px; } }
.stack-fig:has(.stk-tag:is(:hover, :focus-visible)) .stk-pl { opacity: 0.3; }
.stack-fig:has(.stk-tag[data-pl="0"]:is(:hover, :focus-visible)) .stk-pl[data-pl="0"],
.stack-fig:has(.stk-tag[data-pl="1"]:is(:hover, :focus-visible)) .stk-pl[data-pl="1"],
.stack-fig:has(.stk-tag[data-pl="2"]:is(:hover, :focus-visible)) .stk-pl[data-pl="2"],
.stack-fig:has(.stk-tag[data-pl="3"]:is(:hover, :focus-visible)) .stk-pl[data-pl="3"] { opacity: 1; }
.stack-fig:has(.stk-tag:is(:hover, :focus-visible)) .stk-pl .pl-front { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .stack-fig:has(.stk-tag[data-pl="0"]:is(:hover, :focus-visible)) .stk-pl[data-pl="0"],
  .stack-fig:has(.stk-tag[data-pl="1"]:is(:hover, :focus-visible)) .stk-pl[data-pl="1"],
  .stack-fig:has(.stk-tag[data-pl="2"]:is(:hover, :focus-visible)) .stk-pl[data-pl="2"],
  .stack-fig:has(.stk-tag[data-pl="3"]:is(:hover, :focus-visible)) .stk-pl[data-pl="3"],
  .stk-tag:hover, .stk-tag:focus-visible { translate: 0 calc(var(--u) * -16); }

  /* Entrance: the figure's own riseIn is replaced by the plates dropping
     into place, Platforms first, the Governance lid last. */
  .ph-fig.is-stack { animation: none; }
  .stk-pl[data-pl="0"], .stk-tag[data-pl="0"] { --d: 300ms; --b: 6; }
  .stk-pl[data-pl="1"], .stk-tag[data-pl="1"] { --d: 440ms; --b: 2; }
  .stk-pl[data-pl="2"], .stk-tag[data-pl="2"] { --d: 580ms; --b: -2; }
  .stk-pl[data-pl="3"], .stk-tag[data-pl="3"] { --d: 720ms; --b: -11; }
  .stk-base { animation: stkFade 900ms var(--ease) 260ms backwards; }
  .stk-pl { animation: stkDrop 900ms var(--ease) var(--d) backwards; }
  .stk-tag { animation: stkFade 700ms var(--ease) calc(var(--d) + 260ms) backwards; }
  .stk-axis { animation: stkFade 900ms var(--ease) 1300ms backwards; }

  /* Idle loop, one 7 s cycle shared by every part (they start together):
     the layers part slightly, a pulse climbs the centre axis lighting each
     plate's port, and when it reaches the lid the gate draws out from the
     centre and the seal fills: a person approves. Then everything settles. */
  .js .stack-fig { --t0: 1.7s; }
  .js .stk-pl { animation: stkDrop 900ms var(--ease) var(--d) backwards, stkBreathe 7s cubic-bezier(0.45, 0, 0.55, 1) var(--t0) infinite; }
  .js .stk-comet { animation: stkClimb 7s linear var(--t0) infinite, stkCometFade 7s linear var(--t0) infinite; }
  .js .pl-port { animation: stkPort 7s linear calc(var(--t0) + var(--pd, 0s)) infinite; }
  .pl-port[data-p="1"] { --pd: 0.66s; }
  .pl-port[data-p="2"] { --pd: 0.95s; }
  .js .pl-gate-lit { animation: stkGate 7s linear var(--t0) infinite; }
  .js .pl-seal { animation: stkSeal 7s linear var(--t0) infinite; }
  .stack-fig.idle *, .paused .stack-fig * { animation-play-state: paused; }
}
@keyframes stkFade { from { opacity: 0; } }
@keyframes stkDrop { from { opacity: 0; transform: translate3d(0, calc(var(--u) * -56), 0); } to { opacity: 1; transform: none; } }
@keyframes stkBreathe { 0%, 14% { transform: none; } 46% { transform: translate3d(0, calc(var(--u) * var(--b)), 0); } 86%, 100% { transform: none; } }
@keyframes stkClimb { 0%, 20% { transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } 43%, 100% { transform: translate3d(0, calc(var(--u) * -270), 0); } }
@keyframes stkCometFade { 0%, 19% { opacity: 0; } 22%, 41% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes stkPort { 0%, 19% { opacity: 0; } 21% { opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 34%, 100% { opacity: 0; } }
@keyframes stkGate { 0%, 43% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 51%, 64% { stroke-dashoffset: 0; opacity: 1; } 74%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes stkSeal { 0%, 44% { opacity: 0; } 50%, 64% { opacity: 1; } 76%, 100% { opacity: 0; } }

/* ---------- Clef replay ---------- */
.replay { display: grid; gap: 40px; align-items: start; }
.replay-intro { display: grid; gap: 0; margin-bottom: 14px; }
@media (min-width: 1000px) { .replay { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .replay-device { grid-column: 1 / span 5; } .replay-side { grid-column: 7 / span 6; } }
.phone { width: min(100%, 360px); margin-inline: auto; padding: 8px; border: 1px solid var(--hair-2); border-radius: 44px; background: #0A121A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(87, 212, 255, 0.18); }
.phone-screen { display: flex; flex-direction: column; height: 520px; border-radius: 36px; background: #070D13; overflow: hidden; }
.phone-top { display: grid; justify-items: center; gap: 3px; padding: 20px 16px 12px; border-bottom: 1px solid var(--night-line); }
.phone-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--night-2); color: var(--night-muted); }
.phone-name { font-size: 14px; font-weight: 700; color: var(--light); }
.phone-sub { font-size: 12px; color: var(--night-muted); }
.thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 9px; padding: 16px 14px 20px; overflow: hidden; }
.msg { max-width: 82%; padding: 9px 13px; border-radius: 18px; font-size: 14.5px; line-height: 1.4; }
.msg-in { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--night-2); border: 1px solid var(--night-line); color: var(--bone); }
.msg-out { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--bone); color: var(--night); font-weight: 500; }
.msg-by { align-self: flex-end; margin-top: -3px; padding-right: 6px; font-size: 11px; color: var(--night-muted); }
.msg-typing { align-self: flex-end; display: flex; gap: 4px; padding: 13px 14px; border-radius: 18px; background: var(--night-2); }
.msg-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--night-muted); animation: typing 1s ease-in-out infinite; }
.msg-typing i:nth-child(2) { animation-delay: 0.15s; }
.msg-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.t-stamp { align-self: center; font: 500 10px/1.4 var(--f-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); }
.t-note { align-self: center; max-width: 90%; font-size: 12px; line-height: 1.45; text-align: center; color: var(--night-muted); }
.t-chip { align-self: stretch; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--night-line); border-radius: 12px; background: rgba(12, 22, 32, 0.9); font-size: 12.5px; line-height: 1.4; color: var(--bone); }
.t-chip b { display: inline-flex; align-items: center; gap: 7px; font: 500 10px/1.4 var(--f-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--glow); }
.t-chip b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.t-chip.is-held { border-style: dashed; border-color: rgba(127, 222, 255, 0.45); }
.t-chip-who { color: var(--night-muted); }
.thread > * { animation: riseSmall 320ms var(--ease) both; }
.replay-side { display: grid; gap: 18px; }
.replay-side-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.replay-side-title { font-size: 15px; font-weight: 600; color: var(--night-muted); }
.pause-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--night-line); border-radius: 50%; background: transparent; color: var(--night-muted); cursor: pointer; transition: color var(--hover) var(--ease), border-color var(--hover) var(--ease); }
.pause-btn:hover { color: var(--bone); border-color: var(--night-muted); }
.pause-btn:focus-visible { border-radius: 50%; }
.pause-btn .i-play, .pause-btn[aria-pressed="true"] .i-pause { display: none; }
.pause-btn[aria-pressed="true"] .i-play { display: block; }
.replay-list { display: grid; border-top: 1px solid var(--night-line); }
.replay-item { position: relative; display: grid; gap: 3px; width: 100%; padding: 14px 0 15px; border: 0; border-bottom: 1px solid var(--night-line); background: none; text-align: left; cursor: pointer; }
.ri-label { font: 500 19px/1.25 var(--f-d); letter-spacing: -0.015em; color: var(--night-muted); transition: color var(--hover) var(--ease); }
.ri-meta { font-size: 13px; color: var(--night-muted); }
.replay-item:hover .ri-label { color: var(--bone); }
.replay-item[aria-current] .ri-label { color: var(--light); }
.replay-item:focus-visible { outline-offset: -2px; }
.ri-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.ri-bar i { position: absolute; inset: 0; background: var(--cyan); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.replay-item:not([aria-current]) .ri-bar { display: none; }
.replay-note { font-size: 13px; color: var(--night-muted); }
.replay-transcript { margin-top: 32px; border: 1px solid var(--hair); border-radius: 16px; background: rgba(12, 22, 32, 0.62); }
.replay-transcript summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; font-weight: 600; cursor: pointer; list-style: none; }
.replay-transcript summary::-webkit-details-marker { display: none; }
.replay-transcript summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan); transform: rotate(-45deg); transition: transform var(--hover) var(--ease); }
.replay-transcript[open] summary::before { transform: rotate(45deg); }
.replay-transcript summary:focus-visible { outline-offset: -2px; border-radius: 16px; }
.replay-transcript ol { display: grid; gap: 8px; padding: 4px 18px 20px 40px; list-style: decimal; color: var(--night-muted); font-size: 14.5px; }
.replay-transcript b { color: var(--bone); font-weight: 600; }
.rda { display: grid; gap: 24px; margin-top: 32px; }
@media (min-width: 760px) { .rda { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rda .card.emph { border-color: rgba(127, 222, 255, 0.4); }
@media (max-width: 999.98px) {
  .replay-list { display: flex; gap: 8px; overflow-x: auto; border-top: 0; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .replay-list::-webkit-scrollbar { display: none; }
  .replay-list li { flex: none; scroll-snap-align: center; }
  .replay-item { width: auto; padding: 10px 16px 11px; border: 1px solid var(--night-line); border-radius: 14px; }
  .replay-item[aria-current] { border-color: rgba(127, 222, 255, 0.5); }
  .ri-label { font-size: 16px; }
  .ri-bar { left: 14px; right: 14px; }
}
@media (max-width: 479.98px) { .phone-screen { height: 480px; } }
@media (max-width: 999.98px) { .replay-side { display: contents; } .replay-intro { order: -1; } }

/* ---------- Contact ---------- */
.mail-panel { display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); }
.mail-panel h2 { font: 500 clamp(26px, 2.4vw, 34px)/1.1 var(--f-d); letter-spacing: -0.025em; color: var(--light); }
.mail-panel p { color: var(--night-muted); }
.mail-addr { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1.3 var(--f-m); color: var(--bone); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 6px; overflow-wrap: anywhere; }
.mail-addr:hover { text-decoration-color: var(--cyan); }
.next { display: grid; counter-reset: n; border-top: 1px solid var(--night-line); }
.next li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; padding: 18px 0; border-bottom: 1px solid var(--night-line); color: var(--bone); }
.next li::before { content: "0" counter(n); font: 500 12px/1.9 var(--f-m); letter-spacing: 0.1em; color: var(--glow); }
.contact-grid[data-form="off"] .contact-form-panel { display: none; }
.contact-form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 760px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-size: 14px; font-weight: 600; }
.field-opt, .field-hint { font-size: 13px; font-weight: 500; color: var(--night-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--night-line); border-radius: 12px; background: var(--night); color: var(--bone); font: inherit; font-size: 16px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-radius: 12px; }
.field-error { font-size: 13px; color: #FFA99D; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 14px; color: var(--night-muted); }
.form-nojs-error { display: none; }
.form-done[hidden] { display: none; }

/* ---------- Coming soon, 404 ---------- */
.soon-list { display: grid; border-top: 1px solid var(--night-line); }
.soon-list li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--night-line); }
.soon-list b { font: 500 19px/1.3 var(--f-d); letter-spacing: -0.015em; color: var(--light); }
.soon-list span { font-size: 15px; color: var(--night-muted); }
.facts li { grid-template-columns: 7.5em 1fr; align-items: baseline; gap: 16px; padding: 13px 0; }
.facts b { font-size: 17px; line-height: 1.55; }
.lost-mark { width: 56px; height: 56px; margin-bottom: 32px; color: var(--light); }

/* ---------- Legal (privacy, terms: drafts, not linked from public pages) ---------- */
.legal-grid { display: grid; gap: 40px 24px; }
@media (min-width: 1000px) { .legal-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .legal-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--bar) + 40px); align-self: start; } .prose { grid-column: 5 / span 7; } }
.legal-toc { display: grid; gap: 2px; font-size: 14px; }
.legal-toc .label { margin-bottom: 8px; }
.legal-toc a { padding: 6px 0; line-height: 20px; color: var(--night-muted); text-decoration: none; transition: color var(--hover) var(--ease); }
.legal-toc a:hover { color: var(--bone); }
.prose { max-width: 44em; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 48px; font: 500 clamp(24px, 2vw, 30px)/1.15 var(--f-d); letter-spacing: -0.02em; color: var(--light); scroll-margin-top: 110px; }
.prose h3 { margin-top: 28px; font: 600 17px/1.4 var(--f-b); color: var(--light); }
.prose p, .prose li { color: var(--night-muted); font-size: 16px; }
.prose b { color: var(--bone); font-weight: 600; }
.prose ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.prose a { color: var(--bone); text-underline-offset: 4px; }
.prose section > * + * { margin-top: 16px; }
.prose-lede, .legal-lede { font-size: 18px; color: var(--bone) !important; }
.legal-meta { margin-top: 20px; font: 500 12px/1.6 var(--f-m); letter-spacing: 0.06em; color: var(--night-muted); }
.legal-draft { padding: 14px 18px; border: 1px dashed rgba(127, 222, 255, 0.45); border-radius: 12px; font-size: 14px; color: var(--bone); }
mark.ph { padding: 0 4px; border-radius: 4px; background: rgba(255, 196, 84, 0.16); color: #FFD48A; }
.sec .replay { margin-top: 0; }
.mail-panel .ph-ctas { margin-top: 4px; }
.contact-grid { display: grid; gap: 24px; }
.hd-links a[aria-current="page"] { color: var(--bone); }
.menu-link[aria-current="page"] .menu-t { color: var(--glow); }
.sch, .stack-fig { margin: 0; }
@media (max-width: 999.98px) { .replay { gap: 18px; } .replay-device { margin: 10px 0 18px; } }
/* About page */
.ab-more { margin-top: 28px; }
.ab-ctas { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Contact submit states: idle, busy (a turning arc, as in the console), sent (a drawn check).
   All three labels sit in one grid cell, so the button never changes width. ---------- */
.btn-send { display: inline-grid; place-items: center; }
.btn-send .bs { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 10px; }
.btn-send .bs-busy, .btn-send .bs-sent, .btn-send[data-state="busy"] .bs-idle, .btn-send[data-state="sent"] .bs-idle { visibility: hidden; }
.btn-send[data-state="busy"] .bs-busy, .btn-send[data-state="sent"] .bs-sent { visibility: visible; }
.btn-send[aria-disabled="true"] { cursor: default; }
.btn-send[data-state="busy"] { opacity: 0.86; }
.bs-spin { width: 14px; height: 14px; border: 1.6px solid rgba(7, 13, 19, 0.22); border-top-color: var(--night); border-radius: 50%; }
.bs-check { width: 16px; height: 16px; fill: none; stroke: var(--night); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .btn-send[data-state="busy"] .bs-spin { animation: bs-spin 0.9s linear infinite; }
  .btn-send[data-state="sent"] .bs-check { animation: bs-draw 320ms var(--ease) both; }
}
@keyframes bs-spin { to { transform: rotate(360deg); } }
@keyframes bs-draw { from { stroke-dashoffset: 14; } }