:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.25rem,1rem + 3.6vw,4.5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Spendasaurus: cream, dino green, coin gold, extinction coral */
  --color-bg:#fff7e8;
  --color-surface:#fffbf2;
  --color-surface-2:#ffffff;
  --color-surface-offset:#fbedd0;
  --color-divider:oklch(0.3 0.05 150 / 0.12);
  --color-border:oklch(0.3 0.05 150 / 0.22);
  --color-text:#17301f;
  --color-text-muted:#566a5b;
  --color-text-faint:#9aa89d;
  --color-text-inverse:#fffbf2;
  --color-ink:#17301f;
  --color-primary:#1f7a43;
  --color-primary-hover:#17643a;
  --color-primary-active:#114d2c;
  --color-primary-highlight:#ffe0d3;
  --color-dino:#2f9e5b;
  --color-gold:#ffc93c;
  --color-coral:#d9481c;
  --color-coral-bright:#ff8a5c;
  --color-success:#1f7a43;
  --color-error:#b3261e;

  --radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1.125rem;--radius-xl:1.75rem;--radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px oklch(.25 .02 70 / .06);
  --shadow-md:0 6px 18px oklch(.25 .02 70 / .08);
  --shadow-lg:0 18px 48px oklch(.25 .02 70 / .12);
  --content-wide:1200px;

  --font-display:'Fredoka','Arial Rounded MT Bold','Helvetica Neue',sans-serif;
  --font-body:'Figtree','Helvetica Neue',sans-serif;
  --shadow-pop:4px 4px 0 var(--color-ink);
}

.wrap{width:min(100% - 2*clamp(var(--space-4),5vw,var(--space-12)),var(--content-wide));margin-inline:auto}
.num{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:var(--space-4);top:-100px;background:var(--color-ink);color:var(--color-text-inverse);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);z-index:100}
.skip:focus{top:var(--space-4)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:oklch(from var(--color-bg) l c h / .88);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:var(--space-4)}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--color-ink);text-decoration:none;letter-spacing:-.01em;line-height:1}
.wordmark span{color:var(--color-primary)}
.wordmark.small{font-size:var(--text-lg)}
.site-header nav{display:flex;align-items:center;gap:var(--space-6)}
.site-header nav a:not(.btn){font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;font-weight:500}
.site-header nav a:not(.btn):hover{color:var(--color-text)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);background:var(--color-ink);color:var(--color-text-inverse);font-weight:700;font-size:var(--text-sm);text-decoration:none;border-radius:var(--radius-md);padding:var(--space-3) var(--space-6);min-height:48px;border:1px solid var(--color-ink)}
.btn:hover{background:var(--color-primary);border-color:var(--color-primary)}
.btn:active{transform:translateY(1px)}
.btn-small{min-height:40px;padding:var(--space-2) var(--space-4)}
.btn-wide{width:100%}
.btn[disabled]{opacity:.6;cursor:progress}

/* Hero */
.hero{padding-block:clamp(var(--space-10),6vw,var(--space-20)) clamp(var(--space-16),8vw,var(--space-24))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(var(--space-8),5vw,var(--space-20));align-items:start}
.hero-copy{padding-top:var(--space-6)}
.kicker{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4)}
h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);line-height:1.04;letter-spacing:-.02em;color:var(--color-ink)}
h1 em{font-style:italic;color:var(--color-primary)}
.lede{margin-top:var(--space-6);font-size:var(--text-base);color:var(--color-text-muted);max-width:46ch}
.hero-points{margin-top:var(--space-8);display:grid;gap:var(--space-2);border-top:1px solid var(--color-divider);padding-top:var(--space-5)}
.hero-points li{font-size:var(--text-sm);color:var(--color-text);padding-left:var(--space-6);position:relative}
.hero-points li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--color-primary)}

