/* ============================================================
   STOMWERK — stomwerk.com v2 (projekt + scale)
   Light-first · dark via [data-theme="dark"] · motion-gated
   ============================================================ */

:root{
  --amber:#F2A33C;
  --amber-deep:#D6831C;
  --err:#D64545;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font-display:"Archivo",sans-serif;
  --font-body:"Archivo",sans-serif;
  --font-label:"Space Grotesk",monospace;
  --font-brand:"Space Grotesk",sans-serif;
  --display-weight:700;
  --display-track:-0.03em;

  /* LIGHT (paper) — default */
  --bg:#FAFAF8;
  --bg-2:#F3F3EF;
  --fg:#0E1116;
  --fg-soft:#2A3038;
  --muted:#5F6B7C;
  --steel:#9AA7B8;
  --line:#E4E4DF;
  --line-strong:#D2D2CB;
  --panel:#FFFFFF;
  --panel-line:#E9E9E3;
  --grid:#E8E8E2;
  --btn-ink:#0E1116;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0E1116;
  --bg-2:#12161D;
  --fg:#FAFAF8;
  --fg-soft:#D7DCE3;
  --muted:#9AA7B8;
  --steel:#5F6B7C;
  --line:#242A33;
  --line-strong:#323A45;
  --panel:#151A21;
  --panel-line:#252C35;
  --grid:#1B212A;
  color-scheme:dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .35s ease,color .35s ease;
  overflow-x:hidden;
}
::selection{ background:var(--amber); color:#0E1116; }
a{ color:inherit; }
h1,h2,h3,h4,p{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }

.container{ max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,72px); }
.block{ padding:clamp(72px,11vh,150px) 0; }
.band{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---- mono label ---- */
.mono-label{
  font-family:var(--font-label); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:.9em;
}
.mono-label::before{ content:""; width:1.6em; height:1px; background:var(--steel); }

/* ---- registration ticks ---- */
.ticks span{ position:fixed; width:15px; height:15px; border:0 solid var(--steel); opacity:.7; z-index:60; pointer-events:none; }
.ticks .tl{ top:14px; left:14px; border-top-width:1px; border-left-width:1px; }
.ticks .tr{ top:14px; right:14px; border-top-width:1px; border-right-width:1px; }
.ticks .bl{ bottom:14px; left:14px; border-bottom-width:1px; border-left-width:1px; }
.ticks .br{ bottom:14px; right:14px; border-bottom-width:1px; border-right-width:1px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; height:72px;
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.scrolled{
  border-bottom-color:var(--line);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-logo{ display:flex; align-items:center; gap:.8rem; cursor:pointer; text-decoration:none; }
.nav-logo svg{ width:36px; height:26px; flex:none; }
.nav-logo .wm{ font-family:var(--font-brand); font-weight:600; font-size:1.42rem; letter-spacing:-.045em; line-height:1; text-transform:lowercase; }
.nav-logo .wm .s{ color:var(--fg); } .nav-logo .wm .w{ color:var(--amber); }
.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-link{
  position:relative; font-family:var(--font-label); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-decoration:none; cursor:pointer;
  transition:color .25s ease; background:none; border:0; padding:0; white-space:nowrap;
}
.nav-link:hover{ color:var(--fg); }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--amber); transition:width .3s var(--ease); }
.nav-link:hover::after{ width:100%; }
.nav-link.active{ color:var(--amber); }
.nav-cta{
  background:var(--fg); color:var(--bg); border:1px solid var(--fg); cursor:pointer; text-decoration:none;
  font-family:var(--font-label); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.7rem 1.1rem; display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .15s ease;
}
.nav-cta:hover{ background:var(--amber); border-color:var(--amber); color:#0E1116; }
.nav-cta:active{ transform:translateY(1px); }
.nav-progress{ position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--amber); transform:scaleX(0); transform-origin:left; pointer-events:none; }

/* mobile menu */
.nav-burger{ display:none; background:none; border:1px solid var(--line-strong); width:44px; height:44px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-burger i{ display:block; width:18px; height:1.5px; background:var(--fg); transition:transform .3s var(--ease),opacity .2s; }
.mobile-menu{
  position:fixed; inset:0; z-index:49; background:var(--bg); padding:120px clamp(24px,6vw,60px) 40px;
  transform:translateY(-100%); display:flex; flex-direction:column; gap:.4rem;
  overflow:auto; visibility:hidden;
  transition:transform .4s var(--ease), visibility 0s .4s;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; transition:transform .4s var(--ease), visibility 0s 0s; }
.mobile-menu a{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; text-decoration:none;
  font-size:clamp(1.8rem,7vw,2.6rem); color:var(--fg); padding:.55rem 0; border-bottom:1px solid var(--line);
}
.mobile-menu a em{ font-style:normal; color:var(--amber); }
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}

/* ============================================================
   HERO — splash
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:84px clamp(20px,5vw,72px) clamp(170px,24vh,280px); width:100%; }
.hero .mono-label::after{ content:""; width:1.6em; height:1px; background:var(--steel); }
.hero h1{
  font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track);
  line-height:1.0; font-size:clamp(2.6rem,8vw,6.4rem); max-width:15ch; margin-top:1.6rem;
  text-wrap:balance;
}
.hero h1 .rot{ color:var(--amber); display:inline-block; white-space:nowrap; text-align:left; }
.hero h1 .rot .rw{ display:inline-block; }
.hero .lede{ color:var(--muted); font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.6; max-width:46ch; margin-top:1.8rem; }
.hero .btn-row{ display:flex; gap:.8rem; margin-top:2.4rem; flex-wrap:wrap; justify-content:center; }

.btn{
  font-family:var(--font-label); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--fg); color:var(--bg); border:1px solid var(--fg); padding:.95rem 1.4rem;
  cursor:pointer; display:inline-flex; align-items:center; gap:.6rem; transition:all .22s var(--ease); text-decoration:none; white-space:nowrap;
}
.btn:hover{ background:var(--amber); border-color:var(--amber); color:#0E1116; gap:.95rem; }
.btn.ghost{ background:transparent; color:var(--fg); border-color:var(--line-strong); }
.btn.ghost:hover{ border-color:var(--fg); background:transparent; color:var(--fg); }

/* the splash truss bridge */
.hero-truss{
  position:absolute; left:50%; bottom:clamp(78px,12vh,140px); transform:translateX(-50%);
  width:min(1240px,94vw); z-index:1; pointer-events:none;
}
.hero-truss svg{ display:block; width:100%; height:auto; overflow:visible; }
.hero-truss .chord{ stroke:var(--steel); stroke-width:1.4; fill:none; stroke-linecap:round; opacity:.6; }
.hero-truss .mem{ stroke:var(--amber); stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.hero-truss .node{ fill:var(--bg); stroke:var(--amber); stroke-width:1.6; transform-box:fill-box; transform-origin:center; }

.scroll-cue{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-family:var(--font-label); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--steel);
}
.scroll-cue i{ display:block; width:1px; height:24px; background:var(--steel); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; left:0; top:-40%; width:100%; height:40%; background:var(--amber); animation:cue-drop 2.6s var(--ease) infinite; }
@keyframes cue-drop{ 0%{ top:-40%; } 60%,100%{ top:110%; } }

/* hero entrance (end-state = visible base) */
@media (prefers-reduced-motion: no-preference){
  html[data-motion="full"] .hero .h-an{ opacity:0; transform:translateY(22px); animation:h-rise .9s var(--ease) forwards; }
  html[data-motion="full"] .hero .h-an.d1{ animation-delay:.08s; }
  html[data-motion="full"] .hero .h-an.d2{ animation-delay:.22s; }
  html[data-motion="full"] .hero .h-an.d3{ animation-delay:.38s; }
  html[data-motion="full"] .hero .scroll-cue{ opacity:0; animation:h-fade 1s ease 1.6s forwards; }
}
@keyframes h-rise{ to{ opacity:1; transform:translateY(0); } }
@keyframes h-fade{ to{ opacity:1; } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ border-bottom:1px solid var(--line); overflow:hidden; padding:1.05rem 0; position:relative; }
.marquee .mq-track{ display:flex; gap:3.4rem; width:max-content; }
.marquee .mq-set{ display:flex; gap:3.4rem; align-items:center; }
.marquee .mq-item{
  font-family:var(--font-label); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:3.4rem;
}
.marquee .mq-item::after{ content:""; width:6px; height:6px; border-radius:50%; border:1px solid var(--amber); display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  html[data-motion="full"] .mq-track{ animation:mq-roll 46s linear infinite; }
  html[data-motion="full"] .marquee:hover .mq-track{ animation-play-state:paused; }
}
@keyframes mq-roll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.block-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2.5rem; margin-bottom:clamp(40px,6vw,72px); flex-wrap:wrap; }
.block-head h2{
  font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track);
  line-height:1.06; font-size:clamp(1.9rem,4.5vw,3.4rem); max-width:18ch; text-wrap:balance;
}
.block-head h2 .w{ color:var(--amber); }
.block-head .side{ color:var(--muted); font-size:1rem; line-height:1.6; max-width:34ch; }

