/* treat.dogware.ai — applied Studio design pack (#102898). Dogware SSOT tokens.
   Rubik / Space Mono, amber #FFC94A treat CTA, pink #FF5C9B strikethrough, bone tiers.
   Logical CSS only (inset/start/end). */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700;800;900&family=Space+Mono:wght@400;700&family=Heebo:wght@400;700;800;900&display=swap');

:root{
  --bg:#0E0E10; --card:#17171B; --card2:#1D1D22; --line:#262629;
  --accent:#FFC94A; --text:#F7F7F9; --muted:#A0A0A8;
  --perform:#00D18F; --action:#FF5C9B; --build:#3B9EFF; --gold:#C6A15B;
  --radius:18px;
  --font:Rubik,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  background-image:radial-gradient(60% 50% at 50% -8%,rgba(255,201,74,.10),transparent 70%);
  min-height:100vh; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* pack mark helper */
.mark{display:inline-block;line-height:0}
.mark svg{display:block}

/* header */
header{display:flex;align-items:center;gap:10px;padding:26px 0}
header .mark svg{width:32px;height:32px}
header .wm{font-weight:900;font-size:19px}
header .tag{margin-inline-start:auto;font:700 12px var(--mono);color:var(--muted);letter-spacing:.1em}

/* hero */
.hero{text-align:center;padding:40px 0 46px}
.hero .kick{font:700 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.hero h1{font-size:clamp(38px,7vw,56px);font-weight:900;line-height:1.05;letter-spacing:-.02em;margin-bottom:18px}
.hero h1 .old{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--action);text-decoration-thickness:4px}
.hero h1 .new{color:var(--accent)}
.hero p{font-size:clamp(16px,2.4vw,18px);color:var(--muted);max-width:520px;margin:0 auto 30px;line-height:1.5}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:#1A1408;
  font-weight:800;font-size:17px;padding:15px 30px;border-radius:14px;border:0;cursor:pointer;text-decoration:none;
  box-shadow:0 16px 34px -12px rgba(255,201,74,.5);transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(255,201,74,.6);text-decoration:none}
.cta:active{transform:scale(.985)}
.cta:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.cta.busy{background:#2A2A30;color:var(--muted);box-shadow:none}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 26px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 18px;
  text-align:center;position:relative;cursor:pointer;transition:border-color .12s,background .12s,transform .12s,box-shadow .12s}
.tier:hover{transform:translateY(-2px);border-color:#3a3a40}
.tier.sel{border-color:var(--accent);background:rgba(255,201,74,.08);box-shadow:0 0 0 1px var(--accent)}
.tier.feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 44px -20px rgba(255,201,74,.4)}
.tier .flag{position:absolute;inset-block-start:-11px;inset-inline-start:50%;transform:translateX(-50%);
  background:var(--accent);color:#1A1408;font:700 10px var(--mono);letter-spacing:.1em;padding:3px 10px;
  border-radius:999px;text-transform:uppercase;white-space:nowrap}
.tier .emoji{font-size:34px;line-height:1;margin-bottom:12px}
.tier .name{font-weight:800;font-size:17px;margin-bottom:4px}
.tier .price{font:700 26px var(--mono);color:var(--accent);margin-bottom:6px}
.tier .desc{font-size:12.5px;color:var(--muted);line-height:1.4}

