/* ==========================================================================
   ATHERION - PAGE COMPOSITIONS
   Each page gets its own composition inside the one brand world. No page is
   a re-skin of another.
   ========================================================================== */

/* ==========================================================================
   HOME - 01  HERO AS AN ENVIRONMENT
   The footage is not in a container: it fills the stage, the drawing-sheet
   frame and annotations sit over it, and the type lives inside that world.
   ========================================================================== */

.hero { min-height: 100svh; display: grid; align-items: center; position: relative; overflow: clip; }
.hero-media { position: absolute; inset: 0; z-index: 1; }
.hero-media .media { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; }
@media (max-width: 700px) { .hero-media .media { --focal: 68% 50%; } }

.hero-body { position: relative; z-index: 6; width: 100%; padding-block: var(--section-pad-loose); }
.hero-tag { margin-bottom: var(--s4); }
.hero h1 { margin-bottom: var(--s5); max-width: 14ch; }
/* .ln is a line-break wrapper only. It must NEVER clip - overflow:hidden here
   is what cut descenders off headings whose line-height is below 1. */
.ln { display: block; overflow: visible; padding-bottom: .06em; }

/* No rule, no bordered footer band - lede and actions float in the scene */
.hero-foot { display: grid; grid-template-columns: minmax(0, 42ch) auto; align-items: end; gap: var(--s5); margin-top: 0; }
.hero-cta { display: flex; gap: var(--s2); flex-wrap: wrap; }
@media (max-width: 900px) { .hero-foot { grid-template-columns: 1fr; gap: var(--s4); } }

.dimline--v { flex-direction: column; }
.dimline--v i { width: 1px; height: auto; flex: 1 1 auto; min-width: 0; min-height: 60px; }
.dimline--v i::before, .dimline--v i::after { top: auto; left: -4px; width: 9px; height: 1px; }
.dimline--v i::before { top: 0; } .dimline--v i::after { bottom: 0; }
.dimline--v span { writing-mode: vertical-rl; letter-spacing: .24em; }
.hero .dimline--v { left: clamp(26px, 3.6vw, 56px); top: 30%; bottom: 26%; }
@media (max-width: 900px) { .hero .dimline--v { display: none; } }

.cue { position: absolute; right: clamp(26px, 3.6vw, 56px); bottom: clamp(48px, 7vh, 90px); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cue span { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(223,223,223,.3); writing-mode: vertical-rl; }
.cue i { display: block; width: 1px; height: clamp(40px, 7vh, 80px); background: linear-gradient(180deg, var(--blue), transparent); }
@media (max-width: 900px) { .cue { display: none; } }

/* ==========================================================================
   HOME - 02 POSITIONING
   ========================================================================== */

.pos { position: relative; }
.pos-lead { max-width: 22ch; margin-bottom: var(--s6); }
.pos-media { position: relative; }
.pos-note { margin-top: var(--s4); }


/* ==========================================================================
   HOME - 03 PROMPT TO PART  (pinned sequence)
   ========================================================================== */

/* position:sticky on .pin opens a stacking context, which cut the part still
   off from the section ground it screen-blends against - so its black
   rectangle painted over the navy instead of dissolving into it. Giving the
   pin the same ground puts the backdrop back inside the blend group. */
/* The MecAI page now shares the homepage's black ground. The pin still
   needs its own background so the sticky stacking context gives the
   screen-blended plot something to resolve against. */
.g-black .pin { background-color: var(--black); }

.p2p-pin {
  width: min(calc(100% - (var(--gut) * 2)), var(--max));
  margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 72px); align-items: center; padding-block: var(--s6);
}
.p2p-left { min-width: 0; }
.p2p-left h2 { margin-bottom: var(--s4); }
.p2p-right { position: relative; height: min(70svh, 620px); min-width: 0; }

/* The prompt, set as a real quoted line rather than a fake terminal */
.prompt {
  border-left: 2px solid var(--blue); padding: var(--s2) 0 var(--s2) var(--s3);
  font-size: clamp(17px, 1.9vw, 25px); line-height: 1.45; font-weight: var(--w-lt);
  color: var(--ink); margin-bottom: var(--s4);
}
@media (max-width: 980px) {
  /* A tall sticky scene is fragile on touch-sized viewports and the changing
     step copy forces reflow mid-scroll. Present the same sequence in normal
     document flow here: every step stays readable and the finished part is
     shown without scroll-scrubbing. */
  #prompt-to-part { height: auto !important; }
  #prompt-to-part .pin { position: relative; height: auto; overflow: visible; }
  .p2p-pin { grid-template-columns: 1fr; align-content: center; gap: var(--s4); padding-block: var(--s5); }
  .p2p-right { height: min(38svh, 340px); }
  .p2p-part { max-width: 320px; margin-inline: auto; }
  .steps { gap: 0; }
  .step { padding: var(--s2) 0 var(--s2) var(--s2); }
  #prompt-to-part .step { opacity: 1; }
  #prompt-to-part .step p { display: block; }
  #prompt-to-part .p2p-stage { opacity: 0; }
  #prompt-to-part .p2p-stage:not(.p2p-stage--export) { display: none; }
  #prompt-to-part .p2p-stage--export { opacity: 1; }
  #prompt-to-part .p2p-export-bar { display: none; }
}

/* ==========================================================================
   HOME - 04 CAPABILITIES  (horizontal chapters)
   ========================================================================== */

