@charset "UTF-8";
/* ===========================================================================
   Chicken Farm Monster — website design system

   Every colour, shadow and shape here is lifted from the app's own SwiftUI
   sources, so the site and the game read as one hand:

     · the poster title is DRAWN TYPE, not artwork (gold over ember, wrapped
       in a chunky dark-wood drop edge) — exactly as MenuView draws it;
     · the progression accent is ALWAYS green, never gold. Gold belongs to
       the monster, the treasure and the coins;
     · depth comes from HARD shadows (radius 0, y+4..5). Blur is reserved for
       glow and for keeping white text legible over imagery;
     · absence keeps its space — unavailable things dim, they never vanish.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */

@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/baloo2-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/baloo2-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/baloo2-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/baloo2-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/baloo2-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/baloo2-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------------------------------------------------------------- tokens - */

:root{
  /* poster title */
  --gold-top:#FFE04C;   --gold-bot:#F59E14;
  --ember-top:#FF8C2E;  --ember-bot:#E6401A;
  --title-edge:#4C3017;

  /* wood */
  --wood-light:#A17347; --wood-mid:#946940; --wood-dark:#704C30;
  --wood-edge:#5A3A22;  --wood-deep:#3E2614; --wood-shadow:#33200F;
  --caption-top:#FFED8C; --caption-bot:#FFB838; --caption-edge:#331404;

  /* paper + ink */
  --cream:#FAF2E3;      --cream-warm:#F6EEDC;
  --paper:#FDF7EC;      --paper-alt:#F6EADA;
  --ink:#593B21;        --ink-soft:rgba(89,59,33,.85); --ink-faint:rgba(89,59,33,.68);

  /* progression — ALWAYS green, never gold */
  --prog-light:#8CEB59; --prog-deep:#29AD4C; --prog-celebrate:#80F266;
  --select-green:#40A34C;

  /* sky + land */
  --sky-top:#4C9EF0;    --sky-mid:#8CCFF7;  --sky-low:#73C7FA;
  --sky-haze:#B8EBBF;   --fog:#CFEBFA;
  --hill-light:#4C9E5C; --hill-dark:#38854C; --grass:#548F4C;

  /* treasure + record */
  --gold-score:#FFE073; --gold-deep:#EB941F; --treasure:#CC9933;
  --coin-amber:#F2A829; --barn-red:#D95442; --hay:#EDC766;

  /* dark surfaces */
  --dark-top:#212638;   --dark-bot:#171A26;
  --cave-top:#2A1D12;   --cave-bot:#140D07;

  /* boosts */
  --xp-bright:#8CEB59;      --xp-deep:#29AD4C;
  --speed-bright:#FA6EFF;   --speed-deep:#8C1AD6;
  --rocket-bright:#7AD1FF;  --rocket-deep:#1A70F5;
  --booster-bright:#FFDB73; --booster-deep:#CC8514;
  --immortal-bright:#DBE6FF;--immortal-deep:#7566D1;

  /* type */
  --font: 'Baloo 2', ui-rounded, -apple-system, 'Segoe UI Variable Display',
          'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* rhythm */
  --shell: 1200px;
  --gap: clamp(18px, 3vw, 30px);
  --section-y: clamp(56px, 8vw, 104px);
  --r-lg: 30px; --r-md: 24px; --r-sm: 16px;

  /* elevation — hard for depth, blurred only for glow */
  --hard: 0 4px 0 rgba(0,0,0,.22);
  --hard-lg: 0 6px 0 rgba(0,0,0,.25);
  --lift: 0 18px 34px rgba(46,28,12,.16);

  color-scheme: light;
}

/* ------------------------------------------------------------------ base - */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--font);
  font-weight:600;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.12;font-weight:800;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid #1F6FEB;outline-offset:3px;border-radius:8px}

.shell{width:min(100% - 2*var(--gap), var(--shell));margin-inline:auto}
.shell--narrow{width:min(100% - 2*var(--gap), 880px)}
.stack{display:grid;gap:var(--gap)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:200;padding:10px 18px;border-radius:999px;
  background:#fff;color:var(--ink);font-weight:800;box-shadow:var(--hard);transition:top .18s}
.skip:focus{top:14px}

/* --------------------------------------------------------------- headings */

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-bot),var(--ember-bot))}
.eyebrow--light{color:rgba(255,255,255,.82)}
.eyebrow--light::before{background:linear-gradient(90deg,var(--gold-top),var(--ember-top))}

.h-xl{font-size:clamp(30px,5.4vw,50px);letter-spacing:-.02em}
.h-lg{font-size:clamp(25px,3.6vw,36px);letter-spacing:-.015em}
.h-md{font-size:clamp(20px,2.4vw,25px)}
.lede{font-size:clamp(16px,1.6vw,19px);color:var(--ink-soft);max-width:62ch;font-weight:600}
.lede--light{color:rgba(255,255,255,.86)}

/* --------------------------------------------------- poster title (drawn) */

.poster{transform:rotate(-2deg);line-height:.84;display:inline-block}
.poster span{
  display:block;font-weight:800;text-transform:uppercase;
  background-clip:text;-webkit-background-clip:text;color:transparent;
  filter:
    drop-shadow(0 3px 0 var(--title-edge))
    drop-shadow(2px 0 0 rgba(76,48,23,.85))
    drop-shadow(-2px 0 0 rgba(76,48,23,.85))
    drop-shadow(0 5px 7px rgba(0,0,0,.3));
}
.poster .l1{font-size:clamp(26px,5.6vw,40px);letter-spacing:.05em;
  background-image:linear-gradient(180deg,var(--gold-top),var(--gold-bot))}