/* ============================================================
   DISCIPLINES — the two werks
   ============================================================ */
.discs{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); background:var(--panel); }
.disc{
  position:relative; padding:clamp(40px,6vw,76px) clamp(28px,4vw,60px) clamp(34px,5vw,56px);
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit;
  transition:background .35s ease;
}
.disc:first-child{ border-right:1px solid var(--line); }
.disc:hover{ background:var(--bg-2); }
.disc .ix{ font-family:var(--font-label); font-size:.72rem; letter-spacing:.16em; color:var(--steel); }
.disc .tag{ font-family:var(--font-brand); font-weight:600; font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.03em; text-transform:lowercase; margin-top:1.2rem; }
.disc .tag .s{ color:var(--fg); } .disc .tag .w{ color:var(--amber); }
.disc h3{ font-family:var(--font-display); font-weight:600; font-size:1.06rem; letter-spacing:.01em; margin-top:1.3rem; color:var(--fg-soft); }
.disc p{ color:var(--muted); font-size:1rem; line-height:1.62; margin-top:.9rem; max-width:40ch; }
.disc .chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.7rem; }
.disc .chip{
  font-family:var(--font-label); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-strong); padding:.45rem .65rem; transition:border-color .25s ease,color .25s ease;
}
.disc:hover .chip{ border-color:var(--steel); color:var(--fg-soft); }
.disc .go{
  margin-top:2.2rem; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-label); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg);
}
.disc .go .arr{ color:var(--amber); transition:transform .25s var(--ease); }
.disc:hover .go .arr{ transform:translateX(6px); }
.disc .wm-truss{
  position:absolute; right:-30px; bottom:-26px; width:230px; opacity:.07; pointer-events:none;
  transition:opacity .4s ease, transform .5s var(--ease);
}
.disc:hover .wm-truss{ opacity:.16; transform:translateY(-6px); }
.disc .wm-truss path{ stroke:var(--fg); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:860px){
  .discs{ grid-template-columns:1fr; }
  .disc:first-child{ border-right:0; border-bottom:1px solid var(--line); }
}