.cap-panel { display: grid; grid-template-rows: auto 1fr auto; padding-block: var(--section-pad); }
.cap-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.cap-panel h3 { font-size: clamp(30px, 4.6vw, 76px); line-height: .96; letter-spacing: -.04em; font-weight: var(--w-lt); max-width: 13ch; align-self: center; }
.cap-panel p { font-size: clamp(15px, 1.35vw, 19px); color: var(--ink-3); max-width: 46ch; margin-top: var(--s3); }
.cap-intro { align-content: center; }
.cap-intro .t-xl { max-width: 11ch; }

/* Static fallback. Applied to <html> when the motion engine is not armed
   (reduced motion). Pinned sequences collapse into normal flow so the page
   never becomes a long empty scroll holding one frozen frame. */
.no-track .pin-wrap { height: auto !important; }
.no-track .pin { position: static; height: auto; }
.no-track .p2p-pin { grid-template-columns: 1fr; padding-block: var(--s6); }
.no-track .p2p-right { height: auto; }
.no-track .seq { position: static; }
.no-track .seq-layer { position: static; opacity: 1; margin-top: var(--s3); }
.no-track .step { opacity: 1; }
/* Reduced motion still has to communicate the idea, so it renders the END
   state as one static frame: the traditional route stays as faint grey
   linework, the middle steps are dimmed and struck through, and the direct
   IDEA → PART bypass is drawn in blue. The diagram must keep its height or
   buildChain() measures zero and both paths collapse on top of each other. */
.no-track .chain { min-height: 420px; }
.no-track .chain-row { opacity: 1; }
.no-track .chain-row.is-mid { opacity: .34; }
.no-track .chain-row.is-mid .chain-label::after { transform: scaleX(1); }
.no-track .chain-dot::after { opacity: 1; }
.no-track .c-long { opacity: 0; }
.no-track .c-direct { stroke-dashoffset: 0; }
.no-track .chain-verdict { opacity: 1; }

/* ==========================================================================
   HOME - 02  WHAT ATHERION DOES  (company level, deliberately short)
   ========================================================================== */

.does-lede { margin-top: var(--s4); max-width: 44ch; }
.does-part { position: relative; }
.does-part .part-still { max-width: min(100%, 460px); margin-left: auto; }

/* ==========================================================================
   HOME - 04  MECAI TEASER  (flagship product, not the whole identity)
   ========================================================================== */

.teaser { padding-block: var(--section-pad-loose); position: relative; }
.teaser-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 90px); align-items: center;
}
.teaser h2 { font-size: clamp(56px, 11vw, 190px); line-height: .96; letter-spacing: -.05em; margin-block: var(--s3) var(--s4); }
.teaser .lede { max-width: 42ch; }
.teaser-cta { margin-top: var(--s5); }
.teaser-part .part-still { max-width: min(100%, 520px); margin-inline: auto; }
@media (max-width: 900px) {
  .teaser-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .teaser-part { order: -1; }
}

/* Footer FAQ signpost - keeps the copy without adding a whole section */
.foot-faq {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s5); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--rule-2);
}
.foot-faq p { font-size: var(--t-cap); color: var(--ink-4); max-width: 58ch; }
.foot-faq h2 { font-size: clamp(19px, 2vw, 26px); font-weight: var(--w-lt); letter-spacing: -.02em; margin-bottom: 8px; }

/* ==========================================================================
   HOME - 02  THE WORKFLOW
   One idea, stated plainly: the traditional route has five hops, MecAI has
   one. Two complete schematics are cross-faded by scroll - both are fully
   legible as static frames, so the section works paused. The part image
   swaps from construction geometry to the finished component on the same
   timing, so PART is an actual object, not a word.
   ========================================================================== */

.flow-pin { display: grid; align-content: center; }
.flow-head { margin-bottom: var(--s5); }
.flow-head h2 { max-width: 16ch; margin-top: var(--s3); }

.flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(20px, 2.4vw, 44px);
  align-items: center;
}

/* the two schematics live on top of each other and cross-fade */
.flow-stage { position: relative; min-height: clamp(150px, 22vh, 220px); }
.flow-state { position: absolute; inset: 0; display: grid; align-content: center; gap: var(--s4); }
.flow-a { opacity: calc(1 - clamp(0, calc((var(--p, 0) - .38) * 4.5), 1)); }
.flow-b { opacity: clamp(0, calc((var(--p, 0) - .46) * 4.5), 1); }

.flow-cap {
  font-size: 10.5px; font-weight: var(--w-md); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-5);
}
.flow-b .flow-cap { color: var(--blue-2); }

.flow-line { position: relative; display: grid; align-items: start; }
.flow-line::before {                       /* the process line itself */
  content: ''; position: absolute; left: 0; top: 5px; height: 1px;
  right: calc(-1 * clamp(20px, 2.4vw, 44px));   /* runs on toward the object */
  background: rgba(255,255,255,.16);
}
.flow-b .flow-line::before { background: var(--blue); }

.flow-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fnode { position: relative; padding-top: 22px; }
.fnode::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 11px; height: 11px;
  border: 1px solid rgba(255,255,255,.3); background: var(--black);
}
.flow-b .fnode::before { border-color: var(--blue); }
.fnode b {
  display: block; font-weight: var(--w-rg);
  font-size: clamp(13px, 1.35vw, 18px); letter-spacing: -.01em;
  color: var(--ink-3);
}
.flow-b .fnode b { font-size: clamp(16px, 2vw, 28px); color: var(--white); }