.poster .l2{font-size:clamp(46px,10.5vw,74px);letter-spacing:.045em;margin-top:-.14em;
  background-image:linear-gradient(180deg,var(--ember-top),var(--ember-bot))}
.poster--sm .l1{font-size:clamp(15px,2.4vw,17px)}
.poster--sm .l2{font-size:clamp(24px,4vw,29px)}

/* ------------------------------------------------------------- navigation */

.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(253,247,236,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(89,59,33,.12);
  transition:box-shadow .2s;
}
.nav.is-stuck{box-shadow:0 10px 26px rgba(46,28,12,.10)}
.nav__inner{display:flex;align-items:center;gap:14px;min-height:72px;
  width:min(100% - 2*var(--gap), var(--shell));margin-inline:auto}

.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;padding:6px 0}
.brand img{width:44px;height:44px;border-radius:13px;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.brand__text{display:grid;line-height:1}
.brand__text .l1{font-size:11.5px;font-weight:800;letter-spacing:.11em;color:var(--gold-deep)}
.brand__text .l2{font-size:19px;font-weight:800;letter-spacing:.01em;color:var(--ember-bot)}

.nav__links{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav__links a{
  position:relative;padding:9px 15px;border-radius:999px;
  font-weight:700;font-size:15.5px;color:var(--ink-soft);
  transition:color .16s, background .16s;
}
.nav__links a:hover{color:var(--ink);background:rgba(89,59,33,.07)}
.nav__links a[aria-current]{color:var(--ink);background:rgba(89,59,33,.09)}
.nav__links a[aria-current]::after{
  content:"";position:absolute;left:50%;bottom:3px;translate:-50% 0;
  width:18px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-bot),var(--ember-bot));
}

.nav__side{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* language switch — a segmented pill, the app's tab-bar shape */
.lang{display:flex;gap:3px;padding:3px;border-radius:999px;background:rgba(89,59,33,.10)}
.lang a{
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  transition:transform .18s cubic-bezier(.2,1.2,.4,1), background .16s, color .16s;
}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{
  color:#fff;background:linear-gradient(180deg,#FFAB33,#E07C00);
  box-shadow:0 3px 0 rgba(0,0,0,.2);
}
.lang a:active{transform:scale(.93)}

.nav__toggle{
  display:none;width:44px;height:44px;padding:0;border:0;border-radius:14px;
  background:rgba(89,59,33,.10);align-items:center;justify-content:center;cursor:pointer;
}
.nav__toggle span{display:block;width:19px;height:2.5px;border-radius:2px;background:var(--ink);
  position:relative;transition:transform .22s, opacity .16s}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:19px;height:2.5px;border-radius:2px;background:var(--ink);
  transition:transform .22s}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav__toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.nav__toggle[aria-expanded="true"] span::after{opacity:0}

@media (max-width:1000px){
  .nav__toggle{display:inline-flex}
  .nav__links{
    position:absolute;inset:72px 0 auto;margin:0;
    flex-direction:column;align-items:stretch;gap:2px;padding:12px var(--gap) 20px;
    background:rgba(253,247,236,.98);border-bottom:1px solid rgba(89,59,33,.12);
    box-shadow:0 18px 30px rgba(46,28,12,.14);
    display:none;
  }
  .nav__links.is-open{display:flex}
  /* .nav__links was the flex spacer; absolutely positioned it no longer is. */
  .nav__side{margin-inline-start:auto}
  .nav__links a{padding:13px 16px;font-size:17px;border-radius:14px}
  .nav__links a[aria-current]::after{display:none}
}

/* ----------------------------------------------------------------- plaque */