/* ============================================================
   WHAT WE DO — verbs
   ============================================================ */
.cap-rows{ border-top:1px solid var(--line); }
.cap-row{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,60px); padding:clamp(30px,4.5vw,54px) 0; border-bottom:1px solid var(--line); transition:background .3s ease; }
.cap-row:hover{ background:color-mix(in srgb, var(--bg-2) 60%, transparent); }
.cap-row .num{ font-family:var(--font-label); font-size:.72rem; letter-spacing:.16em; color:var(--steel); }
.cap-row .vname{ font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:1rem; }
.cap-row .vbar{ height:3px; width:2.4rem; background:var(--amber); margin-top:.9rem; transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) .15s; }
.cap-row.in .vbar{ transform:scaleX(1); }
.cap-row .vdesc{ color:var(--muted); font-size:.98rem; line-height:1.6; margin-top:1rem; max-width:36ch; }
.cap-row ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; align-content:start; }
.cap-row li{
  font-family:var(--font-label); font-size:.8rem; letter-spacing:.05em; color:var(--fg-soft);
  display:flex; gap:.7rem; padding:.62rem 0; border-bottom:1px solid var(--line);
}
.cap-row li::before{ content:""; width:7px; height:7px; border-radius:50%; border:1.4px solid var(--amber); background:transparent; flex:none; transform:translateY(.38em); }
@media (max-width:760px){
  .cap-row{ grid-template-columns:1fr; }
  .cap-row ul{ grid-template-columns:1fr; }
}

/* ============================================================
   HOW WE WORK — steps + drawn line
   ============================================================ */
.steps{ position:relative; margin-top:clamp(10px,2vw,20px); }
.steps .rail{ position:absolute; left:calc(clamp(2.6rem,5vw,4rem) / 2); top:0; bottom:0; width:1px; background:var(--line-strong); }
.steps .rail i{ position:absolute; left:0; top:0; width:100%; height:0%; background:var(--amber); display:block; }
.step{ position:relative; display:grid; grid-template-columns:clamp(2.6rem,5vw,4rem) auto 1fr; gap:0 clamp(18px,3vw,40px); padding:clamp(26px,3.6vw,42px) 0; border-bottom:1px solid var(--line); align-items:start; }
.step .dot{
  position:relative; z-index:1; justify-self:center; width:11px; height:11px; margin-top:.5rem;
  background:var(--bg); border:1.6px solid var(--steel); border-radius:50%;
  transition:border-color .4s ease, background .4s ease;
}
.step.on .dot{ border-color:var(--amber); background:var(--amber); }
.step .s-num{
  font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(1.7rem,3.4vw,2.6rem);
  color:var(--line-strong); letter-spacing:var(--display-track); line-height:1; transition:color .45s ease; min-width:2ch;
}
.step.on .s-num{ color:var(--amber); }
.step .s-body h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:-.01em; }
.step .s-body p{ color:var(--muted); font-size:.98rem; line-height:1.6; margin-top:.55rem; max-width:62ch; }
@media (max-width:640px){
  .steps .rail{ display:none; }
  .step{ grid-template-columns:auto 1fr; }
  .step .dot{ display:none; }
}