/* MecAI is the bridge - filled, blue, and the only emphasised node */
.fnode--mec::before { background: var(--blue); border-color: var(--blue); }
.fnode--mec b { color: var(--blue-2); }

/* the object at the end of the line */
.flow-part { position: relative; aspect-ratio: 407 / 357; }
.flow-part img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  /* The frames are a lit component whose edges are faded to true black in the
     file itself, so screen blending dissolves the crop rectangle completely -
     the part sits in the scene rather than in a box. */
  mix-blend-mode: screen;
}
.fp-a { opacity: calc(1 - clamp(0, calc((var(--p, 0) - .38) * 4.5), 1)); }
.fp-b { opacity: clamp(0, calc((var(--p, 0) - .46) * 4.5), 1); }

/* With no JS, or under reduced motion, --p stays 0 and only the traditional
   route would show - losing the entire point. Both schematics are stacked
   instead, which states the comparison even more plainly, and the finished
   component is the image on show. */
html:not(.js) .flow-stage, .no-track .flow-stage { min-height: 0; }
html:not(.js) .flow-state, .no-track .flow-state {
  position: static; opacity: 1 !important; margin-bottom: var(--s5);
}
html:not(.js) .fp-a, .no-track .fp-a { opacity: 0 !important; }
html:not(.js) .fp-b, .no-track .fp-b { opacity: 1 !important; }

@media (max-width: 900px) {
  .flow-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .flow-stage { min-height: clamp(210px, 34vh, 300px); }
  .flow-6, .flow-3 { grid-template-columns: 1fr; gap: 12px; }
  .flow-line::before { left: 5px; right: auto; top: 5px; bottom: 5px; width: 1px; height: auto; }
  .fnode { padding-top: 0; padding-left: 28px; }
  .fnode::before { top: 50%; margin-top: -5.5px; }
  .flow-part { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   HOME - 04  CAPABILITY CHAPTERS
   Editorial typographic moments: no boxes, no dividing rules between them.
   Each is a composition separated by space, with an oversized heading and its
   supporting line set low and wide.
   ========================================================================== */

.cap-lede { margin-top: var(--s4); max-width: 52ch; }

.chapters { position: relative; }
.chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(18px, 3vw, 64px);
  align-items: end;
  padding-block: var(--section-pad-loose);
}
.chapter-n { display: flex; align-items: baseline; gap: 14px; margin-bottom: var(--s4); }
.chapter h3 {
  font-size: clamp(32px, 6.4vw, 104px); line-height: .92; letter-spacing: -.045em;
  font-weight: var(--w-lt); max-width: 11ch; color: var(--white);
}
.chapter p { font-size: clamp(15px, 1.3vw, 18px); color: var(--ink-4); max-width: 42ch; padding-bottom: .55em; }
.capability-chapters .chapter { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.capability-chapters .chapter h3 { font-size: clamp(38px, 5.2vw, 84px); line-height: .96; max-width: 12ch; }
.capability-chapters .chapter p {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55;
  color: var(--ink-3); max-width: 40ch; padding-bottom: .25em;
}
@media (max-width: 900px) {
  .chapter { grid-template-columns: 1fr; gap: var(--s3); padding-block: var(--s7); align-items: start; }
  .capability-chapters .chapter { grid-template-columns: 1fr; padding-block: clamp(56px, 9vw, 72px); }
}

/* Audience chapters use the same left-display/right-copy grammar as the
   editorial lists, without the viewport-height padding of capability moments. */
.audience-head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 88px); align-items: end;
  padding-bottom: clamp(44px, 6vw, 80px); border-bottom: 1px solid var(--rule);
}
.audience-head h2 { max-width: 11ch; margin-top: var(--s3); }
.audience-head .lede { max-width: 45ch; justify-self: end; padding-bottom: .45em; }
.audience-chapters .chapter {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start;
  gap: clamp(24px, 5vw, 88px); padding-block: clamp(38px, 5vw, 68px);
  border-bottom: 1px solid var(--rule-2);
}
.audience-chapters .chapter h3 { font-size: clamp(30px, 4.2vw, 64px); line-height: 1; max-width: 13ch; }
.audience-chapters .chapter p { max-width: 48ch; padding: .35em 0 0; color: var(--ink-3); }
@media (max-width: 900px) {
  .audience-head, .audience-chapters .chapter { grid-template-columns: 1fr; gap: var(--s3); }
  .audience-head .lede { justify-self: start; padding-bottom: 0; }
  .audience-chapters .chapter { padding-block: var(--s5); }
  .audience-chapters .chapter p { padding-top: 0; }
}

/* ==========================================================================
   HOME - 05 PRODUCT MOMENT
   ========================================================================== */

.prod { position: relative; }
.prod-stack { position: relative; min-height: 100svh; display: grid; align-items: center; }
.prod-media { position: absolute; inset: 0; z-index: 1; }
.prod-body { position: relative; z-index: 3; }
.prod-title { max-width: 12ch; margin-bottom: var(--s4); }
.prod-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .prod-meta { grid-template-columns: 1fr; gap: var(--s3); } }

/* ==========================================================================
   HOME - 06 ENGINEERING PROOF
   ========================================================================== */

.proof { position: relative; }
.proof-media { position: relative; }
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
@media (max-width: 900px) { .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .proof-grid { grid-template-columns: 1fr; } }

