/* SawScribe marketing site. Tokens mirror the SawScribe design system (dark default). */

/* ---------- Fonts (local, OFL) ---------- */
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-Variable.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url('../fonts/AtkinsonHyperlegibleNext-Variable.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url('../fonts/AtkinsonHyperlegibleNext-Italic-Variable.ttf') format('truetype');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Mono';src:url('../fonts/AtkinsonHyperlegibleMono-Variable.ttf') format('truetype');font-weight:200 800;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --graphite-950:#0B0C0E;--graphite-900:#141618;--graphite-850:#1A1D20;--graphite-800:#1F2226;--graphite-700:#2A2E33;--graphite-600:#3A3F45;--graphite-500:#5B6168;
  --sawdust-50:#FAF7F1;--sawdust-100:#F2ECE0;--sawdust-200:#E4DCCB;--sawdust-300:#CFC5B1;--sawdust-400:#ADA38F;
  --chalk-300:#8CC6FF;--chalk-400:#4DA8FF;--pine-400:#E2B97F;
  --green-400:#4CC38A;--crayon-400:#FF9447;--red-400:#FF6B5E;

  --bg:var(--graphite-900);--bg-deep:var(--graphite-950);
  --surface-1:var(--graphite-850);--surface-2:var(--graphite-800);--surface-3:var(--graphite-700);
  --border:var(--graphite-700);--border-strong:var(--graphite-500);
  --text-1:var(--sawdust-100);--text-2:var(--sawdust-300);--text-3:var(--sawdust-400);
  --accent:var(--chalk-400);--accent-strong:var(--chalk-300);--accent-ink:var(--graphite-900);--accent-text:var(--chalk-400);--accent-soft:#4DA8FF1F;
  --listen:var(--chalk-400);--readback:var(--pine-400);--readback-ink:var(--graphite-900);--readback-soft:#E2B97F24;
  --success:var(--green-400);--success-ink:var(--graphite-900);--success-soft:#4CC38A22;
  --warning:var(--crayon-400);--warning-soft:#FF944724;
  --muted-state:var(--graphite-600);--focus-ring:var(--chalk-300);

  --font-display:'Archivo','Arial Narrow',sans-serif;
  --font-ui:'Atkinson Hyperlegible Next',system-ui,sans-serif;
  --font-mono:'Atkinson Hyperlegible Mono',ui-monospace,monospace;
  --frac-scale:.52;--frac-bar:.075em;
  --tracking-label:.12em;

  --radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-xl:22px;
  --border-w:2px;--border-w-strong:3px;--focus-w:4px;
  --shadow-stamp:0 3px 0 0 #00000066;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-in-out:cubic-bezier(.6,0,.3,1);
  --dur-fast:100ms;--dur-base:180ms;

  --gutter:clamp(16px,5vw,64px);
  --max:1240px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--text-1);font-family:var(--font-ui);font-size:19px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--accent-text);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--accent-strong)}
:focus-visible{outline:var(--focus-w) solid var(--focus-ring);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:800;font-variation-settings:'wdth' 104;letter-spacing:-.015em;color:var(--text-1);text-wrap:balance}
p{margin:0;text-wrap:pretty}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;padding:12px 16px;background:var(--accent);color:var(--accent-ink);font-weight:800;border-radius:var(--radius-md)}
.skip:focus{left:16px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(72px,10vw,136px) 0;border-top:var(--border-w) solid var(--border)}
.section--deep{background:var(--bg-deep)}