/* ============================================================
   ABOUT — etymology · statement · contrasts
   ============================================================ */
.etym{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.etym-card{ border:1px solid var(--panel-line); background:var(--panel); padding:clamp(26px,3.5vw,44px); position:relative; overflow:hidden; }
.etym-card .lang{ font-family:var(--font-label); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); }
.etym-card .word{ font-family:var(--font-brand); font-weight:600; font-size:clamp(1.9rem,3.4vw,2.8rem); letter-spacing:-.03em; text-transform:lowercase; margin-top:.9rem; }
.etym-card .word .w{ color:var(--amber); }
.etym-card .gloss{ font-family:var(--font-label); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-top:.5rem; }
.etym-card p{ color:var(--muted); font-size:.98rem; line-height:1.6; margin-top:1.1rem; max-width:36ch; }
@media (max-width:760px){ .etym{ grid-template-columns:1fr; } }

.statement{ padding:clamp(64px,9vw,120px) 0 clamp(40px,6vw,80px); text-align:center; }
.statement blockquote{
  margin:0 auto; font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track);
  font-size:clamp(1.8rem,4.6vw,3.6rem); line-height:1.12; max-width:24ch; text-wrap:balance;
}
.statement blockquote .w{ color:var(--amber); }
.statement .sw{ display:inline-block; }

.contrasts{ border-top:1px solid var(--line); margin-top:clamp(40px,6vw,70px); }
.contrasts .c-label{ padding:1.4rem 0 .2rem; }
.contrast-grid{ display:grid; grid-template-columns:1fr 1fr; }
.contrast{
  display:flex; align-items:baseline; gap:1rem; padding:clamp(20px,3vw,32px) clamp(4px,1vw,16px);
  border-bottom:1px solid var(--line); transition:background .3s ease, padding-left .3s var(--ease);
}
.contrast:hover{ background:color-mix(in srgb, var(--bg-2) 70%, transparent); padding-left:clamp(14px,2vw,28px); }
.contrast:nth-child(odd){ border-right:1px solid var(--line); }
.contrast .hi{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(1.2rem,2.2vw,1.7rem); letter-spacing:-.01em; color:var(--amber); }
.contrast .conn{ font-family:var(--font-label); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); }
.contrast .lo{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,2.2vw,1.7rem); letter-spacing:-.01em; color:var(--fg-soft); }
@media (max-width:680px){
  .contrast-grid{ grid-template-columns:1fr; }
  .contrast:nth-child(odd){ border-right:0; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,90px); }
