/* Sloosh palette — tokens from assets/sloosh.css, mapped onto the pitch */
:root {
  --paper:#FECC15; --card:#FFFFFF; --ink:#090909; --dim:#4A4A42;
  --rule:#090909; --signal:#5C4ADE; --warn:#FA4903; --chip:#FFFFFF;
  --display:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(22px,5vw,80px);
  --measure:66ch;
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#090909; --card:#161616; --ink:#FFF8E6; --dim:#9A9A94;
    --rule:#FFF8E6; --signal:#9E92FF; --warn:#FF7A47; --chip:#1C1C1C; }
}
:root[data-theme="dark"] { --paper:#090909; --card:#161616; --ink:#FFF8E6; --dim:#9A9A94;
  --rule:#FFF8E6; --signal:#9E92FF; --warn:#FF7A47; --chip:#1C1C1C; }
:root[data-theme="light"] { --paper:#FECC15; --card:#FFFFFF; --ink:#090909; --dim:#4A4A42;
  --rule:#090909; --signal:#5C4ADE; --warn:#FA4903; --chip:#FFFFFF; }

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:var(--display);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom); }
a { color:var(--signal); }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }

.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--signal); margin:0 0 16px; }
.kicker { font-family:var(--mono); font-size:10.5px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--dim); margin:0 0 12px; }

/* ---------- masthead: wordmark only, no nav (one page, one goal) ---------- */
.bar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--pad); border-bottom:1px solid var(--rule); }
.wordmark { font-size:16px; font-weight:700; letter-spacing:-0.035em; }
.wordmark i { font-style:normal; color:var(--signal); }
.bar .tag { font-family:var(--mono); font-size:10px; letter-spacing:0.11em;
  text-transform:uppercase; color:var(--dim); border:1px solid var(--rule);
  border-radius:2px; padding:6px 10px; white-space:nowrap; }

/* ---------- hero ---------- */
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:clamp(28px,5vw,64px); align-items:center;
  padding:clamp(44px,7vw,96px) var(--pad) clamp(36px,5vw,72px); }
h1 { font-size:clamp(38px,6.6vw,82px); font-weight:700; letter-spacing:-0.045em;
  line-height:0.95; text-wrap:balance; margin:0 0 22px; }
h1 em { font-style:italic; color:var(--signal); }
.sub { font-size:clamp(16px,1.7vw,21px); line-height:1.5; color:var(--dim);
  max-width:48ch; margin:0 0 24px; }
.sub strong { color:var(--ink); font-weight:600; }
.proof-line { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:15px; line-height:1.45; margin:0 0 26px;
  padding-left:14px; border-left:2px solid var(--signal); }
.proof-line b { font-weight:650; }
.cta { display:inline-block; background:var(--signal); color:#fff;
  font-family:var(--display); font-size:16px; font-weight:600; letter-spacing:-0.01em;
  border:0; border-radius:3px; padding:16px 26px; cursor:pointer;
  text-decoration:none; transition:opacity .15s; }
.cta:hover { opacity:.88; }
.cta-note { font-size:13.5px; line-height:1.5; color:var(--dim); margin:12px 0 0; }

/* ---------- before/after diagram ---------- */
.model { border:1px solid var(--rule); border-radius:4px; background:var(--card);
  padding:20px; }
.model-head { display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px; }
.model-head .t { font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; }
.model-head .live { font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--dim); border:1px solid var(--rule);
  border-radius:20px; padding:4px 9px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; }
.row .lab { font-family:var(--mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--dim); margin-bottom:5px; }
.row .val { font-size:16px; font-weight:650; letter-spacing:-0.02em; line-height:1.2; }
.chips { display:flex; gap:5px; flex-shrink:0; }
.chips span { width:31px; height:31px; display:grid; place-items:center;
  border-radius:3px; font-family:var(--mono); font-size:11px;
  border:1px solid var(--rule); background:var(--paper); }
