/* ============================================================
   ONDERMAX — /home motion (SCOPED, per-page enhancement)
   Linked PER-PAGE on /home ONLY, AFTER styles.css.
   WHY a separate sheet: styles.css is SHARED by /home, /staqs,
   /patches AND the LOCKED staqs_catalog funnel — adding /home
   motion there would leak onto the frozen signature. This sheet
   is the /home-only blast-radius firewall (mirrors how /consult
   owns consult.css). Architect guardrail G1.

   Colour tokens (--ink/--line/--muted/--registration) come from
   tokens.css (imported by styles.css, loaded first) — they cascade
   here for free. We define ONLY the three MOTION tokens, which do
   NOT exist in the sheets /home loads. Values are byte-identical to
   consult.css / staqs_funnel.css so the whole journey shares one
   rhythm (the self-drawing trace + calm reveal-up).
   ============================================================ */
:root{
  /* motion (staqs_funnel signature; reduced-motion-safe) */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --reveal-dur:.6s;
  --trace-dur:1.1s;
}

.wrap.narrow{max-width:820px}
.section-intro{max-width:62ch;margin:-8px 0 28px}
.hero__actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.hero__note{margin-top:16px!important;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);max-width:64ch!important}

/* ---- product-supply bench hero: tangible offer first, schematics second ---- */
.hero--blackbox{position:relative;isolation:isolate;min-height:calc(100svh - 81px);padding-block:clamp(48px,6vw,82px) 34px;overflow:hidden;background:var(--paper)}
.hero--blackbox::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(242,239,237,1) 0%,rgba(242,239,237,.97) 30%,rgba(242,239,237,.58) 50%,rgba(242,239,237,.08) 73%,rgba(242,239,237,.01) 100%)}
.hero--blackbox::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(242,239,237,.86) 0%,rgba(242,239,237,0) 24%,rgba(242,239,237,0) 72%,rgba(242,239,237,.92) 100%)}
.hero__photo{position:absolute;inset:0 0 0 clamp(430px,42vw,620px);z-index:0;background:var(--paper-sunk);border-left:1px solid var(--line);background-image:url('/ondermax_landing/static/src/assets/ondermax-mark-muted.svg'),repeating-linear-gradient(to right,transparent 0 119px,var(--line) 119px 120px),repeating-linear-gradient(to bottom,transparent 0 119px,var(--line) 119px 120px);background-repeat:no-repeat,repeat,repeat;background-position:center,0 0,0 0;background-size:min(340px,46%),auto,auto;opacity:.55}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.82fr) minmax(240px,.44fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero__copy{max-width:720px}
.hero--blackbox h1{max-width:18ch;font-size:clamp(34px,3.95vw,48px);line-height:1.06}
.hero--blackbox .lead{max-width:60ch}
.hero__artifact{align-self:end;justify-self:end;width:min(100%,330px);border:1px solid color-mix(in srgb,var(--ink) 32%,transparent);background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(12px);padding:22px 24px;box-shadow:0 24px 70px rgba(20,20,20,.14)}
.artifact-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.artifact-steps{list-style:none;margin-top:18px;display:grid;gap:12px}
.artifact-steps li{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-display);font-weight:700;font-size:18px;border-top:1px solid var(--line);padding-top:12px}
.artifact-steps span{order:2;font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--muted)}
.hero__trace-wrap{position:relative}
.hero-trace--quiet{max-width:min(760px,62vw);opacity:.62;margin-top:clamp(26px,4vw,46px)}
.hero__rule{margin-top:clamp(22px,4vw,44px)}
.proof-strip--stakes{position:relative;z-index:1;margin-top:0}