.c-aside .c-row{ display:flex; flex-direction:column; gap:.35rem; padding:1.25rem 0; border-bottom:1px solid var(--line); }
.c-aside .c-k{ font-family:var(--font-label); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); }
.c-aside .c-v{ font-size:1rem; color:var(--fg-soft); }
.c-aside .c-v a{ color:var(--amber); text-decoration:none; }
.c-aside .c-v a:hover{ text-decoration:underline; }
.cform{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cform .full{ grid-column:1 / -1; }
.cform label{ display:flex; flex-direction:column; gap:.45rem; font-family:var(--font-label); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.cform input,.cform select,.cform textarea{
  background:var(--panel); border:1px solid var(--line-strong); padding:.85rem .9rem; outline:none;
  font-family:var(--font-body); font-size:.95rem; color:var(--fg); transition:border-color .25s ease; border-radius:0;
  width:100%; appearance:none; -webkit-appearance:none;
}
.cform textarea{ min-height:130px; resize:vertical; }
.cform input:focus,.cform select:focus,.cform textarea:focus{ border-color:var(--amber); }
.cform .invalid{ border-color:var(--err); }
.cform .ferr{ color:var(--err); font-size:.68rem; letter-spacing:.04em; min-height:.9rem; text-transform:none; }
.cform .send-row{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.cform .note{ font-family:var(--font-label); font-size:.7rem; letter-spacing:.08em; color:var(--steel); text-transform:none; }
.hp{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; opacity:0; pointer-events:none; }
.c-done{ border:1px solid var(--line-strong); background:var(--panel); padding:clamp(30px,4vw,48px); display:flex; gap:1.2rem; align-items:flex-start; }
.c-done .check{ width:34px; height:34px; border:1px solid var(--amber); display:grid; place-items:center; color:var(--amber); flex:none; }
.c-done h3{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; }
.c-done p{ color:var(--muted); margin-top:.4rem; font-size:.95rem; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.signup-wrap{ padding-bottom:clamp(72px,10vh,140px); }
.signup{ position:relative; border:1px solid var(--panel-line); background:var(--panel); padding:clamp(36px,6vw,72px); overflow:hidden; }
.signup h2{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(1.8rem,4vw,3rem); letter-spacing:var(--display-track); line-height:1.06; max-width:16ch; }
.signup h2 .w{ color:var(--amber); }
.signup p{ color:var(--muted); font-size:1rem; line-height:1.6; margin-top:1.2rem; max-width:44ch; }
.n-lists{ display:flex; gap:.6rem; margin-top:1.6rem; flex-wrap:wrap; }
.n-choice{ cursor:pointer; position:relative; }
.n-choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.n-choice span{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-brand); font-weight:600; font-size:.95rem; letter-spacing:-.02em; text-transform:lowercase;
  border:1px solid var(--line-strong); padding:.6rem .9rem; transition:border-color .2s ease, opacity .2s ease;
}
.n-choice span::before{ content:""; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--steel); background:var(--bg); transition:border-color .2s ease, background .2s ease; }
.n-choice input:checked + span{ border-color:var(--fg); }
.n-choice input:checked + span::before{ border-color:var(--amber); background:var(--amber); }
.n-choice input:not(:checked) + span{ opacity:.55; }
.n-choice input:focus-visible + span{ outline:2px solid var(--amber); outline-offset:2px; }
.n-choice .s{ color:var(--fg); font-style:normal; }
.n-choice .w{ color:var(--amber); font-style:normal; }
.signup form{ display:flex; gap:.7rem; margin-top:1.4rem; max-width:520px; flex-wrap:wrap; }
.signup input{
  flex:1 1 240px; background:var(--bg); border:1px solid var(--line-strong); padding:.9rem 1rem; outline:none;
  font-size:.95rem; color:var(--fg); transition:border-color .25s ease; border-radius:0;
}
.signup input::placeholder{ color:var(--steel); }
.signup input:focus{ border-color:var(--amber); }
.signup input.invalid{ border-color:var(--err); }
.signup .err{ color:var(--err); font-family:var(--font-label); font-size:.72rem; letter-spacing:.04em; margin-top:.7rem; min-height:1rem; width:100%; }
.signup .done{ display:flex; align-items:center; gap:1rem; margin-top:2rem; font-family:var(--font-label); font-size:.82rem; letter-spacing:.06em; color:var(--fg); }
.signup .done .check{ width:30px; height:30px; border:1px solid var(--amber); display:grid; place-items:center; color:var(--amber); flex:none; }
.signup .wm-truss{ position:absolute; right:-40px; bottom:-34px; width:300px; opacity:.06; pointer-events:none; }
.signup .wm-truss path{ stroke:var(--fg); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); padding:clamp(48px,7vw,90px) 0 clamp(28px,4vw,44px); }
.foot-top{ display:flex; justify-content:space-between; gap:clamp(36px,6vw,90px); flex-wrap:wrap; }
.foot-logo{ display:flex; align-items:center; gap:.9rem; }
.foot-logo svg{ width:42px; height:30px; }
.foot-logo .wm{ font-family:var(--font-brand); font-weight:600; font-size:1.6rem; letter-spacing:-.045em; text-transform:lowercase; }
.foot-logo .wm .s{ color:var(--fg); } .foot-logo .wm .w{ color:var(--amber); }
.foot .tagline{ color:var(--muted); margin-top:1rem; font-size:.98rem; max-width:30ch; line-height:1.55; }
.foot-cols{ display:flex; gap:clamp(40px,6vw,90px); flex-wrap:wrap; }
.foot-col h4{ font-family:var(--font-label); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); margin:0 0 1.1rem; font-weight:500; }
.foot-col a{ display:block; color:var(--muted); text-decoration:none; font-size:.95rem; margin-bottom:.7rem; transition:color .2s ease; cursor:pointer; white-space:nowrap; }
.foot-col a:hover{ color:var(--amber); }
.foot-col a .fb{ font-family:var(--font-brand); font-weight:600; letter-spacing:-.03em; text-transform:lowercase; }
.foot-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:clamp(34px,5vw,60px); padding-top:1.6rem; border-top:1px solid var(--line); }
.foot-bottom span{ font-family:var(--font-label); font-size:.7rem; letter-spacing:.1em; color:var(--steel); white-space:nowrap; }

