/* Huddle's web pages (privacy, support) in the game's storybook look: warm paper, ink outlines, flat painted shadows,
   muted paint and the players' beans. Colours are the app's tokens (src/theme.ts, docs/design/DESIGN_LANGUAGE.md). */
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(fonts/Fredoka_600SemiBold.ttf) format("truetype")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(fonts/Fredoka_700Bold.ttf) format("truetype")}
@font-face{font-family:"Baloo Bhaijaan 2";font-weight:500;font-display:swap;src:url(fonts/BalooBhaijaan2_500Medium.ttf) format("truetype")}
@font-face{font-family:"Baloo Bhaijaan 2";font-weight:700;font-display:swap;src:url(fonts/BalooBhaijaan2_700Bold.ttf) format("truetype")}

:root{
  --paper:#F4EBDC;--paper-deep:#E8DAC3;--card:#FBF5EA;--ink:#3B2F3A;--ink-soft:rgba(59,47,58,.72);--ink-faint:rgba(59,47,58,.28);
  --terracotta:#E07A5F;--sage:#81B29A;--denim:#6F9CC7;--mustard:#E9B949;--lavender:#A68BC4;--rose:#E39AB0;--teal:#4FA3A0;--cocoa:#B08463;
  --sand:#F2CC8F;--ray:rgba(242,204,143,.45);--on-paint:#FFFDF8;--link:#B5543B;
  --head:"Fredoka","Baloo Bhaijaan 2",ui-rounded,system-ui,sans-serif;
  --text:ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Baloo Bhaijaan 2",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#231C23;--paper-deep:#2E252E;--card:#2C232C;--ink:#F4EBDC;--ink-soft:rgba(244,235,220,.74);--ink-faint:rgba(244,235,220,.22);
  --ray:rgba(242,204,143,.06);--link:#F2A68F;--on-paint:#231C23;color-scheme:dark}
  .sticker,.card,.pill,.lang button[aria-pressed=true]{--edge:#120d12}
}
[lang=ar]{--head:"Baloo Bhaijaan 2","Fredoka",sans-serif;--text:"Baloo Bhaijaan 2",-apple-system,"Geeza Pro",sans-serif}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;min-height:100vh;color:var(--ink);font:500 17px/1.65 var(--text);
  background:var(--paper);
  background-image:repeating-conic-gradient(from -90deg at 50% -10%,var(--ray) 0 6deg,transparent 6deg 14deg);
  background-size:100% 900px;background-repeat:no-repeat}
[lang=ar] body,body[lang=ar],[lang=ar]{line-height:1.85}
a{color:var(--link);text-decoration-thickness:2px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--denim);outline-offset:3px;border-radius:10px}
.wrap{max-width:860px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:12px;top:12px;z-index:9;background:var(--card);padding:8px 14px}

/* the sticker: ink outline + a flat ink shadow under it (the app's Sticker component) */
.sticker,.card{--edge:var(--ink);background:var(--card);border:2.5px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--edge)}