/* ---- operating file section: one authored dark set piece after the hero ---- */
.casefile{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--paper);border-block:1px solid var(--ink)}
.casefile::before{content:"";position:absolute;inset:-18% -10% -8% 36%;z-index:-2;background:var(--paper-sunk);opacity:.45}
.casefile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,20,20,.98) 0%,rgba(20,20,20,.9) 44%,rgba(20,20,20,.62) 100%)}
.casefile .eyebrow{color:#bdb6ad}
.casefile .display{color:var(--paper)}
.casefile .lead{color:#d6d0c9}
.casefile .btn--solid{border-color:var(--paper);background:var(--paper);color:var(--ink)}
.casefile .btn--solid:hover{background:#fff}
.casefile .std-stack{background:#3a352f;border-color:#3a352f}
.casefile .std-row{display:grid;grid-template-columns:18px 112px minmax(0,1fr);gap:16px;align-items:center;background:rgba(242,239,237,.07);color:var(--paper);backdrop-filter:blur(10px)}
.casefile .std-row .n{min-width:0;color:#bdb6ad}
.casefile .std-row p{color:#d6d0c9}
.casefile .rung-tick{border-color:var(--registration)}

@media (max-width:700px){
  .casefile .std-row{grid-template-columns:18px minmax(0,1fr);gap:12px}
  .casefile .std-row .n{grid-column:2;font-size:11px}
  .casefile .std-row div{grid-column:2}
}

/* ---- home proof strip: replaces weak numeric stats with useful first-screen proof ---- */
.proof-strip{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.proof-point{background:var(--paper);padding:20px 22px}
.proof-point span{display:block;font-size:11px;letter-spacing:0.14em;color:var(--muted);margin-bottom:10px}
.proof-point b{display:block;font-size:16px}
.proof-point p{margin-top:6px!important;font-size:14px;line-height:1.5;color:var(--body-text);max-width:32ch!important}

/* ---- fit cards + FAQ, scoped to /home but sharing the consult page's sober register ---- */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);margin-top:32px}
.col-card{background:var(--paper);padding:28px 26px}
.col-card__label{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.col-card--in{box-shadow:inset 3px 0 0 var(--ink)}
.col-card--in .col-card__label{color:var(--ink)}
.ticks{list-style:none;display:flex;flex-direction:column;gap:14px}
.ticks li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--body-text)}
.ticks li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--ink)}
.ticks--out li{color:var(--muted)}
.ticks--out li::before{background:transparent;border:1px solid var(--muted);top:7px}

.faq{margin-top:28px;border:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line);background:var(--paper)}
.faq__item:last-child{border-bottom:0}
.faq__item summary{list-style:none;cursor:pointer;padding:20px 26px;font-family:var(--font-display);font-weight:700;letter-spacing:0;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--font-mono);font-weight:400;color:var(--muted);font-size:22px;line-height:1;flex:none}
.faq__item[open] summary::after{content:"-"}
.faq__item summary:hover{background:var(--paper-sunk)}
.faq__body{padding:0 26px 22px}
.faq__body p{font-size:15px;line-height:1.6;color:var(--body-text);max-width:64ch}

/* ---- reveal-up: progressive enhancement ----
   Default state below is the JS-ON pre-reveal (hidden). The no-JS /
   reduced-motion floors (below) force the FINAL state, so content is
   ALWAYS present without JS — home.js only REMOVES visibility then
   reveals it, it never gates content (guardrail G4/G5). */
.reveal,[data-reveal-group] > *{opacity:0;transform:translateY(16px);transition:opacity var(--reveal-dur) var(--ease-out),transform var(--reveal-dur) var(--ease-out)}
.reveal[data-delay="1"],[data-reveal-group] > *:nth-child(2){transition-delay:.08s}
.reveal[data-delay="2"],[data-reveal-group] > *:nth-child(3){transition-delay:.16s}
.reveal[data-delay="3"],[data-reveal-group] > *:nth-child(4){transition-delay:.24s}
.reveal.is-in,[data-reveal-group].is-in > *{opacity:1;transform:none}

/* ---- self-drawing trace (the journey signature gesture) ----
   Same contract as consult.css §4: the spine path carries a
   stroke-dasharray == its length and offsets it out of view; the
   .is-drawn toggle eases the offset to 0 (line draws L->R). Nodes
   fade in AFTER the line passes (staggered, decorative). */
.hero-trace{width:100%;height:auto;overflow:visible;margin-top:34px}
/* pathLength="100" normalises the spine so the dash math is geometry-independent
   (survives path edits) — dasharray==offset==100 hides the line, easing offset
   to 0 draws it L->R over the full --trace-dur with no dead travel. */
.hero-trace .trace__path{stroke-dasharray:100;stroke-dashoffset:100}
.hero-trace.is-drawn .trace__path{transition:stroke-dashoffset var(--trace-dur) var(--ease-out);stroke-dashoffset:0}
/* nodes settle in as the line reaches them — delays match the real geometry:
   the line crosses node 2 (x=360) at 48% of its length and node 3 (x=620) at
   100% ((360-120)/(620-120)=.48; node 1 is the origin, no delay). */
.hero-trace .trace__node{opacity:0;transition:opacity .15s var(--ease-out)}
.hero-trace.is-drawn .trace__node{opacity:1}
.hero-trace.is-drawn .trace__node--2{transition-delay:calc(var(--trace-dur) * .48)}
.hero-trace.is-drawn .trace__node--3{transition-delay:var(--trace-dur)}

/* ---- method rungs ----
   The #method .std-stack is a [data-reveal-group], so the generic group
   rule above already reveals the three rungs in order with the reveal-group
   stagger. Here we add the small registration tick on the rung's leading edge.
   Reserved inline-flex box (CLS=0); aria-hidden in the markup. */
