/* ==========================================================
   StonKitten  |  magenta + white sticker theme
   Colours are sampled from the logo and banner.
   Headings use Lilita One (closest Google Font to the banner lettering).
   ========================================================== */

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

:root{
  --magenta:#ea368f;        /* banner background */
  --magenta-deep:#b10f66;   /* small magenta text on white, pressed states */
  --blush:#ffe3f0;          /* pale magenta tint for alternate sections */
  --cream:#fffbf4;          /* banner lettering white */
  --ink:#0c1012;            /* banner outline black */
  --ink-soft:#3b2c36;
  --bull:#27c671; --bear:#ee324c;          /* candle colours from the logo */
  --bull-text:#0b7d40; --bear-text:#c0102b; /* text-safe versions */

  --display:'Lilita One','Titan One','Arial Rounded MT Bold','Arial Black',system-ui,sans-serif;
  --display-weight:400;
  --body:'Nunito',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;

  --edge:3px solid var(--ink);
  --pop:6px 6px 0 var(--ink);
}

html{ scroll-behavior:smooth; }
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--body); font-weight:600; font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media(max-width:600px){ .wrap{ padding:0 20px; } }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--cream); border:var(--edge); border-radius:999px; padding:8px 18px; font-weight:800; text-decoration:none; }
.skip:focus{ top:12px; }

:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; box-shadow:0 0 0 6px var(--cream); border-radius:6px; }

/* ---------- display type: the banner's sticker lettering ---------- */
.sticker{
  font-family:var(--display); font-weight:var(--display-weight);
  color:var(--cream);
  -webkit-text-stroke:.12em var(--ink);
  paint-order:stroke fill;
  stroke-linejoin:round;
  filter:drop-shadow(0 .05em 0 var(--ink));
  letter-spacing:.01em; line-height:.98; text-wrap:balance;
}
.h2{
  font-family:var(--display); font-weight:var(--display-weight);
  font-size:clamp(2.1rem,4.2vw,3.2rem); line-height:1.02; letter-spacing:.005em;
  text-wrap:balance; margin-bottom:22px;
}
.h2.sticker{ font-size:clamp(2.3rem,4.6vw,3.6rem); }

/* ---------- custom cursor (fine pointers only) ---------- */
html.has-fine-pointer, html.has-fine-pointer a, html.has-fine-pointer button, html.has-fine-pointer summary{ cursor:none; }
#curDot{
  position:fixed; top:0; left:0; width:18px; height:18px; border:2.5px solid var(--ink); border-radius:50%;
  box-shadow:0 0 0 2px var(--cream); pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .18s ease, height .18s ease, background-color .18s ease; display:none;
}
#curDot.big{ width:40px; height:40px; background:rgba(255,251,244,.45); }
#curTick{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999; transform:translate(16px,-8px);
  display:none; white-space:nowrap; background:var(--cream); border:2px solid var(--ink); border-radius:999px;
  padding:0 9px; font-family:var(--body); font-weight:800; font-size:.72rem; line-height:1.5;
}
html.has-fine-pointer #curDot, html.has-fine-pointer #curTick{ display:block; }