.plaque{
  --w:230px; --h:74px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;width:var(--w);min-height:var(--h);padding:0 22px;
  border:3px solid var(--wood-deep);border-radius:16px/20px;
  background:
    linear-gradient(180deg,rgba(214,171,120,.45),rgba(0,0,0,0) 46%),
    repeating-linear-gradient(1.4deg,
      rgba(255,229,190,.10) 0 2px, rgba(0,0,0,0) 2px 9px,
      rgba(56,32,14,.14) 9px 11px, rgba(0,0,0,0) 11px 22px),
    linear-gradient(180deg,#94663C,#75492A 48%,#5A3820);
  box-shadow:
    inset 0 2px 0 rgba(213,171,124,.55),
    inset 0 -8px 14px rgba(42,24,11,.42),
    0 6px 0 var(--wood-shadow),
    0 14px 22px rgba(46,28,12,.34);
  transition:transform .18s cubic-bezier(.2,1.2,.4,1), filter .18s, box-shadow .18s;
  cursor:pointer;
}
.plaque b{
  font-size:19px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background-image:linear-gradient(180deg,var(--caption-top),var(--caption-bot));
  background-clip:text;-webkit-background-clip:text;color:transparent;white-space:nowrap;
  filter:drop-shadow(0 2px 0 var(--caption-edge)) drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
.plaque:hover{transform:translateY(-2px);filter:brightness(1.04)}
.plaque:active{transform:translateY(4px) scale(.975);filter:brightness(.93);
  box-shadow:inset 0 2px 0 rgba(213,171,124,.55),0 2px 0 var(--wood-shadow),0 6px 12px rgba(46,28,12,.3)}
.plaque--lg{--w:264px;--h:84px}
.plaque--lg b{font-size:23px}
.plaque--sm{--w:auto;--h:60px;padding:0 26px}
.plaque--sm b{font-size:16px}
.plaque[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}

/* Leafy sprigs at the plaque's feet — the trim the game's signs carry.
   Two real leaf shapes (a pointed oval) rather than a green smear. */
.plaque::before,.plaque::after{
  content:"";position:absolute;bottom:-9px;width:19px;height:11px;
  border-radius:100% 0 100% 0;
  background:linear-gradient(150deg,#6FB544,#3F7A28);
  box-shadow:0 1px 0 rgba(0,0,0,.28);
  pointer-events:none;
}
.plaque::before{left:10px;rotate:-26deg}
.plaque::after{right:10px;rotate:26deg;border-radius:0 100% 0 100%;
  background:linear-gradient(210deg,#6FB544,#3F7A28)}

/* --------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border:0;border-radius:999px;cursor:pointer;
  font-size:16px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:linear-gradient(180deg,#3CC463,#1F8F3C);
  box-shadow:0 5px 0 rgba(0,0,0,.22), 0 10px 20px rgba(41,173,76,.28);
  transition:transform .18s cubic-bezier(.2,1.2,.4,1), box-shadow .18s, filter .18s;
  text-align:center;
}
.btn:hover{filter:brightness(1.05);transform:translateY(-2px)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.22)}
.btn--ghost{
  color:var(--ink);background:#fff;
  box-shadow:0 4px 0 rgba(89,59,33,.18), inset 0 0 0 2px rgba(89,59,33,.16);
}
.btn--ghost:hover{background:#fffdf8}
.btn--light{
  color:var(--ink);background:rgba(255,255,255,.92);
  box-shadow:0 5px 0 rgba(0,0,0,.16);
}
.btn--gold{background:linear-gradient(180deg,#FFB829,#F27A0F);
  box-shadow:0 5px 0 rgba(0,0,0,.22),0 10px 20px rgba(242,122,15,.3)}
/* A "ghost" button over sky has to darken, not lighten: a white-tinted fill
   left its own white label at ~2:1. */
.btn--outline-light{
  color:#fff;background:rgba(6,30,60,.46);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--outline-light:hover{background:rgba(6,30,60,.62)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn__sub{display:block;font-size:11.5px;font-weight:700;opacity:.85;letter-spacing:.04em}

.btn-store{
  display:inline-flex;align-items:center;gap:12px;padding:12px 24px 12px 20px;
  border-radius:999px;background:#1A1A1F;color:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.3),0 12px 24px rgba(0,0,0,.22);
  transition:transform .18s cubic-bezier(.2,1.2,.4,1), filter .18s;
}
.btn-store:hover{transform:translateY(-2px);filter:brightness(1.12)}
.btn-store:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.btn-store svg{width:26px;height:26px;flex:0 0 auto;fill:currentColor}
.btn-store span{display:grid;line-height:1.15;text-align:left}
.btn-store span i{font-style:normal;font-size:11px;font-weight:700;opacity:.72;letter-spacing:.05em}
.btn-store span b{font-size:18px;font-weight:800;letter-spacing:.01em}
.btn-store[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* ------------------------------------------------------------ glass chips */

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 15px;border-radius:999px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 1px rgba(0,0,0,.6),0 2px 5px rgba(0,0,0,.35);
}
.chip img{width:26px;height:26px}
.chip--tight{padding-left:5px}
.chip--paper{
  background:rgba(89,59,33,.08);border-color:rgba(89,59,33,.14);
  color:var(--ink);text-shadow:none;
}

/* ------------------------------------------------------------ cream cards */

.card{
  position:relative;
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:var(--r-md);
  padding:22px;
  box-shadow:var(--hard);
  color:var(--ink);
}
.card--pad{padding:26px}
.card__eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft)}
.card__hint{font-size:14px;color:var(--ink-faint);font-weight:600}

/* soft, borderless surface for dense content grids */
.tile{
  background:#fff;border-radius:var(--r-md);padding:24px;
  box-shadow:0 3px 0 rgba(89,59,33,.12), var(--lift);
  border:1px solid rgba(89,59,33,.08);
  transition:transform .22s cubic-bezier(.2,1.1,.3,1), box-shadow .22s;
  height:100%;
}
.tile:hover{transform:translateY(-4px);box-shadow:0 5px 0 rgba(89,59,33,.14), 0 24px 40px rgba(46,28,12,.18)}
.tile__icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:16px;font-size:24px;
  background:linear-gradient(180deg,#FFF0CF,#FFDFA0);
  box-shadow:inset 0 0 0 1px rgba(89,59,33,.12), 0 3px 0 rgba(89,59,33,.12);
}
.tile h3{font-size:20px;margin-bottom:8px}
.tile p{color:var(--ink-soft);font-size:15.5px}

/* --------------------------------------------------------------- sections */

.section{padding-block:var(--section-y);position:relative}
.section--paper{background:var(--paper)}
.section--alt{background:var(--paper-alt)}
/* A page header band. The blue is deliberately deeper than the game's own
   sky: white body copy over a bright #6FBBF4 sits near 2:1, which is not
   readable enough for a web page, and a text shadow does not count. Deepening
   the top of the band carries the same daylight feel at ~5:1. */
.section--sky{
  background:linear-gradient(180deg,#22599F 0%,#2C71C2 42%,#4E9BE0 76%,#7FC1EC 100%);
  color:#fff;overflow:hidden;
}
.section--sky .lede,.section--sky .eyebrow{text-shadow:0 1px 3px rgba(6,28,54,.4)}
.section--sky::after{
  /* a pale haze at the foot of the band, so it lands on the page rather
     than stopping dead — the game's own fog, flattened */
  content:"";position:absolute;left:0;right:0;bottom:0;height:90px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(207,235,250,.5));
}
.section--cave{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,180,80,.16), transparent 60%),
    linear-gradient(180deg,var(--cave-top),var(--cave-bot));
  color:#F3E3CE;overflow:hidden;
}
.section--dark{
  background:linear-gradient(180deg,var(--dark-top),var(--dark-bot));
  color:#fff;
}
.section__head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,44px);max-width:70ch}
.section__head.is-centered{margin-inline:auto;text-align:center;justify-items:center}

