/* ============================================================
   AMSTRATO DESIGN SYSTEM v2
   Shared stylesheet for index.html and intake.html

   Display: Anton · Body: DM Sans · Labels: DM Mono
   Lime is the only primary CTA. Purple is accent only.
   No shadows. No gradients. Elevation = panel step + 1px border.

   Token vocabulary follows design.md. Note that intake.html
   previously used a conflicting set (--ink was the BACKGROUND
   there, the text color here). Those are unified below.
   ============================================================ */

:root{
  /* ---- color ---- */
  --bg:#0a0a0a;
  --panel:#121212;
  --panel-2:#1a1a1a;
  --ink:#f5f5f5;
  --ink-2:#a3a3a3;
  --ink-3:#6b6b6b;
  --line:#262626;
  --line-2:#333333;
  --lime:#c8ff57;
  --lime-ink:#0a0a0a;
  --purple:#9b59ff;
  --warn:#ffb020;   /* soft alert: homepage lead form */
  --error:#ff6b5a;  /* hard error: intake form validation */

  /* ---- spacing ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- radius ---- */
  --r-sm:4px; --r-md:8px; --r-lg:12px;

  /* ---- measure ---- */
  --maxw:1180px;
  --nav-h:66px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:var(--r-sm)}

/* ============================================================
   TYPE
   ============================================================ */
.display{
  font-family:"Anton",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:1.0;
  letter-spacing:0.01em;
  margin:0;
}
.display .line{display:block}

h1.display{font-size:clamp(48px,9.5vw,104px)}
h2.display{font-size:clamp(36px,6.6vw,68px)}
h3.display{font-size:clamp(24px,3.4vw,34px)}

.lime{color:var(--lime)}
.purple{color:var(--purple)}

.eyebrow{
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 var(--s4);
  display:block;
}
.eyebrow .tick{color:var(--lime)}

.lede{
  font-size:clamp(17px,2.1vw,20px);
  color:var(--ink-2);
  max-width:60ch;
  margin:var(--s5) 0 0;
}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}

section{
  padding:var(--s9) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--nav-h) + var(--s5));
}
section:first-of-type{border-top:0}

.sec-head{max-width:720px;margin-bottom:var(--s8)}