/* Calculator */
.calc{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:clamp(var(--space-5),3vw,var(--space-8))}
.calc-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.calc-title{font-family:var(--font-body);font-weight:700;font-size:var(--text-lg)}
.calc-meta{font-size:var(--text-xs);color:var(--color-text-muted)}
.rows{display:grid;gap:var(--space-4)}
.row{border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--color-surface);animation:rowIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.row-top{display:grid;grid-template-columns:1.2fr 1fr .9fr auto;gap:var(--space-3);align-items:end}
.row-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-3)}
.ctl{display:grid;gap:var(--space-1);min-width:0}
.ctl label,.field label,.field legend{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted)}
.ctl select,.ctl input,.field input,.field select{width:100%;min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}
.ctl input{font-variant-numeric:tabular-nums}
.ctl select:hover,.ctl input:hover,.field input:hover,.field select:hover{border-color:oklch(.25 .02 70 / .35)}
.ctl select:focus,.ctl input:focus,.field input:focus,.field select:focus{outline:none;border-color:var(--color-ink);box-shadow:0 0 0 3px oklch(.25 .02 70 / .08)}
.prefix{position:relative}
.prefix span{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);font-size:var(--text-sm);color:var(--color-text-muted);pointer-events:none}
.prefix input{padding-left:var(--space-6)}
.remove{min-width:44px;min-height:44px;border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--text-lg);line-height:1;border:1px solid transparent}
.remove:hover{color:var(--color-error);border-color:var(--color-divider)}
.row-out{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2) var(--space-4);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px dashed var(--color-divider);font-size:var(--text-xs);color:var(--color-text-muted)}
.row-out strong{color:var(--color-text);font-weight:700}
.row-out .warn{color:var(--color-primary);font-weight:700}
.row-out .ok{color:var(--color-success);font-weight:700}
.add-row{margin-top:var(--space-4);width:100%;min-height:44px;border:1px dashed var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.add-row:hover{color:var(--color-ink);border-color:var(--color-ink);background:var(--color-surface)}
.add-row[disabled]{opacity:.5;cursor:not-allowed}

.receipt{margin-top:var(--space-6);background:var(--color-ink);color:var(--color-text-inverse);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);display:grid;gap:var(--space-3)}
.receipt-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);font-size:var(--text-sm)}
.receipt-line span{color:oklch(.9 .01 80 / .75)}
.receipt-line strong{font-size:var(--text-lg);font-weight:700}
.receipt-line.expiring{padding-block:var(--space-3);border-block:1px dashed oklch(.9 .01 80 / .2)}
.receipt-line.expiring span{color:var(--color-text-inverse);font-weight:500}
.receipt-line.expiring strong{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:#fb923c;line-height:1}
.receipt-line.soft strong{font-size:var(--text-base);font-weight:500}
.receipt-note{font-size:var(--text-xs);color:oklch(.9 .01 80 / .7);max-width:none}
.receipt-note:empty{display:none}

/* Rates */
.rates{padding-block:clamp(var(--space-16),8vw,var(--space-24));background:var(--color-surface);border-block:1px solid var(--color-divider)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:end;margin-bottom:var(--space-10)}
h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1.08;letter-spacing:-.015em;color:var(--color-ink)}
.section-head p{color:var(--color-text-muted)}
.table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2)}
.rate-table{font-size:var(--text-sm);min-width:640px}
.rate-table th{text-align:left;font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.rate-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-divider);font-variant-numeric:tabular-nums}
.rate-table tr:last-child td{border-bottom:none}
.rate-table td:nth-child(4){font-weight:700}
.rate-table .grp td{background:var(--color-surface);font-weight:700;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink);padding-top:var(--space-4)}
.tag{display:inline-block;font-size:var(--text-xs);padding:2px var(--space-2);border-radius:var(--radius-full);background:var(--color-primary-highlight);color:var(--color-primary-active);font-weight:500}
.tag.keep{background:#dfe8d6;color:#2f5220}
.fine{margin-top:var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted);max-width:none}
.fine a{color:inherit}
.fine-inline{font-size:var(--text-xs);color:var(--color-text-muted)}
.fine a:hover{color:var(--color-primary)}