/* ---------- Type helpers ---------- */
.label{font-size:15px;font-weight:800;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:800;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-text)}
.eyebrow .i{font-size:22px}
.h2{font-size:clamp(38px,4.6vw,64px);line-height:1}
.h3{font-size:clamp(24px,2.2vw,30px);line-height:1.1;font-variation-settings:'wdth' 100}
.lede{font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:var(--text-2);max-width:620px}
.section-head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(40px,5vw,64px);max-width:820px}
.mono{font-family:var(--font-mono);font-weight:800}
.said{font-style:italic;color:var(--text-2)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:0 24px;border:var(--border-w-strong) solid var(--accent);border-radius:var(--radius-md);background:var(--accent);color:var(--accent-ink);font:800 20px/1.1 var(--font-ui);text-decoration:none;cursor:pointer;box-shadow:var(--shadow-stamp);transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out)}
.btn:hover{color:var(--accent-ink);filter:brightness(1.08)}
.btn:active{transform:translateY(2px);filter:brightness(.92)}
.btn .i{font-size:26px}
.btn--lg{min-height:80px;padding:0 28px;font-size:23px}
.btn--lg .i{font-size:30px}
.btn--secondary{background:var(--surface-2);color:var(--text-1);border-color:var(--border-strong)}
.btn--secondary:hover{color:var(--text-1)}
.btn--ghost{background:transparent;color:var(--text-1);border-color:transparent;box-shadow:none}
.btn--ghost:hover{color:var(--text-1);background:var(--surface-1)}
.btn--readback{background:var(--readback);border-color:var(--readback);color:var(--readback-ink)}
.btn--success{background:var(--success);border-color:var(--success);color:var(--success-ink)}
.btn[disabled]{background:var(--surface-3);border-color:var(--surface-3);color:var(--graphite-500);box-shadow:none;cursor:not-allowed;filter:none;transform:none}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-1)}
.logo:hover{color:var(--text-1)}
.logo svg{width:44px;height:44px;flex-shrink:0}
.logo span{font-family:var(--font-display);font-weight:800;font-variation-settings:'wdth' 108;letter-spacing:-.015em;font-size:34px;line-height:1}

/* ---------- Nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);font-weight:700;font-size:17px}
.nav-links a:not(.btn){color:var(--text-2);text-decoration:none;padding:12px 0}
.nav-links a:not(.btn):hover{color:var(--text-1)}
@media (max-width:860px){.nav-links a:not(.btn){display:none}}
@media (max-width:420px){.logo span{font-size:28px}.logo svg{width:38px;height:38px}.nav .btn{padding:0 16px;font-size:18px}}

/* ---------- Measurement readout ---------- */
.m{display:inline-flex;align-items:center;font-family:var(--font-ui);font-weight:800;line-height:.8;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--text-1)}
.m-frac{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(1em * var(--frac-scale));line-height:.82;gap:.1em;margin:0 .04em 0 .1em}
.m-frac i{display:block;align-self:stretch;height:max(3px,calc(var(--frac-bar) / var(--frac-scale)));background:currentColor;border-radius:1px}
.m-unit{font-size:.5em;align-self:flex-start;margin-top:.06em;margin-left:.04em;color:var(--text-3)}
.m-gap{width:.28em}
.m--hero{font-size:clamp(72px,8vw,128px)}
.m--xl{font-size:clamp(64px,7vw,96px)}
.m--lg{font-size:clamp(52px,5.4vw,72px)}
.m--md{font-size:48px}
.m--sm{font-size:32px}
.m--xs{font-size:24px}
.m--accent{color:var(--accent-text)}
.m--readback{color:var(--readback)}
.m--muted{color:var(--text-2)}
.m--success{color:var(--success)}

/* ---------- Waveform (the logo, moving) ---------- */
.wave{display:flex;flex-direction:column;width:100%}
.wave-blade{height:6px;background:var(--wave,var(--listen));border-radius:2px}
.wave-ticks{display:flex;justify-content:space-between;align-items:flex-start;height:var(--wave-h,36px)}
.wave-ticks i{width:calc(100% / 24 - 4px);min-width:3px;background:var(--wave,var(--listen));border-radius:0 0 2px 2px;transform-origin:top;animation:ss-wave var(--t,1s) var(--ease-in-out) var(--d,0s) infinite}
.wave-ticks i:nth-child(8n+1){height:100%}
.wave-ticks i:nth-child(8n+2),.wave-ticks i:nth-child(8n+4),.wave-ticks i:nth-child(8n+6),.wave-ticks i:nth-child(8n){height:35%}
.wave-ticks i:nth-child(8n+3),.wave-ticks i:nth-child(8n+7){height:55%}
.wave-ticks i:nth-child(8n+5){height:80%}
.wave-ticks i:nth-child(3n){--t:.8s;--d:-.4s}
.wave-ticks i:nth-child(3n+1){--t:1.3s;--d:-.9s}
.wave-ticks i:nth-child(3n+2){--t:1.05s;--d:-.2s}
.wave-ticks i:nth-child(5n){--t:1.5s;--d:-.6s}
.wave--speaking{--wave:var(--readback)}
.wave--idle .wave-ticks i{animation:none}
@keyframes ss-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center;padding-top:clamp(24px,5vw,72px);padding-bottom:clamp(72px,9vw,128px)}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero h1{font-size:clamp(44px,5.6vw,80px);line-height:.95;letter-spacing:-.02em}
@media (min-width:960px){.hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.card{background:var(--surface-1);border:var(--border-w) solid var(--border);border-radius:var(--radius-lg)}
.demo{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,3vw,40px);border-width:var(--border-w-strong);border-radius:var(--radius-xl)}
.demo-said{font-size:21px;line-height:1.35}
.demo-row{display:flex;gap:32px;flex-wrap:wrap;padding-top:18px;border-top:var(--border-w) solid var(--border)}
.demo-row > div,.stack{display:flex;flex-direction:column;gap:8px}
.demo-row .k{font-weight:800;color:var(--text-3);font-size:15px}
.chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:36px;padding:6px 12px;border-radius:var(--radius-sm);font-size:15px;font-weight:800;letter-spacing:var(--tracking-label);text-transform:uppercase}
.chip .i{font-size:20px}
.chip--success{background:var(--success-soft);color:var(--success)}
.chip--listen{background:var(--accent-soft);color:var(--accent-text)}
.chip--warning{background:var(--warning-soft);color:var(--warning)}
.chip--readback{background:var(--readback-soft);color:var(--readback)}