/* ---------- header ---------- */
.site-head{ background:var(--magenta); }
.mast{ max-width:1180px; margin:0 auto; padding:16px 32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; }
@media(max-width:600px){ .mast{ padding:14px 20px; } }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ width:50px; height:50px; border-radius:50%; border:var(--edge); background:var(--magenta); }
.wordmark{ font-size:1.75rem; }
.site-head nav{ display:flex; align-items:center; gap:6px; }
.site-head nav a{
  font-weight:800; font-size:.95rem; text-decoration:none; padding:7px 15px; border-radius:999px; border:3px solid transparent;
}
.site-head nav a:hover{ border-color:var(--ink); }
.site-head nav a[aria-current="page"]{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.site-head nav a.mast-cta{
  margin-left:10px; background:var(--cream); border-color:var(--ink); box-shadow:3px 3px 0 var(--ink);
  font-family:var(--display); font-weight:var(--display-weight); font-size:1.05rem; padding:6px 20px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.site-head nav a.mast-cta:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.site-head nav a.mast-cta[aria-current="page"]{ background:var(--cream); color:var(--ink); }
.menu-btn{
  display:none; background:var(--cream); border:var(--edge); border-radius:999px; padding:6px 18px;
  font-family:var(--display); font-weight:var(--display-weight); font-size:1.05rem; color:var(--ink); cursor:pointer; box-shadow:3px 3px 0 var(--ink);
}
@media(max-width:860px){
  .menu-btn{ display:block; }
  .site-head nav{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:8px; padding:8px 0 10px; }
  .site-head.open nav{ display:flex; }
  .site-head nav a{ font-size:1.05rem; padding:11px 18px; background:rgba(255,251,244,.25); border-color:var(--ink); }
  .site-head nav a.mast-cta{ margin-left:0; text-align:center; }
}

@media(max-width:400px){ .brand img{ width:42px; height:42px; } .wordmark{ font-size:1.4rem; } .brand{ gap:9px; } }

/* ---------- floating art strip (replaces the old ticker) ---------- */
.float-strip{
  background:var(--blush); border-top:var(--edge); border-bottom:var(--edge); overflow:hidden;
  height:132px; position:relative;
}
.float-track{ position:relative; height:100%; max-width:1180px; margin:0 auto; }
.fchar{
  position:absolute; top:50%; pointer-events:none; user-select:none;
  filter:drop-shadow(3px 4px 0 rgba(12,16,18,.18));
  animation:bob 5.5s ease-in-out infinite, drift 9s ease-in-out infinite;
}
.fchar.ficon{
  width:34px; height:34px; background-repeat:no-repeat; background-position:center; background-size:contain;
  filter:drop-shadow(2px 3px 0 rgba(12,16,18,.14));
}
.ficon--paw{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='6' ry='5' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='5' cy='9' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='10.2' cy='5.2' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='15.4' cy='5.2' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='19' cy='9' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ficon--fish{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath fill='%23ff9fcf' stroke='%230c1012' stroke-width='1.6' stroke-linejoin='round' d='M4 10c4-7 16-7 20 0-4 7-16 7-20 0z'/%3E%3Cpath fill='%23ea368f' stroke='%230c1012' stroke-width='1.6' stroke-linejoin='round' d='M24 10l6-5v10z'/%3E%3Ccircle cx='9' cy='9' r='1.3' fill='%230c1012'/%3E%3C/svg%3E"); }
.ficon--bone{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath fill='%23fffbf4' stroke='%230c1012' stroke-width='1.6' stroke-linejoin='round' d='M8 10a3.6 3.6 0 1 1 5.6-4.4h12.8A3.6 3.6 0 1 1 32 10a3.6 3.6 0 1 1-5.6 4.4H13.6A3.6 3.6 0 1 1 8 10z'/%3E%3C/svg%3E"); }
.fchar.f1{ left:4%;  width:96px;  height:96px;  animation-delay:.0s, .3s; }
.fchar.f2{ left:21%; width:78px;  height:78px;  top:38%; animation-delay:.8s, 1.1s; }
.fchar.f3{ left:40%; width:104px; height:104px; top:58%; animation-delay:1.6s, .5s; }
.fchar.f4{ left:63%; width:82px;  height:82px;  top:36%; animation-delay:.4s, 1.6s; }
.fchar.f5{ left:82%; width:94px;  height:94px;  animation-delay:1.2s, .1s; }
.fchar.g1{ left:14%; top:14%; animation-delay:.6s, .9s; }
.fchar.g2{ left:32%; top:80%; animation-delay:1.4s, .2s; }
.fchar.g3{ left:52%; top:16%; animation-delay:.2s, 1.3s; }
.fchar.g4{ left:73%; top:78%; animation-delay:1.0s, .7s; }
.fchar.g5{ left:93%; top:22%; animation-delay:1.8s, .4s; }
@keyframes bob{ 0%,100%{ transform:translateY(-50%) rotate(-4deg); } 50%{ transform:translateY(calc(-50% - 14px)) rotate(4deg); } }
@keyframes drift{ 0%,100%{ margin-left:0; } 50%{ margin-left:10px; } }
@media(max-width:820px){
  .float-strip{ height:104px; }
  .fchar.f1,.fchar.f5{ width:64px; height:64px; }
  .fchar.f2,.fchar.f4{ width:54px; height:54px; }
  .fchar.f3{ width:70px; height:70px; }
  .fchar.g3,.fchar.g4{ display:none; }
}
@media(max-width:560px){
  .fchar.f2,.fchar.f4,.fchar.g1,.fchar.g2,.fchar.g5{ display:none; }
  .fchar.f1{ left:8%; } .fchar.f3{ left:47%; } .fchar.f5{ left:84%; }
}

/* ---------- buttons + links ---------- */
.btn{
  display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  background:var(--magenta); color:var(--ink); border:var(--edge); border-radius:999px; padding:12px 30px 11px;
  font-family:var(--display); font-weight:var(--display-weight); font-size:1.25rem; line-height:1.2;
  box-shadow:var(--pop); transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.btn:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--ink); }
.btn--cream{ background:var(--cream); }
.btn--block{ display:block; width:100%; }
.link{
  font-weight:800; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px; text-decoration-color:var(--magenta);
}
.link:hover{ background:var(--magenta); text-decoration-color:var(--ink); }
.on-magenta .link{ text-decoration-color:var(--cream); }
.on-magenta .link:hover{ background:var(--cream); text-decoration-color:var(--ink); }

/* ---------- bands ---------- */
.band{ padding:96px 0; border-top:var(--edge); }
@media(max-width:700px){ .band{ padding:64px 0; } }
.band--magenta{ background:var(--magenta); }
.band--blush{ background:var(--blush); }
.copy p{ color:var(--ink-soft); font-size:1.08rem; max-width:60ch; margin-bottom:18px; }
.on-magenta .copy p, .on-magenta p{ color:var(--ink); }

/* ==========================================================
   HERO (home)
   ========================================================== */
.hero{ background:var(--magenta); padding:38px 0 96px; position:relative; overflow:hidden; }
.live{
  display:flex; width:max-content; max-width:calc(100% - 40px); margin:0 auto 6px; align-items:center; gap:10px;
  background:var(--cream); border:var(--edge); border-radius:999px; padding:5px 18px 4px; font-weight:800; font-size:.95rem;
}
.live .dot{ width:10px; height:10px; border-radius:50%; background:var(--bull); border:2px solid var(--ink); animation:livePulse 1.6s ease-in-out infinite; flex:none; }
@keyframes livePulse{ 50%{ opacity:.35; } }

/* the banner's chart line, drawn once on load, threading through the headline */
.hero-title{ position:relative; max-width:1500px; margin:0 auto; }
.hero-title::before{
  content:''; position:absolute; right:100%; width:60vw; height:4px; background:var(--ink);
  top:calc(160 / 230 * 100% - 2px);   /* path starts at y=200 in a viewBox cropped to y=40..270 */
}
.chart{ display:block; width:100%; height:auto; overflow:visible; --sw:4; }
.chart *{ stroke:var(--ink); stroke-width:var(--sw); stroke-linecap:round; stroke-linejoin:round; }
.chart .line{ fill:none; stroke-linecap:butt; stroke-dasharray:100; animation:draw 1.9s cubic-bezier(.45,.1,.3,1) .15s both; }
.chart .candle{ transform-box:fill-box; transform-origin:center bottom; animation:pop .5s cubic-bezier(.3,1.7,.5,1) var(--d,.6s) both; }
.chart .arrow{ fill:var(--ink); transform-box:fill-box; transform-origin:0% 100%; animation:pop .45s cubic-bezier(.3,1.7,.5,1) 1.85s both; }
@keyframes draw{ from{ stroke-dashoffset:100; } }
@keyframes pop{ from{ transform:scale(0); } }
.hero-title h1{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-size:clamp(3.1rem,8.2vw,6.6rem); padding-bottom:.1em;
  animation:titleIn .7s cubic-bezier(.3,1.5,.5,1) .3s both;
}
@keyframes titleIn{ from{ opacity:0; transform:scale(.9) translateY(10px); } }
@media(max-width:899px){
  .hero-title::before{ display:none; }
  .hero-title h1{ position:static; padding:14px 20px 6px; font-size:clamp(2.5rem,11.4vw,4.4rem); }
  .chart{ --sw:8; }
}
@media(max-width:520px){ .chart{ --sw:10; } }

.rise{ animation:rise .7s ease both; }
.rise-1{ animation-delay:.9s; } .rise-2{ animation-delay:1.1s; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } }

.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; margin-top:44px; }
@media(max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:64px; } }
.tag{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.6rem,3vw,2.15rem); line-height:1.1; margin-bottom:22px; text-wrap:balance; }
.hero-copy{ font-size:1.12rem; font-weight:700; max-width:48ch; margin-bottom:14px; }
.hero-strong{ font-family:var(--display); font-weight:var(--display-weight); font-size:1.35rem; line-height:1.25; }
.hero-meta{ font-size:.96rem; font-weight:700; max-width:48ch; margin-bottom:34px; }
.hero-actions{ display:flex; gap:18px 28px; flex-wrap:wrap; align-items:center; }