.grid{display:grid;gap:var(--s4)}
@media(min-width:700px){
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:980px){
  .g4{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(10,10,10,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);
}
.logo{
  font-family:"Anton",sans-serif;
  font-size:22px;letter-spacing:0.06em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
}
.logo .dot{color:var(--lime)}
.nav-links{display:none;gap:var(--s6);align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{
  font-size:14px;color:var(--ink-2);text-decoration:none;
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--ink)}
@media(min-width:900px){.nav-links{display:flex}.burger{display:none}}

.burger{
  background:none;border:1px solid var(--line-2);color:var(--ink);
  width:42px;height:42px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:0;
}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);
  transition:transform .2s ease,top .2s ease;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mobile-menu{
  display:none;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.mobile-menu.open{display:block}
.mobile-menu ul{list-style:none;margin:0;padding:var(--s5) 0}
.mobile-menu li{border-bottom:1px solid var(--line)}
.mobile-menu li:last-child{border-bottom:0}
.mobile-menu a{
  display:block;padding:var(--s4) var(--s5);
  text-decoration:none;color:var(--ink);font-size:16px;
}
.mobile-menu .mob-cta{color:var(--lime);font-weight:700}
@media(min-width:900px){.mobile-menu{display:none !important}}

/* Simple bar used on interior pages (intake) */
.bar{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(8px);
}
.bar-in{
  max-width:var(--maxw);margin:0 auto;padding:var(--s4) var(--s5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.bar .back{font-size:14px;color:var(--ink-2);text-decoration:none}
.bar .back:hover{color:var(--lime)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 26px;border-radius:var(--r-sm);
  font-family:"DM Sans",sans-serif;font-size:15px;font-weight:700;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
  line-height:1;
}
.btn-primary{background:var(--lime);color:var(--lime-ink)}
.btn-primary:hover:not(:disabled){background:#d6ff7d}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover:not(:disabled){border-color:var(--ink-3);background:var(--panel)}
.btn:disabled{opacity:.5;cursor:default}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

.nav-cta{
  background:var(--lime);color:var(--lime-ink) !important;
  padding:10px 18px;border-radius:var(--r-sm);font-weight:700;font-size:14px;
}
.nav-cta:hover{background:#d6ff7d}

/* Full-width display button (intake submit) */
.btn-block{
  width:100%;
  font-family:"Anton",Impact,sans-serif;
  text-transform:uppercase;letter-spacing:.03em;
  font-size:20px;padding:17px 20px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:var(--s9) 0;border-top:0}
@media(min-width:900px){.hero{padding:var(--s10) 0}}
.hero h1{max-width:16ch}
.hero .stamp{
  display:inline-block;
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime);
  border:1px solid var(--lime);border-radius:999px;
  padding:6px 14px;margin-bottom:var(--s5);
}
.hero-note{
  margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--line);
  font-family:"DM Mono",monospace;font-size:13px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:var(--s5);
}
.hero-note span{display:flex;align-items:center;gap:var(--s2)}
.hero-note .mark{color:var(--lime)}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s6) var(--s5);
  transition:border-color .18s ease,background .18s ease;
}
.card:hover{border-color:var(--line-2);background:var(--panel-2)}
.card h3{
  font-family:"DM Sans",sans-serif;font-size:18px;font-weight:700;
  margin:0 0 var(--s3);color:var(--ink);
}
.card p{color:var(--ink-2);font-size:15.5px;margin:0}
.card .ico{
  width:34px;height:34px;margin-bottom:var(--s5);
  color:var(--lime);
}
.card .ico svg{
  width:100%;height:100%;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.card .num{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;
  color:var(--purple);display:block;margin-bottom:var(--s4);
}

/* ============================================================
   PARABLE
   ============================================================ */
.parable{background:var(--panel);border-top:1px solid var(--line)}
.parable-in{max-width:760px}
.parable .lead-line{
  font-size:clamp(19px,2.6vw,24px);
  color:var(--ink);line-height:1.5;
}
.parable .body-line{color:var(--ink-2);margin-top:var(--s5)}
.parable .kicker{
  margin-top:var(--s7);padding:var(--s5);
  border-left:2px solid var(--lime);
  background:var(--panel-2);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.parable .kicker p{color:var(--ink);font-weight:500;margin:0}

/* ============================================================
   VERTICALS
   ============================================================ */
.vert{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s7) var(--s6);
}
.vert .tag{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);display:block;margin-bottom:var(--s4);
}
.vert p{color:var(--ink-2);margin:var(--s4) 0 var(--s6)}
.vert ul{list-style:none;margin:0;padding:0}
.vert li{
  padding:var(--s3) 0;border-top:1px solid var(--line);
  font-size:15.5px;color:var(--ink);
}

/* ============================================================
   LADDER / PRICING
   ============================================================ */
.tier{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s6) var(--s5);
  display:flex;flex-direction:column;
}
.tier.featured{border-color:var(--lime);background:var(--panel-2)}
.tier .step{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;
  color:var(--ink-3);display:block;margin-bottom:var(--s4);
}
.tier.featured .step{color:var(--lime)}
.tier h3{margin-bottom:var(--s3)}
.tier .price{
  font-family:"Anton",sans-serif;font-size:38px;line-height:1;
  margin:var(--s4) 0 var(--s1);
}
.tier .price-note{
  font-family:"DM Mono",monospace;font-size:12.5px;color:var(--ink-3);
  margin-bottom:var(--s5);
}
.tier .blurb{color:var(--ink-2);font-size:15.5px;margin-bottom:var(--s5)}
.tier ul{list-style:none;margin:0 0 var(--s6);padding:0;flex:1}
.tier li{
  padding:var(--s3) 0;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-2);
}
.tier .btn{width:100%}

