/*
Theme Name: FRCNC
Theme URI: https://frontrangecnc.com
Author: Front Range CNC
Description: Purpose-built, page-builder-free theme for frontrangecnc.com. A thin shell that renders AI-authored, body-only page content in the locked "Data-Plate" design system (Homepage system alignment handoff, 2026-07-27). No Elementor, no Gutenberg blocks, no wpautop. Styling lives here as the single source of truth.
Version: 2.1.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: frcnc
*/

/* ============================================================
   FRCNC DESIGN SYSTEM — "Data-Plate" (locked 2026-07-27)
   Warm-white light ground · teal-only accent · Big Shoulders /
   IBM Plex Sans / IBM Plex Mono · hairline borders · no gradients
   (except dark scrims over photos), no glow, no bounce/scale.
   Single source of truth for the whole site.
   ============================================================ */

:root{
  /* brand */
  --teal:#04848c; --teal-hover:#036970; --teal-deep:#024a50;
  --rust:#c05530;                 /* secondary — sparingly */
  /* dark neutrals */
  --black:#0a0a0a; --charcoal:#1a1a1a; --slate:#2d2d2d; --graphite:#6b6b6b;
  /* light neutrals */
  --warm-white:#fdfcfa; --cream:#f9f7f4; --canvas:#f0ede8; --bone:#e4e0d8; --stone:#c4beb3;
  /* semantic */
  --bg:var(--warm-white); --bg-alt:var(--cream); --bg-canvas:var(--canvas);
  --fg:var(--charcoal); --fg-strong:var(--black); --fg-muted:#444; --fg-subtle:var(--graphite);
  --fg-on-dark:#f5f3ef; --fg-on-dark-muted:#b4afa6;
  --accent:var(--teal); --accent-hover:var(--teal-hover); --accent-pressed:var(--teal-deep);
  --border:var(--bone); --border-strong:var(--stone); --border-on-dark:#3a3a3a;
  /* legacy var aliases — so pre-v2 inline styles in page content resolve to Data-Plate */
  --gray:var(--fg-subtle); --glow:var(--teal); --line:var(--border); --ink-legacy:var(--fg-strong); --panel:var(--surface);
  /* type */
  --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
  /* system */
  --max:1280px; --gutter:clamp(20px,4vw,48px);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --shadow-card:0 1px 0 rgba(10,10,10,.04),0 12px 28px -8px rgba(10,10,10,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:17px;line-height:1.6}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none;transition:color 180ms var(--ease),border-color 180ms var(--ease),background 180ms var(--ease)}
a:hover{color:var(--accent-hover)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* type primitives */
h1,h2,h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;color:var(--fg-strong);margin:0;text-wrap:balance}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle)}
.eyebrow.teal{color:var(--teal)}
.lede{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--fg-muted);text-wrap:pretty}
.mono{font-family:var(--font-mono)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:16px;
  letter-spacing:.03em;text-transform:uppercase;padding:14px 28px;border-radius:4px;border:1px solid transparent;
  cursor:pointer;line-height:1;transition:all 170ms var(--ease)}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-hover)}
.btn-solid:active{background:var(--accent-pressed);transform:translateY(1px)}
.btn-ghost{color:var(--accent);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-ondark{color:var(--fg-on-dark);border-color:var(--border-on-dark);background:rgba(10,10,10,.35)}
.btn-ondark:hover{border-color:#6b6b6b}

/* ============================================================ NAV (header.php)
   Styles the theme's current markup: <nav><div.nav-in><a.wordmark>..
   <div.nav-links><a.nav-cta>. Sticky dark translucent bar per handoff. */
nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-on-dark)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);height:68px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-on-dark);display:flex;align-items:center}
.wordmark span{color:var(--teal)}
.wordmark img{height:24px;width:auto;display:block}
.foot-brand .mk img{height:21px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-muted)}
.nav-links a:hover{color:#f5f3ef}
/* machines dropdown */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-toggle{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;outline:none}
.nav-dd-toggle::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform 180ms var(--ease)}
.nav-dd:hover .nav-dd-toggle,.nav-dd:focus-within .nav-dd-toggle{color:#f5f3ef}
.nav-dd:hover .nav-dd-toggle::after,.nav-dd:focus-within .nav-dd-toggle::after{transform:rotate(225deg) translateY(-1px)}
.nav-dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:190px;background:rgba(10,10,10,.96);backdrop-filter:blur(8px);border:1px solid var(--border-on-dark);border-radius:6px;padding:8px;opacity:0;visibility:hidden;transition:opacity 160ms var(--ease),transform 160ms var(--ease);box-shadow:0 16px 34px -10px rgba(0,0,0,.55);z-index:60}
.nav-dd-menu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.nav-dd-menu a{display:block;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-dark-muted);padding:9px 12px;border-radius:4px}
.nav-dd-menu a:hover{background:rgba(255,255,255,.06);color:var(--teal)}
.nav-cta{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--accent);padding:10px 20px;border-radius:4px}
.nav-cta:hover{background:var(--accent-hover);color:#fff}
/* Mobile nav toggle — pure-CSS checkbox hack. Desktop: burger hidden, wrapper
   is display:contents so nav-links + cta flow into the flex bar exactly as before. */
.nav-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:none}
.nav-collapse{display:contents}

