/* ============================================================
   Build Pro HQ — beta-teaser landing page
   Sibling of the main site (website/). Inherits the v2 token
   palette, Archivo + IBM Plex type, device frame and reveal
   motion. Trimmed to one job: get a name + email. Mobile-first.
   ============================================================ */

/* ---------- 1. Tokens (from v2) ---------- */
:root{
  --bg:        #1c1d22;
  --surface:   #16171b;
  --surface-2: #212228;
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.12);
  --orange:    #e86726;
  --amber:     #fe9b33;
  --done:      #315e35;
  --overdue:   #b14b34;
  --logo-navy: #16232b;
  --text:      #e8e8e8;
  --muted:     #9a9aa2;   /* AA on bg (6.0:1) */
  --dim:       #8a8a92;   /* AA on bg (4.9:1) */
  --ink:       #17181c;   /* dark text on the bright gradient (5.4:1 on orange) */
  --grad:      linear-gradient(135deg, #e86726 0%, #fe9b33 100%);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0:  1.0625rem;
  --step-1:  clamp(1.15rem, 1.06rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.9vw, 3rem);
  --step-4:  clamp(2.3rem, 1.7rem + 3vw, 4rem);
  --step-5:  clamp(2.5rem, 1.7rem + 4.2vw, 4.8rem);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --wrap: 1120px;
  --r-sm: 10px; --r: 16px; --r-lg: 26px;
  --ease: cubic-bezier(.2,.6,.32,1);
  --dur: .6s;
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--orange); color:#fff; }
a{ color:var(--amber); text-decoration:none; }
a:hover{ color:var(--orange); }
:focus-visible{ outline:2.5px solid var(--amber); outline-offset:3px; border-radius:4px; }
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--orange); color:#fff; padding:12px 18px;
  border-radius:0 0 var(--r-sm) 0; font-family:var(--mono); font-size:.85rem;
}
.skip-link:focus{ left:0; }

/* ---------- 3. Type ---------- */
h1,h2,h3{
  font-family:var(--display); font-weight:800; line-height:1.03; margin:0;
  letter-spacing:-0.02em; text-wrap:balance; color:#fff;
}
h2{ font-size:var(--step-3); } h3{ font-size:var(--step-2); }
p{ margin:0 0 1em; color:var(--text); }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; color:#fff; }
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.eyebrow{
  font-family:var(--mono); font-size:var(--step--1); font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--amber);
  margin:0 0 var(--s-4); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:var(--grad); display:inline-block; }
.measure{ max-width:56ch; }
.lede{ font-size:var(--step-1); line-height:1.5; color:var(--muted); }

/* ---------- 4. Layout ---------- */
.wrap{ width:min(100% - 2*var(--s-5), var(--wrap)); margin-inline:auto; }
@media (max-width:600px){ .wrap{ width:min(100% - 2*var(--s-4), var(--wrap)); } }
.section{ padding-block:clamp(var(--s-7), 8vw, var(--s-9)); }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-0.01em;
  padding:15px 24px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
  transition:transform .15s var(--ease), filter .2s var(--ease), border-color .2s var(--ease); line-height:1;
}
.btn .ic{ width:19px; height:19px; }
.btn-primary{ background:var(--grad); color:var(--ink); }
.btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-2); }
.btn-ghost:hover{ border-color:var(--amber); color:#fff; transform:translateY(-1px); }
.btn-lg{ padding:17px 28px; font-size:1.06rem; }
.btn-block{ width:100%; }

/* ---------- 6. Header (minimal) ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(28,29,34,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--border); background:rgba(22,23,27,.9); }
.site-header .wrap{ display:flex; align-items:center; gap:var(--s-4); min-height:60px; }
.brand{
  display:inline-flex; align-items:center; gap:10px; color:#fff;
  font-family:var(--display); font-weight:800; font-size:1.14rem; letter-spacing:-0.02em; line-height:1;
}
.brand .mark{ width:26px; height:26px; flex:0 0 auto; border-radius:6px; }
.brand .hq{ color:var(--orange); }
.header-cta{ margin-left:auto; }
.header-cta a{
  font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--ink);
  background:var(--grad); padding:9px 16px; border-radius:var(--r-sm); letter-spacing:-0.01em;
}
.header-cta a:hover{ filter:brightness(1.05); }

/* ---------- 7. Hero (form visible on mobile) ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(var(--s-6), 6vw, var(--s-8)) var(--s-7); }
.hero__grid{ display:grid; grid-template-columns:1fr; gap:var(--s-6); align-items:center; }
.hero__title{ font-size:var(--step-4); line-height:1.0; margin:0 0 var(--s-4); letter-spacing:-0.03em; }
.hero__sub{ color:var(--muted); margin:0 0 var(--s-5); }
.hero__stores{
  font-family:var(--mono); font-size:.82rem; color:var(--dim);
  letter-spacing:.02em; display:flex; align-items:center; gap:.55em; margin-top:var(--s-5);
}
.hero__stores .dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); flex:0 0 auto; }

.hero__media{ position:relative; display:flex; justify-content:center; }
.bloom{
  position:absolute; z-index:0; width:min(74%, 380px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(232,103,38,.40) 0%, rgba(254,155,51,.15) 42%, transparent 68%);
  filter:blur(10px); left:50%; top:48%; transform:translate(-50%,-50%); pointer-events:none;
}

/* ---------- 8. Phone frame (from v2) ---------- */
.phone{
  position:relative; z-index:1; width:min(272px, 66vw);
  border-radius:42px; padding:10px;
  background:linear-gradient(160deg, #2a2b31, #131418);
  border:1px solid var(--border-2);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03);
}
.phone__screen{ position:relative; border-radius:32px; overflow:hidden; background:var(--bg); aspect-ratio:1206 / 2622; }
.phone__screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.phone__island{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:34%; height:18px; background:#000; border-radius:12px; z-index:2; }
.phone--sm{ width:min(228px, 60vw); }

/* ---------- 9. Signup form (the point of the page) ---------- */
.signup{
  background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-lg);
  padding:clamp(var(--s-5), 5vw, var(--s-6)); position:relative;
}
.signup__k{ font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); margin:0 0 var(--s-2); }
.signup h2{ font-size:var(--step-2); margin:0 0 var(--s-2); }
.signup__sub{ color:var(--muted); font-size:.96rem; margin:0 0 var(--s-5); }
.field{ margin-bottom:var(--s-4); }
.field label{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.field input[type=text], .field input[type=email]{
  width:100%; font-family:var(--body); font-size:1.05rem; color:var(--text);
  background:var(--bg); border:1px solid var(--border-2); border-radius:var(--r-sm);
  padding:14px 15px; line-height:1.2; -webkit-appearance:none; appearance:none;
}
.field input::placeholder{ color:var(--dim); }
.field input:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(254,155,51,.18); }