/* Export formats and standards are different kinds of fact, so they are two
   groups with their own headings and a rule between them - not four
   undifferentiated columns where only the sub-label told them apart. */
.proof-split {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 72px);
  margin-top: var(--s6);
}
.proof-group { position: relative; }
.proof-group--std { padding-left: clamp(28px, 4vw, 72px); }
.proof-group--std::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--rule-2);
}
.proof-lab {
  font-size: 10px; font-weight: var(--w-md); letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-4);
  display: inline-flex; align-items: center; gap: 11px; margin-bottom: var(--s4);
}
.proof-lab::before { content: ''; width: 22px; height: 1px; background: var(--blue-2); flex: none; }
.proof-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); }
@media (max-width: 860px) {
  .proof-split { grid-template-columns: 1fr; gap: var(--s5); }
  .proof-group--std { padding-left: 0; padding-top: var(--s5); }
  .proof-group--std::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
}

/* ==========================================================================
   HOME - 07 STORY
   ========================================================================== */

.story-mega { max-width: 11ch; margin-bottom: var(--s5); }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); margin-top: var(--s6); }
.value { padding: var(--s4) var(--s4) 0 0; border-right: 1px solid var(--rule-2); }
.value:last-child { border-right: 0; }
.value h3 { font-size: 16px; font-weight: var(--w-md); color: var(--white); margin-bottom: 10px; letter-spacing: 0; }
.value p { font-size: var(--t-cap); color: var(--ink-4); }
@media (max-width: 900px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value:nth-child(2) { border-right: 0; }
  .value:nth-child(n+3) { border-top: 1px solid var(--rule-2); margin-top: var(--s3); padding-top: var(--s4); }
}
@media (max-width: 520px) {
  .values { grid-template-columns: 1fr; }
  .value { border-right: 0; padding-right: 0; }
  .value + .value { border-top: 1px solid var(--rule-2); margin-top: var(--s3); padding-top: var(--s3); }
}

/* ==========================================================================
   HOME - 08 CLOSE
   ========================================================================== */

.close-stage { min-height: 100svh; display: grid; align-items: center; text-align: left; position: relative; }
.close-stage h2 { max-width: 11ch; margin-bottom: var(--s4); }
.close-stage .lede { margin-bottom: var(--s6); }

/* ==========================================================================
   MECAI - hero + prompt-to-part (product page owns the detail now)
   ========================================================================== */

.mec-hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
  padding-block: calc(var(--nav-h) + var(--section-pad)) var(--section-pad);
}
.mec-hero-part { position: relative; }
.mec-hero-part .plot-art { display: block; width: 100%; max-width: min(100%, 520px); margin-inline: auto; height: auto; }
@media (max-width: 900px) {
  .mec-hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .mec-hero-part { order: -1; }
}

.p2p-part {
  position: relative; width: 100%; aspect-ratio: 407 / 357; min-width: 0;
  contain: layout paint; isolation: isolate;
}
.p2p-part img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  will-change: opacity; transform: translateZ(0); backface-visibility: hidden;
}
.p2p-stage {
  display: grid; place-items: center; padding: clamp(18px, 3vw, 42px);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* Describe - the prompt is parsed into grounded, visible parameters. */
.p2p-request {
  position: relative; z-index: 2; width: min(88%, 500px);
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: rgba(0,0,0,.84);
  box-shadow: inset 3px 0 0 var(--blue);
}
.p2p-ui-label {
  margin-bottom: var(--s3); color: var(--ink-5); font-size: 10px;
  font-weight: var(--w-md); letter-spacing: .2em; text-transform: uppercase;
}
.p2p-request-text {
  max-width: 28ch; color: var(--white); font-size: clamp(18px, 2vw, 27px);
  line-height: 1.38; font-weight: var(--w-lt); letter-spacing: -.02em;
}
.p2p-request-specs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4);
  padding-top: var(--s3); border-top: 1px solid var(--rule-2);
}
.p2p-request-specs span {
  padding: 7px 10px; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  color: var(--ink-4); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.p2p-ui-state {
  display: flex; align-items: center; gap: 9px; margin-top: var(--s3);
  color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.p2p-ui-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--st-live); }

/* Generate - real construction geometry with one inexpensive compositor-only
   loading cue. It runs only while this stage is active. */
.p2p-generation {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(22px, 5vw, 58px);
  transform: translateX(-50%); width: min(82%, 390px);
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: rgba(0,0,0,.88);
}
.p2p-spinner {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1px solid rgba(169,194,255,.24); border-top-color: var(--blue-2);
}
.p2p-stage--generate.on .p2p-spinner { animation: p2p-spin .9s linear infinite; }
.p2p-generation span { display: grid; gap: 3px; min-width: 0; }
.p2p-generation b { color: var(--ink-2); font-size: 10px; font-weight: var(--w-md); letter-spacing: .14em; text-transform: uppercase; }
.p2p-generation small { color: var(--ink-5); font-size: 10px; white-space: nowrap; }
@keyframes p2p-spin { to { transform: rotate(360deg); } }