/* ============================================================
   SCROLL REVEAL (motion-gated)
   ============================================================ */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  html[data-motion="full"] .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  html[data-motion="full"] .reveal.in{ opacity:1; transform:none; }
  html[data-motion="full"] .statement .sw{ opacity:0; transform:translateY(.5em); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--d,0s); }
  html[data-motion="full"] .statement.in .sw{ opacity:1; transform:none; }
}
html[data-motion="calm"] .reveal{ opacity:1 !important; transform:none !important; }
html[data-motion="calm"] .scroll-cue i::after{ animation:none; }
html[data-motion="calm"] .cap-row .vbar{ transform:scaleX(1); }

/* ============================================================
   TWEAK VARIANTS
   ============================================================ */
/* marquee off */
html[data-marquee="off"] .marquee{ display:none; }
/* section rhythm */
html[data-density="compact"] .block{ padding:clamp(52px,8vh,104px) 0; }
html[data-density="compact"] .cap-row{ padding:clamp(22px,3.2vw,38px) 0; }
html[data-density="compact"] .step{ padding:clamp(18px,2.6vw,30px) 0; }

/* ============================================================
   TOOLS — free editions
   ============================================================ */
.tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-bottom:0; background:var(--panel); }
.tool-card{
  position:relative; padding:clamp(24px,3vw,40px); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; display:flex; flex-direction:column; min-height:200px; transition:background .3s ease;
}
.tool-card:nth-child(3n){ border-right:0; }
.tool-card:hover{ background:var(--bg-2); }
.tool-card .t-disc{ font-family:var(--font-brand); font-weight:600; font-size:.92rem; letter-spacing:-.03em; text-transform:lowercase; }
.tool-card .t-disc .s{ color:var(--fg); } .tool-card .t-disc .w{ color:var(--amber); }
.tool-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; letter-spacing:-.01em; margin-top:.9rem; color:var(--fg); }
.tool-card p{ color:var(--muted); font-size:.92rem; line-height:1.55; margin-top:.6rem; }
.tool-card .t-free{
  margin-top:auto; padding-top:1.4rem; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-label); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg);
}
.tool-card .t-free .arr{ color:var(--amber); transition:transform .25s var(--ease); }
.tool-card:hover .t-free .arr{ transform:translateY(3px); }
.tools-cta{ display:flex; justify-content:center; margin-top:2.4rem; gap:.8rem; flex-wrap:wrap; }
@media (max-width:980px){ .tools-grid{ grid-template-columns:1fr 1fr; } .tool-card:nth-child(3n){ border-right:1px solid var(--line); } .tool-card:nth-child(2n){ border-right:0; } }
@media (max-width:640px){ .tools-grid{ grid-template-columns:1fr; } .tool-card{ border-right:0 !important; min-height:0; } }


/* ============================================================
   SUBPAGES — tools library & tool detail
   ============================================================ */
.page-hero{ padding:calc(72px + clamp(44px,8vh,92px)) 0 clamp(36px,6vh,64px); border-bottom:1px solid var(--line); }
.crumbs{ font-family:var(--font-label); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--amber); }
.crumbs .sep{ color:var(--line-strong); }
.page-hero h1{
  font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-track);
  line-height:1.04; font-size:clamp(2rem,5.4vw,3.8rem); max-width:20ch; margin-top:1.4rem; text-wrap:balance;
}
.page-hero h1 .w{ color:var(--amber); }
.page-hero .lede{ color:var(--muted); font-size:clamp(1rem,1.5vw,1.14rem); line-height:1.6; max-width:56ch; margin-top:1.3rem; }
.page-hero .meta-row{ display:flex; gap:1.6rem; margin-top:1.6rem; flex-wrap:wrap; }
.page-hero .meta{ display:flex; flex-direction:column; gap:.3rem; }
.page-hero .meta .k{ font-family:var(--font-label); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); }
.page-hero .meta .v{ font-size:.92rem; color:var(--fg-soft); }
.page-hero .meta .v .s{ color:var(--fg); } .page-hero .meta .v .w{ color:var(--amber); }