/* torn-paper edge between bands, echoing the game's soft horizon */
.edge-top{position:relative}
.edge-top::before{
  content:"";position:absolute;inset:-1px 0 auto;height:34px;pointer-events:none;
  background:inherit;
  mask:radial-gradient(24px 34px at 50% 0,transparent 99%,#000 100%) repeat-x;
  mask-size:48px 34px;-webkit-mask:radial-gradient(24px 34px at 50% 0,transparent 99%,#000 100%) repeat-x;
  -webkit-mask-size:48px 34px;
}

/* ------------------------------------------------------------------- hero */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(40px,6vw,72px) clamp(190px,20vw,250px);
  background:linear-gradient(180deg,#2A6EC0 0%,#3F8CD8 30%,#6FB6E8 56%,#A6D8EC 76%,#C8E6CE 92%,#A9CE97 100%);
  color:#fff;
}
/* Scrim over the upper hero only, where the headline and lede live: it buys
   white text ~5:1 against the sky without dimming the farm at the bottom. */
.hero::before{
  content:"";position:absolute;inset:0 0 42% 0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,30,60,.34),rgba(6,30,60,.16) 62%,transparent);
}
/* The farm foreground: a wide strip of path, flowers and fence cropped out of
   the key art. It gives the hero real ground to stand on without putting busy
   artwork behind the headline. */