/* Export - the resolved part and the supported file outputs. */
.p2p-export-bar {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(20px, 4vw, 48px);
  transform: translateX(-50%); width: min(76%, 360px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: rgba(0,0,0,.88);
}
.p2p-export-bar > span { color: var(--ink-4); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.p2p-export-bar div { display: flex; gap: 6px; }
.p2p-export-bar b {
  padding: 5px 7px; border: 1px solid rgba(23,57,229,.5); border-radius: 3px;
  color: #A9C2FF; font-size: 9px; font-weight: var(--w-md); letter-spacing: .08em;
}
html:not(.js) .p2p-stage, .no-track .p2p-stage { opacity: 0 !important; }
html:not(.js) .p2p-stage--export, .no-track .p2p-stage--export { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .p2p-spinner { animation: none !important; } }

/* ==========================================================================
   MECAI - product world
   ========================================================================== */

/* Brand blue at low alpha over black - the same atmosphere the homepage
   uses. Replaces the off-palette #02195C ground this page used to carry. */
.mec-hero {
  min-height: 100svh; display: grid; align-items: center;
  position: relative; overflow: clip;
  background:
    radial-gradient(ellipse 46% 58% at 74% 46%, rgba(1,41,229,.13), rgba(1,41,229,0) 72%),
    radial-gradient(ellipse 84% 44% at 58% 100%, rgba(1,41,229,.06), rgba(1,41,229,0) 76%),
    var(--black);
}
#prompt-to-part {
  background-image: radial-gradient(ellipse 52% 90% at 76% 50%, rgba(1,41,229,.09), rgba(1,41,229,0) 70%);
}
.proof {
  background-image: radial-gradient(ellipse 60% 90% at 18% 60%, rgba(1,41,229,.07), rgba(1,41,229,0) 70%);
}
.mec-lock {
  font-size: clamp(72px, 20vw, 320px); line-height: .8; letter-spacing: -.055em; font-weight: var(--w-lt);
  color: var(--white);
}
/* Scoped to the AI span itself (not the whole word) so it always shows the
   full fade across just those two characters, at any size - the shared
   whole-word gradient relied on "Mec" landing at exactly 55% of the box,
   which drifted at smaller sizes (see .mec-name below). Colors match the
   approved logo lockup exactly - a soft white-to-periwinkle fade, not the
   saturated brand blue. */
.mec-lock .ai {
  background: linear-gradient(100deg, var(--white) 0%, #E4F0FF 22%, #9DB6F7 56%, #5C75D1 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mec-sub { margin-top: var(--s4); max-width: 46ch; }
.mecai-gradient {
  color: var(--white);
  background: linear-gradient(100deg, var(--white) 0%, var(--white) 55%, #C8DEFF 65%, #6CA9FF 80%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.spec-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.spec-cell { padding: clamp(34px, 5vw, 68px) clamp(18px, 2.2vw, 36px); border-right: 1px solid var(--rule-2); }
.spec-cell:first-child { padding-left: 0; }
.spec-cell:last-child { padding-right: 0; border-right: 0; }
.spec-n { height: clamp(42px, 4vw, 58px); min-height: 0; display: flex; align-items: flex-start; font-size: clamp(30px, 4vw, 58px); line-height: 1; letter-spacing: -.04em; font-weight: var(--w-lt); color: var(--white); margin-bottom: 10px; }
.spec-k { font-size: 12px; color: var(--ink-4); }
@media (max-width: 820px) {
  .spec-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-cell:nth-child(odd) { padding-left: 0; }
  .spec-cell:nth-child(even) { padding-right: 0; border-right: 0; }
  .spec-cell:nth-child(n+3) { border-top: 1px solid var(--rule-2); }
}

/* Component library - a dense technical index, not chips in boxes */
.lib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: var(--r-md); overflow: hidden; }
.lib-col { background: var(--black); padding: var(--s4) var(--s3); }
.lib-col h3 { font-size: 15px; font-weight: var(--w-md); color: var(--white); letter-spacing: 0; margin-bottom: var(--s3); }
.lib-col ul { display: flex; flex-direction: column; gap: 9px; }
.lib-col li { font-size: 14px; color: var(--ink-4); display: flex; align-items: baseline; gap: 10px; }
.lib-col li::before { content: ''; width: 10px; height: 1px; background: var(--blue-2); flex: none; transform: translateY(-4px); }
@media (max-width: 860px) { .lib { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lib { grid-template-columns: 1fr; } }

/* Demo viewer */
.viewer { border: 1px solid var(--rule); background: rgba(0,0,0,.32); border-radius: var(--r-lg); overflow: hidden; }
.viewer [role="tabpanel"] > img {
  width: 100%; height: auto; aspect-ratio: 1600 / 912;
  object-fit: contain; background: var(--white);
}
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 14px 20px; border-bottom: 1px solid var(--rule-2); }
.viewer-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.viewer-tabs button {
  font-size: 12px; letter-spacing: .04em; color: var(--ink-4);
  padding: 9px 16px; border: 1px solid transparent;
  transition: color var(--dur-1) ease, background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.viewer-tabs button[aria-selected="true"] { color: var(--white); background: var(--blue); border-color: var(--blue); }
.viewer-tabs button:hover[aria-selected="false"] { color: var(--white); border-color: var(--rule); }
.viewer-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 16px 20px; border-top: 1px solid var(--rule-2); }
.viewer-cap p { font-size: 13.5px; color: var(--ink-4); }
.viewer-cap span { font-size: 11px; letter-spacing: .13em; color: var(--ink-5); white-space: nowrap; }
[role="tabpanel"][hidden] { display: none; }
@media (max-width: 600px) {
  .viewer-bar { padding: 10px 12px; }
  .viewer-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .viewer-tabs button { flex: none; padding: 8px 10px; font-size: 11px; }
  .viewer-bar > .tag { display: none; }
  .viewer-cap { align-items: flex-start; padding: 14px 16px; }
}

/* ---- Status chips ------------------------------------------------------
   One chip, three states. Tinted fill + hairline + lightened label, so the
   colour carries meaning without shouting. */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: var(--w-md); letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap;
  padding: 6px 12px; border-radius: var(--r-sm);
  color: var(--st, var(--ink-2));
  background: color-mix(in srgb, var(--st, var(--ink-2)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--st, var(--ink-2)) 34%, transparent);
}
.chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.chip--live { --st: var(--st-live); }
.chip--prog { --st: var(--st-prog); }
.chip--soon { --st: var(--st-soon); }

/* Roadmap - a horizontal engineering timeline */
.road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); position: relative; padding-top: var(--s4); }
.road::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--rule); }
.road-item { position: relative; }
.road-dot { width: 13px; height: 13px; border: 1px solid var(--rule); background: var(--black); margin-bottom: var(--s4); position: relative; z-index: 1; }
.road-item.now .road-dot { background: var(--blue); border-color: var(--blue); }
.road-item.next .road-dot { background: transparent; border-color: var(--blue-2); }
.road-ph { font-size: 10px; font-weight: var(--w-md); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.road-item.now .road-ph { color: var(--white); }
.road-t { font-size: clamp(19px, 2vw, 26px); font-weight: var(--w-lt); letter-spacing: -.025em; margin-bottom: 12px; color: var(--white); }
.road-d { font-size: 14px; color: var(--ink-4); margin-bottom: var(--s3); }
.road-f { display: flex; flex-direction: column; gap: 8px; }
.road-f li { font-size: 13px; color: var(--ink-4); display: flex; align-items: baseline; gap: 10px; }
.road-f li::before { content: ''; width: 8px; height: 1px; background: var(--blue-2); flex: none; transform: translateY(-4px); }
.road-item.soon .road-t, .road-item.soon .road-d, .road-item.soon .road-f li { color: var(--ink-5); }
@media (max-width: 860px) { .road { grid-template-columns: 1fr; gap: var(--s5); } .road::before { display: none; } }

/* the roadmap phase label carries the same coding */
.road-item.now  .road-ph { color: var(--st-live); }
.road-item.next .road-ph { color: var(--st-prog); }
.road-item.soon .road-ph { color: var(--st-soon); }
.road-item.now  .road-dot { background: var(--st-live); border-color: var(--st-live); }
.road-item.next .road-dot { background: transparent; border-color: var(--st-prog); }
.road-item.soon .road-dot { background: transparent; border-color: var(--st-soon); }
/* the muted "later" treatment fought the status colour - let the copy read */
.road-item.soon .road-t { color: var(--white); }
.road-item.soon .road-d, .road-item.soon .road-f li { color: var(--ink-4); }


/* ==========================================================================
   ABOUT - editorial
   ========================================================================== */

.founder { position: relative; border-top: 1px solid var(--rule); padding-block: var(--section-pad-loose); }
.founder-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 80px); align-items: start; }
.founder--flip .founder-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.founder--flip .founder-media { order: -1; }
.founder-name { font-size: clamp(38px, 6vw, 96px); line-height: .92; letter-spacing: -.045em; font-weight: var(--w-lt); margin-bottom: var(--s2); }
.founder-role { font-size: 12px; font-weight: var(--w-md); letter-spacing: .18em; text-transform: uppercase; color: var(--blue-2); margin-bottom: var(--s4); }
.founder-bio p + p { margin-top: var(--s3); }
.founder-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
.founder-tags li { font-size: 11.5px; letter-spacing: .08em; color: var(--ink-4); border: 1px solid var(--rule); padding: 6px 12px; }
.founder-media .media { --ar: 4 / 5; }