.tool-layout{ display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(32px,5vw,72px); align-items:start; }
@media (max-width:880px){ .tool-layout{ grid-template-columns:1fr; } }
.tool-main h2{ font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:-.02em; font-size:clamp(1.4rem,2.6vw,1.9rem); margin-top:clamp(36px,5vw,56px); }
.tool-main h2:first-child{ margin-top:0; }
.tool-main h2 .w{ color:var(--amber); }
.tool-main p{ color:var(--muted); line-height:1.65; margin-top:1rem; max-width:64ch; }
.tool-main ul.feat{ list-style:none; margin:1.2rem 0 0; padding:0; }
.tool-main ul.feat li{
  font-size:.95rem; color:var(--fg-soft); display:flex; gap:.8rem; padding:.65rem 0; border-bottom:1px solid var(--line); line-height:1.5;
}
.tool-main ul.feat li::before{ content:""; width:5px; height:5px; background:var(--amber); flex:none; transform:translateY(.5em); }

.dl-card{ border:1px solid var(--panel-line); background:var(--panel); padding:clamp(24px,3vw,36px); position:sticky; top:96px; }
.dl-card .mono-label{ margin-bottom:1.1rem; }
.dl-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:-.01em; }
.dl-card p{ color:var(--muted); font-size:.92rem; line-height:1.55; margin-top:.7rem; }
.dl-card .btn{ width:100%; justify-content:center; margin-top:1.4rem; }
.dl-card .spec{ list-style:none; margin:1.3rem 0 0; padding:0; }
.dl-card .spec li{ display:flex; justify-content:space-between; gap:1rem; font-size:.82rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.dl-card .spec .k{ font-family:var(--font-label); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); padding-top:.15em; }
.dl-card .spec .v{ color:var(--fg-soft); text-align:right; }
.dl-card .fineprint{ font-size:.78rem; color:var(--steel); margin-top:1rem; line-height:1.5; }

.cmp{ width:100%; border-collapse:collapse; margin-top:1.4rem; border:1px solid var(--line); }
.cmp th,.cmp td{ text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:top; }
.cmp th{ font-family:var(--font-label); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); background:var(--bg-2); font-weight:500; }
.cmp td:first-child{ color:var(--fg-soft); width:38%; }
.cmp td{ color:var(--muted); }
.cmp .yes{ color:var(--amber); font-family:var(--font-label); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.cmp .no{ color:var(--steel); font-family:var(--font-label); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }

.faq{ margin-top:1.2rem; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:1.05rem 0; font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--fg);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--amber); font-family:var(--font-label); flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq .faq-a{ padding:0 0 1.2rem; color:var(--muted); line-height:1.65; max-width:64ch; }
.faq .faq-a p{ margin:0 0 .7rem; }

.related{ margin-top:clamp(40px,6vw,64px); }
.related h2{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.02em; }

/* ============================================================
   IDENTITY LAYER — structural drawing language
   ============================================================ */

/* side rail — the page chord; load node travels with scroll */
.side-rail{ position:fixed; left:30px; top:92px; bottom:34px; width:1px; background:var(--line-strong); z-index:40; }
.side-rail .fill{ position:absolute; top:0; left:0; width:1px; height:0%; background:var(--amber); display:block; }
.side-rail .tip{
  position:absolute; left:50%; top:0; width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--amber); background:var(--bg); transform:translate(-50%,-50%); display:block;
}
.side-rail .tick{ position:absolute; left:-3px; width:7px; height:1px; background:var(--steel); display:block; }
@media (max-width:1180px){ .side-rail{ display:none; } }

/* drawing title rows */
.dwg{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--font-label); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  border-bottom:1px solid var(--line); padding-bottom:.85rem; margin-bottom:clamp(30px,4.5vw,52px);
}
.dwg .d-l{ display:inline-flex; align-items:center; gap:.9em; white-space:nowrap; }
.dwg .d-r{ white-space:nowrap; }
.dwg .d-l b{ width:6px; height:6px; background:var(--amber); }
@media (max-width:640px){ .dwg .d-r{ display:none; } }

/* truss divider bands */
.truss-divider{ overflow:hidden; line-height:0; }
.truss-divider svg{ display:block; width:100%; height:30px; }
.truss-divider path{ fill:none; stroke:var(--line-strong); stroke-width:1.4; vector-effect:non-scaling-stroke; }

/* hero dimension annotation (built by JS above the bridge) */
.hero-truss .dim{ display:none; align-items:center; gap:16px; margin-bottom:20px; }
@media (min-height:820px){ .hero-truss .dim{ display:flex; } }
.hero-truss .dim i{ flex:1; height:1px; background:var(--line-strong); position:relative; display:block; }
.hero-truss .dim i::before, .hero-truss .dim i::after{ content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--line-strong); }
.hero-truss .dim i:first-child::before{ left:0; } .hero-truss .dim i:first-child::after{ right:0; }
.hero-truss .dim i:last-child::before{ left:0; } .hero-truss .dim i:last-child::after{ right:0; }
.hero-truss .dim span{
  font-family:var(--font-label); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--steel); white-space:nowrap;
}
@media (prefers-reduced-motion: no-preference){
  html[data-motion="full"] .hero-truss .dim{ opacity:0; animation:h-fade .9s ease 1.9s forwards; }
}
@media (max-width:680px){ .hero-truss .dim span{ letter-spacing:.14em; } }