/* ---------- cards + waitlist ---------- */
.card{
  position:relative; background:var(--cream); border:var(--edge); border-radius:28px; box-shadow:8px 8px 0 var(--ink); padding:32px;
}
@media(max-width:600px){ .card{ padding:24px 20px; } }
.card.standalone{ max-width:580px; margin:0 auto; }
.card-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-bottom:6px; }
.card-head h3{ font-family:var(--display); font-weight:var(--display-weight); font-size:1.9rem; line-height:1.1; }
.pill{ display:inline-block; border:2px solid var(--ink); border-radius:999px; padding:1px 12px; font-weight:800; font-size:.78rem; background:var(--blush); }
.card-sub{ color:var(--ink-soft); font-size:.98rem; margin-bottom:20px; }
.mascot{
  width:104px; height:104px; border-radius:50%; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--magenta);
}
.card .mascot{ position:absolute; top:-50px; right:-14px; transform:rotate(9deg); }
@media(max-width:600px){ .card .mascot{ width:84px; height:84px; top:-44px; right:-4px; } }

.check-list{ list-style:none; }
.check-item{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:2px solid rgba(12,16,18,.14); flex-wrap:wrap; transition:background-color .2s ease, border-radius .2s ease; }
.check-item:first-child{ padding-top:0; }
.check-list .check-item:last-child{ border-bottom:none; }
.check-box{ width:26px; height:26px; margin-top:1px; border:3px solid var(--ink); border-radius:8px; background:var(--cream); flex:none; display:grid; place-items:center; }
.check-item.done .check-box{ background:var(--magenta); }
.check-item.done .check-box::after{ content:''; width:12px; height:6px; border-left:3.5px solid var(--ink); border-bottom:3.5px solid var(--ink); transform:rotate(-45deg) translate(1px,-1px); }
.check-item > .check-copy{ flex:1; align-self:center; font-weight:800; }
.check-body{ flex:1 1 170px; min-width:0; padding-top:2px; }
.check-body .check-copy{ display:block; font-weight:800; }
.check-status{ margin-top:4px; font-size:.8rem; font-weight:700; color:var(--ink-soft); }
.check-status.pending{ color:var(--magenta-deep); }
.check-status.fail{ color:var(--bear-text); }
.check-status.ok{ color:var(--bull-text); }
.check-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.check-action{
  font-weight:800; font-size:.85rem; text-decoration:none; white-space:nowrap; border:2px solid var(--ink); border-radius:999px; padding:3px 16px; background:var(--cream);
  transition:background-color .12s ease;
}
.check-action:hover{ background:var(--magenta); }