.hero__ground{
  position:absolute;left:0;right:0;bottom:-1px;z-index:-1;height:clamp(200px,24vw,290px);
  pointer-events:none;user-select:none;
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 26%,#000 62%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 26%,#000 62%);
}
.hero__ground img,.hero__ground picture{width:100%;height:100%;display:block}
.hero__ground img{object-fit:cover;object-position:50% 46%}
.hero__clouds{position:absolute;inset:0 0 auto;height:60%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(52px 22px at 12% 24%,rgba(255,255,255,.85),transparent 70%),
    radial-gradient(80px 30px at 20% 30%,rgba(255,255,255,.7),transparent 72%),
    radial-gradient(64px 26px at 78% 18%,rgba(255,255,255,.8),transparent 70%),
    radial-gradient(96px 34px at 88% 26%,rgba(255,255,255,.6),transparent 72%),
    radial-gradient(70px 26px at 47% 12%,rgba(255,255,255,.55),transparent 72%);
}
.hero__inner{display:grid;gap:clamp(24px,3.4vw,40px);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero__copy{display:grid;gap:20px;justify-items:start}
.hero__badges{display:flex;flex-wrap:wrap;gap:10px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* The small print sits low in the hero where the sky has already brightened,
   so it carries its own dark capsule rather than relying on a shadow. */
.hero__note{
  display:inline-block;font-size:13.5px;font-weight:700;color:#fff;
  padding:8px 16px;border-radius:999px;
  background:rgba(6,30,60,.52);border:1px solid rgba(255,255,255,.22);
}
.hero .lede{text-shadow:0 1px 3px rgba(0,0,0,.24)}

.hero__device{justify-self:center;position:relative;width:min(320px,78vw)}
.hero__device::after{
  content:"";position:absolute;left:50%;bottom:-26px;translate:-50% 0;
  width:78%;height:34px;border-radius:50%;background:rgba(24,52,20,.28);filter:blur(14px);
}

/* phone mock — one component, reused across pages */
.device{
  position:relative;border-radius:44px;padding:11px;
  background:linear-gradient(160deg,#2C3140,#14161F);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.14),
    0 30px 60px rgba(12,32,54,.42),
    0 10px 0 rgba(0,0,0,.18);
  transform:rotate(-1.6deg);
  transition:transform .4s cubic-bezier(.2,1.1,.3,1);
}
.device:hover{transform:rotate(0deg) translateY(-6px)}
.device img{border-radius:34px;display:block;width:100%}
.device::before{
  content:"";position:absolute;top:19px;left:50%;translate:-50% 0;
  width:33%;height:22px;border-radius:999px;background:#14161F;z-index:2;
}
.device--flat{transform:none}
.device--flat:hover{transform:translateY(-6px)}

/* ------------------------------------------------------------ stats strip */

.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  border-radius:var(--r-md);overflow:hidden;
  background:rgba(89,59,33,.12);
  box-shadow:var(--lift);
}
.stats div{background:#fff;padding:22px 18px;text-align:center}
.stats b{display:block;font-size:clamp(26px,3.6vw,36px);font-weight:800;line-height:1.1;
  background-image:linear-gradient(180deg,var(--gold-top),var(--ember-bot));
  background-clip:text;-webkit-background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:4px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}

/* ------------------------------------------------------------ feature row */

.featurerow{display:grid;gap:clamp(28px,5vw,64px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.featurerow + .featurerow{margin-top:clamp(48px,7vw,96px)}
.featurerow:nth-child(even) .featurerow__media{order:-1}
.featurerow__copy{display:grid;gap:16px;justify-items:start}
.featurerow__media{justify-self:center;width:min(300px,74vw)}
.facts{display:grid;gap:9px;margin-top:2px}
.facts li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink-soft)}
.facts li::before{
  content:"";position:absolute;left:0;top:.52em;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(180deg,var(--prog-light),var(--prog-deep));
  box-shadow:0 2px 0 rgba(0,0,0,.14);
}
.facts li::after{
  content:"";position:absolute;left:5px;top:calc(.52em + 4px);width:4px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;rotate:42deg;
}
.facts--light li{color:rgba(255,255,255,.82)}

/* ------------------------------------------------------- key-art showcase */

.artshow{display:grid;gap:clamp(26px,5vw,56px);align-items:center;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.artshow__copy{display:grid;gap:16px;justify-items:start}
.artframe{
  position:relative;justify-self:center;width:min(420px,84vw);
  padding:12px;border-radius:28px;
  background:
    linear-gradient(180deg,rgba(206,161,112,.45),rgba(0,0,0,0) 55%),
    repeating-linear-gradient(93deg,#8A5F38 0 7px,#93683F 7px 13px),
    linear-gradient(180deg,#8A5F38,#6B4526 52%,#54341C);
  border:3px solid var(--wood-deep);
  box-shadow:
    inset 0 2px 0 rgba(213,171,124,.5),
    0 8px 0 var(--wood-shadow),
    0 22px 38px rgba(46,28,12,.35);
  transform:rotate(-1.4deg);
  transition:transform .4s cubic-bezier(.2,1.1,.3,1);
}
.artframe:hover{transform:rotate(0deg) translateY(-5px)}
.artframe img{border-radius:18px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
/* the two nails, like the game's plaques */
.artframe::before,.artframe::after{
  content:"";position:absolute;top:20px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#E4CBAA,#7A5027 60%,#3D2612);
  box-shadow:0 1px 1px rgba(0,0,0,.5);
}
.artframe::before{left:20px}
.artframe::after{right:20px}
@media (max-width:900px){
  .artshow{grid-template-columns:1fr}
  .artshow__copy{justify-items:center;text-align:center}
}

/* -------------------------------------------------------------- boost row */

.boosts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.boost{
  --accent:var(--gold-top); --deep:var(--gold-bot);
  position:relative;display:grid;gap:10px;justify-items:center;text-align:center;
  padding:26px 18px 22px;border-radius:var(--r-md);
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
}
.boost::before{
  content:"";position:absolute;inset:-40% 30% auto;height:120px;
  background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent);
  filter:blur(10px);pointer-events:none;
}
.boost img{width:74px;height:74px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.boost h3{
  font-size:16px;letter-spacing:.09em;text-transform:uppercase;
  background-image:linear-gradient(180deg,var(--accent),var(--deep));
  background-clip:text;-webkit-background-clip:text;color:transparent;
}
.boost p{font-size:14.5px;color:rgba(255,255,255,.78);font-weight:600}
.boost__time{
  font-size:12px;font-weight:800;letter-spacing:.08em;padding:4px 11px;border-radius:999px;
  /* static first, color-mix second: an engine without color-mix keeps the
     fallback instead of dropping the declaration entirely */
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);
  background:color-mix(in srgb,var(--deep) 45%,transparent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.boost--xp{--accent:var(--xp-bright);--deep:var(--xp-deep)}
.boost--speed{--accent:var(--speed-bright);--deep:var(--speed-deep)}
.boost--rocket{--accent:var(--rocket-bright);--deep:var(--rocket-deep)}
.boost--booster{--accent:var(--booster-bright);--deep:var(--booster-deep)}
.boost--immortality{--accent:var(--immortal-bright);--deep:var(--immortal-deep)}

/* -------------------------------------------------------------- galleries */

.gallery{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(230px,62vw);gap:18px;
  overflow-x:auto;padding:8px 4px 22px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;overscroll-behavior-x:contain;
}
.gallery > *{scroll-snap-align:center}
.gallery img{border-radius:22px;box-shadow:0 5px 0 rgba(0,0,0,.16), var(--lift)}
.gallery figure{margin:0;display:grid;gap:10px}
.gallery figcaption{font-size:13.5px;font-weight:700;color:var(--ink-faint);text-align:center}
.section--cave .gallery figcaption,.section--dark .gallery figcaption{color:rgba(255,255,255,.62)}

/* ------------------------------------------------------- how-to-play grid */

.controls{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.control{
  display:grid;gap:14px;padding:24px;border-radius:var(--r-md);
  background:#fff;border:1px solid rgba(89,59,33,.08);
  box-shadow:0 3px 0 rgba(89,59,33,.12), var(--lift);
}
.control__glyph{
  width:76px;height:76px;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(180deg,#E9F6FF,#CFE9FB);
  box-shadow:inset 0 0 0 1px rgba(31,111,235,.14);
  color:#1F6FEB;
}
.control__glyph svg{width:38px;height:38px}
.control h3{font-size:18px}
.control p{font-size:15px;color:var(--ink-soft)}
.control__tag{
  align-self:start;justify-self:start;
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:rgba(89,59,33,.09);color:var(--ink-soft);
}

.steps{counter-reset:step;display:grid;gap:16px}
.step{
  position:relative;display:grid;gap:8px;padding:22px 22px 22px 74px;
  border-radius:var(--r-md);background:var(--cream);
  border:3px solid var(--ink);box-shadow:var(--hard);
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:20px;top:20px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:18px;color:#FFF094;
  background:radial-gradient(circle at 34% 26%,#0D4A21,#03210F 78%);
  box-shadow:inset 0 0 0 3px #3E2614, 0 3px 0 rgba(0,0,0,.3);
  font-variant-numeric:tabular-nums;
}
.step h3{font-size:19px}
.step p{font-size:15.5px;color:var(--ink-soft)}

/* keyword highlight inside body copy */
mark{background:linear-gradient(180deg,rgba(255,224,76,.55),rgba(245,158,20,.4));
  color:inherit;padding:0 .18em;border-radius:5px;font-weight:800}
.section--cave mark,.section--dark mark,.section--sky mark{
  background:rgba(255,224,76,.22);color:#FFE9A8}

/* ------------------------------------------------------------- characters */

.tabbar{display:flex;flex-wrap:wrap;gap:8px;padding:5px;border-radius:999px;
  background:rgba(89,59,33,.10);width:max-content;max-width:100%;margin-inline:auto}
.tabbar a,.tabbar button{
  border:0;cursor:pointer;padding:10px 22px;border-radius:999px;
  font-size:16px;font-weight:800;color:var(--ink-soft);background:transparent;
  transition:transform .18s cubic-bezier(.2,1.2,.4,1), background .16s, color .16s;
}
.tabbar a:hover,.tabbar button:hover{color:var(--ink)}
.tabbar a[aria-current],.tabbar button[aria-selected="true"]{
  color:#fff;background:linear-gradient(180deg,#FFAB33,#E07C00);
  box-shadow:0 4px 0 rgba(0,0,0,.22);
}
.tabbar a:active,.tabbar button:active{transform:scale(.94)}
[hidden]{display:none!important}

.roster{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(285px,100%),1fr))}

.charcard{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;background:#fff;
  border:1px solid rgba(89,59,33,.08);
  box-shadow:0 4px 0 rgba(89,59,33,.13), var(--lift);
  transition:transform .24s cubic-bezier(.2,1.1,.3,1), box-shadow .24s;
}
.charcard:hover{transform:translateY(-5px);box-shadow:0 6px 0 rgba(89,59,33,.15),0 26px 44px rgba(46,28,12,.2)}
/* The showroom pedestal: sky behind, a sand disc with the game's gold rim
   under the animal, and the cutout standing ON it — the art is trimmed to its
   own silhouette during the asset build, so aligning to the bottom lands the
   feet on the disc for every bird. */
.charcard__stage{
  position:relative;display:grid;place-items:end center;padding:26px 20px 42px;min-height:248px;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 62%,#CFEBD3 100%);
}
.charcard__stage::after{
  content:"";position:absolute;left:50%;bottom:24px;translate:-50% 0;
  width:64%;height:30px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(243,222,175,.98),rgba(216,186,128,.6) 72%,transparent);
  box-shadow:0 0 0 3px rgba(237,184,56,.6);
}
.charcard__stage picture{position:relative;z-index:1;display:block}
.charcard__stage img{
  height:var(--figure,168px);width:auto;max-width:82%;object-fit:contain;
  margin-bottom:6px;
  filter:drop-shadow(0 12px 10px rgba(20,40,20,.3));
}
.charcard--monster .charcard__stage{
  background:linear-gradient(180deg,#3B2A1A,#6B4A2A 60%,#8C6A3E 100%)}
.charcard--monster .charcard__stage::after{
  background:radial-gradient(closest-side,rgba(255,214,140,.8),rgba(150,110,60,.4) 70%,transparent);
  box-shadow:0 0 0 4px rgba(237,184,56,.4)}

.charcard__body{display:grid;gap:14px;padding:20px 22px 24px;flex:1}
.charcard__title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.charcard__title h3{font-size:22px}
.charcard p{font-size:15px;color:var(--ink-soft)}

/* Deliberately NOT text-transform:uppercase. Under lang="tr" the browser
   applies Turkish casing, which turns the loanword "coin" into "COİN" —
   correct for Turkish, wrong for a word every player reads as English. The
   captions are authored in the case they should appear in instead. */
.pricetag{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.pricetag--free{background:linear-gradient(180deg,#5EC46F,var(--select-green));color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.18)}
.pricetag--coins{background:linear-gradient(180deg,#FFDB73,var(--booster-deep));color:#4A2E06;
  box-shadow:0 2px 0 rgba(0,0,0,.18);display:inline-flex;align-items:center;gap:5px}
.pricetag--coins img{width:15px;height:15px}
.pricetag--store{background:#242429;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.pricetag--soon{background:rgba(89,59,33,.12);color:var(--ink-soft)}

.traits{display:grid;gap:9px}
.trait{display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.trait__label{font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.trait__bar{height:9px;border-radius:999px;background:rgba(89,59,33,.14);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(89,59,33,.08)}
.trait__bar i{display:block;height:100%;min-width:9px;border-radius:999px;
  background:linear-gradient(90deg,var(--prog-light),var(--prog-deep))}
.trait__value{font-weight:800;color:var(--ink-soft);font-size:12.5px}

.charcard__meta{display:flex;flex-wrap:wrap;gap:7px}
.metatag{
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:rgba(89,59,33,.08);color:var(--ink-soft);
}
.metatag--hot{background:rgba(217,84,66,.14);color:#A5382A}

/* locked / coming-soon slot — absence keeps its space */
.locked{
  display:grid;place-items:center;gap:10px;padding:40px 24px;min-height:220px;text-align:center;
  border-radius:var(--r-lg);border:2px dashed rgba(89,59,33,.3);
  background:rgba(89,59,33,.05);color:var(--ink-faint);font-weight:800;
}
.locked span{font-size:30px;opacity:.6}

/* place cards */
.places{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.place{
  display:grid;gap:12px;padding:26px;border-radius:var(--r-md);
  background:#fff;border:1px solid rgba(89,59,33,.08);
  box-shadow:0 3px 0 rgba(89,59,33,.12), var(--lift);
  border-top:5px solid var(--accent,#8CEB59);
}
.place h3{font-size:19px}
.place p{font-size:15px;color:var(--ink-soft)}
.place ul{display:grid;gap:7px;margin-top:2px}
.place li{position:relative;padding-left:17px;font-size:13.5px;color:var(--ink-faint);font-weight:600}
.place li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--accent,#8CEB59)}

/* --------------------------------------------------------------- contact  */

.contactgrid{display:grid;gap:clamp(24px,4vw,48px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}

.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field > label:not(.consent){font-size:13px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft)}
.field .req{color:var(--barn-red)}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:16px;
  font:inherit;font-size:16px;font-weight:600;color:var(--ink);
  background:#fff;border:2px solid rgba(89,59,33,.22);
  box-shadow:inset 0 2px 4px rgba(89,59,33,.05);
  transition:border-color .16s, box-shadow .16s;
}
.field textarea{min-height:170px;resize:vertical;line-height:1.55}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23593B21' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:12px;
  padding-right:44px;cursor:pointer}
.field input:not([type=checkbox]):focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--select-green);
  box-shadow:0 0 0 4px rgba(64,163,76,.18)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:var(--barn-red);box-shadow:0 0 0 4px rgba(217,84,66,.16)}
.field__error{font-size:13.5px;font-weight:700;color:#B23225}
.field__hint{font-size:13px;color:var(--ink-faint);font-weight:600}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft)}
.consent input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--select-green)}

.alert{display:flex;gap:14px;padding:18px 20px;border-radius:var(--r-md);font-weight:700;
  align-items:flex-start;line-height:1.5}
.alert > span:first-child{font-size:22px;line-height:1;flex:0 0 auto}
.alert--ok{background:#E6F7EA;color:#1C6B31;box-shadow:inset 0 0 0 2px rgba(41,173,76,.28)}
.alert--bad{background:#FCE9E6;color:#9B2C1E;box-shadow:inset 0 0 0 2px rgba(217,84,66,.3)}

.infocard{display:grid;gap:16px}
.infocard .linkrow{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;
  background:#fff;border:1px solid rgba(89,59,33,.1);
  box-shadow:0 3px 0 rgba(89,59,33,.12);
  transition:transform .18s cubic-bezier(.2,1.2,.4,1), box-shadow .18s;
}
.infocard a.linkrow:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(89,59,33,.14)}
.linkrow__icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:20px;background:linear-gradient(180deg,#FFF0CF,#FFDFA0);flex:0 0 auto}
.linkrow b{display:block;font-size:16px}
.linkrow small{display:block;font-size:13.5px;color:var(--ink-faint);font-weight:600}

.faq{display:grid;gap:10px}
.faq details{
  background:#fff;border-radius:18px;border:1px solid rgba(89,59,33,.1);
  box-shadow:0 3px 0 rgba(89,59,33,.1);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 20px;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:800;color:var(--ink-faint);
  transition:transform .2s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 20px 18px;color:var(--ink-soft);font-size:15px}

/* ---------------------------------------------------------- legal pages */

.legal-hero{padding-block:clamp(48px,7vw,76px)}
.legal-hero__updated{
  margin-top:2px;padding:7px 13px;border-radius:999px;
  background:rgba(6,30,60,.38);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.03em;
}
.legal-layout{display:grid;grid-template-columns:minmax(220px,.5fr) minmax(0,1.5fr);gap:clamp(28px,5vw,72px);align-items:start}
.legal-nav{display:grid;gap:14px}
.legal-nav__card,.legal-nav__help{
  display:grid;gap:4px;padding:18px;border-radius:18px;
  background:#fff;border:1px solid rgba(89,59,33,.11);box-shadow:0 3px 0 rgba(89,59,33,.10);
}
.legal-nav__card .card__eyebrow{margin-bottom:6px}
.legal-nav a{padding:8px 10px;border-radius:10px;color:var(--ink-soft);font-size:14px;font-weight:800;line-height:1.25}
.legal-nav a:hover{background:rgba(89,59,33,.07);color:var(--ink)}
.legal-nav a[aria-current]{background:rgba(41,173,76,.14);color:#176A31}
.legal-nav__contents a{font-size:13px;font-weight:700}
.legal-nav__help{gap:8px;background:#FFF7E6}
.legal-nav__help strong{font-size:15px}
.legal-nav__help span{font-size:13.5px;font-weight:600;color:var(--ink-soft);line-height:1.45}
.legal-nav__help a{padding:0;color:#176A31;overflow-wrap:anywhere}
.legal-content{display:grid;gap:0;min-width:0}
.legal-intro{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin-bottom:8px;padding:22px;border-radius:var(--r-md);background:#E8F6EB;border:1px solid rgba(41,143,60,.20)}
.legal-intro__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#fff;font-size:23px;box-shadow:0 2px 0 rgba(41,143,60,.14)}
.legal-intro h2{margin-bottom:6px}
.legal-intro p,.legal-section p{color:var(--ink-soft);line-height:1.65}
.legal-section{scroll-margin-top:94px;padding-block:28px;border-bottom:1px solid rgba(89,59,33,.14)}
.legal-section h2{margin-bottom:9px}
.legal-section ul{display:grid;gap:9px;margin-top:15px}
.legal-section li{position:relative;padding-left:25px;color:var(--ink-soft);font-size:15.5px;line-height:1.55}
.legal-section li::before{content:"";position:absolute;left:2px;top:.52em;width:13px;height:13px;border-radius:50%;background:linear-gradient(180deg,var(--prog-light),var(--prog-deep));box-shadow:0 2px 0 rgba(0,0,0,.13)}
.legal-section li::after{content:"";position:absolute;left:6px;top:calc(.52em + 3px);width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;rotate:42deg}
.legal-next{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding:18px 20px;border-radius:18px;background:rgba(89,59,33,.07);font-size:15px}
.legal-next strong{color:var(--ink-soft)}
.legal-next a{font-weight:800;color:#176A31;text-align:right}
.legal-next a span{margin-left:5px;font-size:18px}
@media (min-width:901px){.legal-nav{position:sticky;top:92px}}

/* --------------------------------------------------------------- CTA band */

.ctaband{
  position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(52px,7vw,88px);
  /* A deep ember rather than the bright orange the app uses on small buttons:
     white body copy needs 4.5:1, which a light orange cannot give. */
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255,214,120,.16), transparent 60%),
    linear-gradient(180deg,#BE4A16,#95300F);
  color:#fff;
}
.ctaband__inner{display:grid;gap:20px;justify-items:center}
.ctaband h2{font-size:clamp(27px,4.4vw,42px);text-shadow:0 3px 0 rgba(120,45,10,.5)}
.ctaband p{color:rgba(255,255,255,.9);max-width:56ch}

/* ----------------------------------------------------------------- footer */

.footer{
  background:linear-gradient(180deg,#4A3018,#31200E);color:rgba(255,246,232,.78);
  padding-block:clamp(40px,6vw,64px) 28px;font-size:15px;
}
.footer a{color:rgba(255,246,232,.78);transition:color .16s}
.footer a:hover{color:#FFD98A}
.footer__grid{display:grid;gap:34px;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr))}
/* Below this the three 150px link tracks would squeeze the brand column —
   whose minimum is 0 — down to nothing. Give it the full row instead. */
@media (max-width:880px){
  .footer__grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .footer__brand{grid-column:1/-1;max-width:none}
}
.footer h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,246,232,.55);margin-bottom:12px}
.footer ul{display:grid;gap:9px}
.footer__brand{display:grid;gap:14px;max-width:38ch}
.footer__brand p{font-size:14.5px;color:rgba(255,246,232,.6)}
.footer__bottom{
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,246,232,.14);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:13.5px;color:rgba(255,246,232,.55);
}

/* --------------------------------------------------------------- 404 page */

.notfound{display:grid;gap:22px;justify-items:center;text-align:center;
  padding-block:clamp(60px,10vw,120px)}
.notfound img{width:min(260px,60vw)}

/* ------------------------------------------------------------- animations */

/* The hidden state is applied ONLY once site.js has claimed the document
   (it sets .js on <html> as its first statement). Shipping opacity:0 in plain
   CSS would blank most of the page for anyone whose JS never runs. */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,1,.3,1)}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.bob{animation:bob 3.4s ease-in-out infinite}

/* ------------------------------------------------------------- responsive */

@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .hero__copy{justify-items:center}
  .hero .lede{max-width:56ch}
  .featurerow{grid-template-columns:1fr}
  .featurerow:nth-child(even) .featurerow__media{order:0}
  .featurerow__copy{justify-items:start}
  .contactgrid{grid-template-columns:1fr}
  .legal-layout{grid-template-columns:1fr}
  .legal-nav{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .legal-nav__help{grid-column:1/-1}
  .hero{padding-bottom:clamp(230px,58vw,340px)}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .card,.tile,.control,.place{padding:20px}
  .step{padding:20px 20px 20px 66px}
  .stats div{padding:18px 12px}
  .plaque{--w:100%}
  /* Stack the calls to action rather than letting flex squeeze them: two
     shrunk capsules side by side read as broken, not compact. */
  .hero__cta,.ctaband .hero__cta{flex-direction:column;align-items:stretch;width:100%}
  .btn,.btn-store{width:100%;justify-content:center}
  .gallery{grid-auto-columns:min(215px,70vw)}
  .legal-nav{grid-template-columns:1fr}
  .legal-nav__help{grid-column:auto}
  .legal-intro{grid-template-columns:1fr;padding:20px}
  .legal-next{align-items:flex-start;flex-direction:column}
  .legal-next a{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .nav,.ctaband,.gallery,.hero__ground,.hero__clouds,.skip{display:none!important}
  body{background:#fff}
  /* Nothing may depend on JS or on a coloured band to be readable on paper. */
  .js .reveal{opacity:1!important;transform:none!important}
  .hero,.section--sky,.section--dark,.section--cave,.footer{
    background:#fff!important;color:#000!important}
  .hero *,.section--sky *,.section--dark *,.section--cave *,.footer *{
    color:#000!important;text-shadow:none!important}
  .device,.tile,.card,.control,.place,.charcard{box-shadow:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}