/* ============================================================
   CTA BLOCK (homepage)
   ============================================================ */
.cta{background:var(--panel);text-align:left}
.cta-in{max-width:640px}
.form-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.form-row input[type="email"]{
  flex:1;min-width:230px;
  background:var(--bg);border:1px solid var(--line-2);color:var(--ink);
  padding:15px var(--s4);border-radius:var(--r-sm);
  font-family:"DM Sans",sans-serif;font-size:15px;
}
.form-row input[type="email"]::placeholder{color:var(--ink-3)}
.form-row input[type="email"]:focus{border-color:var(--lime);outline:none}
.form-msg{
  font-family:"DM Mono",monospace;font-size:13.5px;
  margin-top:var(--s4);display:none;
}
.form-msg.ok{display:block;color:var(--lime)}
.form-msg.err{display:block;color:var(--warn)}
.or-line{
  font-family:"DM Mono",monospace;font-size:12.5px;color:var(--ink-3);
  margin-top:var(--s6);
}

/* ============================================================
   LONG FORM (intake)
   ============================================================ */
fieldset{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:var(--r-md);
  padding:var(--s6) var(--s5);
  margin:0 0 var(--s5);
}
legend{
  padding:0 var(--s3);margin-left:-4px;
  font-family:"DM Mono",monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);
}
fieldset > .hint{
  margin:0 0 var(--s6);font-size:15px;color:var(--ink-2);max-width:54ch;
}

.field{margin-bottom:var(--s5)}
.field:last-child{margin-bottom:0}
.field > label{
  display:block;margin-bottom:var(--s2);
  font-size:15.5px;font-weight:500;color:var(--ink);
}
.field .sub{
  display:block;margin:-2px 0 var(--s3);
  font-size:14px;color:var(--ink-3);font-weight:400;
}
.req{
  color:var(--lime);font-family:"DM Mono",monospace;
  font-size:.8em;margin-left:var(--s1);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line-2);
  color:var(--ink);
  font-family:inherit;font-size:16px;
  padding:13px 14px;
  border-radius:var(--r-sm);
  transition:border-color .12s ease;
}
.field textarea{min-height:104px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--lime);
}
.field select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
    linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.field select option{background:var(--panel-2);color:var(--ink)}