.verify-btn{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--body); font-weight:800; font-size:.85rem; white-space:nowrap;
  border:2px solid var(--ink); border-radius:999px; padding:3px 15px; background:var(--cream); cursor:pointer; transition:background-color .12s ease, opacity .12s ease;
}
.verify-btn:disabled{ opacity:.4; cursor:not-allowed; }
.verify-btn:not(:disabled):hover{ background:var(--magenta); }
.verify-btn:not(:disabled):not(.loading):not(.done)::before{
  content:''; width:13px; height:13px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='6' ry='5' fill='%230c1012'/%3E%3Ccircle cx='5' cy='9' r='2.3' fill='%230c1012'/%3E%3Ccircle cx='10.2' cy='5.2' r='2.3' fill='%230c1012'/%3E%3Ccircle cx='15.4' cy='5.2' r='2.3' fill='%230c1012'/%3E%3Ccircle cx='19' cy='9' r='2.3' fill='%230c1012'/%3E%3C/svg%3E") center/contain no-repeat;
}
.verify-btn.loading{ background:var(--magenta); cursor:wait; }
.verify-btn.loading::before{
  content:''; width:14px; height:14px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath fill='%23ff9fcf' stroke='%230c1012' stroke-width='1.6' stroke-linejoin='round' d='M4 10c4-7 16-7 20 0-4 7-16 7-20 0z'/%3E%3Cpath fill='%23fffbf4' stroke='%230c1012' stroke-width='1.6' stroke-linejoin='round' d='M24 10l6-5v10z'/%3E%3Ccircle cx='9' cy='9' r='1.3' fill='%230c1012'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:spin .9s linear infinite;
}
.verify-btn.done{ background:var(--bull); opacity:1; cursor:default; }
.verify-btn.done::before{ content:''; width:11px; height:7px; border-left:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:rotate(-45deg) translate(1px,-2px); flex:none; }