/* top bar */
.top{display:flex;align-items:center;gap:10px;padding:16px 0 6px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:42px;height:42px;border-radius:12px;border:2.5px solid var(--ink)}
.pill{--edge:var(--ink);display:inline-block;font:700 18px/1 var(--head);color:#FFFDF8;background:var(--terracotta);border:2.5px solid var(--ink);border-radius:999px;padding:7px 14px 8px;box-shadow:0 3px 0 var(--edge)}
.lang{margin-inline-start:auto;display:flex;gap:4px;padding:4px;border:2.5px solid var(--ink);border-radius:999px;background:var(--card)}
.lang button{font:700 15px/1 var(--head);color:var(--ink);background:none;border:0;border-radius:999px;padding:8px 12px;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
html:not(.js) .lang{display:none}

/* hero */
.hero{text-align:center;padding:26px 0 0}
.hero h1{margin:0;font:700 clamp(34px,7vw,56px)/1.1 var(--head);letter-spacing:-.5px}
.hero .sub{margin:12px auto 0;max-width:34em;color:var(--ink-soft);font-size:18px}
.date{display:inline-block;max-width:100%;margin-top:14px;font:600 14px/1.35 var(--head);padding:7px 14px;border-radius:14px;background:var(--paper-deep);color:var(--ink-soft)}
.beans{display:block;width:100%;height:auto;aspect-ratio:1400/320;object-fit:cover;margin:26px 0 0;border-radius:24px;border:2.5px solid var(--ink);box-shadow:0 5px 0 var(--ink);background:var(--sand)}

/* the three-point summary */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 0}
.trio .card{padding:18px}
.trio h2{margin:12px 0 4px;font:700 19px/1.3 var(--head)}
.trio p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.55}
.dot{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:2.5px solid var(--ink);color:#3B2F3A;background:var(--c,var(--sage))}
.dot svg{width:24px;height:24px}

/* contents */
.toc{margin:30px 0 0}
.toc h2{margin:0 0 10px;font:700 15px/1 var(--head);color:var(--ink-soft);text-transform:none}
.toc ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.toc a{display:inline-block;text-decoration:none;color:var(--ink);font:600 14.5px/1 var(--head);padding:9px 13px;border-radius:999px;border:2px solid var(--ink-faint);background:var(--card)}
.toc a:hover{border-color:var(--ink)}

/* the sections */
.sec{margin:22px 0 0;padding:22px 22px 18px}
.sec h2{display:flex;align-items:center;gap:12px;margin:0 0 12px;font:700 23px/1.25 var(--head)}
.sec h2 .dot{width:38px;height:38px;flex:none}.sec h2 .dot svg{width:19px;height:19px}
.sec p{margin:0 0 12px}.sec p:last-child{margin-bottom:0}
.sec ul,.sec ol{margin:0 0 12px;padding:0;list-style:none}
.sec li{position:relative;padding-inline-start:24px;margin:0 0 9px}
.sec li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--c,var(--terracotta));border:2px solid var(--ink)}
.sec strong{font-weight:700}
.sec .note{color:var(--ink-soft);font-size:15.5px}

/* "we count" / "never sent" */
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 14px}
.box{border-radius:18px;padding:14px 16px;border:2px solid var(--ink-faint);background:var(--paper)}
.box h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 17px/1.2 var(--head)}
.box h3 svg{width:22px;height:22px;flex:none;padding:3px;border-radius:50%;border:2px solid var(--ink);color:#3B2F3A}
.box.yes h3 svg{background:var(--sage)}.box.no h3 svg{background:var(--terracotta)}
.box ul{margin:0}.box li{font-size:15.5px;margin-bottom:6px}
.box.yes li::before{background:var(--sage)}.box.no li::before{background:var(--terracotta)}
.kept{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;margin:0 0 4px;padding:0;list-style:none}
.kept li{padding:12px 14px;margin:0;border-radius:16px;background:var(--paper-deep);font-size:15.5px;line-height:1.5}
.kept li::before{display:none}
.kept b{display:block;font:700 15.5px/1.3 var(--head);margin-bottom:2px}

/* support */
.cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:26px 0 0}
.btn{--edge:var(--ink);display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 21px/1 var(--head);color:#FFFDF8;background:var(--terracotta);border:2.5px solid var(--ink);border-radius:20px;padding:17px 26px;box-shadow:0 5px 0 var(--edge);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)}
.btn svg{width:24px;height:24px}
.cta small{color:var(--ink-soft);font-size:15px;text-align:center}
.steps{counter-reset:s}
.steps li{counter-increment:s;padding-inline-start:44px;margin-bottom:14px}
.steps li::before{content:counter(s);width:30px;height:30px;top:0;display:grid;place-items:center;font:700 15px/1 var(--head);color:#3B2F3A;background:var(--sand)}

footer{margin:40px 0 0;padding:22px 0 calc(30px + env(safe-area-inset-bottom));text-align:center;color:var(--ink-soft);font-size:15px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:6px;font:600 15px/1.4 var(--head)}

html.js [data-lang]:not(.on){display:none}

@media (max-width:700px){
  .trio{grid-template-columns:1fr}
  .trio .card{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
  .trio .dot{grid-row:span 2}
  .trio h2{margin:0}
  .split{grid-template-columns:1fr}
  .sec{padding:18px 16px 14px}
  .sec h2{font-size:21px}
  .beans{border-radius:18px;aspect-ratio:1400/420}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* the download page (get/) */
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:28px 0 0}
.stores .btn{min-width:220px;justify-content:center}
.btn.alt{background:var(--sage);color:#3B2F3A}
.hint{text-align:center;color:var(--ink-soft);font-size:15px;margin:16px 0 0}