/* ============================================================ HERO */
.hero{position:relative;background:var(--black);overflow:hidden;padding:0}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.88) 0%,rgba(10,10,10,.72) 45%,rgba(10,10,10,.55) 100%),
  radial-gradient(ellipse 70% 60% at 50% 42%,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 70%)}
.hero-body{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:clamp(96px,12vw,160px) var(--gutter) clamp(60px,8vw,100px);text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-body .eyebrow{color:var(--teal);font-size:13px;margin-bottom:20px}
.hero h1{font-weight:800;font-size:clamp(72px,10vw,148px);line-height:.95;color:var(--fg-on-dark);margin-bottom:24px}
.hero-sub{font-family:var(--font-body);font-size:20px;line-height:1.55;color:var(--fg-on-dark-muted);max-width:580px;margin:0 auto 40px;text-wrap:pretty}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* stat bar */
.statbar{position:relative;z-index:2;border-top:1px solid var(--border-on-dark);background:rgba(10,10,10,.6);backdrop-filter:blur(8px)}
.statbar-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,1fr)}
.statbar .cell{padding:22px 24px 22px 0;border-right:1px solid var(--border-on-dark)}
.statbar .cell:last-child{border-right:0}
.statbar .n{font-family:var(--font-mono);font-weight:600;font-size:26px;color:var(--fg-on-dark);font-variant-numeric:tabular-nums}
.statbar .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-muted);margin-top:4px}

/* ============================================================ SECTIONS */
.sec{padding:clamp(72px,8vw,112px) 0}
.sec-alt{background:var(--bg-alt)}
.sec-canvas{background:var(--bg-canvas)}
.sec-dark{background:var(--charcoal);color:var(--fg-on-dark)}
.sec-black{background:var(--black);color:var(--fg-on-dark)}
.b-bottom{border-bottom:1px solid var(--border)}
.b-top{border-top:1px solid var(--border)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4.5vw,64px);align-items:center}
h2{font-size:clamp(36px,4vw,56px);line-height:1.02}
.sec-dark h2,.sec-black h2,.sec-dark h3{color:var(--fg-on-dark)}

/* pricing promise + included list */
.pp-copy .eyebrow{margin-bottom:16px}
.pp-copy h2{margin-bottom:20px}
.pp-copy p{color:var(--fg-muted);font-size:17px;line-height:1.6;margin-bottom:16px;text-wrap:pretty}
.pp-copy .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.included{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:32px;box-shadow:var(--shadow-card)}
.included .ihead{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.irow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid var(--border)}
.irow .nm{font-family:var(--font-body);font-size:15px;color:var(--fg)}
.irow .in{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--accent);white-space:nowrap}
.ifoot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px}
.ifoot .fk{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle)}
.ifoot .fv{font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--fg-strong);font-variant-numeric:tabular-nums}

/* beauty shot */
.beauty-img{position:relative;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/5}
.beauty-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.beauty-txt .eyebrow{margin-bottom:16px}
.beauty-txt h2{margin-bottom:20px}
.beauty-txt p{color:var(--fg-muted);font-size:17px;line-height:1.6;margin-bottom:16px;text-wrap:pretty}
.beauty-txt .btn{margin-top:16px}