@keyframes itemShake{ 10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(3px); } 30%,50%,70%{ transform:translateX(-5px); } 40%,60%{ transform:translateX(5px); } }
.check-item.shake{ animation:itemShake .45s ease; }
.check-item.verifying{ background:rgba(234,54,143,.07); border-radius:14px; }
@media(max-width:520px){
  .check-actions{ width:100%; margin-left:40px; margin-top:2px; }
}

.pressure{ list-style:none; margin-bottom:24px; }
.pressure li{ display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); padding:6px 0; }
.pressure li::before{
  content:''; width:17px; height:17px; margin-top:4px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='6' ry='5' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='5' cy='9' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='10.2' cy='5.2' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='15.4' cy='5.2' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='19' cy='9' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.progress-row{ display:flex; align-items:center; gap:14px; margin:20px 0 24px; }
.progress-track{ flex:1; height:18px; border:var(--edge); border-radius:999px; background:var(--cream); overflow:hidden; }
.progress-fill{ height:100%; width:0; background:var(--magenta); transition:width .3s ease; }
.progress-txt{ font-family:var(--display); font-weight:var(--display-weight); font-size:1.15rem; min-width:2.4em; text-align:right; }

.form-block{ position:relative; }
.veil{
  position:absolute; inset:-6px; z-index:5; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
  background:rgba(255,251,244,.94); border-radius:16px; font-weight:800; color:var(--ink-soft); transition:opacity .25s ease;
}
.veil.hidden{ opacity:0; pointer-events:none; }
.field{ margin-bottom:14px; }
.field input{
  width:100%; background:#fff; border:var(--edge); border-radius:14px; padding:11px 16px; color:var(--ink); font-family:var(--body); font-weight:700; font-size:1rem;
  transition:opacity .2s ease;
}
.field input::placeholder{ color:#8a7784; font-weight:600; }
.field input:focus{ outline:none; box-shadow:0 0 0 5px rgba(234,54,143,.4); }
.field input:disabled{ opacity:.55; }
.hide{ display:none; }
.err{ display:none; font-size:.85rem; font-weight:800; color:var(--bear-text); margin:6px 4px 0; }
.submit{ margin-top:8px; position:relative; }
.submit:disabled{ background:#eadde5; color:#7a6772; border-color:#7a6772; box-shadow:none; cursor:not-allowed; transform:none; }
.submit.loading:disabled{ background:var(--magenta); color:var(--ink); border-color:var(--ink); }
.submit .submit-label{ display:inline-flex; align-items:center; gap:10px; }
.submit.loading .submit-label::before{
  content:''; width:20px; height:20px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath fill='%23ff9fcf' stroke='%230c1012' stroke-width='1.6' stroke-linejoin='round' d='M4 10c4-7 16-7 20 0-4 7-16 7-20 0z'/%3E%3Cpath fill='%23fffbf4' stroke='%230c1012' stroke-width='1.6' stroke-linejoin='round' d='M24 10l6-5v10z'/%3E%3Ccircle cx='9' cy='9' r='1.3' fill='%230c1012'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.disc{ font-size:.85rem; color:var(--ink-soft); text-align:center; margin-top:14px; }

/* ---------- success modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(12,16,18,.55); opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }
.modal-card{
  position:relative; max-width:400px; width:100%; background:var(--cream); border:var(--edge); border-radius:28px; box-shadow:var(--pop);
  padding:38px 32px 32px; text-align:center; transform:translateY(14px) scale(.94); transition:transform .28s cubic-bezier(.3,1.4,.5,1);
}
.modal-overlay.show .modal-card{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border:2px solid var(--ink); border-radius:50%; background:var(--cream);
  font-size:1.2rem; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.modal-close:hover{ background:var(--magenta); }
.modal-icon{
  display:block; width:72px; height:72px; margin:0 auto 18px; border-radius:50%; background:var(--blush); border:3px solid var(--ink);
}
.modal-icon::before{
  content:''; display:block; width:100%; height:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='6' ry='5' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='5' cy='9' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='10.2' cy='5.2' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='15.4' cy='5.2' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3Ccircle cx='19' cy='9' r='2.3' fill='%23ea368f' stroke='%230c1012' stroke-width='1.6'/%3E%3C/svg%3E") center/55% no-repeat;
}
.modal-title{ font-family:var(--display); font-weight:var(--display-weight); font-size:2rem; color:var(--magenta-deep); margin-bottom:6px; line-height:1.1; }
.modal-sub{ color:var(--ink-soft); margin-bottom:22px; }
body.modal-open{ overflow:hidden; }

/* ==========================================================
   HOME sections
   ========================================================== */
.mark-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; }
@media(max-width:900px){ .mark-grid{ grid-template-columns:1fr; gap:36px; } }
.canvas-frame{
  background:var(--blush); border:var(--edge); border-radius:32px; box-shadow:8px 8px 0 var(--ink); aspect-ratio:4/3; overflow:hidden;
}
#catCanvas{ width:100%; height:100%; display:block; }
.mark-copy .pill{ margin-bottom:22px; }

.punch{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.4rem,2.4vw,1.75rem) !important; line-height:1.15; color:var(--ink) !important; margin:6px 0 22px !important; }
.two-col{ display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start; }
@media(max-width:900px){ .two-col{ grid-template-columns:1fr; gap:22px; } }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; gap:44px; } }
.frame{ border:var(--edge); border-radius:28px; overflow:hidden; box-shadow:8px 8px 0 var(--ink); background:var(--magenta); transform:rotate(1.6deg); }
.frame img{ width:100%; height:auto; }

