/* GroomMe design system — one palette, one type scale, shared components.
   Palette: deep ink green, warm cream, emerald accent, gold highlight.
   Type: Georgia serif display + system sans for UI/body. */
:root{
  --ink:#16211b; --ink-2:#3d4a42; --muted:#68736b;
  --cream:#f6f1e8; --paper:#fffdf8; --sage:#dce9df; --sage-2:#eef4ee;
  --emerald:#1e7a4c; --emerald-d:#145435; --gold:#c9922e;
  --line:#e3ddd0; --warn-bg:#fdf3e0; --warn-ink:#8a5a12;
  --ok-bg:#e2f1e6; --ok-ink:#1e7a4c;
  --radius:16px; --radius-s:10px;
  --shadow:0 10px 30px rgba(22,33,27,.10);
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
body{font-family:var(--font-ui);margin:0;color:var(--ink);background:var(--cream);line-height:1.6}
a{color:var(--emerald-d)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}

/* header */
.site-head{position:sticky;top:0;background:rgba(246,241,232,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.logo{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.2px}
.logo em{color:var(--emerald);font-style:normal}
.head-cta{background:var(--ink);color:var(--cream);padding:10px 22px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:600}
.head-cta:hover{background:var(--emerald-d)}

/* hero */
.hero{padding:64px 0 8px;text-align:left}
.hero h1{font-family:var(--font-display);font-size:clamp(38px,5.4vw,58px);line-height:1.08;margin:0 0 16px;max-width:15ch}
.hero h1 .accent{color:var(--emerald)}
.hero .lede{font-size:20px;color:var(--ink-2);max-width:56ch;margin:0 0 28px}
.price-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:8px 0 6px}
.price{font-family:var(--font-display);font-size:34px;font-weight:700}
.price-note{color:var(--muted);font-size:15px}
.btn{display:inline-block;background:var(--ink);color:var(--cream);padding:15px 34px;border-radius:999px;text-decoration:none;font-size:17px;font-weight:600;border:none;cursor:pointer;font-family:var(--font-ui)}
.btn:hover{background:var(--emerald-d)}
.btn.secondary{background:var(--sage);color:var(--ink)}
.btn.secondary:hover{background:var(--sage);filter:brightness(.97)}
.btn.disabled{background:#b8b0a4;pointer-events:none}
.btn:disabled{opacity:.45;cursor:default}

/* sections */
section{padding:44px 0 8px}
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700;color:var(--emerald);margin:0 0 8px}
h2{font-family:var(--font-display);font-size:clamp(26px,3.4vw,34px);margin:0 0 10px;line-height:1.2}
.section-lede{color:var(--ink-2);max-width:62ch;margin:0 0 26px;font-size:17px}

/* demo pack */
.sample-banner{display:flex;gap:12px;align-items:flex-start;background:var(--warn-bg);border:1px solid #ecd9ae;border-radius:var(--radius-s);padding:14px 18px;margin:0 0 26px;font-size:15px;color:var(--warn-ink)}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.demo-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.demo-card.wide{grid-column:span 2}
@media(max-width:700px){.demo-card.wide{grid-column:span 1}}
.demo-card .media{background:var(--sage-2)}
.demo-card video,.demo-card img{display:block;width:100%;height:auto}
.demo-card .body{padding:18px 20px 20px}
.demo-card h3{margin:0 0 4px;font-size:18px}
.demo-card .group-tag{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--emerald);font-weight:700;margin:0 0 8px}
.demo-card p{margin:0;color:var(--ink-2);font-size:15px}
.demo-card audio{width:100%;margin:6px 0 10px}
.awaiting{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:220px;padding:28px;background:repeating-linear-gradient(45deg,var(--sage-2),var(--sage-2) 14px,#e6efe6 14px,#e6efe6 28px)}
.awaiting .badge{background:var(--ink);color:var(--cream);border-radius:999px;padding:6px 16px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.awaiting p{max-width:34ch}

/* pack contents / steps */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3{margin:0 0 6px;font-size:17px}
.card p{margin:0;color:var(--ink-2);font-size:15px}
.card .rail{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:12px}
.rail.local{color:var(--ok-ink)} .rail.gen{color:var(--warn-ink)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;counter-reset:step}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.step::before{counter-increment:step;content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--emerald);color:#fff;font-weight:700;margin-bottom:12px}
.step h3{margin:0 0 6px;font-size:17px}.step p{margin:0;color:var(--ink-2);font-size:15px}

/* message set */
.lines{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.lines li{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.lines blockquote{font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--ink);margin:4px 0}
.lines .deliverable{color:var(--muted);font-size:14px}

/* notices + promise */
.promise{background:var(--ink);color:var(--cream);border-radius:var(--radius);padding:28px 30px}
.promise h2{color:var(--cream)} .promise p{color:#cfd8d1;max-width:64ch}
.notice{background:var(--warn-bg);border:1px solid #ecd9ae;color:var(--warn-ink);border-radius:var(--radius-s);padding:14px 18px;font-size:15px}
.decision{background:var(--sage-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 14px;font-size:15px}

footer{margin-top:56px;border-top:1px solid var(--line);padding:26px 0 44px;color:var(--muted);font-size:14px}
footer a{margin-right:16px}

/* capture page */
.stepper{display:flex;gap:8px;margin:0 0 20px}
.dot{flex:1;height:6px;border-radius:3px;background:#e4ddd2}
.dot.done{background:var(--emerald)} .dot.now{background:var(--gold)}
#preview{width:100%;aspect-ratio:16/9;background:#141210;border-radius:var(--radius);object-fit:cover}
.teleprompter{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin:16px 0;font-family:var(--font-display);font-size:23px;line-height:1.55;font-style:italic;color:var(--ink);box-shadow:var(--shadow)}
.teleprompter .note{font-family:var(--font-ui);font-style:normal}
.checks{display:flex;gap:10px;margin:12px 0;font-size:14px;flex-wrap:wrap}
.check{padding:8px 14px;border-radius:999px;background:#e9e2d4}
.check.ok{background:var(--ok-bg);color:var(--ok-ink)} .check.warn{background:var(--warn-bg);color:var(--warn-ink)}
.btn-row{display:flex;gap:12px;margin:16px 0;flex-wrap:wrap}
.note{font-size:14px;color:var(--muted);line-height:1.6}
input[type=text]{font-size:17px;padding:11px 14px;border:1px solid #cfc6b8;border-radius:var(--radius-s);width:min(280px,100%);font-family:var(--font-ui);background:var(--paper)}
.done-box{background:var(--ok-bg);border-radius:var(--radius);padding:24px;margin-top:24px}
.consent-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:0 0 24px;box-shadow:var(--shadow)}
.consent-box label{display:block;margin:10px 0;line-height:1.5}
.hidden{display:none}
.page-pad{padding:40px 0 70px}