/* lineup */
.lineup-intro{text-align:center;max-width:640px;margin:0 auto clamp(40px,5vw,56px)}
.lineup-intro .eyebrow{margin-bottom:16px;display:block}
.lineup-intro h2{font-size:clamp(40px,4.5vw,64px);margin-bottom:12px}
.lineup-intro p{color:var(--fg-muted);font-size:17px;line-height:1.6;text-wrap:pretty}
.lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.model{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:26px 24px;display:flex;flex-direction:column;transition:box-shadow 180ms var(--ease),border-color 180ms var(--ease)}
.model:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card)}
.model.feature{border-color:color-mix(in srgb,var(--teal) 55%,var(--border))}
.model .badge{position:absolute;top:-1px;right:20px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:0 0 4px 4px}
.model h3{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1;text-transform:uppercase;color:var(--fg-strong);margin-bottom:6px}
.model .m-price{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:16px}
.model>p{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--fg-muted);margin-bottom:18px;min-height:66px;text-wrap:pretty}
.m-specs{border-top:1px solid var(--border);margin-top:auto}
.m-specs>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.m-specs>div:last-child{border-bottom:0}
.m-specs span{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle)}
.m-specs b{font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--fg);text-align:right}
.model .m-btn{margin-top:18px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.03em;color:var(--accent);border:1px solid var(--border);padding:10px 0;border-radius:4px;transition:all 170ms var(--ease)}
.model .m-btn:hover{border-color:var(--accent);color:var(--accent-hover)}

/* pillars (dark) */
.pillars-head .eyebrow{color:var(--teal);margin-bottom:16px;display:block}
.pillars-head h2{max-width:760px;margin-bottom:48px}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{border:1px solid var(--border-on-dark);border-radius:6px;padding:26px 24px}
.pillar .ic{width:28px;height:28px;color:var(--teal)}
.pillar h3{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.05;text-transform:uppercase;color:var(--fg-on-dark);margin:16px 0 10px}
.pillar p{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--fg-on-dark-muted);text-wrap:pretty}

/* companion + facility */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.duo-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:30px;display:flex;gap:20px;align-items:flex-start}
.duo-card .ic{width:32px;height:32px;color:var(--accent);flex-shrink:0}
.duo-card h3{font-family:var(--font-display);font-weight:700;font-size:24px;text-transform:uppercase;color:var(--fg-strong);margin-bottom:8px}
.duo-card p{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--fg-muted);text-wrap:pretty}
.sec-companion{padding:clamp(48px,7vw,80px) 0}

/* CTA */
.cta-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.cta-grid h2{font-weight:800;font-size:clamp(48px,6vw,88px);line-height:.95;margin-bottom:20px}
.cta-grid h2 .teal{color:var(--teal)}
.cta-grid p{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--fg-on-dark-muted);max-width:480px;text-wrap:pretty}
.cta-stack{display:flex;flex-direction:column;gap:14px}
.cta-stack .btn{justify-content:center}
.cta-cap{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-muted);text-align:center}

/* ============================================================ FOOTER (footer.php)
   Current markup is a simple <footer><div.foot-in><span>..</span></div>; styled
   below as a clean dark bar. The richer .foot-grid classes apply once footer.php
   is upgraded to the 4-column handoff layout. */
footer{background:var(--charcoal);border-top:1px solid var(--border-on-dark);color:var(--fg-on-dark)}
.foot-in{max-width:var(--max);margin:0 auto;padding:clamp(40px,5vw,56px) var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-in>span{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-muted)}
.foot-in-rich{max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,72px) var(--gutter) 32px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--border-on-dark)}
.foot-brand .mk{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-on-dark);display:inline-block;margin-bottom:16px}
.foot-brand .mk span{color:var(--teal)}
.foot-brand p{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--fg-on-dark-muted);max-width:320px;margin-bottom:16px;text-wrap:pretty}
.foot-contact{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;display:flex;flex-direction:column;gap:6px}
.foot-contact a{color:var(--fg-on-dark-muted)}
.foot-contact a:hover{color:#f5f3ef}
.foot-col h4{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-muted);margin-bottom:14px}
.foot-col a{display:block;font-family:var(--font-body);font-size:14px;color:var(--fg-on-dark);padding:4px 0}
.foot-col a:hover{color:var(--teal)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:24px;flex-wrap:wrap}
.foot-bar span{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-dark-muted)}

