/* ==========================================================================
   Arakno design system
   Ground: soft light, never pure white. Dark blocks are deliberate and used
   only for evidence and commitment moments (.section--dark, .band).
   Accent lock: brand cyan family on every page.
   Radius rule: cards 16px, controls 10px, chips 999px. Nothing else.
   ========================================================================== */

:root{
  /* light ground, taken from the brand silver range */
  --ink:        #eff2f5;   /* page */
  --ink-2:      #fafbfc;   /* cards */
  --surface:    #ffffff;   /* emphasis surface */
  --surface-2:  #f4f7f9;   /* quiet fill */
  --line:       #dde3e8;
  --line-strong:#c4cdd5;

  --text:       #101d26;   /* headings and strong text */
  --text-2:     #3e4c57;   /* body */
  --text-3:     #5e6b77;   /* small print, still AA on the page ground */

  --accent:     #00758f;   /* interactive: buttons, links */
  --accent-hov: #005f77;
  --accent-lift:#00a8d8;   /* brand cyan, graphics and diagrams */
  --live:       #0f7f5a;

  /* dark blocks */
  --dark:       #08202c;
  --dark-2:     #0d2c3b;
  --dark-line:  rgba(255,255,255,.14);
  --dark-text:  #eef3f6;
  --dark-text-2:#a7b8c4;

  --r-card: 16px;
  --r-ctl: 10px;

  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 40px);
  --sec-y: clamp(88px, 11vw, 152px);

  --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --z-nav: 60;
  --z-menu: 70;
  --z-top: 90;
}

*,*::before,*::after{ box-sizing:border-box; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ink); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text-2);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff;
  padding:12px 18px; border-radius:0 0 var(--r-ctl) 0; z-index:var(--z-top);
}
.skip:focus{ left:0; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:500; letter-spacing:-.03em; margin:0; color:var(--text); }
h1{ font-size:clamp(2.4rem, 5.2vw, 4rem); line-height:1.05; }
h2{ font-size:clamp(1.85rem, 3.5vw, 2.85rem); line-height:1.1; }
h3{ font-size:clamp(1.12rem, 1.7vw, 1.38rem); line-height:1.28; letter-spacing:-.02em; }
h4{ font-size:1rem; line-height:1.35; letter-spacing:-.01em; }
p{ margin:0; }

.lede{ font-size:clamp(1.04rem, 1.5vw, 1.22rem); line-height:1.55; color:var(--text-2); max-width:58ch; }
.body{ color:var(--text-2); max-width:66ch; }
.small{ font-size:.875rem; line-height:1.55; color:var(--text-3); }
.mono{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.02em; }
strong{ color:var(--text); font-weight:500; }

.label{
  font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--text-3);
}