/* ==========================================================================
   FOUNDER SCROLL SEQUENCE
   The section carries data-track="enter", so the engine writes --p from 0 at
   the moment the section's top reaches the viewport bottom, to 1 as its
   bottom clears the top. Custom properties inherit, so every rule below reads
   that one value.

   Everything is linear in --p under a clamp(): no keyframes, no transitions
   on the tracked properties, no thresholds that flip. That is what makes it
   track the wheel exactly, reverse identically on the way back up, and makes
   snapping structurally impossible.
   ========================================================================== */

/* The motif sits under the name, filling the column the sticky block leaves
   open. Same plot language as the homepage, held back to a whisper. */
.founder-motif {
  display: block; width: min(100%, 230px);
  margin-top: var(--s6);
  opacity: clamp(.25, calc(var(--p, 0) * 1.4), .95);
}
.no-track .founder-motif, html:not(.js) .founder-motif { opacity: .8; }
@media (max-width: 900px) { .founder-motif { display: none; } }

/* The subject holds while the story is read. */
.founder-media {
  position: sticky;
  top: calc(var(--nav-h) + var(--s5));
  align-self: start;
}
/* Depth: the block drifts a little against the scroll and gains a hair of
   scale. ±15px over the whole sequence - present, not parallax. */
.js .founder-media {
  transform: translate3d(0, calc((0.5 - var(--p, .5)) * 16px), 0);
  transform-origin: left center;
  will-change: transform;
}
.founder--flip .founder-media { transform-origin: right center; }

/* CAD linework activating: a measurement rule that draws down the section
   with a node travelling at its head. */