/* ============================================================ MOTION
   Scroll-reveal with a JS-INDEPENDENT failsafe: the CSS animation reveals
   every element ~1.5s after first paint even if the observer script is slow
   or fails, so content is never stuck invisible. When JS is ready it adds
   .in (cancelling the animation) for the nicer staggered scroll reveal. */
[data-reveal]{opacity:0;transform:translateY(22px);animation:frcnc-reveal 1ms linear 1.5s forwards}
@keyframes frcnc-reveal{to{opacity:1;transform:none}}
[data-reveal].in{opacity:1;transform:none;animation:none}

/* ============================================================ RESPONSIVE */
@media(max-width:1000px){
  .lineup{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  /* --- Mobile navigation --- */
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-burger span{display:block;height:2px;width:100%;background:var(--fg-on-dark);border-radius:2px;transition:transform 220ms var(--ease),opacity 160ms var(--ease)}
  .nav-cb:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-cb:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-cb:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-collapse{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 22px;background:rgba(12,12,12,.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-on-dark);box-shadow:0 22px 40px -14px rgba(0,0,0,.6);max-height:calc(100vh - 68px);overflow-y:auto}
  .nav-cb:checked ~ .nav-collapse{display:flex}
  .nav-collapse .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav-collapse .nav-links > a{padding:15px 2px;font-size:13px;border-bottom:1px solid var(--border-on-dark)}
  .nav-collapse .nav-dd{display:block;position:static}
  .nav-collapse .nav-dd-toggle{width:100%;padding:15px 2px;border-bottom:1px solid var(--border-on-dark);cursor:default;color:var(--fg-on-dark)}
  .nav-collapse .nav-dd-toggle::after{display:none}
  .nav-collapse .nav-dd-menu{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding:4px 0 6px 16px}
  .nav-collapse .nav-dd-menu::before{display:none}
  .nav-collapse .nav-dd-menu a{padding:12px 8px;font-size:13px}
  .nav-collapse .nav-cta{margin-top:16px;text-align:center;padding:14px 20px;font-size:15px}
  .statbar-in{grid-template-columns:repeat(2,1fr)}
  .statbar .cell:nth-child(2){border-right:0}
  .split,.cta-grid,.duo{grid-template-columns:1fr}
  .split.rev .beauty-img{order:-1}
  .lineup,.pillars,.foot-grid{grid-template-columns:1fr}
  .foot-grid{gap:28px}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(56px,16vw,84px)}
  .statbar-in{grid-template-columns:1fr}
  .statbar .cell{border-right:0;border-bottom:1px solid var(--border-on-dark)}
}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================ LEGACY COMPONENT COMPAT
   Restyles the pre-v2 class vocabulary still used by not-yet-rebuilt pages
   (product & content pages: Core/Foundation/Elite/etc.) into the Data-Plate
   look, so the whole site reads consistently until each body is rebuilt onto
   the new classes. `.sec`/`.hero` (class selectors) always win over bare
   `section` here, so the homepage is unaffected. */
section{padding:clamp(72px,8vw,112px) 0}          /* new pages override via .sec */
.story,.field,.safety,.build,section.cta{border-top:1px solid var(--border)}

/* section eyebrow + lede */
.sec-eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:16px}
.lede{max-width:640px;color:var(--fg-muted);margin-top:16px}

/* spec ticker */
.ticker{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-alt);padding:0}
.ticker-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,1fr)}
.tick{padding:20px 10px;border-left:1px solid var(--border)}
.tick:first-child{border-left:none}
.tick b{display:block;font-family:var(--font-mono);font-weight:600;font-size:clamp(17px,2.3vw,24px);color:var(--fg-strong);font-variant-numeric:tabular-nums}
.tick s{display:block;text-decoration:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);margin-top:4px}

