/* Equalo's website: the game's storybook palette and fonts (bundled, no font server), one column on phones. */
@import url("fonts/fonts.css");
:root{
  --paper:#F7F0E1; --cream:#FFFBF2; --edge:#E2D3B4; --ink:#1F2C55; --soft:#5E6685;
  --cobalt:#2F5DB8; --cobalt-edge:#1D3F86; --sun:#FFD43B; --sun-edge:#D6A300; --green:#5BBE52; --green-edge:#2D7A2C;
  --coral:#EC6845; --heart:#E5484D; --sky:#DCEBFA;
  --display:"Baloo 2","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:24px; --lift:0 18px 40px -22px rgba(60,44,14,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{overflow-x:clip;margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--cobalt)}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,7vw,76px);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(32px,4.6vw,50px);font-weight:800}
h3{font-size:24px;font-weight:700}
p{margin:0}
.wrap{width:min(1120px,100% - 32px);margin:0 auto}
.eyebrow{font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.lede{font-size:clamp(18px,2vw,21px);color:var(--soft);max-width:38em}

/* Header */
.top{position:sticky;top:0;z-index:20;background:rgba(247,240,225,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(226,211,180,.6)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 26px/1 var(--display)}
.brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.nav{display:flex;gap:22px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.nav a:hover{color:var(--cobalt)}
@media (max-width:760px){ .nav a:not(.store){display:none} }

/* Buttons */
.store{display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;border-radius:16px;background:#111;color:#fff!important;text-decoration:none;font:700 15px/1.1 var(--body);box-shadow:0 4px 0 #000,var(--lift)}
.store svg{width:26px;height:26px;fill:#fff}
.store small{display:block;font-weight:400;font-size:11px;opacity:.85}
.store.small{padding:8px 14px 8px 12px;border-radius:12px;box-shadow:0 3px 0 #000}
.store.small svg{width:20px;height:20px}
.btn{display:inline-block;padding:13px 22px;border-radius:16px;background:var(--cream);color:var(--ink);text-decoration:none;font:700 16px/1 var(--display);box-shadow:0 4px 0 var(--edge)}

/* Hero: the whole rebuilt valley */
.hero{position:relative;overflow:hidden;background:var(--sky)}
.hero .art{position:absolute;inset:0;background:url("img/evenbrook.jpg") 50% 70%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,240,225,.0) 30%,rgba(247,240,225,.15) 55%,var(--paper) 100%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:end;min-height:min(86vh,820px);padding:80px 0 56px}
.hero .card{background:rgba(255,251,242,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:32px;padding:34px 34px 30px;box-shadow:var(--lift);display:flex;flex-direction:column;gap:16px;max-width:560px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.hero .fine{font-size:14px;color:var(--soft)}
.hero .phone{justify-self:center;transform:rotate(3deg)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding:44vw 0 40px}
  .hero .phone{display:none}
}

/* A phone frame around a screenshot */
.phone{width:min(300px,78vw);aspect-ratio:415/900;border-radius:44px;padding:10px;background:#1b1f2c;box-shadow:0 0 0 2px #3a4152,0 30px 60px -20px rgba(20,24,40,.55)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:34px}

/* Sections */
section{padding:88px 0}
.center{text-align:center}
.center .lede{margin:14px auto 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split.flip > :first-child{order:2}
@media (max-width:860px){ .split{grid-template-columns:minmax(0,1fr);gap:36px} .split.flip > :first-child{order:0} section{padding:64px 0} }
.stack{display:flex;flex-direction:column;gap:16px}

/* Keep your mind sharp */
.mind{padding:72px 0 0}
.mind h2{margin-top:6px}

/* How it plays */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.step{text-align:left;background:var(--cream);border-radius:var(--radius);padding:26px;box-shadow:0 4px 0 var(--edge);display:flex;flex-direction:column;gap:10px}
.step .num{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--cobalt);color:#fff;font:800 24px/1 var(--display);box-shadow:0 4px 0 var(--cobalt-edge)}
.step p{color:var(--soft)}
@media (max-width:860px){ .steps{grid-template-columns:minmax(0,1fr)} }

/* A little equation made of game tiles */
.eqn{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin:6px 0}
.eqn i{font-style:normal;display:grid;place-items:center;font:800 26px/1 var(--display)}
.eqn .n{width:clamp(36px,10vw,50px);height:clamp(36px,10vw,50px);border-radius:14px;background:linear-gradient(180deg,#FFFDF5,#F3E7CD);box-shadow:0 4px 0 #D5BE92;color:var(--ink)}
.eqn .n.sel{background:linear-gradient(180deg,#FFEB8F,#FFD43B);box-shadow:0 4px 0 #D6A300;color:#3A2A00}
.eqn .o{width:clamp(28px,8vw,36px);height:clamp(28px,8vw,36px);border-radius:50%;background:#41A64A;color:#fff;box-shadow:0 3px 0 #2A7A31;font-size:22px}
.eqn .o.t{background:#3E6FD8;box-shadow:0 3px 0 #274FA3}
.eqn .eq{font-size:30px;color:var(--soft)}
.eqn .tg{min-width:clamp(40px,11vw,56px);height:clamp(36px,10vw,50px);padding:0 12px;border-radius:14px;background:var(--cobalt);color:#fff;box-shadow:0 4px 0 var(--cobalt-edge)}

/* The story: flood, then the rebuilt town */
.story{background:linear-gradient(180deg,var(--paper),#EFE5CF)}
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.beforeafter figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--lift)}
.beforeafter img{width:100%;aspect-ratio:2000/848;object-fit:cover}
.beforeafter figcaption{position:absolute;left:14px;top:14px;padding:4px 12px;border-radius:999px;background:rgba(255,251,242,.92);font:800 15px/1.4 var(--display)}
@media (max-width:760px){ .beforeafter{grid-template-columns:1fr} }
.mayor{display:flex;gap:24px;align-items:flex-end;margin-top:40px}
.mayor img{width:170px;flex:none;filter:drop-shadow(0 12px 18px rgba(60,44,14,.3))}
.bubble{position:relative;background:var(--cream);border-radius:22px;padding:22px 24px;box-shadow:0 4px 0 var(--edge);font-size:19px;max-width:40em}
.bubble b{display:block;font:800 15px/1 var(--display);color:var(--cobalt);margin-bottom:8px}
.bubble::before{content:"";position:absolute;left:-12px;bottom:34px;border:12px solid transparent;border-right-color:var(--cream);border-left:0}
@media (max-width:620px){ .mayor{flex-direction:column;align-items:center} .mayor img{width:140px} .bubble::before{display:none} }

/* Places */
.places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
.place{background:var(--cream);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 0 var(--edge)}
.place img{width:100%;aspect-ratio:2000/848;object-fit:cover}
.place div{padding:18px 22px 22px;display:flex;flex-direction:column;gap:6px}
.place p{color:var(--soft);font-size:16px}
@media (max-width:760px){ .places{grid-template-columns:minmax(0,1fr)} }

/* Screens */
.screens{display:flex;gap:22px;overflow-x:auto;padding:16px 4px 30px;scroll-snap-type:x mandatory;scrollbar-width:none;min-width:0}
.screens::-webkit-scrollbar{display:none}
.screens .phone{flex:none;width:250px;scroll-snap-align:center}

/* Special tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.tile{background:var(--cream);border-radius:20px;padding:20px;box-shadow:0 4px 0 var(--edge);display:flex;flex-direction:column;gap:8px}
.tile .face{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font:800 30px/1 var(--display)}
.tile .face img{width:78%;height:78%;object-fit:contain}
.tile b{font:800 19px/1.1 var(--display)}
.tile p{font-size:15px;color:var(--soft);line-height:1.45}
@media (max-width:860px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .tiles{grid-template-columns:1fr} }

/* Townsfolk */
.folk{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin-top:34px}
.folk img{height:96px;width:auto;filter:drop-shadow(0 8px 10px rgba(60,44,14,.25))}

@media (max-width:620px){ .folk img{height:72px} .top .store.small{display:none} }

/* Parents */
.parents{background:var(--cobalt);color:#fff}
.parents .lede{color:rgba(255,255,255,.85)}
.parents .eyebrow{color:var(--sun)}
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.check{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:22px}
.check b{display:block;font:800 21px/1.15 var(--display);margin-bottom:6px}
.check p{color:rgba(255,255,255,.85);font-size:16px}
@media (max-width:860px){ .checks{grid-template-columns:1fr} }

/* Badges strip */
.badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.badges img{width:72px;height:72px;border-radius:50%;box-shadow:0 4px 10px rgba(60,44,14,.25)}

/* Final call */
.cta{text-align:center;background:url("img/farm.jpg") 50% 60%/cover;position:relative}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--paper),rgba(247,240,225,.55) 40%,rgba(247,240,225,.75))}
.cta .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.cta .icon{width:110px;height:110px;border-radius:26px;box-shadow:var(--lift)}

/* Footer */
footer{padding:40px 0 56px;color:var(--soft);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--ink);font-weight:700;text-decoration:none}

/* Text pages: privacy, terms, support */
.doc{padding:56px 0 80px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(36px,5vw,54px);margin:10px 0 8px}
.doc .updated{color:var(--soft);font-size:15px;margin-bottom:30px}
.doc h2{font-size:27px;margin:38px 0 10px}
.doc p,.doc li{color:#2C375E}
.doc p + p{margin-top:12px}
.doc ul{padding-left:22px;margin:10px 0}
.doc li{margin:6px 0}
.doc .summary{background:var(--cream);border-radius:20px;padding:22px 24px;box-shadow:0 4px 0 var(--edge);margin:22px 0 10px}
.doc .summary li{margin:4px 0}
.faq details{background:var(--cream);border-radius:18px;padding:16px 20px;box-shadow:0 3px 0 var(--edge);margin:12px 0}
.faq summary{cursor:pointer;font:700 19px/1.3 var(--display)}
.faq details p{margin-top:10px}