/* custom / details panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 16px}
.panel.hide,.hide{display:none}
label{display:block;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
label .opt{opacity:.6;font-weight:400;text-transform:none;letter-spacing:0}
input,textarea{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:12px;
  color:var(--text);padding:12px 14px;font:inherit;font-size:15px}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
.cur{position:relative}
.cur .sign{position:absolute;inset-inline-start:14px;inset-block-start:50%;transform:translateY(-50%);color:var(--muted);font:700 15px var(--mono)}
.cur input{padding-inline-start:32px;font:700 16px var(--mono)}
.hint{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.field{margin-top:14px}
.field:first-child{margin-top:0}
.backlink-box{border:1px solid rgba(255,201,74,.4);border-radius:14px;padding:16px;margin-top:16px;background:rgba(255,201,74,.05)}
.backlink-box h4{margin:0 0 6px;color:var(--accent);font-size:14px;font-weight:800}
.demo-badge{display:inline-block;margin-top:14px;font:700 12px var(--mono);color:var(--accent);
  background:rgba(255,201,74,.12);padding:5px 12px;border-radius:999px}

.paybar{margin:4px 0 60px}
.paybar .cta{width:100%}

/* how-it-works */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0 0 60px}
.step{background:linear-gradient(160deg,#161619,#111113);border:1px solid var(--line);border-radius:16px;padding:24px}
.step .num{font:700 13px var(--mono);color:var(--accent);margin-bottom:10px}
.step h3{font-size:16px;font-weight:800;margin-bottom:6px}
.step p{font-size:13px;color:var(--muted);line-height:1.45}

/* thank-you band (thanks page) */
.thanks{background:radial-gradient(70% 90% at 50% 0,rgba(0,209,143,.12),transparent),var(--card);
  border:1px solid var(--line);border-radius:22px;padding:46px 30px;text-align:center;margin:20px 0 40px;
  position:relative;overflow:hidden}
.thanks .mark svg{width:60px;height:60px;margin-bottom:16px}
.thanks h2{font-size:clamp(24px,5vw,30px);font-weight:900;margin-bottom:10px}
.thanks p{font-size:15px;color:var(--muted);max-width:440px;margin:0 auto;line-height:1.5}
.cf{position:absolute;inset:0;pointer-events:none}
.cf i{position:absolute;width:8px;height:8px;border-radius:2px;opacity:.85}

/* stats / supporters */
.section-h{text-align:center;margin:16px 0 20px}
.section-h .kick{font:700 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.section-h h1{font-size:clamp(28px,5vw,40px);font-weight:900}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:20px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center}
.stat .n{font:700 32px var(--mono);color:var(--accent)}
.stat .k{color:var(--muted);font-size:13px;margin-top:4px}
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:6px 0;margin-top:10px}
.item{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .amt{font:700 15px var(--mono);color:var(--accent)}
.item .who{font-weight:700}
.item .meta{color:var(--muted);font-size:12.5px}

/* footer */
footer{border-top:1px solid var(--line);padding:24px 0 40px;display:flex;align-items:center;gap:8px;
  font:400 12px var(--mono);color:var(--muted)}
footer a{color:var(--muted);text-decoration:underline}
footer .sp{margin-inline-start:auto}

.spin{width:16px;height:16px;border:2px solid rgba(160,160,168,.35);border-top-color:var(--accent);
  border-radius:50%;display:inline-block;animation:tdg-sp 1s linear infinite;vertical-align:middle}
@keyframes tdg-sp{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .hero{padding:24px 0 36px}
  .tiers{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
  .how{grid-template-columns:1fr;gap:14px;margin-bottom:44px}
  footer{flex-direction:column;gap:10px;text-align:center}
  footer .sp{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
  .cta,.tier{transition:none}
  .spin{animation:none}
  .cf{display:none}
}

/* ---- compatibility layer: stats / supporters / docs sub-pages (older classes) ---- */
:root{--amber:var(--accent);--mint:var(--perform);--orange:var(--action)}
.center{text-align:center}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:26px 0 22px}
.brand img{width:34px;height:34px;border-radius:9px}
.brand b{font-size:18px;font-weight:900}
.brand span{color:var(--muted);font:400 13px var(--mono)}
.lead{color:var(--muted);font-size:17px;max-width:560px;margin:0 auto 8px}
.sub{color:var(--muted);font-size:14.5px;max-width:560px;margin:0 auto 24px;line-height:1.5}
h1 .strike,.strike{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--action);text-decoration-thickness:3px;font-weight:700}
h1 .treat,.treat{color:var(--accent)}
h3{font-weight:800}
.foot{margin-top:36px;color:var(--muted);font:400 13px var(--mono)}
.foot a{color:var(--muted);text-decoration:underline}
pre code{color:var(--accent)}