/* feature split (.story) */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4.5vw,64px);align-items:center;margin-top:8px}
.story-txt p{color:var(--fg-muted);margin-top:16px}
.story-steps{margin-top:26px;border-left:2px solid var(--teal);padding-left:22px;display:grid;gap:18px}
.story-steps b{display:block;font-weight:600;color:var(--fg-strong)}
.story-steps span{font-size:14px;color:var(--fg-muted)}
.story-img{border:1px solid var(--border);border-radius:6px;overflow:hidden;box-shadow:var(--shadow-card);background:var(--surface)}
.story-img img{display:block;width:100%}
.story-img figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);padding:12px 14px}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}}

/* field gallery (.gal) */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.gal figure{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--surface)}
.gal figure.wide{grid-column:span 2}
.gal img{width:100%;height:300px;object-fit:cover;display:block}
.gal figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);padding:11px 14px}
@media(max-width:820px){.gal{grid-template-columns:1fr}.gal figure.wide{grid-column:span 1}.gal img{height:240px}}

/* legacy centered CTA well — scoped to section.cta so it never hits
   .pp-copy .cta button groups on the homepage */
section.cta{background:var(--black);color:var(--fg-on-dark);text-align:center}
section.cta h2{color:var(--fg-on-dark)}
.cta-in{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.cta-in p{color:var(--fg-on-dark-muted);margin-top:16px;font-size:17px;line-height:1.6}
section.cta .btn{margin-top:30px}

/* dev roadmap + safety split — keep structure from collapsing */
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.dev-card{border:1px solid var(--border);border-radius:6px;padding:26px 24px;background:var(--surface)}
.dev-card h4{font-family:var(--font-display);font-weight:700;font-size:22px;text-transform:uppercase;margin:8px 0;color:var(--fg-strong)}
.dev-card p{color:var(--fg-muted);font-size:14px}
.dev-status{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-subtle)}
.safety-in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,50px);align-items:center;margin-top:8px}
.safety-in h3{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4vw,46px);text-transform:uppercase;line-height:1;color:var(--fg-strong)}
.safety-in p{color:var(--fg-muted);margin-top:16px}
@media(max-width:880px){.safety-in,.dev-grid{grid-template-columns:1fr}}

/* feature split helpers (.split / .split-txt / .split-media / .reverse) */
.split-txt p{color:var(--fg-muted);margin-top:16px}
.split-media img{width:100%;border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow-card)}
.split.reverse .split-media{order:-1}
@media(max-width:820px){.split.reverse .split-media{order:0}}

/* WHAT'S INCLUDED (.incl) — hairline data-plate grid of items */
.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:36px}
.incl>div{background:var(--bg);padding:20px 22px}
.incl b{display:block;position:relative;font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--fg-strong);padding-left:26px}
.incl b::before{content:'';position:absolute;left:2px;top:2px;width:7px;height:12px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(42deg)}
.incl span{display:block;font-size:13px;line-height:1.5;color:var(--fg-muted);margin-top:6px;padding-left:26px}
@media(max-width:900px){.incl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.incl{grid-template-columns:1fr}}

/* SIZES / HONEST ADD-ONS (.sizes / .size / .price / .size-specs) */
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.size{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:6px;padding:30px 28px;background:var(--surface)}
.size.pop{border-color:color-mix(in srgb,var(--teal) 55%,var(--border));box-shadow:var(--shadow-card)}
.size h3{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1;text-transform:uppercase;color:var(--fg-strong)}
.size .price{font-family:var(--font-mono);font-weight:600;font-size:28px;color:var(--teal);margin:8px 0 20px;font-variant-numeric:tabular-nums}
.size-specs{border-top:1px solid var(--border);margin-bottom:22px}
.size-specs>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border)}
.size-specs>div:last-child{border-bottom:0}
.size-specs span{font-family:var(--font-body);font-size:14px;color:var(--fg-muted)}
.size-specs b{font-family:var(--font-mono);font-weight:500;font-size:13px;color:var(--fg-strong);text-align:right;font-variant-numeric:tabular-nums}
.size .btn{margin-top:auto;justify-content:center}
@media(max-width:760px){.sizes{grid-template-columns:1fr}}

/* FULL SPECIFICATIONS (.spectable) — two-column data plate */
.spectable{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,56px);margin-top:36px;border-top:1px solid var(--border)}
.spectable>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 2px;border-bottom:1px solid var(--border)}
.spectable span{font-family:var(--font-body);font-size:14px;color:var(--fg-muted)}
.spectable b{font-family:var(--font-mono);font-weight:500;font-size:13px;color:var(--fg-strong);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:720px){.spectable{grid-template-columns:1fr;gap:0}}