/* ---------- Layout ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sec-y); position:relative; }
.section--tight{ padding-block:clamp(64px,8vw,104px); }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }
.head{ max-width:64ch; }
.head h2 + p{ margin-top:20px; }
.mt-56{ margin-top:clamp(36px,5vw,56px); }
.mt-32{ margin-top:32px; }

/* ---------- Dark blocks: evidence and commitment moments only ---------- */
.section--dark{ background:var(--dark); color:var(--dark-text-2); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--dark-text); }
.section--dark .lede,.section--dark .body{ color:var(--dark-text-2); }
.section--dark .small{ color:#8ea2b0; }
.section--dark .label{ color:#8ea2b0; }
.section--dark .link-arrow{ color:var(--accent-lift); }
.section--dark .pair{ background:var(--dark-line); border-color:var(--dark-line); }
.section--dark .pair__col{ background:var(--dark-2); }
.section--dark .pair__col--on{ background:#12384a; }
.section--dark .pair li{ color:var(--dark-text-2); }
.section--dark .pair li::before{ background:#7c93a2; }
.section--dark .pair__col--on li::before{ background:var(--accent-lift); }
.section--dark .cluster h4{ border-color:var(--dark-line); }
.section--dark .cluster li{ color:var(--dark-text-2); }
.section--dark .cluster li b{ color:var(--dark-text); }
.section--dark .ledger{ background:var(--dark-2); border-color:var(--dark-line); }
.section--dark .ledger__row + .ledger__row{ border-color:var(--dark-line); }
.section--dark .ledger__row--head{ background:#0a2837; }
.section--dark .ledger__row--head span{ color:#8ea2b0; }
.section--dark .ledger span{ color:var(--dark-text-2); }
.section--dark .ledger .risk{ color:var(--accent-lift); }
.section--dark .flow{ border-color:var(--dark-line); }
.section--dark .flow__item{ border-color:var(--dark-line); }
.section--dark .flow__item p{ color:var(--dark-text-2); }
.section--dark .btn--ghost{ border-color:var(--dark-line); color:var(--dark-text); }
.section--dark .btn--ghost:hover{ border-color:#9fb0bc; background:rgba(255,255,255,.06); }
.section--dark .trace .t-node{ fill:#0f3244; stroke:var(--dark-line); }
.section--dark .trace .t-title{ fill:var(--dark-text); }
.section--dark .trace .t-sub{ fill:#8ea2b0; }
.section--dark .trace .t-edge{ stroke:var(--dark-line); }
.section--dark .trace .t-node--gate{ fill:#123a4d; stroke:var(--accent-lift); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 22px; border-radius:var(--r-ctl);
  font-family:var(--f-body); font-size:.94rem; font-weight:500; letter-spacing:-.01em;
  white-space:nowrap; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-hov); }
.btn--ghost{ border-color:var(--line-strong); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--text-3); background:rgba(16,29,38,.04); }
.btn--sm{ height:40px; padding:0 16px; font-size:.88rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

.link-arrow{ display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-size:.94rem; font-weight:500; }
.link-arrow svg{ transition:transform .2s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Header ---------- */
.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(239,242,245,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(239,242,245,.95); }
.nav__in{ height:72px; display:flex; align-items:center; justify-content:space-between; gap:32px; }

.brand{ display:inline-flex; align-items:center; }
.brand img{ height:26px; width:auto; }
.menu .brand img{ height:24px; }
.foot .brand img{ height:46px; }

.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{ font-size:.92rem; color:var(--text-2); transition:color .18s var(--ease); }
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--text); }
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-strong); border-radius:var(--r-ctl); cursor:pointer;
}
.nav__burger span{ display:block; width:16px; height:1px; background:var(--text); position:relative; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:16px; height:1px; background:var(--text); }
.nav__burger span::before{ top:-5px; } .nav__burger span::after{ top:5px; }

.progress{ position:fixed; top:0; left:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--accent-lift); z-index:var(--z-top); }

.menu{
  position:fixed; inset:0; z-index:var(--z-menu); background:var(--ink);
  display:flex; flex-direction:column; padding:24px var(--gutter) 40px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
  overflow-y:auto;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu__top{ display:flex; align-items:center; justify-content:space-between; height:48px; }
.menu__close{ width:44px; height:44px; background:transparent; border:1px solid var(--line-strong); border-radius:var(--r-ctl); color:var(--text); font-size:1.2rem; line-height:1; cursor:pointer; }
.menu__links{ display:flex; flex-direction:column; gap:2px; margin-top:40px; }
.menu__links a{
  font-family:var(--f-display); font-size:1.75rem; letter-spacing:-.03em; padding:12px 0; color:var(--text);
  border-bottom:1px solid var(--line); opacity:0; transform:translateY(14px);
}
.menu.is-open .menu__links a{ animation:menuIn .5s var(--ease) forwards; }
@keyframes menuIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .menu__links a{ opacity:1; transform:none; }
  .menu.is-open .menu__links a{ animation:none; }
}
.menu__foot{ margin-top:40px; display:flex; flex-direction:column; gap:14px; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(64px,8vw,112px); overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset:-34% -12% auto 24%; height:700px; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,168,216,.15), transparent 70%);
}
.hero__grid{ position:relative; display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1{ font-size:clamp(2.35rem, 4.4vw, 3.6rem); }
.hero h1 + p{ margin-top:22px; }
.hero .btn-row{ margin-top:34px; }

/* ---------- Trace diagram (signature visual) ---------- */
.trace{ width:100%; height:auto; }
.trace text{ font-family:var(--f-mono); fill:var(--text-2); font-size:9px; letter-spacing:.1em; }
.trace .t-title{ font-family:var(--f-body); font-size:12.5px; fill:var(--text); letter-spacing:-.01em; }
.trace .t-sub{ fill:var(--text-3); font-size:8px; }
.trace .t-node{ fill:var(--surface); stroke:var(--line); }
.trace .t-node--gate{ stroke:var(--accent-lift); fill:#eefaff; }
.trace .t-edge{ stroke:var(--line-strong); stroke-width:1; fill:none; }
.trace .t-dot{ fill:var(--accent-lift); }
.trace .t-gate{ fill:var(--accent); }
.trace .t-flow{ stroke:var(--accent-lift); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-dasharray:8 520; }
@media (prefers-reduced-motion: no-preference){
  .trace .t-flow{ animation:traceRun 6s linear infinite; }
}
@keyframes traceRun{ from{ stroke-dashoffset:528; } to{ stroke-dashoffset:0; } }

/* ---------- Contrast pair ---------- */
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.pair__col{ background:var(--ink-2); padding:clamp(24px,3vw,40px); }
.pair__col--on{ background:var(--surface); }
.pair__col h3{ margin-bottom:20px; }
.pair ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.pair li{ font-size:.96rem; color:var(--text-2); padding-left:22px; position:relative; }
.pair li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--line-strong); }
.pair__col--on li::before{ background:var(--accent-lift); }

/* ---------- Bento ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.cell{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap:12px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cell:hover{ border-color:var(--line-strong); box-shadow:0 8px 28px rgba(16,29,38,.06); }
.cell p{ color:var(--text-2); font-size:.95rem; }
.cell--wide{ grid-column:span 4; }
.cell--half{ grid-column:span 3; }
.cell--third{ grid-column:span 2; }
.cell--tall{ grid-column:span 2; grid-row:span 2; }
.cell--full{ grid-column:span 6; }
.cell--tone{ background:linear-gradient(158deg, rgba(0,168,216,.14), rgba(0,168,216,0) 62%), var(--surface); }
.cell--mesh{
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(0,168,216,.16), transparent 62%),
    radial-gradient(60% 80% at 100% 100%, rgba(8,32,44,.08), transparent 60%),
    var(--surface);
}
.cell__meta{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }

/* ---------- Channel strip ---------- */
.strip{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px,4vw,52px); }
.strip img{ height:22px; width:auto; opacity:.8; transition:opacity .2s var(--ease); }
.strip img:hover{ opacity:1; }

/* ---------- Flow ---------- */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.flow__item{ padding:30px 28px 0 0; border-right:1px solid var(--line); }
.flow__item:last-child{ border-right:0; padding-right:0; }
.flow__item h3{ margin-bottom:12px; }
.flow__item p{ color:var(--text-2); font-size:.95rem; }
.flow__mark{ width:56px; height:2px; background:var(--accent-lift); margin-bottom:26px; }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.split--rev .split__media{ order:-1; }
.split__media{ border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--surface); }
.split__media img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