/* statement backdrop truss */
.statement{ position:relative; overflow:hidden; }
.statement .st-truss{
  position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  width:130%; min-width:900px; opacity:.05; pointer-events:none;
}
.statement .st-truss path{ fill:none; stroke:var(--fg); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.statement .st-truss circle{ fill:var(--bg); stroke:var(--fg); stroke-width:2; }
.statement blockquote{ position:relative; z-index:1; }

/* footer title block */
.title-block{ display:grid; grid-template-columns:1.3fr 1.7fr 1fr .7fr .6fr; border:1px solid var(--line); margin-top:clamp(34px,5vw,60px); }
.tb-cell{ padding:.75rem 1rem .8rem; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.tb-cell:last-child{ border-right:0; }
.tb-cell .tb-k{ font-family:var(--font-label); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); }
.tb-cell .tb-v{ font-family:var(--font-label); font-size:.78rem; letter-spacing:.06em; color:var(--fg-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-cell .tb-v .w{ color:var(--amber); }
@media (max-width:760px){
  .title-block{ grid-template-columns:1fr 1fr; }
  .tb-cell:nth-child(2n){ border-right:0; }
  .tb-cell{ border-bottom:1px solid var(--line); }
  .tb-cell:nth-last-child(-n+1){ border-bottom:0; }
}

/* identity layer off */
html[data-brand="minimal"] .side-rail,
html[data-brand="minimal"] .dwg,
html[data-brand="minimal"] .truss-divider,
html[data-brand="minimal"] .hero-truss .dim,
html[data-brand="minimal"] .statement .st-truss,
html[data-brand="minimal"] .title-block{ display:none; }

/* ============================================================
   TEASER STATE — previews before launch
   ============================================================ */
.preview-shot{
  display:block; width:100%; height:auto; border:1px solid var(--line-strong);
  margin-top:1.4rem;
}
/* animated preview: pans through the full-height capture like a guided scroll.
   All captures are 1280x2400; the 16:10 frame shows a third, so the pan ends
   at -66.667% for every tool. Gated on motion settings; hover pauses. */
.preview-anim{
  display:block; position:relative; overflow:hidden; aspect-ratio:16 / 10;
  border:1px solid var(--line-strong); margin-top:1.4rem;
}
.preview-anim img{ display:block; width:100%; height:auto; }
@media (prefers-reduced-motion: no-preference){
  html[data-motion="full"] .preview-anim img{ animation:preview-pan 20s ease-in-out infinite alternate; }
  html[data-motion="full"] .preview-anim:hover img{ animation-play-state:paused; }
}
@keyframes preview-pan{
  0%, 7%{ transform:translateY(0); }
  93%, 100%{ transform:translateY(-66.667%); }
}
.preview-ph{
  border:1px solid var(--line-strong); margin-top:1.4rem; padding:2.2rem 1.4rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center;
}
.preview-ph svg{ width:120px; height:auto; opacity:.45; }
.preview-ph svg path{ fill:none; stroke:var(--amber); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.preview-ph svg line{ stroke:var(--steel); stroke-width:1.2; opacity:.6; }
.preview-ph span{ font-family:var(--font-label); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); }
.soon-note{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1rem;
  font-family:var(--font-label); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.soon-note::before{ content:""; width:7px; height:7px; border-radius:50%; border:1.4px solid var(--amber); }

/* ============================================================
   MOBILE REFINEMENTS
   ============================================================ */
@media (max-width:640px){
  /* contact form: one column on phones */
  .cform{ grid-template-columns:1fr; }
  /* comparison tables scroll sideways instead of crushing */
  .cmp{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* newsletter form: full-width stack */
  .signup form{ flex-direction:column; align-items:stretch; }
  .signup .btn{ justify-content:center; }
  /* corner ticks sit behind content comfortably on small screens */
  .ticks span{ width:11px; height:11px; }
  .ticks .tl,.ticks .tr{ top:10px; } .ticks .bl,.ticks .br{ bottom:10px; }
  .ticks .tl,.ticks .bl{ left:10px; } .ticks .tr,.ticks .br{ right:10px; }
  /* sticky download card behaves as normal flow on phones */
  .dl-card{ position:static; }
}