.chips.solved span { background:var(--signal); color:#fff; border-color:var(--signal); }
.divider { display:flex; align-items:center; gap:12px; }
.divider hr { flex:1; border:0; border-top:1px solid var(--rule); margin:0; }
.divider span { font-size:15px; color:var(--signal); }
.model-foot { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px; margin-top:16px; }
.model-foot > div { border:1px solid var(--rule); border-radius:3px; padding:12px 13px; }
.model-foot .k { font-size:13.5px; font-weight:650; letter-spacing:-0.015em; margin-bottom:3px; }
.model-foot .v { font-size:12.5px; color:var(--dim); line-height:1.4; }

/* ---------- sections ---------- */
section { padding:clamp(44px,6vw,88px) var(--pad); border-top:1px solid var(--rule); }
h2 { font-size:clamp(28px,4.4vw,52px); font-weight:700; letter-spacing:-0.04em;
  line-height:1.02; text-wrap:balance; margin:0 0 20px; max-width:20ch; }
h2 em { font-style:italic; color:var(--signal); }
.body-copy { font-size:clamp(15px,1.5vw,18px); line-height:1.6; max-width:var(--measure);
  color:var(--dim); margin:0 0 14px; }
.body-copy strong { color:var(--ink); font-weight:600; }

/* ---------- steps ---------- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:4px; overflow:hidden; margin-top:34px; }
.steps > div { background:var(--paper); padding:24px 22px; display:flex;
  flex-direction:column; gap:9px; }
.steps .n { font-family:var(--mono); font-size:11px; color:var(--signal);
  font-variant-numeric:tabular-nums; }
.steps .h { font-size:20px; font-weight:700; letter-spacing:-0.028em; line-height:1.1; }
.steps .p { font-size:14.5px; line-height:1.5; color:var(--dim); margin:0; }

/* ---------- offer ---------- */
.offer { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:4px; overflow:hidden; margin-top:32px; }
.offer > div { background:var(--card); padding:24px 22px; }
.offer .h { font-size:19px; font-weight:700; letter-spacing:-0.025em; margin-bottom:9px; }
.offer .p { font-size:14.5px; line-height:1.55; color:var(--dim); margin:0; }

.checks { list-style:none; padding:0; margin:28px 0 0; max-width:var(--measure); }
.checks li { position:relative; padding-left:26px; font-size:15.5px; line-height:1.55;
  margin-bottom:13px; }
.checks li::before { content:"→"; position:absolute; left:0; top:0;
  color:var(--signal); font-family:var(--mono); font-size:14px; }

/* ---------- faq ---------- */
.faq { max-width:var(--measure); margin-top:30px; }
.faq details { border-bottom:1px solid var(--rule); }
.faq summary { cursor:pointer; list-style:none; padding:18px 0;
  font-size:17px; font-weight:650; letter-spacing:-0.02em; line-height:1.3;
  display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); color:var(--signal);
  font-size:18px; line-height:1; flex-shrink:0; }
.faq details[open] summary::after { content:"−"; }
.faq p { font-size:15px; line-height:1.6; color:var(--dim); margin:0 0 18px; }

/* ---------- close ---------- */
.close { text-align:left; }
.close .cta { margin-top:10px; }

footer { padding:28px var(--pad) 40px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:var(--dim); }
footer a { color:var(--dim); text-decoration:none; border-bottom:1px solid var(--rule); }
footer a:hover { color:var(--signal); border-bottom-color:var(--signal); }

/* ---------- sticky mobile CTA (+11% per the swipe file) ---------- */
.sticky { position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:none; padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  background:var(--paper); border-top:1px solid var(--rule); }
.sticky .cta { display:block; text-align:center; width:100%; padding:15px 20px; }

@media (max-width: 900px) {
  .hero { grid-template-columns:minmax(0,1fr); }
  .model { order:2; }
}
@media (max-width: 700px) {
  .sticky { display:block; }
  body { padding-bottom:84px; }
  .bar .tag { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}

/* ============================================================================
   SLOOSH sticker treatment — thick rules, offset shadows, yellow CTA
   ========================================================================== */
.bar { border-bottom-width:3px; }
.bar .tag { border-width:2px; border-radius:999px; font-weight:700;
  color:var(--ink); background:var(--card); }

.model { border-width:3px; border-radius:14px; box-shadow:5px 5px 0 var(--ink); }
.model-head .live { border-width:2px; border-radius:999px; font-weight:700; color:var(--ink); }
.model-foot > div { border-width:2px; border-radius:9px; }
.chips span { border-width:2px; border-radius:7px; font-weight:700; }
.chips.solved span { background:var(--ink); color:var(--paper); border-color:var(--ink); }

.steps, .offer { border-width:3px; border-radius:14px; box-shadow:5px 5px 0 var(--ink); gap:3px; }
.steps > div, .offer > div { background:var(--card); }
.steps .n { font-weight:800; color:var(--ink); background:var(--chip);
  width:30px; height:30px; display:grid; place-items:center;
  border:2px solid var(--ink); border-radius:999px; font-size:13px; }

.cta { background:#FECC15; color:#090909; border:3px solid #090909;
  border-radius:9px; box-shadow:4px 4px 0 #090909; font-weight:800;
  transition:transform .1s, box-shadow .1s; }
.cta:hover { opacity:1; transform:translate(2px,2px); box-shadow:2px 2px 0 #090909; }
.cta:active { transform:translate(4px,4px); box-shadow:0 0 0 #090909; }

.proof-line { border-left-width:4px; }
.faq details { border-bottom-width:2px; }
.checks li::before { font-weight:800; }
section { border-top-width:3px; }
footer { border-top-width:3px; }
.sticky { border-top-width:3px; }
.sticky .cta { box-shadow:none; border-width:3px; }
.sticky .cta:hover, .sticky .cta:active { transform:none; box-shadow:none; }
/* small text stays black on yellow; violet reserved for display-size accents */
.eyebrow { color:var(--ink); font-weight:700; }
.kicker { color:var(--ink); font-weight:700; opacity:.72; }
.checks li::before { color:var(--ink); font-weight:800; }
.divider span { color:var(--ink); }