/* Coming next */
.next{padding-block:clamp(var(--space-20),10vw,var(--space-32))}
.next-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(var(--space-10),6vw,var(--space-24));align-items:start}
.next-intro{position:sticky;top:calc(64px + var(--space-8))}
.next-intro p:last-child{margin-top:var(--space-5);color:var(--color-text-muted)}
.next-list{display:grid}
.next-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);padding-block:var(--space-8);border-top:1px solid var(--color-border);max-width:none}
.next-list li:last-child{border-bottom:1px solid var(--color-border)}
.step{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);line-height:1}
.next-list h3{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-2)}
.next-list p{color:var(--color-text-muted)}

/* Waitlist */
.waitlist{padding-block:clamp(var(--space-16),8vw,var(--space-24));background:var(--color-ink);color:var(--color-text-inverse)}
.wl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(var(--space-8),6vw,var(--space-20));align-items:start}
.waitlist h2{color:var(--color-text-inverse)}
.wl-copy p{margin-top:var(--space-5);color:oklch(.9 .01 80 / .75)}
.wl-count{font-weight:700;color:#fb923c!important}
.wl-form{background:var(--color-surface-2);color:var(--color-text);border-radius:var(--radius-xl);padding:clamp(var(--space-5),3vw,var(--space-8));display:grid;gap:var(--space-5)}
.field{display:grid;gap:var(--space-2);border:none;min-width:0}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field-error{font-size:var(--text-xs);color:var(--color-error)}
.field input[aria-invalid="true"]{border-color:var(--color-error)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-sm);transition:all var(--transition-interactive);user-select:none}
.chip:hover span{border-color:var(--color-ink)}
.chip input:checked+span{background:var(--color-ink);color:var(--color-text-inverse);border-color:var(--color-ink)}
.chip input:focus-visible+span{outline:2px solid var(--color-primary);outline-offset:2px}
.form-status{font-size:var(--text-sm);min-height:1.4em;max-width:none}
.form-status.ok{color:var(--color-success);font-weight:700}
.form-status.err{color:var(--color-error)}
.wl-form .fine{margin-top:calc(-1 * var(--space-3))}