/* ---------- Ledger ---------- */
.ledger{ border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--ink-2); }
.ledger__row{ display:grid; grid-template-columns:120px 1fr 140px 104px; gap:16px; padding:14px 20px; align-items:center; }
.ledger__row + .ledger__row{ border-top:1px solid var(--line); }
.ledger__row--head{ background:var(--surface-2); }
.ledger__row--head span{ text-transform:uppercase; letter-spacing:.16em; font-size:.64rem; color:var(--text-3); }
.ledger span{ font-family:var(--f-mono); font-size:.76rem; color:var(--text-2); }
.ledger .risk{ color:var(--accent); }
.chip{
  display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:4px 11px;
  border:1px solid var(--line-strong); font-family:var(--f-mono); font-size:.66rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--text-2); width:fit-content;
}
.chip--live{ color:var(--live); border-color:rgba(15,127,90,.35); }
.chip--live::before{ content:""; width:6px; height:6px; border-radius:999px; background:var(--live); }
.chips{ list-style:none; margin-inline:0; margin-bottom:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips .chip{ font-size:.7rem; padding:6px 13px; background:var(--ink-2); }

/* ---------- Tracks ---------- */
.tracks{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tracks--3{ grid-template-columns:repeat(3,1fr); }
.track{ border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(26px,3vw,40px); background:var(--ink-2); display:flex; flex-direction:column; }
.track--focus{ border-color:var(--accent-lift); background:linear-gradient(180deg, rgba(0,168,216,.10), transparent 42%), var(--ink-2); }
.track h3{ margin-bottom:14px; }
.track ul{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.track li{ font-size:.94rem; color:var(--text-2); padding-left:24px; position:relative; }
.track li::before{ content:""; position:absolute; left:0; top:.55em; width:12px; height:1px; background:var(--accent-lift); }
.track .btn{ margin-top:32px; align-self:flex-start; }
.price{ display:flex; flex-direction:column; gap:4px; margin:4px 0 18px; }
.price__num{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.2rem,4vw,3rem); line-height:1; letter-spacing:-.02em; color:var(--text); }
.price__unit{ font-size:.86rem; color:var(--text-3); }

/* ---------- Clusters ---------- */
.clusters{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); }
.cluster h4{ padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.cluster ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.cluster li{ font-size:.93rem; color:var(--text-2); }
.cluster li b{ color:var(--text); font-weight:500; display:block; margin-bottom:3px; }

/* ---------- Specs ---------- */
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.spec{ border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(22px,2.4vw,30px); background:var(--ink-2); }
.spec h4{ margin-bottom:10px; }
.spec p{ color:var(--text-2); font-size:.93rem; }
.spec .mono{ color:var(--accent); display:block; margin-bottom:14px; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative; color:var(--text);
  font-family:var(--f-display); font-size:clamp(1.02rem,1.4vw,1.18rem); letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:1px solid var(--text-3); border-bottom:1px solid var(--text-3);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq details p{ padding:0 60px 26px 0; color:var(--text-2); max-width:74ch; }

/* ---------- CTA band, always dark ---------- */
.band{
  border-radius:var(--r-card); padding:clamp(34px,5vw,72px);
  background:linear-gradient(140deg, #0d2c3b 0%, var(--dark) 58%);
  color:var(--dark-text-2);
  position:relative; overflow:hidden;
}
.band::after{
  content:""; position:absolute; right:-10%; top:-40%; width:60%; height:180%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,168,216,.22), transparent 70%);
}
.band > *{ position:relative; z-index:1; }
.band h2{ max-width:18ch; color:var(--dark-text); }
.band .lede{ color:var(--dark-text-2); }
.band .btn-row{ margin-top:30px; }
.band .btn--primary{ background:var(--accent-lift); color:#04222d; }
.band .btn--primary:hover{ background:#3fc4e8; }
.band .btn--ghost{ border-color:var(--dark-line); color:var(--dark-text); }
.band .btn--ghost:hover{ border-color:#9fb0bc; background:rgba(255,255,255,.06); }

/* ---------- Forms ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--wide{ grid-column:span 2; }
.field label{ font-size:.86rem; color:var(--text); }
.field input,.field select,.field textarea{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-ctl);
  color:var(--text); font-family:var(--f-body); font-size:.95rem; padding:13px 14px; width:100%;
}
.field textarea{ min-height:132px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#79858f; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); outline:none; }
.field__hint{ font-size:.8rem; color:var(--text-3); }
.field__err{ font-size:.8rem; color:#b3261e; display:none; }
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{ border-color:#b3261e; }
.field.is-bad .field__err{ display:block; }
.form__note{ grid-column:span 2; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__fail{
  display:none; grid-column:span 2; border:1px solid rgba(179,38,30,.35); background:rgba(179,38,30,.05);
  border-radius:var(--r-ctl); padding:16px 18px; color:var(--text-2); font-size:.93rem;
}
.form__fail.is-on{ display:block; }
.form__fail a{ color:var(--accent); text-decoration:underline; }
.form__ok{
  display:none; grid-column:span 2; border:1px solid rgba(15,127,90,.35); background:rgba(15,127,90,.06);
  border-radius:var(--r-ctl); padding:16px 18px; color:var(--text-2); font-size:.93rem;
}
.form__ok.is-on{ display:block; }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line); padding-block:clamp(56px,7vw,88px) 32px; background:var(--ink); }
.foot__grid{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:40px; }
.foot h4{ font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--text-3); font-weight:400; margin-bottom:18px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.foot a{ font-size:.92rem; color:var(--text-2); }
.foot a:hover{ color:var(--text); }
.foot__bar{ margin-top:56px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; }

/* ---------- Inner page header ---------- */
.phead{ padding-top:clamp(48px,6vw,88px); padding-bottom:clamp(40px,5vw,64px); }
.phead h1{ max-width:19ch; }
.phead p{ margin-top:22px; }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .rv{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .js .rv.is-in{ opacity:1; transform:none; }
  .rv-d1{ transition-delay:.07s; } .rv-d2{ transition-delay:.14s; } .rv-d3{ transition-delay:.21s; }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .tracks--3{ grid-template-columns:1fr; }
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
  .nav__cta .btn{ display:none; }
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .clusters{ grid-template-columns:1fr; }
  .cell--wide,.cell--half,.cell--third,.cell--tall,.cell--full{ grid-column:span 3; grid-row:auto; }
}
@media (max-width:768px){
  .pair,.tracks,.tracks--3,.split,.form,.specs{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .bento{ grid-template-columns:1fr; }
  .cell--wide,.cell--half,.cell--third,.cell--tall,.cell--full{ grid-column:span 1; }
  .flow{ grid-template-columns:1fr; }
  .flow__item{ border-right:0; border-bottom:1px solid var(--line); padding:28px 0; }
  .flow__item:last-child{ border-bottom:0; }
  .ledger__row{ grid-template-columns:1fr 1fr; row-gap:8px; }
  .ledger__row--head{ display:none; }
  .field--wide,.form__note,.form__ok,.form__fail{ grid-column:span 1; }
  .foot__grid{ grid-template-columns:1fr; }
}