/* ── Design tokens: mobile values are the DEFAULT, desktop overrides them
   in the single consolidated (min-width:761px) block below. Add new
   desktop-only enhancements there, never as a new max-width block --
   see README "Mobile-First Design System" section for the rule. ── */
:root{color-scheme:dark;
  --bp-desktop:761px;
  --gap-sm:16px;
  --gap-md:24px;
  --gap-lg:24px;
  --pad-section:48px 20px;
  --pad-nav:10px 20px 6px;
  --type-h2:24px;
  --hero-pad:64px 0 40px;
  --hero-min-h:100vh;
}
@media (min-width:761px){
  :root{
    --gap-lg:48px;
    --pad-section:64px 24px;
    --pad-nav:12px 28px 8px;
    --type-h2:30px;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#120a06;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f5e9dc;min-height:100vh}
a{color:inherit;text-decoration:none}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");}
.bgGlow{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle, rgba(200,120,10,0.13) 0%, transparent 70%);filter:blur(70px);pointer-events:none;z-index:0}
.wrap{position:relative;z-index:2}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:var(--pad-nav);background:rgba(10,6,1,0.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(200,135,10,0.14)}
.navLogo{font-size:19px;font-weight:900;letter-spacing:-0.02em;color:#c8870a;text-shadow:0 0 24px rgba(200,135,10,0.35)}
.navLinks{display:none}
.navLinks a{font-size:14px;color:rgba(240,232,216,0.72);transition:color .15s}
.navLinks a:hover{color:#f0e8d8}
.navCtas{display:flex;align-items:center;gap:10px}
.btnGhost{padding:9px 16px;border-radius:999px;border:1px solid rgba(200,135,10,0.3);background:transparent;color:#f0e8d8;font-size:13px;font-weight:600;cursor:pointer;display:inline-block}
.btnPrimary{padding:9px 18px;border-radius:999px;border:none;background:#c8870a;color:#1a0e00;font-size:13px;font-weight:700;cursor:pointer;display:inline-block;box-shadow:0 4px 18px rgba(200,135,10,0.25)}
.btnPrimary:hover,.btnGhost:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btnPrimary,.btnGhost{transition:filter .15s ease, transform .15s ease}
@media (prefers-reduced-motion: reduce){.btnPrimary:hover,.btnGhost:hover{transform:none}}
.navBurger{display:block;background:none;border:none;color:#f0e8d8;font-size:22px;cursor:pointer}
.navMobilePanel{display:none;flex-direction:column;position:fixed;inset:0;z-index:60;background:rgba(10,6,1,0.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:80px 24px 24px;gap:4px}
.navMobilePanel.open{display:flex}
.navMobilePanel a{font-size:20px;font-weight:700;color:#f0e8d8;padding:16px 0;border-bottom:1px solid rgba(200,135,10,0.14)}
.navMobilePanel .navCtas{margin-top:20px;gap:12px}
.navMobileClose{position:fixed;top:16px;right:20px;z-index:61;background:none;border:none;color:#f0e8d8;font-size:26px;cursor:pointer;display:none}
.navMobileClose.open{display:block}
.heroBg{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;height:auto;padding:var(--hero-pad)}
.heroBg[data-tall="true"]{min-height:var(--hero-min-h)}
.heroImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.12);transition:transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94);z-index:0;pointer-events:none}
.heroOverlay{position:absolute;inset:0;z-index:1;pointer-events:none}
.heroGlow{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;filter:blur(60px);z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform 0.9s ease}
.heroContent{position:relative;z-index:3;width:100%;max-width:1080px;margin:0 auto;padding:0 24px;opacity:0;transform:translateY(20px);animation:heroIn 0.7s ease forwards}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
.blueprintBg{position:absolute;inset:0;z-index:0;background-color:#0a1420;background-image:linear-gradient(rgba(120,170,220,0.16) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,220,0.16) 1px,transparent 1px),linear-gradient(rgba(120,170,220,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,220,0.08) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;transition:background-position 0.6s ease}
.section{max-width:1080px;margin:0 auto;padding:var(--pad-section)}
.sectionTight{padding:40px 24px}
.label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(200,170,100,0.55);font-weight:700;margin-bottom:10px}
h1{font-size:clamp(28px,6.5vw,44px);font-weight:900;letter-spacing:-0.03em;line-height:1.08;color:#f7f1e6}
h2{font-size:var(--type-h2);font-weight:800;letter-spacing:-0.02em;line-height:1.15;color:#f7f1e6}
p.lead{font-size:17px;line-height:1.6;color:rgba(240,232,216,0.7);max-width:640px}
.card{background:rgba(20,16,10,0.55);border:1px solid rgba(200,135,10,0.16);border-radius:16px;padding:24px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(251,130,57,.25);border-color:rgba(200,135,10,0.35)}
@media (prefers-reduced-motion: reduce){.card:hover{transform:none}}
.tabRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabBtn{font-family:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:20px;border:1px solid rgba(200,135,10,0.25);background:transparent;color:#c9bfa8;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;gap:6px}
.tabBtn:hover{border-color:rgba(200,135,10,0.5);color:#f0e8d8}
.tabBtn--active,.tabBtn--active:hover{background:rgba(251,130,57,0.15);border-color:#c8870a;color:#c8870a}
.tabPanel{display:none}
.tabPanel--active{display:block}
.tabSub{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(200,135,10,0.12)}
.tabSub:first-child{border-top:none;padding-top:0}

.grid2,.grid3{display:grid;grid-template-columns:1fr;gap:var(--gap-sm)}
.footer{border-top:1px solid rgba(200,135,10,0.12);padding:32px 24px;margin-top:40px}
.footerInner{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.footerLinks{display:flex;gap:20px;flex-wrap:wrap}
.footerLinks a{font-size:13px;color:rgba(240,232,216,0.55)}
.footerLinks a:hover{color:#f0e8d8}
.muted{color:rgba(240,232,216,0.55)}
.faqItem{border-bottom:1px solid rgba(200,135,10,0.14);padding:18px 0}
.faqQ{font-size:16px;font-weight:700;color:#f0e8d8;margin-bottom:8px}
.faqA{font-size:14px;line-height:1.6;color:rgba(240,232,216,0.65)}
.priceBadge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#c8870a;background:rgba(200,135,10,0.12);border:1px solid rgba(200,135,10,0.3);border-radius:999px;padding:4px 10px;margin-bottom:14px}
.priceAmt{font-size:36px;font-weight:900;letter-spacing:-0.02em;color:#f7f1e6;margin-bottom:4px}
.checkItem{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:rgba(240,232,216,0.78);margin-bottom:10px;line-height:1.4}
input[type=text],input[type=email],textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(200,135,10,0.22);background:rgba(255,255,255,0.04);color:#f0e8d8;font-size:14px;font-family:inherit;outline:none}
textarea{resize:vertical;min-height:120px}
label.formLbl{font-size:12px;font-weight:600;color:rgba(200,170,100,0.7);display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.04em}

/* Measuring-tape process strip -- reuses the same tick-mark motif as the
   landing-page h1Ruler (repeating-linear-gradient dashes) as a connecting
   line, drawn in via width animation, followed by a 4-step icon row
   (Measure/Plan/Build/Track). MOVED 2026-07-19, per John, from the About
   page to the homepage (sits directly above "What you get", right below
   the hero) -- reused verbatim, same classes/animation, nothing about the
   component itself changed, only which page renders it.
   SCROLL-TRIGGERED (not load-time): elements sit in their hidden state
   (opacity:0 / width:0) by default -- animation only fires once JS (see
   nav.js's IntersectionObserver) adds ".inView" to .processStrip when it
   scrolls into viewport. This fixes an earlier version where animation ran
   on page load and had already finished by the time a user scrolled down to
   see it. */
.processStrip{max-width:1080px;margin:0 auto;padding:0 24px}
.scrollReveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.scrollReveal.inView{opacity:1;transform:translateY(0)}
.scrollReveal:nth-child(2){transition-delay:.08s}
.scrollReveal:nth-child(3){transition-delay:.16s}
.scrollReveal:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion: reduce){.scrollReveal{opacity:1;transform:none;transition:none}}
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demoRing{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid rgba(251,130,57,0.25);border-top-color:#c8870a;animation:demoSpin 0.8s linear infinite;flex-shrink:0}
@keyframes demoSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.demoRing{animation:none}}
.processStrip .rulerTrack{position:relative;height:1px;overflow:hidden}
.processStrip .rulerLine{position:absolute;inset:0;width:0;border-bottom:1px solid #c8870a;background-image:repeating-linear-gradient(90deg, #c8870a 0 1px, transparent 1px 10px);background-position:bottom left;background-repeat:repeat-x;background-size:10px 1px}
.processStrip.inView .rulerLine{animation:rulerDraw 1.4s cubic-bezier(0.4,0,0.2,1) forwards;animation-delay:.75s}
.processStrip .rulerCaption{margin-top:14px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(200,170,100,0.6);text-align:center;opacity:0}
.processStrip.inView .rulerCaption{animation:rulerCaptionIn .6s ease forwards;animation-delay:2s}
.processSteps{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;margin-top:32px}
@media (min-width:761px){.processSteps{grid-template-columns:repeat(4,1fr)}}
.processStep{text-align:center;opacity:0;transform:translateY(10px)}
.processStrip.inView .processStep{animation:stepIn .5s ease forwards}
.processStep .material-symbols-outlined{font-size:30px;display:block;margin:0 auto 10px}
.processStep .stepLabel{font-weight:700;font-size:14px;margin-bottom:4px;color:#f0e8d8}
.processStep .stepDesc{font-size:12px;color:rgba(240,232,216,.55);line-height:1.4}

/* About page: scrap-assembly ("built from what's already on your bench")
   + a short, anonymous founder-story block. ADDED 2026-07-19, replacing the
   process strip moved to the homepage (see comment above .processStrip).
   Reuses the existing .scrollReveal fade-up mechanism (SHARED_STYLE, driven
   by SCROLL_REVEAL_SCRIPT's IntersectionObserver -- already runs on every
   page, no new JS needed) rather than inventing a second reveal system. */
.assembly{display:flex;align-items:center;justify-content:center;gap:0}
.scrap{width:52px;height:52px;border-radius:12px;background:rgba(20,16,10,0.7);border:1px solid rgba(200,135,10,0.25);display:flex;align-items:center;justify-content:center;margin-right:-6px}
.scrap:last-of-type{margin-right:0}
.scrap .material-symbols-outlined{font-size:24px}
.assemblyArrow{margin:0 18px;color:rgba(200,170,100,0.5);font-size:18px}
.unified{width:64px;height:64px;border-radius:16px;background:#c8870a;display:flex;align-items:center;justify-content:center}
.unified .material-symbols-outlined{color:#1a0e00;font-size:28px}
.founderStory{max-width:680px;margin:32px auto 0;text-align:center}
.founderStory p{font-size:16px;line-height:1.75;color:rgba(240,232,216,0.85);margin-top:18px}
.founderStory p:first-child{margin-top:0}

@keyframes rulerDraw{to{width:100%}}
@keyframes rulerCaptionIn{to{opacity:1}}
@keyframes stepIn{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .processStrip .rulerLine{width:100%}
  .processStrip .rulerCaption{opacity:1}
  .processStep{opacity:1;transform:none}
  .processStrip.inView .rulerLine,.processStrip.inView .rulerCaption,.processStrip.inView .processStep{animation:none}
}

/* Signup page (2026-07-03): measuring-tape load-in + typewriter greeting
   (SIGNUP_INTRO_SCRIPT), and scroll-triggered feature tiles that assemble
   into view and dissolve into falling sawdust as they scroll back out
   (SAWDUST_SCRIPT). Guarded no-op on every other page -- these elements
   simply don't exist there. */
.tapeIntro{max-width:200px;margin:0 auto 16px;height:1px}
.tapeLine{display:block;height:1px;width:0;border-bottom:1px solid #c8870a;background-image:repeating-linear-gradient(90deg, #c8870a 0 1px, transparent 1px 8px);background-position:bottom left;background-repeat:repeat-x;background-size:8px 1px;transition:width .9s cubic-bezier(0.4,0,0.2,1)}
.suTile{position:relative;overflow:visible;opacity:0;transform:translateY(26px) scale(.97);transition:opacity .6s ease, transform .6s ease}
.suTile.inView{opacity:1;transform:translateY(0) scale(1)}
.suTile.dissolving{opacity:0;transform:translateY(10px) scale(.98);transition:opacity 1s ease .05s, transform 1s ease .05s}
.suTile .dustMote{position:absolute;bottom:6px;width:3px;height:3px;border-radius:1px;background:rgba(210,160,90,.85);opacity:0;pointer-events:none}
.suTile.dissolving .dustMote{animation:dustFall 1.05s ease-in forwards}
@keyframes dustFall{0%{opacity:.9;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--dx,6px),42px)}}
@media (prefers-reduced-motion: reduce){
  .tapeLine{width:100%!important;transition:none}
  .suTile{opacity:1;transform:none;transition:none}
  .suTile.dissolving{opacity:1;transform:none}
  .suTile .dustMote{display:none}
}

/* ── Desktop enhancement layer (min-width:761px). Mobile styles above are
   the working baseline -- everything here LAYERS ON, it never has to
   redefine mobile behavior. New desktop-only visual elements belong here. ── */
@media (min-width:761px){
  .navLinks{display:flex;align-items:center;gap:28px}
  .navBurger{display:none}
  .navMobilePanel{display:none}
  .navMobileClose{display:none}
  .heroBg{overflow:hidden;height:var(--hero-h);padding:0}
  .heroBg[data-tall="true"]{min-height:0}
  .grid2{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:repeat(3,1fr)}
}