/* ---------- Steps (how it works) ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;counter-reset:step}
.step{display:flex;flex-direction:column;gap:18px;padding:28px}
.step-top{display:flex;align-items:center;justify-content:space-between}
.step-num{font-family:var(--font-mono);font-weight:800;font-size:20px;color:var(--text-3)}
.step-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius-md);font-size:32px}
.step-icon--listen{background:var(--accent-soft);color:var(--accent-text)}
.step-icon--saved{background:var(--success-soft);color:var(--success)}
.step-icon--readback{background:var(--readback-soft);color:var(--readback)}
.step p{color:var(--text-2)}
.step blockquote{margin:auto 0 0;padding:16px 18px;background:var(--surface-2);border-radius:var(--radius-md);font-size:18px;line-height:1.35}

/* ---------- Readback demo ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
@media (min-width:960px){.split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.points li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:var(--border-w) solid var(--border);color:var(--text-2)}
.points li:last-child{border-bottom:var(--border-w) solid var(--border)}
.points .i{font-size:28px;color:var(--text-1);flex-shrink:0;margin-top:-1px}
.points b{color:var(--text-1)}
.phone{width:100%;max-width:440px;justify-self:center;display:flex;flex-direction:column;gap:24px;padding:24px 20px 20px;background:var(--bg);border:var(--border-w-strong) solid var(--border);border-radius:36px;box-shadow:0 0 0 10px var(--graphite-950),0 0 0 12px var(--border)}
.rb-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rb-title{font-family:var(--font-display);font-variation-settings:'wdth' 100;font-weight:800;font-size:24px}
.rb-count{font-family:var(--font-mono);font-weight:800;font-size:20px;color:var(--text-2)}
.rb-progress{display:flex;gap:6px;align-items:flex-start;margin-top:12px}
.rb-progress span{flex:1;height:8px;border-radius:2px;background:var(--surface-3);transition:height var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}
.rb-progress span.done{background:var(--text-3)}
.rb-progress span.on{height:16px;background:var(--readback)}
.rb-body{display:flex;flex-direction:column;gap:20px;min-height:300px;justify-content:center}
.rb-reading{display:flex;align-items:center;gap:10px;color:var(--readback);font-size:15px;font-weight:800;letter-spacing:var(--tracking-label);text-transform:uppercase}
.rb-reading .i{font-size:22px}
.rb-verb{font-family:var(--font-display);font-variation-settings:'wdth' 96;font-weight:800;font-size:44px;line-height:1;letter-spacing:-.01em}
.rb-detail{font-size:24px;font-weight:700;line-height:1.2;color:var(--text-2)}
.rb-next{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;background:var(--surface-1);border-radius:var(--radius-md);color:var(--text-2);font-weight:700}
.rb-next .label{font-size:14px;flex-shrink:0}
.rb-next-text{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.rb-next-text > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-controls{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:12px}
.rb-controls .btn{min-height:80px;padding:0 8px;flex-direction:column;gap:4px;font-size:15px}
.rb-controls .btn .i{font-size:32px}
.rb-controls .rb-go{flex-direction:row;gap:10px;font-size:26px}
.rb-said{font-size:16px;color:var(--text-3);text-align:center;min-height:24px}

/* ---------- Talk → result ---------- */
.examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:20px}
.example{display:flex;flex-direction:column}
.example-said{display:flex;flex-direction:column;gap:12px;padding:24px 28px}
.example-said p{font-size:21px;line-height:1.35}
.example-out{display:flex;flex-direction:column;gap:16px;padding:24px 28px;border-top:var(--border-w) solid var(--border);flex:1}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;border-top:var(--border-w) solid var(--border)}
.row:first-child{border-top:0}
.row-name{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px}
.row-name .i{font-size:24px;color:var(--text-3)}
.sketch{width:100%;height:auto;color:var(--text-1)}
.sketch text{font-family:var(--font-ui);font-weight:800;font-size:15px;fill:var(--text-2)}
.sketch .dim{stroke:var(--text-3);stroke-width:2}
.sketch .notch{fill:var(--accent-soft);stroke:var(--accent);stroke-width:3}
.sketch .notch-t{fill:var(--accent-text)}
.clarify{display:flex;flex-direction:column;gap:12px;padding:18px 20px;background:var(--surface-2);border-top:6px solid var(--warning);border-radius:var(--radius-md)}
.clarify q{font-family:var(--font-display);font-variation-settings:'wdth' 100;font-weight:800;font-size:28px;line-height:1.1;quotes:none}