/* teal period accent on machine-name headings (THE CORE. / THE FOUNDATION.) */
.pd{color:var(--teal)}

/* PROOF / WARRANTY STATS (.proof) — 3 big stats in a hairline plate */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:36px}
.proof>div{background:var(--bg);padding:32px 28px}
.proof b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,3.6vw,50px);line-height:1;text-transform:uppercase;color:var(--fg-strong)}
.proof span{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);margin-top:10px}
@media(max-width:640px){.proof{grid-template-columns:1fr}}

/* VALUE STACK (.valuestack) — Elite "what others charge vs $0 included" */
.valuestack{border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:36px;background:var(--surface)}
.vstack-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 26px;background:var(--charcoal)}
.vstack-head .label{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-dark-muted)}
.vstack-head .zero{font-family:var(--font-display);font-weight:700;font-size:22px;text-transform:uppercase;color:var(--teal)}
.vrow{display:grid;grid-template-columns:1.5fr 1fr auto;gap:16px;align-items:baseline;padding:14px 26px;border-top:1px solid var(--border)}
.vrow .item{font-family:var(--font-body);font-size:15px;color:var(--fg-strong)}
.vrow .cost{font-family:var(--font-mono);font-size:13px;color:var(--fg-subtle);text-decoration:line-through;font-variant-numeric:tabular-nums;text-align:right}
.vrow .inc{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);text-align:right;white-space:nowrap}
@media(max-width:640px){.vrow{grid-template-columns:1fr auto}.vrow .cost{grid-column:1;text-align:left}}

/* FOUNDER PULL-QUOTE (.note) */
.note{max-width:840px;margin-top:44px;padding-top:32px;border-top:1px solid var(--border)}
.note p{font-family:var(--font-body);font-size:clamp(20px,2.2vw,26px);line-height:1.45;color:var(--fg-strong);margin:0;text-wrap:pretty}
.note cite{display:block;margin-top:18px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-style:normal}

/* COMPARISON TABLE (.compare) — Foundation column (.feat) highlighted teal */
.compare{margin-top:36px;overflow-x:auto;border:1px solid var(--border);border-radius:6px}
.compare table{width:100%;border-collapse:collapse;min-width:660px}
.compare th,.compare td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--border)}
.compare thead th{font-family:var(--font-display);font-weight:700;font-size:20px;text-transform:uppercase;color:var(--fg-strong);border-bottom:1px solid var(--border-strong)}
.compare thead th.feat{color:var(--teal)}
.compare tbody th{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle)}
.compare tbody td{font-family:var(--font-body);font-size:14px;color:var(--fg);font-variant-numeric:tabular-nums}
.compare .feat{background:color-mix(in srgb,var(--teal) 7%,transparent)}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0}
.compare .pricerow th,.compare .pricerow td{font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--fg-strong);border-top:1px solid var(--border-strong)}
.compare .pricerow td.feat{color:var(--teal)}

/* CROSS-LINK LINEUP STRIP (bottom of each product page — easy jump between machines) */
.lineup-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(36px,5vw,48px)}
.lc{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:6px;padding:24px 22px;background:var(--bg);transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease),transform 180ms var(--ease)}
.lc[href]:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card);transform:translateY(-3px)}
.lc.current{border-color:color-mix(in srgb,var(--teal) 50%,var(--border));background:color-mix(in srgb,var(--teal) 5%,var(--bg))}
.lc-name{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1;text-transform:uppercase;color:var(--fg-strong)}
.lc-price{font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--teal);margin:5px 0 12px;font-variant-numeric:tabular-nums}
.lc-desc{font-size:13.5px;line-height:1.5;color:var(--fg-muted);margin-bottom:18px}
.lc-go{margin-top:auto;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.lc.current .lc-go{color:var(--fg-subtle)}
@media(max-width:760px){.lineup-strip{grid-template-columns:1fr}}

/* 4-machine lineup strip (state pages — Lite/Core/Foundation/Elite) */
.lineup-strip.wide{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.lineup-strip.wide{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lineup-strip.wide{grid-template-columns:1fr}}