.aside-grid{ display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:wrap; }
.note{
  position:relative; max-width:640px; background:var(--cream); border:var(--edge); border-radius:8px 8px 28px 8px; box-shadow:var(--pop);
  padding:38px 40px 32px; transform:rotate(-1.6deg);
}
.note::before{
  content:''; position:absolute; top:-17px; left:50%; width:30px; height:30px; margin-left:-15px; border-radius:50%;
  background:var(--magenta); border:var(--edge); box-shadow:inset -4px -4px 0 rgba(12,16,18,.2);
}
.note-btn{ margin-top:24px; }
.note .k{ font-weight:800; color:var(--ink-soft); margin-bottom:6px; }
.note .v{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.05; text-wrap:balance; }
.aside-grid .mascot{ width:132px; height:132px; transform:rotate(-8deg); }
@media(max-width:700px){ .note{ padding:34px 24px 26px; } .aside-grid .mascot{ display:none; } }

/* ==========================================================
   INNER PAGES
   ========================================================== */
.page-hero{ background:var(--magenta); padding:56px 0 72px; position:relative; overflow:hidden; }
.page-hero .tab{
  display:inline-block; background:var(--cream); border:var(--edge); border-radius:999px; padding:3px 18px 2px; font-weight:800; font-size:.92rem; margin-bottom:22px;
}
.page-hero .tab .dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--bull); border:2px solid var(--ink); margin-right:9px; animation:livePulse 1.6s ease-in-out infinite; }
.page-hero h1{ font-size:clamp(2.7rem,6.2vw,4.8rem); max-width:12em; margin-bottom:28px; }
.page-hero .dek{ font-size:1.15rem; font-weight:700; max-width:52ch; }
.deco{ position:absolute; right:5%; bottom:26px; width:min(340px,30vw); height:auto; overflow:visible; --sw:4; }
.deco *{ stroke:var(--ink); stroke-width:var(--sw); stroke-linecap:round; stroke-linejoin:round; }
.deco .line{ fill:none; }
.deco .arrow{ fill:var(--ink); }
@media(max-width:1000px){ .deco{ display:none; } }
.page-hero + .band{ border-top:var(--edge); }