.founder-grid { position: relative; }
.founder-rule {
  position: absolute; top: 0; bottom: 0;
  left: calc(-1 * clamp(12px, 1.8vw, 26px));
  width: 1px; background: var(--rule-2);
  --draw: clamp(0, calc((var(--p, 0) - .06) * 1.55), 1);
}
.founder-rule--r { left: auto; right: calc(-1 * clamp(12px, 1.8vw, 26px)); }
.founder-rule::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  transform: scaleY(var(--draw)); transform-origin: top center;
}
.founder-rule::after {                       /* the travelling node */
  content: ''; position: absolute; left: -3px;
  width: 7px; height: 7px; margin-top: -3.5px;
  background: var(--blue);
  top: calc(var(--draw) * 100%);
  opacity: clamp(0, calc(var(--p, 0) * 14), 1);
}

/* The story arrives in stages, tied to the wheel rather than fired once on
   intersection. --i spaces the items; the ×8 sets a ~0.125-wide fade each,
   so consecutive items overlap slightly and read as a cascade. */
.js .founder [data-fx] {
  --r: clamp(0, calc((var(--p, 0) - (.15 + var(--i, 0) * .08)) * 8), 1);
  opacity: var(--r);
  transform: translate3d(0, calc((1 - var(--r)) * 18px), 0);
  will-change: opacity, transform;
}

/* Contract: readable with JS blocked, and static under reduced motion. */
html:not(.js) .founder [data-fx], .no-track .founder [data-fx] {
  opacity: 1 !important; transform: none !important;
}
.no-track .founder-media, html:not(.js) .founder-media { transform: none !important; }
.no-track .founder-rule::before, html:not(.js) .founder-rule::before { transform: scaleY(1); }
.no-track .founder-rule::after, html:not(.js) .founder-rule::after { display: none; }

@media (max-width: 900px) {
  .founder-media { position: static; transform: none !important; }
  .founder-rule { display: none; }
  /* the staged reveal stays on mobile - it is the sequence, not decoration */
}
@media (max-width: 900px) {
  .founder-grid, .founder--flip .founder-grid { grid-template-columns: 1fr; }
  .founder--flip .founder-media { order: -1; }
}

.editorial-list, .principles { border-top: 1px solid var(--rule); }
.editorial-item, .principle {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 88px); align-items: start;
  padding-block: clamp(32px, 4.5vw, 64px); border-bottom: 1px solid var(--rule-2);
}
.editorial-item h3, .principle h3 {
  font-size: clamp(28px, 3.7vw, 54px); line-height: 1.02;
  font-weight: var(--w-lt); letter-spacing: -.035em; max-width: 12ch;
}
.editorial-item p, .principle p { color: var(--ink-3); max-width: 56ch; padding-top: .35em; }
.t-light .editorial-list { border-top-color: var(--rule-dk); }
.t-light .editorial-item { border-bottom-color: var(--rule-dk-2); }
.t-light .editorial-item p { color: var(--ink-dk-3); }
@media (max-width: 700px) {
  .editorial-item, .principle { grid-template-columns: 1fr; gap: var(--s2); }
  .editorial-item p, .principle p { padding-top: 0; }
}

/* ==========================================================================
   INVESTORS - data forward
   ========================================================================== */

.statwall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.statwall .spec-cell {
  min-height: clamp(190px, 18vw, 260px); padding: clamp(34px, 5vw, 68px) clamp(18px, 2.2vw, 36px);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
}
.statwall .spec-cell:first-child { padding-left: 0; }
.statwall .spec-cell:last-child { padding-right: 0; }
.statwall .spec-n {
  width: 100%; height: clamp(52px, 6vw, 92px); min-height: 0;
  display: flex; align-items: flex-start;
  font-size: clamp(44px, 6vw, 92px); line-height: .9; margin-bottom: var(--s2);
  font-variant-numeric: tabular-nums;
}
.statwall .spec-n--infinity {
  font-size: clamp(52px, 7vw, 106px);
  transform: translateY(-.22em);
}
.statwall .spec-k { min-height: 3.2em; max-width: 22ch; line-height: 1.55; }
@media (max-width: 760px) { .statwall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .statwall .spec-cell:nth-child(2) { border-right: 0; } .statwall .spec-cell:nth-child(n+3) { border-top: 1px solid var(--rule-2); } }
@media (max-width: 760px) {
  .statwall .spec-cell { min-height: 166px; padding: var(--s4) var(--s3); }
  .statwall .spec-cell:nth-child(odd) { padding-left: 0; }
  .statwall .spec-cell:nth-child(even) { padding-right: 0; }
  .statwall .spec-k { min-height: 3.1em; }
}
@media (max-width: 480px) {
  .statwall { grid-template-columns: 1fr; }
  .statwall .spec-cell {
    min-height: 0; padding-inline: 0; border-right: 0;
    border-top: 1px solid var(--rule-2);
  }
  .statwall .spec-cell:first-child { border-top: 0; }
  .statwall .spec-k { min-height: 0; }
}

.traction-head { align-items: end; margin-bottom: var(--s6); }
.traction-title { font-size: clamp(42px, 5vw, 76px); line-height: .96; letter-spacing: -.04em; }
.traction-copy { max-width: 38ch; margin-left: auto; padding-bottom: .35em; font-size: clamp(16px, 1.25vw, 19px); }
@media (max-width: 900px) { .traction-copy { margin-left: 0; padding-bottom: 0; } }

