/* Crate site. Sticker look from the brand kit (tokens.css). Mobile first. Fonts self-hosted (OFL, Latin subset). */
@font-face{font-family:'Fredoka';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/Fredoka_600SemiBold.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/Nunito_600SemiBold.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/Nunito_700Bold.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:800;font-style:normal;font-display:swap;src:url('/fonts/Nunito_800ExtraBold.woff2') format('woff2')}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ck-bg);color:var(--ck-text);font:600 17px/1.6 var(--ck-font-ui)}
a{color:var(--ck-blueLt);font-weight:700}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--ck-blue);outline-offset:3px;border-radius:12px}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:9;background:var(--ck-surface);padding:8px 12px;border-radius:12px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ck-text)}
.brand img{width:34px;height:34px}
.brand span{font:600 30px/1 var(--ck-font-display);letter-spacing:-.01em}
.top nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.top nav a{font:700 14px/1 var(--ck-font-ui);text-decoration:none;color:var(--ck-text);padding:10px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.top nav a[aria-current]{background:var(--ck-chipOn);color:var(--ck-onChipOn);border:2px solid var(--ck-ink);box-shadow:var(--ck-shadow-chipOn)}
.top nav .hide-sm{display:none}

/* type */
h1,h2,h3{font-family:var(--ck-font-display);font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:0 0 12px}
h1{font-size:clamp(36px,9vw,64px)}
h2{font-size:clamp(28px,6vw,42px)}
h3{font-size:22px}
p{margin:0 0 14px}
.lead{font-size:19px;color:var(--ck-muted)}
.muted{color:var(--ck-muted)}
.small{font-size:14px;color:var(--ck-muted)}

/* pieces */
.sticker{display:inline-block;background:var(--ck-sticker);color:var(--ck-onSticker);padding:5px 12px;border-radius:999px;border:2px solid var(--ck-ink);transform:rotate(-3deg);font:800 12px/1.3 var(--ck-font-ui);letter-spacing:.8px;text-transform:uppercase}
.card{background:var(--ck-surface);border:var(--ck-border-card) solid var(--ck-edge);border-radius:var(--ck-radius-card);box-shadow:var(--ck-shadow-card);padding:20px;margin:0 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:9px 20px;border-radius:var(--ck-radius-btn);font:800 16px/1.2 var(--ck-font-ui);background:var(--ck-blue);color:var(--ck-onBlue);border:var(--ck-border-btn) solid var(--ck-ink);box-shadow:var(--ck-shadow-btn);text-decoration:none;cursor:pointer}
.btn:active{background:var(--ck-primaryShade);transform:translateY(3px);box-shadow:var(--ck-shadow-btnPressed)}
.btn.ghost{background:var(--ck-surface);color:var(--ck-text);border-color:var(--ck-edge);box-shadow:var(--ck-shadow-card)}
.btn.hero{background:var(--ck-heroBtn);color:var(--ck-onHeroBtn);border-color:var(--ck-ink);box-shadow:0 4px 0 var(--ck-ink),inset 0 -4px 0 #ebe2d3}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0 0}
.chips li{display:inline-flex;align-items:center;min-height:36px;padding:4px 14px;border-radius:999px;font:700 14px/1 var(--ck-font-ui);background:var(--ck-surface);border:2px solid var(--ck-chipEdge)}
.blank{display:block;border:3px dashed var(--ck-edge);border-radius:var(--ck-radius-tile);padding:14px 16px;font:800 15px/1.3 var(--ck-font-ui);text-align:center;background:var(--ck-surface);color:var(--ck-text)}

/* hero */
.hero{display:grid;gap:24px;padding:20px 0 40px;align-items:center}
.hero .sticker{margin-bottom:16px}
.flipbox{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.flipbox img{width:min(44vw,180px)}
.hero .flipbox{order:-1}
.bubble{position:relative;background:var(--ck-surface);border:var(--ck-border-card) solid var(--ck-edge);border-radius:var(--ck-radius-toast);box-shadow:var(--ck-shadow-toast);padding:12px 16px;font:700 16px/1.4 var(--ck-font-ui);max-width:320px;text-align:center}
.bubble:after{content:"";position:absolute;left:50%;bottom:-11px;width:18px;height:18px;background:var(--ck-surface);border-right:var(--ck-border-card) solid var(--ck-edge);border-bottom:var(--ck-border-card) solid var(--ck-edge);transform:translateX(-50%) rotate(45deg)}

/* sections */
section{padding:36px 0}
.grid{display:grid;gap:18px}
.card .num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--ck-blue);color:#fff;border:2.5px solid var(--ck-ink);font:800 18px/1 var(--ck-font-ui);margin-bottom:10px}
.shop{background:var(--ck-tint);border-radius:var(--ck-radius-sheet);border:var(--ck-border-card) solid var(--ck-edge);box-shadow:var(--ck-shadow-card);padding:24px 20px}
.band{background:linear-gradient(180deg,var(--ck-heroA),var(--ck-heroB));color:#fff;border:var(--ck-border-card) solid var(--ck-heroEdge);border-radius:var(--ck-radius-sheet);box-shadow:var(--ck-shadow-card);padding:28px 20px}
.band h2,.band p,.band li{color:#fff}
.band a:not(.btn){color:#fff}
.band .blank{color:var(--ck-text)}
ol.steps{padding-left:22px;margin:0 0 16px}ol.steps li{margin:0 0 10px}
details{background:var(--ck-surface);border:var(--ck-border-card) solid var(--ck-edge);border-radius:var(--ck-radius-tile);box-shadow:var(--ck-shadow-card);margin:0 0 14px}
summary{cursor:pointer;padding:14px 18px;font:800 17px/1.3 var(--ck-font-ui);min-height:52px;display:flex;align-items:center}
details>div{padding:0 18px 12px}
.fine{font-size:14px;color:var(--ck-muted);border-top:1px solid var(--ck-line);padding-top:14px;margin-top:8px}

/* footer */
footer{border-top:var(--ck-border-tabTop) solid var(--ck-edge);margin-top:40px;padding:24px 0 48px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
footer nav a{min-height:44px;display:inline-flex;align-items:center}

/* long-form pages (privacy, support): same words, Sticker look */
.doc{max-width:760px;margin:0 auto;padding:8px 16px 0}
.doc h1{font-size:clamp(34px,8vw,48px)}
.doc h2{font-size:24px;margin-top:28px}
.doc p,.doc li{color:var(--ck-text)}
.doc nav{display:none}

@media (min-width:760px){
  .top nav .hide-sm{display:inline-flex}
  .hero{grid-template-columns:1.25fr 1fr;padding:48px 0 64px}
  .hero .flipbox{order:0}
  .flipbox img{width:300px}
  .grid.three{grid-template-columns:repeat(3,1fr)}
  .grid.two{grid-template-columns:1fr 1fr}
  .shop,.band{padding:40px}
  section{padding:48px 0}
}
@media (prefers-reduced-motion:no-preference){
  .flipbox img{animation:hop .7s ease-out 1 .3s both}
  @keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}
}
.btn.ghost:active,.btn.hero:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ck-shadowHard)}
::selection{background:var(--ck-sticker);color:var(--ck-onSticker)}
.card .num{transform:rotate(-6deg)}.card:nth-child(2) .num{transform:rotate(5deg)}
.band .chips li{color:var(--ck-text)}
.flipnote{display:flex;align-items:center;gap:14px;margin:4px 0 0}.flipnote picture{flex:none}.flipnote img{width:84px;display:block}
.bubble.side{text-align:left;margin:0}.bubble.side:after{left:-11px;top:50%;bottom:auto;transform:translateY(-50%) rotate(135deg)}