.checks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:1px;background:var(--line);
  border-radius:var(--r-sm);overflow:hidden;
}
.checks label{
  display:flex;align-items:center;gap:11px;
  background:var(--panel-2);
  padding:13px 15px;
  font-size:15px;color:var(--ink-2);
  cursor:pointer;
  transition:color .12s ease,background .12s ease;
}
.checks label:hover{color:var(--ink);background:#1f1f1f}
.checks input{
  appearance:none;flex:none;
  width:17px;height:17px;
  border:1px solid var(--line-2);
  background:transparent;cursor:pointer;
  position:relative;border-radius:2px;
}
.checks input:checked{border-color:var(--lime);background:var(--lime)}
.checks input:checked::after{
  content:"";position:absolute;left:4px;top:1px;
  width:5px;height:10px;
  border:solid var(--lime-ink);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.checks input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.checks label:has(input:checked){color:var(--ink)}

.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:560px){.row{grid-template-columns:1fr}}

/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.submit-block{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:var(--r-md);
  padding:var(--s6) var(--s5);
}
.after-go{
  margin:var(--s4) 0 0;font-size:14px;color:var(--ink-3);text-align:center;
}
.form-error{
  display:none;margin:0 0 var(--s5);
  border:1px solid var(--error);
  border-left-width:3px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:13px 15px;
  font-size:15px;color:var(--error);
  background:rgba(255,107,90,.07);
}
.form-error.on{display:block}

.purple-note{
  margin-top:var(--s6);
  border:1px solid var(--line);
  border-left:3px solid var(--purple);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--panel);
  padding:18px 20px;
  font-size:15.5px;color:var(--ink-2);
}
.purple-note a{color:var(--lime);text-decoration:none}
.purple-note a:hover{text-decoration:underline}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line);padding:var(--s7) 0}
.foot-in{
  display:flex;flex-wrap:wrap;gap:var(--s5);
  justify-content:space-between;align-items:center;
}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s5);list-style:none;margin:0;padding:0}
.foot-links a{font-size:14px;color:var(--ink-2);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.copyright{
  font-family:"DM Mono",monospace;font-size:12.5px;color:var(--ink-3);
  width:100%;padding-top:var(--s5);border-top:1px solid var(--line);margin-top:var(--s5);
}
.foot-simple{
  display:flex;flex-wrap:wrap;gap:10px var(--s5);justify-content:space-between;
}
.foot-simple span{font-family:"DM Mono",monospace;font-size:12.5px;color:var(--ink-3)}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   BRANCH PICKER + PROGRESSIVE DISCLOSURE
   Added for the branched intake form.
   ============================================================ */
[hidden]{display:none !important}

.picker{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:620px){.picker{grid-template-columns:1fr 1fr}}

.picker label{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--panel-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  padding:var(--s5);
  cursor:pointer;
  transition:border-color .12s ease,background .12s ease;
}
.picker label:hover{border-color:var(--ink-3)}
.picker label:has(input:checked){border-color:var(--lime)}

.picker input{
  appearance:none;flex:none;
  width:17px;height:17px;margin-top:3px;
  border:1px solid var(--line-2);
  background:transparent;cursor:pointer;
  position:relative;border-radius:2px;
}
.picker input:checked{border-color:var(--lime);background:var(--lime)}
.picker input:checked::after{
  content:"";position:absolute;left:4px;top:1px;
  width:5px;height:10px;
  border:solid var(--lime-ink);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.picker input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.picker .pick-t{
  display:block;font-weight:700;color:var(--ink);
  font-size:16px;margin-bottom:var(--s1);
}
.picker .pick-d{
  display:block;font-size:14px;color:var(--ink-2);line-height:1.45;
}

/* Branch fieldsets carry a lime edge so it reads as "this opened for you" */
fieldset.branch{border-left:2px solid var(--lime)}

.skip-note{
  font-family:"DM Mono",monospace;font-size:12.5px;
  color:var(--ink-3);margin-top:var(--s5);
}

/* ============================================================
   PAGE SCOPE · intake.html
   Narrow single-column reading measure.
   ============================================================ */
.page-intake{--maxw:760px}
.page-intake section{border-top:0;padding:0}
.page-intake h1.display{font-size:clamp(44px,8vw,76px)}
.page-intake h2.display{font-size:clamp(30px,5vw,44px)}

.page-intake .hero{padding:clamp(48px,10vw,88px) 0 clamp(28px,6vw,44px)}
.page-intake .hero .meta{
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s7);
}
.page-intake .hero .meta span{
  font-family:"DM Mono",monospace;font-size:13px;color:var(--ink-3);
}
.page-intake .hero .meta b{color:var(--lime);font-weight:400}

.page-intake form{padding-bottom:clamp(60px,12vw,110px)}

.page-intake #done{display:none;padding:clamp(56px,12vw,104px) 0}
.page-intake #done.on{display:block}
.page-intake #done h2{margin-bottom:var(--s5)}
.page-intake #done .next{
  margin-top:var(--s6);border-top:1px solid var(--line);padding-top:var(--s6);
}
.page-intake #done ol{margin:var(--s3) 0 0;padding-left:22px;color:var(--ink-2)}
.page-intake #done ol li{margin-bottom:10px}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none !important;transition:none !important}
}