.pull{ margin-top:34px; max-width:600px; background:var(--magenta); border:var(--edge); border-radius:28px; box-shadow:var(--pop); padding:30px 34px 32px; transform:rotate(-1deg); }
.pull p.sticker{ font-size:clamp(1.5rem,2.7vw,2.05rem); margin:0; max-width:none; color:var(--cream); }

/* collection */
.spec-grid{ display:grid; grid-template-columns:minmax(0,620px) 1fr; gap:72px; align-items:center; }
@media(max-width:960px){ .spec-grid{ grid-template-columns:1fr; gap:48px; } }
.spec{ border:var(--edge); border-radius:26px; background:var(--cream); box-shadow:8px 8px 0 var(--ink); overflow:hidden; }
.spec table{ width:100%; border-collapse:collapse; }
.spec th, .spec td{ padding:17px 26px; text-align:left; }
.spec tr + tr > *{ border-top:2px solid var(--ink); }
.spec th{ font-family:var(--display); font-weight:var(--display-weight); font-size:1.2rem; }
.spec td{ text-align:right; font-weight:800; }
.spec td .status{ margin-top:6px; }
.tba{ display:inline-block; border:2px dashed var(--ink); border-radius:999px; padding:0 14px; background:var(--blush); }
@media(max-width:560px){
  .spec table, .spec tbody, .spec tr, .spec th, .spec td{ display:block; width:auto; }
  .spec tr{ padding:14px 20px; }
  .spec tr + tr{ border-top:2px solid var(--ink); }
  .spec tr + tr > *{ border-top:none; }
  .spec th, .spec td{ padding:2px 0; text-align:left; }
}
.spec-note{ margin-top:30px; color:var(--ink-soft); max-width:52ch; font-size:1rem; }
.spec-art{ display:flex; justify-content:center; }
.spec-art .mascot{ width:min(300px,60vw); height:min(300px,60vw); border-width:5px; box-shadow:8px 8px 0 var(--ink); transform:rotate(-7deg); }
@media(max-width:960px){ .spec-art{ display:none; } }