/* Footer */
.site-footer{background:#141310;color:oklch(.9 .01 80 / .6);padding-block:var(--space-10)}
.site-footer .wordmark{color:var(--color-text-inverse)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.footer-inner p{font-size:var(--text-xs);max-width:60ch}

/* Responsive */
@media (max-width:1100px) and (min-width:961px){.row-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .hero-grid,.next-grid,.wl-grid,.section-head{grid-template-columns:1fr}
  .next-intro{position:static}
  .hero-copy{padding-top:0}
}
@media (max-width:560px){
  .site-header nav a:not(.btn){display:none}
  .row-top{grid-template-columns:1fr 1fr auto}
  .row-top .ctl:nth-child(3){grid-column:1 / 3;grid-row:2}
  .row-grid{grid-template-columns:1fr 1fr}
  .field-pair{grid-template-columns:1fr}
  .receipt{padding:var(--space-4)}
  .receipt-line.expiring{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .next-list li{gap:var(--space-4)}
}
.btn-small{white-space:nowrap}
@media (max-width:360px){.site-header .btn-small{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.wordmark{font-size:var(--text-lg)}}

/* ---- Spendasaurus playful layer ---- */
.wordmark{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:700;letter-spacing:-.005em}
.wordmark img{width:40px;height:auto;flex:none}
.wordmark.small img{width:32px}
.kicker{color:var(--color-coral);display:inline-block;background:var(--color-primary-highlight);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);letter-spacing:.08em}
h1{font-weight:600;line-height:1.02;letter-spacing:-.015em}
h1 em{font-style:normal;color:var(--color-coral);position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.04em;height:.22em;background:var(--color-gold);border-radius:var(--radius-full);z-index:-1}
h2{font-weight:600}
.btn{background:var(--color-primary);border:2px solid var(--color-ink);border-radius:var(--radius-full);box-shadow:var(--shadow-pop);transition:transform var(--transition-interactive),box-shadow var(--transition-interactive),background var(--transition-interactive)}
.btn:hover{background:var(--color-primary-hover);border-color:var(--color-ink);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--color-ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--color-ink)}
.btn-small{box-shadow:3px 3px 0 var(--color-ink)}
.hero{background:radial-gradient(60% 50% at 10% 0%,#fdeec6 0%,transparent 70%),radial-gradient(50% 60% at 100% 10%,#e3f4d8 0%,transparent 70%)}
.hero-points{border-top:2px dashed var(--color-border)}
.hero-points li::before{width:10px;height:10px;top:.45em;border-radius:50%;background:var(--color-gold);border:2px solid var(--color-ink)}
.dino{margin-top:var(--space-8);display:flex;align-items:flex-end;gap:var(--space-4)}
.dino img{width:clamp(150px,18vw,220px);flex:none;animation:bob 3.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1.5deg)}}
.bubble{position:relative;align-self:center;background:var(--color-surface-2);border:2px solid var(--color-ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:var(--space-3) var(--space-4);font-family:var(--font-display);font-weight:500;font-size:var(--text-sm);line-height:1.35;max-width:26ch;margin-bottom:var(--space-10)}
.bubble::before{content:"";position:absolute;left:-12px;bottom:18px;width:18px;height:18px;background:var(--color-surface-2);border-left:2px solid var(--color-ink);border-bottom:2px solid var(--color-ink);transform:rotate(45deg)}
.calc{border:2px solid var(--color-ink);box-shadow:8px 8px 0 var(--color-ink)}
.calc-title{font-family:var(--font-display);font-weight:600}
.row{border:2px solid var(--color-divider)}
.ctl select,.ctl input,.field input,.field select{border-width:2px}
.ctl select:focus,.ctl input:focus,.field input:focus,.field select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h / .18)}
.add-row{border-width:2px}
.add-row:hover{border-color:var(--color-primary);color:var(--color-primary)}
.row-out .warn{color:var(--color-coral)}
.receipt{background:var(--color-ink);border-radius:var(--radius-lg)}
.receipt-line.expiring strong{color:var(--color-coral-bright)}
.rates{background:var(--color-surface-offset);border-block:2px solid var(--color-ink)}
.table-wrap{border:2px solid var(--color-ink);box-shadow:var(--shadow-pop)}
.rate-table th{background:#fff4dc}
.tag{background:var(--color-primary-highlight);color:#9a3412;font-weight:700}
.tag.keep{background:#d8f0cc;color:#17643a}
.step{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--color-gold);border:2px solid var(--color-ink);color:var(--color-ink);font-size:var(--text-base);font-weight:600}
.next-list li{border-top:2px dashed var(--color-border);align-items:start}
.next-list li:last-child{border-bottom:2px dashed var(--color-border)}
.next-list h3{font-family:var(--font-display);font-weight:600}
.waitlist{background:var(--color-primary);background-image:radial-gradient(circle at 20% 30%,oklch(1 0 0 / .08) 0 2px,transparent 3px),radial-gradient(circle at 70% 80%,oklch(1 0 0 / .08) 0 2px,transparent 3px);background-size:48px 48px,64px 64px;border-top:2px solid var(--color-ink)}
.waitlist h2{color:#fff}
.wl-copy p{color:oklch(1 0 0 / .9)}
.wl-count{color:var(--color-gold)!important}
.wl-form{border:2px solid var(--color-ink);box-shadow:8px 8px 0 var(--color-ink)}
.chip span{border-width:2px}
.chip input:checked+span{background:var(--color-primary);border-color:var(--color-ink)}
.site-footer{background:var(--color-ink);color:oklch(1 0 0 / .7)}
@media (max-width:560px){.calc,.wl-form{box-shadow:5px 5px 0 var(--color-ink)}.calc-meta{white-space:nowrap}.dino{gap:var(--space-2)}.dino img{width:130px}.bubble{margin-bottom:var(--space-6)}}
@media (max-width:360px){.wordmark img{width:30px}}