/* ---------- Trade math ---------- */
.math{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px}
.math-card{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:24px;min-height:210px}
.math-card .said{font-size:19px;line-height:1.35}
.math-card .ans{display:flex;flex-direction:column;gap:10px}
.math-card .ans small{font-size:17px;font-weight:700;color:var(--text-2)}
.deg{font-family:var(--font-ui);font-weight:800;font-size:48px;line-height:.85;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.deg sup{font-size:.5em;color:var(--text-3);vertical-align:top;position:relative;top:.06em}
.deg sub{font-size:.42em;color:var(--text-3);vertical-align:baseline;margin-left:.15em;letter-spacing:0}

/* ---------- Jobsite features ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0;border-top:var(--border-w) solid var(--border)}
.feature{display:flex;flex-direction:column;gap:12px;padding:32px 28px 32px 0;border-bottom:var(--border-w) solid var(--border)}
.feature .i{font-size:32px;color:var(--accent-text)}
.feature p{color:var(--text-2)}
.strongshy{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:var(--border-w) solid var(--border)}
.faq details{border-bottom:var(--border-w) solid var(--border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:80px;padding:16px 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-variation-settings:'wdth' 100;font-weight:800;font-size:clamp(21px,2vw,26px);line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{font-size:28px;color:var(--text-3);transition:transform var(--dur-base) var(--ease-out);flex-shrink:0}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq details p{padding:0 0 28px;max-width:760px;color:var(--text-2)}
.faq details p + p{margin-top:-12px}

/* ---------- Final CTA ---------- */
.cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px;align-items:center;padding:clamp(28px,5vw,64px);border:var(--border-w-strong) solid var(--border);border-radius:var(--radius-xl);background:var(--surface-1)}
.cta .wave{max-width:520px;justify-self:end}
.cta .h2{margin-bottom:20px}
.cta .actions{margin-top:28px}

/* ---------- Footer ---------- */
.footer{padding:48px 0 56px;border-top:var(--border-w) solid var(--border);color:var(--text-3);font-size:17px}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer .logo svg{width:32px;height:32px}
.footer .logo span{font-size:24px}
.footer nav{display:flex;gap:24px;flex-wrap:wrap}
.footer a:not(.logo){color:var(--text-2);text-decoration:none;padding:8px 0}
.footer a:not(.logo):hover{color:var(--text-1)}
.footer .legal{flex-basis:100%;font-size:14px;line-height:1.4;max-width:760px}

/* ---------- Store badges (official artwork, unaltered) ---------- */
.stores{display:flex;flex-wrap:wrap;gap:16px 28px;margin:4px 0 0;padding:0;list-style:none}
.store{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.store img{display:block;width:auto}
.badge-as{height:50px}
/* The Play PNG has transparent padding baked in; offset it so the visible badge matches Apple's. */
.badge-gp{height:75px;margin:-12px -12px -13px}
.soon{font-size:14px;font-weight:800;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--readback)}
.cta .stores{margin-top:28px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}