/* Layout: mobile-first impulse page — ad-clip hero, offer, proof, objections; sticky buy bar; one-sheet checkout */
:root{
  --bg:#f3f4f2; --surface:#ffffff; --fg:#17201c; --muted:#5d6762; --line:#d9ddd9;
  --accent:#1f4d3a; --accent-fg:#ffffff; --red:#b3262d; --chrome:#e6e9e7; --star:#c98a12;
  --display:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:"Figtree", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1412; --surface:#171e1b; --fg:#e8ece9; --muted:#9aa49f; --line:#2b3531;
  --accent:#6fbf98; --accent-fg:#0c1411; --red:#ff6b6f; --chrome:#222b27; --star:#f0b43c; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1412; --surface:#171e1b; --fg:#e8ece9; --muted:#9aa49f; --line:#2b3531;
  --accent:#6fbf98; --accent-fg:#0c1411; --red:#ff6b6f; --chrome:#222b27; --star:#f0b43c; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--body);padding-bottom:84px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.demo{background:var(--fg);color:var(--bg);font:11px var(--mono);text-align:center;padding-block:5px;letter-spacing:.04em}
.ship{background:var(--accent);color:var(--accent-fg);font:600 13px var(--body);text-align:center;padding-block:7px}
.ship b{font-weight:700}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:10px}
.logo{font:800 20px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--fg);text-decoration:none}
.logo span{color:var(--red)}
.rating{font-size:14px;color:var(--muted);margin:0 0 12px}
.eta{margin-top:10px;font-size:14px;line-height:1.4}
.eta b{color:var(--accent)}
.rating b{color:var(--star);letter-spacing:1px}

.hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;padding-block:4px 32px}
.hero>*{min-width:0}
/* the ad clip */
.clip{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/5;max-width:100%;background:#0b0f0d}
.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .8s ease,transform 4.5s linear}
.clip img.on{opacity:1;transform:scale(1.1)}
.clip .design-name{display:block;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:6px}
.clip .hook{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 16px;background:linear-gradient(transparent,rgb(0 0 0/.75));color:#fff}
.clip .hook p{font:800 30px/1 var(--display);text-transform:uppercase;margin:0;text-wrap:balance}
.clip .tag{position:absolute;top:12px;left:12px;font:600 11px var(--mono);background:rgb(0 0 0/.6);color:#fff;padding:5px 8px;border-radius:4px}

h1{font:800 clamp(34px,5vw,52px)/.95 var(--display);text-transform:uppercase;margin:0 0 10px;text-wrap:balance}
.lede{color:var(--muted);margin:0 0 16px;max-width:46ch}
.label{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;display:flex;justify-content:space-between;gap:8px}
.label .stock{color:var(--red);text-transform:none;letter-spacing:0}
.swatches{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:8px 12px;border-radius:999px;cursor:pointer;font:500 14px var(--body)}
.sw i{width:16px;height:16px;border-radius:50%;border:1px solid var(--line)}
.sw[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.bundles{display:grid;gap:8px;margin-bottom:14px}
.bundle{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:12px 14px;border-radius:8px;cursor:pointer;text-align:left;font:15px var(--body)}
.bundle[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.bundle small{display:block;color:var(--muted);font-size:13px}
.bundle .r{text-align:right;flex:none}
.bundle .r small{color:var(--accent);font-weight:700;white-space:nowrap}
.bundle .flag{position:absolute;top:-9px;right:12px;font:600 10px var(--mono);text-transform:uppercase;background:var(--accent);color:var(--accent-fg);padding:2px 7px;border-radius:3px}
.cta{width:100%;border:0;background:var(--accent);color:var(--accent-fg);font:800 22px var(--display);letter-spacing:.06em;text-transform:uppercase;padding:16px;border-radius:8px;cursor:pointer}
.cta:hover{filter:brightness(1.08)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.guarantee{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:13px;color:var(--muted)}
.guarantee b{color:var(--fg)}
.paylogos{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.paylogos span{font:600 11px var(--mono);border:1px solid var(--line);border-radius:4px;padding:3px 7px;color:var(--muted)}

section{padding-block:40px;border-top:1px solid var(--line)}
h2{font:800 32px/1 var(--display);text-transform:uppercase;margin:0 0 20px;text-wrap:balance}
.note{font:11px var(--mono);color:var(--red);margin:-12px 0 16px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{background:var(--surface);border-radius:8px;overflow:hidden}
.rev img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.rev div{padding:12px 14px}
.rev .s{color:var(--star);letter-spacing:1px;font-size:14px}
.rev p{margin:4px 0 6px;font-size:15px}
.rev small{color:var(--muted)}
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.who div{border-left:3px solid var(--red);padding:4px 0 4px 14px}
.who h3{margin:0 0 4px;font-size:18px}
.who p{margin:0;color:var(--muted)}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;margin-bottom:10px}
.feat h3{margin:0 0 4px;font-size:18px}
.feat p{margin:0;color:var(--muted)}
details{border-bottom:1px solid var(--line);padding-block:12px}
summary{cursor:pointer;font-weight:700}
details p{color:var(--muted);margin:8px 0 0}
.faq{max-width:680px}
.ops{background:var(--chrome);border-radius:8px;padding:16px 18px}
.ops summary{font:600 13px var(--mono)}
.ops table{width:100%;border-collapse:collapse;font:14px var(--mono);font-variant-numeric:tabular-nums;margin-top:12px}
.ops td{padding:6px 0;border-bottom:1px dashed var(--line)}
.ops td:last-child{text-align:right}
.ops tr.total td{font-weight:600;border-bottom:0;color:var(--accent)}
.ops p{font-size:13px;color:var(--muted);margin:12px 0 0}
footer{padding-block:28px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}

/* sticky buy bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--surface);border-top:1px solid var(--line);
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  transform:translateY(110%);transition:transform .2s ease}
.bar.show{transform:none}
.bar .in{max-width:1040px;margin:0 auto;display:flex;gap:12px;align-items:center}
.bar .t{flex:1;min-width:0;font-size:13px;line-height:1.3}
.bar .t b{display:block;font-size:16px}
.bar .cta{width:auto;padding:12px 22px;font-size:19px}

/* checkout sheet */
.scrim{position:fixed;inset:0;background:rgb(0 0 0/.45);z-index:20}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg);z-index:21;overflow:auto;
  padding:calc(20px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 20px;
  transform:translateX(100%);transition:transform .25s ease}
.sheet.open{transform:none}
.sheet h2{font-size:28px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.x{background:none;border:0;font:28px var(--body);color:var(--fg);cursor:pointer;line-height:1}
.line{display:flex;gap:12px;align-items:center;background:var(--surface);padding:10px;border-radius:8px;margin-bottom:12px}
.line img{width:56px;height:56px;object-fit:cover;border-radius:4px}
.line div{flex:1;min-width:0;font-size:14px}
.express{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.express button{padding:13px;border-radius:8px;border:0;font:700 15px var(--body);cursor:pointer}
.ap{background:#000;color:#fff}
.gp{background:#fff;color:#111;box-shadow:inset 0 0 0 1px #d0d0d0}
.pp{grid-column:1/-1;background:#ffc439;color:#111}
.or{text-align:center;color:var(--muted);font-size:12px;margin:6px 0 12px}
.f{display:grid;gap:8px}
.f input{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:15px var(--body)}
.f .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bump{display:flex;gap:10px;align-items:flex-start;border:1px dashed var(--red);border-radius:8px;padding:12px;margin:12px 0;font-size:14px;cursor:pointer}
.bump input{margin-top:3px}
.f .bump input{width:auto;flex:none;padding:0}
.sum{font-variant-numeric:tabular-nums;margin:12px 0}
.sum div{display:flex;justify-content:space-between;padding:3px 0;font-size:14px}
.sum .t{font-weight:700;font-size:17px;border-top:1px solid var(--line);padding-top:8px;margin-top:6px}
.small{font-size:12px;color:var(--muted);text-align:center;margin-top:8px}
.done{text-align:center;padding-block:40px}
.toggle{background:none;border:1px solid var(--line);color:var(--fg);font:600 12px var(--mono);padding:6px 10px;border-radius:4px;cursor:pointer}

@media (max-width:760px){
  header .wrap{padding-block:8px}
  .hero{grid-template-columns:1fr;gap:16px}
  .clip{margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));border-radius:0;max-width:none}
  .reviews,.who,.feats{grid-template-columns:1fr}
  .reviews{grid-template-columns:repeat(3,78%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .rev{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.clip img{transition:none;transform:none}.sheet,.bar{transition:none}}

.langs{display:flex;gap:8px;font:600 12px var(--mono)}
.langs a{color:var(--muted);text-decoration:none}
.langs a[aria-current]{color:var(--fg)}
.prefs{display:flex;align-items:center;gap:12px;flex:none}
.cur{position:relative;font:600 12px var(--mono)}
.cur summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;padding:4px 8px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.cur summary::-webkit-details-marker{display:none}
.cur summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.cur img{width:18px;height:18px;border-radius:50%;display:block}
.cur ul{position:absolute;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgb(0 0 0/.12);min-width:110px}
.cur li a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:5px;color:var(--fg);text-decoration:none}
.cur li a:hover,.cur li a[aria-current]{background:var(--chrome)}
@media (max-width:420px){
  header .wrap{gap:8px}
  .logo{font-size:17px;letter-spacing:.04em}
  .prefs{gap:8px}
  .langs{gap:6px;font-size:11px}
}
.f select{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:15px var(--body)}
.err{color:var(--red);font-size:14px;margin:4px 0 0}
.thanks{max-width:560px;margin:0 auto;padding-block:40px}
.thanks h1{margin-bottom:8px}
.box{background:var(--surface);border-radius:8px;padding:16px 18px;margin:16px 0}
.box div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-variant-numeric:tabular-nums}
.box .t{font-weight:700;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}

/* design picker (products sold in many designs) */
.designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-bottom:16px}
.design{display:grid;gap:4px;text-decoration:none;color:var(--fg);font:500 12px var(--body);text-align:center;border:2px solid transparent;border-radius:8px;padding:3px;background:var(--surface)}
.design img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:5px;display:block}
.design[aria-pressed="true"]{border-color:var(--accent)}
.mix{display:grid;gap:8px;margin-bottom:14px}
.mix-rows{display:grid;gap:8px}
.mix-rows label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.mix-rows select{flex:1;max-width:220px;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:14px var(--body)}
/* footer and legal pages */
.legal-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:8px}
.legal-links a,.small a{color:inherit}
footer p{margin:0}
.legal{max-width:720px;margin:0 auto;padding-block:32px 48px}
.legal h1{font-size:clamp(30px,5vw,44px)}
.legal h2{font-size:22px;margin:28px 0 8px}
.legal p,.legal li{color:var(--fg);line-height:1.65}
.legal .updated{color:var(--muted);font-size:13px}
.legal .draft{background:var(--chrome);border-left:3px solid var(--red);padding:10px 14px;font-size:14px}