.std-stack--anchored .std-row{position:relative}
.rung-tick{flex:0 0 auto;align-self:center;width:8px;height:8px;border:1.5px solid var(--registration,#E5342B);background:transparent}

/* ---- Slice 5: /home gateway — paired entrance + STAQS-parity hover/focus ----
   Paired entrance: both cards start hidden, the IO .is-in (set by home.js)
   reveals them; left card (data-gw="1") leads, right (data-gw="2") follows
   0.08s later, settling into the hover affordance. The -3px hover lift +
   shadow already lives in the SHARED styles.css (.gateway:hover) — we do NOT
   restate it (G1: no motion edits to styles.css). We ONLY add the keyboard
   PARITY the shared sheet lacks: :focus-within mirrors that same lift so a
   keyboard user gets the mouse affordance. */
.gw-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--reveal-dur) var(--ease-out),transform var(--reveal-dur) var(--ease-out)}
.gw-reveal[data-gw="2"]{transition-delay:.08s}
.gw-reveal.is-in{opacity:1;transform:none}
.gateway:focus-within{background:var(--paper-sunk);transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,20,20,.08)}
.gateway--dark:focus-within{background:#1d1d1d}
/* division spot from the kit — top-right, reserved-box sized (CLS=0) */
.gw-spot{position:absolute;top:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);width:clamp(40px,4.4vw,56px);height:clamp(40px,4.4vw,56px);opacity:.5;pointer-events:none}
.gateway{position:relative}

/* ---- CTA micro-interactions (transform/opacity only) ---- */
.hero .btn{transition:transform .12s var(--ease-out),background-color .12s var(--ease-out),border-color .12s var(--ease-out),color .12s var(--ease-out)}
.hero .btn:hover{transform:translateY(-1px)}
.hero .btn:active{transform:scale(.98)}

/* ============================================================
   SLICE 10 — prose illustration spot + scoped micro-interactions
   (/home-only firewall; styles.css/tokens.css UNTOUCHED — G1)
   ============================================================ */

/* ---- #standards dossier-frame spot (02a kit #6) ----
   A document (batch-release record), not a building — RUO firewall.
   Decorative (aria-hidden), reserved-box sized so it adds no layout shift. */
.std-spot{display:block;width:44px;height:auto;margin-bottom:14px;overflow:visible}

/* ---- card hover-lift parity (micro-interaction #8) ----
   styles.css gives .cap-card NO hover affordance; raise the /home cap-cards to
   the journey register here (scoped). transform+box-shadow only; :focus-within
   mirrors :hover so keyboard/AT users get the same affordance (a11y parity). */
.cap-card{transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.cap-card:hover,.cap-card:focus-within{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,20,20,.08)}

/* ---- primary CTA magnet (micro-interaction #3) ----
   .cta-magnet leans toward the cursor (±6px), driven by home.js writing a
   --mx/--my translate. POINTER:FINE + reduced-motion gated in JS — off on
   touch and for reduced-motion. Cosmetic only: the transform never alters the
   button's hit area for keyboard/AT (it stays in normal flow). */
.cta-magnet{transition:transform .18s var(--ease-out);transform:translate(var(--mx,0),var(--my,0))}

/* ---- reduced-motion + no-IO floor (FIRST gate) ----
   Everything present at its FINAL state, no animation. home.js
   mirrors this in JS (settleFinal) before observers attach, so there
   is no flash-then-freeze. Content is identical to the animated path. */
@media (prefers-reduced-motion:reduce){
  .reveal,[data-reveal-group] > *{opacity:1!important;transform:none!important;transition:none!important}
  .hero-trace .trace__path{stroke-dashoffset:0!important;transition:none!important}
  .hero-trace .trace__node{opacity:1!important;transition:none!important}
  .hero .btn{transition:none!important}
  .hero .btn:hover,.hero .btn:active{transform:none!important}
  /* Slices 4+5: rungs + fork cards visible, NO entrance; the static hover/
     focus affordance is kept (it is an affordance, not motion). */
  .gw-reveal{opacity:1!important;transform:none!important;transition:none!important}
  /* Slice 10: no cap-card lift, no magnet pull (spots are static art). */
  .cap-card{transition:none!important}
  .cap-card:hover,.cap-card:focus-within{transform:none!important;box-shadow:none!important}
  .cta-magnet{transform:none!important;transition:none!important}
}

@media (max-width:900px){
  .hero--blackbox{min-height:calc(100svh - 81px);padding-block:48px 36px}
  .hero--blackbox::before{background:linear-gradient(180deg,rgba(242,239,237,.98) 0%,rgba(242,239,237,.9) 36%,rgba(242,239,237,.96) 100%)}
  .hero--blackbox::after{background:linear-gradient(180deg,rgba(242,239,237,.82) 0%,rgba(242,239,237,0) 28%,rgba(242,239,237,.92) 100%)}
  .hero__photo{position:absolute;inset:0 0 auto 24%;z-index:0;min-height:0;height:340px;margin:0;border:0;background-position:center;opacity:.82}
  .hero__grid{display:block}
  .hero--blackbox h1{max-width:12.8ch}
  .hero__artifact{display:none}
  .hero-trace--quiet{max-width:100%;opacity:.72}
}

@media (max-width:560px){
  .hero__photo{inset-inline-start:18%;height:260px;opacity:.62}
  .hero__artifact{display:none}
}