/* roadmap */
.loop{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:10px 8px; margin-bottom:56px; }
.loop li{ display:flex; align-items:center; gap:8px; }
.loop li span{ background:var(--cream); border:3px solid var(--ink); border-radius:999px; padding:3px 18px 2px; font-family:var(--display); font-weight:var(--display-weight); font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; }
.loop--home{ margin:52px 0 0; }
.loop li:not(:last-child)::after{ content:'\2192'; content:'\2192' / ''; font-family:var(--display); font-size:1.4rem; }
.phase-list{ list-style:none; max-width:820px; }
.phase{ position:relative; display:grid; grid-template-columns:60px 1fr; gap:26px; padding-bottom:40px; }
.phase:not(:last-child)::before{ content:''; position:absolute; left:28px; top:60px; bottom:0; width:4px; background:var(--ink); }
.phase-n{
  width:60px; height:60px; border-radius:50%; background:var(--magenta); border:var(--edge); box-shadow:3px 3px 0 var(--ink);
  display:grid; place-items:center; font-family:var(--display); font-weight:var(--display-weight); font-size:1.35rem; position:relative; z-index:1;
}
.phase h3{ font-family:var(--display); font-weight:var(--display-weight); font-size:1.7rem; line-height:1.1; margin:8px 0 8px; }
.phase p{ color:var(--ink-soft); max-width:58ch; }
.phase p + p{ margin-top:10px; }
@media(max-width:600px){ .phase{ grid-template-columns:48px 1fr; gap:16px; } .phase-n{ width:48px; height:48px; font-size:1.1rem; } .phase:not(:last-child)::before{ left:22px; top:48px; } }
.caveat{
  margin-top:8px; max-width:62ch; background:var(--cream); border:var(--edge); border-radius:20px; padding:20px 24px; box-shadow:var(--pop); font-weight:700; color:var(--ink-soft);
}

.ledger-card{ border:var(--edge); border-radius:26px; background:var(--cream); box-shadow:8px 8px 0 var(--ink); overflow:hidden; max-width:900px; margin-bottom:26px; }
.ledger-table{ width:100%; border-collapse:collapse; }
.ledger-table tr + tr > *{ border-top:2px solid var(--ink); }
.ledger-table th, .ledger-table td{ padding:15px 22px; text-align:left; vertical-align:middle; font-size:.98rem; }
.ledger-table th{ font-family:var(--display); font-weight:var(--display-weight); font-size:1.12rem; width:230px; }
.ledger-table td:nth-child(2){ width:1%; white-space:nowrap; }
.ledger-table td:last-child{ color:var(--ink-soft); }
.status{ display:inline-block; white-space:nowrap; border:2px solid var(--ink); border-radius:999px; padding:1px 14px; font-weight:800; font-size:.82rem; }
.status.locked{ background:var(--bull); }
.status.dev{ background:var(--magenta); }
.status.open{ background:var(--cream); border-style:dashed; }
@media(max-width:700px){
  .ledger-table, .ledger-table tbody, .ledger-table tr, .ledger-table th, .ledger-table td{ display:block; width:auto !important; }
  .ledger-table tr{ padding:14px 20px; }
  .ledger-table tr + tr{ border-top:2px solid var(--ink); }
  .ledger-table tr + tr > *{ border-top:none; }
  .ledger-table th, .ledger-table td{ padding:3px 0; }
}

/* faq */
.faq-list{ max-width:760px; display:grid; gap:16px; }
.faq-item{ background:var(--cream); border:var(--edge); border-radius:22px; box-shadow:4px 4px 0 var(--ink); }
.faq-item[open]{ background:var(--blush); }
.faq-item summary{
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 24px; cursor:pointer;
  font-family:var(--display); font-weight:var(--display-weight); font-size:1.3rem; line-height:1.2;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .p{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--magenta); border:3px solid var(--ink); display:grid; place-items:center;
  font-size:1.4rem; line-height:1; transition:transform .2s ease;
}
.faq-item[open] summary .p{ transform:rotate(45deg); }
.faq-a{ padding:0 24px 22px; color:var(--ink-soft); max-width:60ch; }

/* ---------- footer ---------- */
.site-foot{ background:var(--magenta); border-top:var(--edge); padding:52px 0 36px; }
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
.site-foot .wordmark{ font-size:2rem; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.foot-nav a{ font-weight:800; text-decoration:none; }
.foot-nav a:hover{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; text-decoration-color:var(--cream); }
.fine{ font-weight:800; margin-top:34px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .fchar{ animation:none; }
}