:root{
  --ink:#16163A;--cream:#FFF7EC;--peri:#5A5FD8;--lime:#B8FF2E;--pink:#FFCDEE;
  --red:#F5321A;--yellow:#FFE324;--blue:#2340E0;--lilac:#C4B5FF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);font-family:'Urbanist',system-ui,sans-serif;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue)}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--ink);padding:10px 16px;z-index:100;font-weight:800}
.skip:focus{left:10px;top:10px}
.titan{font-family:'Titan One',sans-serif;font-weight:400}
.hand{font-family:'Patrick Hand',cursive}
.wrap{width:100%;max-width:1240px;margin:0 auto}

/* patterns */
.bg-waves-orange{background:#FF7400 url(../img/waves-orange.svg) center/cover}
.bg-waves-lime{background:#5A5FD8 url(../img/waves-lime.svg) center/cover}
.bg-waves-yellow{background:#FFE5C4 url(../img/waves-yellow.svg) center/cover}
.bg-flowers{background:#C3C46A url(../img/flowers.svg) center/cover}
.bg-donuts{background:#FFE324 url(../img/donuts.svg) center/cover}
.bg-ooma{background:#FFB3CF url(../img/blob-ooma.svg) center/cover}
.bg-gubbii{background:#FAA5E0 url(../img/blob-gubbii.svg) center/cover}
.bg-wombo{background:#FFEC0A url(../img/blob-wombo.svg) center/cover}

/* grids */
.hero{display:grid;grid-template-columns:1fr 1fr}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.quiz{display:grid;grid-template-columns:2fr 3fr}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr}
.prod{display:grid;grid-template-columns:1.05fr 1fr}
.tool{display:grid;grid-template-columns:1.25fr 1fr}
.stage{position:relative;width:540px;height:600px;max-width:100%}

/* chrome */
.band{background:var(--ink);color:var(--cream);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;padding:11px 20px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.band .dot{color:var(--lime)}
.site-header{background:var(--cream);border-bottom:2px solid var(--ink);position:relative;z-index:20}
.site-header .bar{padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-header .logo img{height:42px;width:auto;display:block}
.nav{display:flex;gap:28px;font-size:16px;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.nav a{text-decoration:none;color:var(--ink);padding-bottom:2px;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--lime)}
.tools{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;letter-spacing:.1em;flex-shrink:0}
.pill{border:2px solid var(--ink);border-radius:999px;padding:8px 14px;font:inherit;cursor:pointer;text-decoration:none;color:var(--ink);background:transparent;display:inline-flex;align-items:center}
.pill.on{background:var(--ink);color:var(--cream)}
.menu-btn{display:none;background:var(--lime)}
.mob-menu{display:none;flex-direction:column;gap:4px;padding:8px 20px 20px;font-size:22px;font-weight:800;letter-spacing:.03em}
.mob-menu a{text-decoration:none;color:var(--ink);padding:10px 0;border-bottom:2px dashed var(--ink)}
.mob-menu a:last-child{border-bottom:none}
.site-header.open .mob-menu{display:flex}
.site-footer{background:var(--peri);color:var(--cream);padding:84px 32px 36px;border-top:2px solid var(--ink)}
.site-footer a{color:var(--cream);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer h3{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.site-footer nav{display:flex;flex-direction:column;gap:12px;font-weight:700;letter-spacing:.05em}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;padding-top:22px;border-top:2px solid rgba(255,247,236,.35);font-size:14px;font-weight:600;letter-spacing:.08em}

/* buttons */
.btn{transition:transform .15s ease;display:inline-block;text-decoration:none;font-weight:800;letter-spacing:.06em;border-radius:999px;border:2px solid var(--ink);cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn-lime{background:var(--lime);color:var(--ink);padding:17px 28px;font-size:17px;box-shadow:4px 4px 0 var(--ink)}
.btn-ink{background:var(--ink);color:var(--cream);padding:14px 24px;font-size:16px}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream);padding:17px 28px;font-size:17px}
.btn-ink:hover{color:var(--cream)}.btn-lime:hover{color:var(--ink)}.btn-ghost:hover{color:var(--cream)}

/* marquee */
.marquee{background:var(--ink);color:var(--lime);overflow:hidden}
.marq{display:flex;width:max-content;animation:rtl-slide 90s linear infinite;padding:18px 0;font-family:'Titan One',sans-serif;font-size:36px;letter-spacing:.08em;white-space:nowrap}
.marq-set{display:flex;gap:36px;align-items:center;padding-right:36px}
.marq-set i{width:13px;height:13px;border-radius:50%;background:var(--pink);flex-shrink:0;display:block}
@keyframes rtl-slide{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.marq{animation:none}.btn,.coin{transition:none}}

/* cards + misc */
.card{display:flex;flex-direction:column;background:#fff;border:2px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:6px 6px 0 var(--ink)}
.blob{border-radius:46% 54% 42% 58% / 52% 44% 56% 48%}
.chip{font-size:14px;font-weight:700;letter-spacing:.05em;padding:6px 12px;border-radius:999px;color:var(--ink)}
.tag{background:var(--ink);color:var(--cream);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.opt{text-align:left;font:inherit;font-size:18px;font-weight:600;letter-spacing:.03em;line-height:1.4;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:18px;padding:17px 22px;cursor:pointer}
.opt:hover{background:var(--lime)}
.coin{transition:transform .15s ease;display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;border:none;padding:0;cursor:pointer;font:inherit;color:var(--ink)}
.coin:hover{transform:translateY(-4px) rotate(-6deg)}
.field{display:flex;flex-direction:column;gap:6px;font-weight:700;letter-spacing:.03em}
.field input,.field textarea,.field select{font:inherit;font-weight:500;padding:13px 15px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink)}
details.faq{border:2px solid var(--ink);border-radius:24px;overflow:hidden;background:#fff}
details.faq[open]{box-shadow:5px 5px 0 var(--ink)}
details.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:19px;font-weight:800;letter-spacing:.03em;padding:22px 26px;cursor:pointer}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .sign{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--cream);display:flex;align-items:center;justify-content:center;font-family:'Titan One',sans-serif;font-size:20px}
details.faq summary .sign::before{content:'+'}
details.faq[open] summary .sign::before{content:'\2212'}
details.faq .ans{padding:0 26px 24px;display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.6;letter-spacing:.03em;font-weight:500}
.dotI{position:relative;display:inline-block;line-height:1}
.dotI::after{content:'';position:absolute;left:50%;top:-.04em;width:.19em;height:.19em;margin-left:-.095em;border-radius:50%;background:currentColor}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}

@media (max-width:1100px){
  .g3{grid-template-columns:1fr 1fr}.g4{grid-template-columns:1fr 1fr}.g5{grid-template-columns:1fr 1fr}
  .nav{display:none}.menu-btn{display:inline-flex}
}
@media (max-width:860px){
  .hero,.g2,.g3,.quiz,.foot,.prod,.tool{grid-template-columns:minmax(0,1fr) !important}
  .stage{width:100%;height:460px}
  section{padding-left:20px !important;padding-right:20px !important;padding-top:64px !important;padding-bottom:64px !important}
  section.hero{padding:0 !important}
  .hero-l{padding:52px 22px !important}.hero-r{padding:36px 16px !important}
  h1{font-size:50px !important}h2{font-size:38px !important}
  .big-name{font-size:76px !important}
  .quiz{padding:30px 20px !important;gap:28px !important}
  .hand-xl{font-size:32px !important}
  .pinkbox{padding:48px 22px !important}.pinkbox p{font-size:18px !important}
  .g2{gap:32px !important}
  .band-x{display:none}
  .g4{grid-template-columns:1fr 1fr}
  .foot img{width:260px !important}
  .site-header .logo img{height:34px}
  .site-header .bar{padding:14px 18px}
  .panel{padding:24px 18px !important}
  .g5{grid-template-columns:1fr}
  .hero-note{display:none}
  .sizetable{table-layout:fixed}
  .sizetable th,.sizetable td{padding:8px 8px !important;font-size:13.5px !important;letter-spacing:0 !important;overflow-wrap:anywhere}
  .sizetable thead th{font-size:10.5px !important}
}