.tract { border-top: 1px solid var(--rule); }
.tract-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 8fr); gap: clamp(22px, 2.6vw, 42px); padding-block: clamp(32px, 3.2vw, 44px); border-bottom: 1px solid var(--rule-2); align-items: baseline; }
.tract-k { font-size: clamp(12px, .9vw, 13px); font-weight: var(--w-md); letter-spacing: .15em; text-transform: uppercase; color: rgba(223,223,223,.72); }
.tract-v { font-size: clamp(24px, 2.35vw, 32px); line-height: 1.15; font-weight: var(--w-lt); letter-spacing: -.025em; color: var(--white); }
.tract-n { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: rgba(223,223,223,.76); max-width: 58ch; }
@media (max-width: 820px) { .tract-row { grid-template-columns: 1fr; gap: 8px; } }

.form-grid { display: grid; gap: var(--s3); }
.contact-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 84px); align-items: start;
}
.contact-grid > .c-1-6, .contact-grid > .c-7-13 { grid-column: auto; }
.contact-form { width: 100%; max-width: 760px; justify-self: end; }
.field label { display: block; font-size: 11.5px; font-weight: var(--w-md); letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.24);
  padding: 12px 0; color: var(--white); font-size: 16.5px;
  transition: border-color var(--dur-1) ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--blue-2); }
.field input::placeholder, .field textarea::placeholder { color: rgba(223,223,223,.62); opacity: 1; }
.field select option { background: var(--black); color: var(--white); }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: clamp(44px, 8vw, 64px); }
  .contact-form { max-width: none; justify-self: stretch; }
}

/* ==========================================================================
   FAQ - directory
   ========================================================================== */

.faq-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 80px); align-items: start; }
.faq-rail { position: sticky; top: calc(var(--nav-h) + var(--s4)); }
.faq-rail ul { display: flex; flex-direction: column; gap: 2px; }
.faq-rail button {
  width: 100%; text-align: left; font-size: 14px; color: var(--ink-4);
  padding: 12px var(--s2); border-left: 1px solid var(--rule);
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.faq-rail button[aria-pressed="true"] { color: var(--white); border-left-color: var(--blue); }
.faq-rail button:hover { color: var(--white); }
.faq-block + .faq-block { margin-top: var(--s6); }
.faq-block > h2 { font-size: 11px; font-weight: var(--w-md); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--blue-2); margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule-2); }
.qa-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  text-align: left; padding: var(--s3) 0;
  font-size: clamp(17px, 1.9vw, 23px); font-weight: var(--w-lt); letter-spacing: -.02em; color: var(--ink-2);
  transition: color var(--dur-1) ease;
}
.qa-q:hover { color: var(--white); }
.qa-q[aria-expanded="true"] { color: var(--white); }
.qa-i { flex: none; width: 22px; height: 22px; position: relative; margin-top: 6px; }
.qa-i::before, .qa-i::after { content: ''; position: absolute; background: var(--blue-2); transition: transform var(--dur-1) var(--ease); }
.qa-i::before { top: 50%; left: 0; right: 0; height: 1px; }
.qa-i::after { left: 50%; top: 0; bottom: 0; width: 1px; }
.qa-q[aria-expanded="true"] .qa-i::after { transform: scaleY(0); }
/* Answers use [hidden], so there is no max-height that can clip long copy. */
.qa-a { padding: 0 0 var(--s4); color: var(--ink-3); max-width: 68ch; }
.qa-a a { color: var(--ink); border-bottom: 1px solid var(--rule); }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-rail { position: static; }
  .faq-rail ul { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .faq-rail button { width: auto; border-left: 0; border: 1px solid var(--rule); padding: 9px 15px; }
  .faq-rail button[aria-pressed="true"] { border-color: var(--blue); }
}

/* ==========================================================================
   PRIVACY - document
   ========================================================================== */

.doc-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 80px); align-items: start; }
.doc-toc { position: sticky; top: calc(var(--nav-h) + var(--s4)); }
.doc-toc ol { display: flex; flex-direction: column; gap: 9px; counter-reset: t; }
.doc-toc a { font-size: 13px; color: var(--ink-4); display: flex; gap: 12px; transition: color var(--dur-1) ease; }
.doc-toc a:hover { color: var(--white); }
.doc-toc a b { color: var(--ink-5); font-weight: var(--w-rg); font-variant-numeric: tabular-nums; }
.doc-sec { padding-block: var(--s5); border-bottom: 1px solid var(--rule-2); scroll-margin-top: calc(var(--nav-h) + 24px); }
.doc-sec h2 { font-size: clamp(22px, 2.6vw, 34px); font-weight: var(--w-lt); letter-spacing: -.03em; margin-bottom: var(--s3); display: flex; gap: var(--s3); align-items: baseline; }
.doc-sec h2 b { font-size: 12px; font-weight: var(--w-md); letter-spacing: .16em; color: var(--blue-2); font-variant-numeric: tabular-nums; }
.doc-sec p, .doc-sec li { color: var(--ink-3); max-width: 70ch; }
.doc-sec p + p, .doc-sec ul { margin-top: var(--s2); }
.doc-sec ul li { display: flex; gap: 12px; margin-bottom: 8px; }
.doc-sec ul li::before { content: ''; width: 10px; height: 1px; background: var(--blue-2); flex: none; transform: translateY(12px); }
.doc-sec a { color: var(--ink); border-bottom: 1px solid var(--rule); }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } .doc-toc { position: static; display: none; } }