/* device segmented control */
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.seg label{
  display:flex; align-items:center; justify-content:center; gap:.5em; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:1rem; color:var(--text);
  background:var(--bg); border:1px solid var(--border-2); border-radius:var(--r-sm);
  padding:14px 10px; text-transform:none; letter-spacing:-0.01em; margin:0;
  transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.seg label svg{ width:18px; height:18px; flex:0 0 auto; }
.seg input:checked + label{ border-color:var(--orange); background:rgba(232,103,38,.14); color:#fff; }
.seg input:focus-visible + label{ outline:2.5px solid var(--amber); outline-offset:2px; }
.seg .os-note{ font-family:var(--mono); font-size:.72rem; color:var(--dim); margin-top:var(--s-3); letter-spacing:.01em; }

/* honeypot: hidden from humans, present for bots */
.hp{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; }

.form-actions{ margin-top:var(--s-5); }
.form-fine{ font-family:var(--mono); font-size:.72rem; color:var(--dim); margin-top:var(--s-4); letter-spacing:.01em; line-height:1.5; }
.error-banner{
  background:rgba(177,75,52,.16); border:1px solid rgba(177,75,52,.5);
  border-radius:var(--r-sm); padding:12px 15px; color:#f0b6a6; font-size:.9rem; margin-bottom:var(--s-4);
}

/* ---------- 10. Proof points ---------- */
.proof{ border-top:1px solid var(--border); }
.proof__grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.proof__cell{ background:var(--bg); padding:var(--s-5) var(--s-6); }
.proof__cell .n{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; color:var(--amber); }
.proof__cell h3{ font-family:var(--display); font-weight:800; font-size:1.2rem; color:#fff; margin:var(--s-2) 0 var(--s-2); letter-spacing:-0.02em; }
.proof__cell p{ color:var(--muted); font-size:.96rem; margin:0; }
@media (min-width:760px){ .proof__grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 11. Screenshot strip (horizontal scroll on mobile) ---------- */
.strip{ border-top:1px solid var(--border); }
.strip__head{ margin-bottom:var(--s-6); }
.strip__rail{
  display:flex; gap:var(--s-5); overflow-x:auto; padding-bottom:var(--s-4);
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--border-2) transparent;
}
.strip__rail::-webkit-scrollbar{ height:6px; }
.strip__rail::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:999px; }
.strip__item{ flex:0 0 auto; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--s-3); }
.strip__item .cap{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
@media (min-width:760px){ .strip__rail{ justify-content:center; overflow-x:visible; flex-wrap:wrap; } }

/* ---------- 12. Second CTA band ---------- */
.cta{ }
.cta__panel{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(var(--s-6), 6vw, var(--s-8)); text-align:center; position:relative; overflow:hidden;
}
.cta__panel::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:radial-gradient(120% 90% at 50% -10%, rgba(232,103,38,.25), transparent 60%); pointer-events:none;
}
.cta__panel > *{ position:relative; z-index:1; }
.cta h2{ font-size:var(--step-3); margin-bottom:var(--s-3); }
.cta p{ color:var(--muted); max-width:46ch; margin-inline:auto; margin-bottom:var(--s-6); }

/* ---------- 13. Footer ---------- */
.site-footer{ background:var(--surface); border-top:1px solid var(--border); padding-block:var(--s-7) var(--s-6); }
.site-footer .fwrap{ display:flex; flex-wrap:wrap; gap:var(--s-5); align-items:center; justify-content:space-between; }
.site-footer .blurb{ color:var(--muted); font-size:.92rem; max-width:42ch; margin-top:var(--s-3); }
.site-footer .flinks{ display:flex; flex-wrap:wrap; gap:var(--s-5); font-family:var(--mono); font-size:.82rem; }
.site-footer .flinks a{ color:var(--muted); } .site-footer .flinks a:hover{ color:#fff; }
.legal{ margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-4); font-family:var(--mono); font-size:.8rem; color:var(--dim); }
.legal .made{ margin-left:auto; }
@media (max-width:560px){ .legal .made{ margin-left:0; } }

/* ---------- 14. Reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- 15. Desktop hero (two-col: copy+phone | form) ---------- */
@media (min-width:900px){
  .hero{ padding-block:clamp(var(--s-7), 5vw, var(--s-9)) var(--s-8); }
  .hero__grid{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"copy form" "media form";
    gap:var(--s-6) var(--s-8); align-items:start;
  }
  .hero__copy{ grid-area:copy; align-self:end; }
  .hero__media{ grid-area:media; justify-content:flex-start; align-self:start; margin-top:var(--s-5); }
  .hero__form{ grid-area:form; align-self:center; position:sticky; top:88px; }
  .hero .phone{ width:min(258px, 30vw); }
}
/* On mobile, order: copy → phone → form. Phone is compact so the form is one flick away. */
@media (max-width:899px){
  .hero{ padding-block:var(--s-5) var(--s-6); }
  .hero__grid{ gap:var(--s-5); }
  .hero__media{ order:2; }
  .hero__form{ order:3; }
  .hero__copy{ order:1; }
  .hero__copy .hero__sub{ margin-bottom:var(--s-3); font-size:1.02rem; }
  .hero__copy .hero__stores{ margin-top:var(--s-4); }
  .hero .phone{ width:min(168px, 44vw); }
  .hero__title{ font-size:clamp(2.1rem, 1.7rem + 3vw, 3rem); }
}
/* very small phones: shrink the phone a touch more so the form is one flick away */
@media (max-width:400px){
  .hero .phone{ width:150px; }
}

/* ---------- 16. Content pages (thanks / privacy) ---------- */
.page-hero{ padding-block:clamp(var(--s-7), 7vw, var(--s-9)) var(--s-6); border-bottom:1px solid var(--border); }
.page-hero h1{ font-size:var(--step-4); letter-spacing:-0.03em; margin-bottom:var(--s-4); }
.page-hero p{ color:var(--muted); max-width:56ch; }
.prose{ max-width:70ch; }
.prose h2{ font-size:var(--step-2); margin:var(--s-8) 0 var(--s-4); }
.prose h3{ font-size:var(--step-1); margin:var(--s-6) 0 var(--s-3); color:#fff; }
.prose p, .prose li{ color:var(--text); line-height:1.7; }
.prose ul{ padding-left:1.2em; margin:0 0 1.1em; }
.prose li{ margin-bottom:.5em; }
.prose a{ text-decoration:underline; text-underline-offset:3px; }
.prose .meta{ font-family:var(--mono); font-size:.85rem; color:var(--dim); }
.callout{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0; padding:var(--s-5) var(--s-6); margin:0 0 var(--s-6);
}
.callout p{ margin:0; color:var(--muted); font-size:.95rem; }

/* thanks page */
.thanks-hero{ text-align:center; padding-block:clamp(var(--s-8), 10vw, 120px); }
.thanks-badge{
  width:76px; height:76px; margin:0 auto var(--s-6); border-radius:50%;
  display:grid; place-items:center; background:rgba(49,94,53,.22); border:1px solid rgba(49,94,53,.6);
}
.thanks-badge svg{ width:38px; height:38px; color:#7bbd7f; }
.thanks-hero h1{ font-size:var(--step-4); margin-bottom:var(--s-4); }
.thanks-hero p{ color:var(--muted); max-width:48ch; margin-inline:auto; }