/* Shared look for the home page and the legal pages: the book's paper-on-a-desk style and tokens. */
:root{
  color-scheme: light;
  --desk:#E2E9F0; --desk-dot:#CBD6E1; --paper:#FFFEF8; --white:#FFFFFF;
  --ink:#23264A; --ink-soft:#5A5E85; --line:#CDD1E4;
  --hh:#F5B800; --hh-soft:#FFE793; --sn:#E5484D; --bd:#2F6BE0; --tupi:#E5589B; --good:#2BA866; --t1:#2BA866; --t2:#7B5BD6; --ft:#0D9AA6; --cr:#F2781B;
  --f-display:"Fredoka","Varela Round",system-ui,sans-serif;
  --f-body:"Varela Round","Fredoka",system-ui,sans-serif;
  --r-hand:18px 7px 16px 9px / 9px 16px 7px 18px;
  --shadow:0 24px 44px -28px rgba(35,38,74,.5);
  --gutter:max(16px, env(safe-area-inset-left,0px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{margin:0; background:var(--desk) radial-gradient(var(--desk-dot) 1.3px, transparent 1.6px) 0 0/22px 22px;
  color:var(--ink); font:400 18px/1.65 var(--f-body)}
img{max-width:100%; height:auto; display:block}
a{color:var(--bd)}
h1,h2,h3{font-family:var(--f-display); line-height:1.15; margin:0}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--bd); outline-offset:3px}

.skip{position:absolute; inset-inline-start:12px; top:-60px; z-index:50; padding:8px 14px; background:var(--ink); color:var(--white); border-radius:8px; font:600 16px var(--f-display)}
.skip:focus{top:10px}

/* The top menu lives in topbar.css (shared with the preview and the book page) */
.name{color:var(--tupi)}
@media (max-width:760px){ html{scroll-padding-top:120px} } /* the menu takes two rows on phones */

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; background:var(--hh); color:var(--ink); border:2.5px solid var(--ink);
  border-radius:var(--r-hand); box-shadow:3px 3px 0 var(--ink); font:600 18px var(--f-display); text-decoration:none; cursor:pointer; white-space:nowrap}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--paper)}
.btn.small{padding:7px 14px; font-size:16px}
.btn[aria-disabled="true"]{background:var(--line); color:var(--ink-soft); box-shadow:none; cursor:default}

/* Layout */
.wrap{max-width:1120px; margin:0 auto; padding:0 var(--gutter)}
section.block{padding:56px 0}
.kicker{font:600 15px var(--f-display); color:var(--ink-soft); letter-spacing:.2px}
.lead{font-size:20px; color:var(--ink)}
.sec-title{font-size:clamp(28px, 4.2vw, 40px); margin:6px 0 22px}
.mark{background:linear-gradient(transparent 55%, var(--hh-soft) 55%)}
.card{background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-hand); box-shadow:var(--shadow)}

/* Hero */
.hero{padding:44px 0 32px; overflow-x:clip} /* the tilted cover must not widen narrow phones */
.hero .in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center}
.hero h1{font-size:clamp(44px, 7vw, 76px); font-weight:700; margin:10px 0 16px}
.hero h1 .name{-webkit-text-stroke:2px var(--ink); paint-order:stroke fill}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 26px; padding:0; list-style:none}
.chips li{padding:4px 12px; background:var(--paper); border:2px solid var(--ink); border-radius:999px; font:600 15px var(--f-display)}
.cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.cover-wrap{position:relative; max-width:420px; justify-self:center; transform:rotate(-2.5deg)}
.cover-wrap img{border-radius:10px; border:3px solid var(--ink); box-shadow:12px 16px 0 rgba(35,38,74,.18), var(--shadow)}
@media (max-width:820px){
  .hero .in{grid-template-columns:minmax(0,1fr)}
  .cover-wrap{order:-1; max-width:280px}
}

/* Feature cards */
.features{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px}
.feature{padding:22px 20px; display:grid; gap:8px; align-content:start}
.feature .ic{width:46px; height:46px; border-radius:50%; border:2.5px solid var(--ink); display:grid; place-items:center; font:700 22px var(--f-display); color:var(--white)}
.feature h3{font-size:22px}
.feature p{color:var(--ink-soft); font-size:17px}

/* Route */
.route{list-style:none; margin:0; padding:0; display:grid; gap:12px; max-width:760px}
.route li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:center; padding:12px 16px}
.route .stop{width:40px; height:40px; border-radius:50%; border:2.5px solid var(--ink); display:grid; place-items:center; font:700 19px var(--f-display); color:var(--white)}
.route b{font:600 20px var(--f-display); display:block}
.route span.d{color:var(--ink-soft); font-size:16px}

/* Peek */
.peek{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px}
.peek a{display:grid; gap:10px; color:var(--ink); text-decoration:none; font:600 18px var(--f-display); text-align:center}
.peek img{border-radius:8px; border:2.5px solid var(--ink); box-shadow:var(--shadow); transition:transform .15s}
.peek a:hover img{transform:translateY(-4px) rotate(-1deg)}
@media (max-width:640px){ .peek{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .peek a:first-child{grid-column:1/-1; max-width:260px; justify-self:center} }

/* Steps + buy box */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; counter-reset:s}
.steps li{padding:20px; counter-increment:s; display:grid; gap:6px; align-content:start}
.steps li::before{content:counter(s); width:36px; height:36px; border-radius:50%; background:var(--hh); border:2.5px solid var(--ink); display:grid; place-items:center; font:700 18px var(--f-display)}
.steps h3{font-size:21px}
/* a whole step card that works as one link (the Google sign-in step) */
.steps li.step-link{position:relative; cursor:pointer; transition:transform .15s, box-shadow .15s}
.steps li.step-link a{color:inherit; text-decoration:none; display:grid; gap:6px}
.steps li.step-link a::after{content:""; position:absolute; inset:0; border-radius:inherit} /* stretch the click area over the card */
.steps li.step-link:hover{transform:translateY(-3px); box-shadow:0 30px 44px -26px rgba(35,38,74,.6)}
.steps li.step-link:hover h3{text-decoration:underline}
.steps li.step-link:has(a:focus-visible){outline:3px solid var(--bd); outline-offset:3px}
.steps li.step-link a:focus-visible{outline:none}
.steps p{color:var(--ink-soft); font-size:17px}
.buy{margin-top:22px; padding:26px 22px; display:grid; gap:12px; justify-items:center; text-align:center; background:var(--hh-soft)}
.buy h3{font-size:26px}

/* FAQ */
.faq{display:grid; gap:12px; max-width:820px}
.faq details{padding:14px 18px}
.faq summary{cursor:pointer; font:600 19px var(--f-display); list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:24px; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:8px; color:var(--ink-soft)}

/* Footer */
.footer{margin-top:40px; background:var(--ink); color:var(--white); padding:30px 0 calc(30px + env(safe-area-inset-bottom,0px))}
.footer .in{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between}
.footer a{color:var(--white)}
.footer nav{display:flex; flex-wrap:wrap; gap:8px 20px}
.footer small{opacity:.85; font-size:15px}

/* Story page (about) and free lessons */
.story{max-width:820px; margin:36px auto; padding:38px clamp(18px, 5vw, 56px)}
.story .head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; margin-bottom:18px}
.story .head img{width:84px; height:84px}
.story h1{font-size:clamp(32px, 5.4vw, 46px); margin:4px 0 16px}
.story .head h1{margin-bottom:0}
.story h2{font-size:clamp(23px, 3.4vw, 28px); margin:34px 0 12px}
.story p{margin:0 0 14px; font-size:19px; line-height:1.8}
.story .opening{font-size:clamp(20px, 2.6vw, 23px); line-height:1.7}
.story ul, .story ol{margin:0 0 16px; padding-inline-start:26px; font-size:19px; line-height:1.8}
.story li{margin-bottom:6px}
.story ol.route{padding:0; font-size:inherit}
.quote{margin:28px 0; padding:18px 22px; background:var(--hh-soft); border-inline-start:6px solid var(--hh); border-radius:var(--r-hand); font:600 clamp(19px, 2.6vw, 23px)/1.55 var(--f-display)}
.signature{margin-top:30px; display:grid; gap:2px; font-family:var(--f-display)}
.signature b{font-size:26px}
.signature span{color:var(--ink-soft)}
.story .page-pic{margin:22px auto; max-width:440px}
.story .page-pic img{border-radius:8px; border:2.5px solid var(--ink); box-shadow:var(--shadow)}
.story .page-pic figcaption{margin-top:8px; text-align:center; color:var(--ink-soft); font-size:15px}
.story .cta{margin-top:26px}
.crumbs{font-size:15px; color:var(--ink-soft); margin-bottom:10px}
.crumbs a{color:var(--ink-soft)}
.lesson-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px}
.lesson-cards a{display:grid; gap:10px; padding:16px; color:var(--ink); text-decoration:none}
.lesson-cards a:hover h3{text-decoration:underline}
.lesson-cards img{border-radius:6px; border:2px solid var(--ink); aspect-ratio:4/3; object-fit:cover; object-position:top}
.lesson-cards h3{font-size:21px}
.lesson-cards p{color:var(--ink-soft); font-size:16px}

.story-teaser{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; padding:26px 24px; max-width:860px}
.story-teaser h2{font-size:clamp(24px, 3.6vw, 32px); margin:4px 0 10px}
.story-teaser p{margin-bottom:8px}
@media (max-width:520px){ .story-teaser{grid-template-columns:minmax(0,1fr)} .story-teaser img{width:56px; height:56px} }

/* Legal pages */
.doc{max-width:820px; margin:36px auto; padding:34px clamp(18px, 5vw, 48px)}
.doc h1{font-size:clamp(30px, 5vw, 42px); margin-bottom:6px}
.doc .updated{color:var(--ink-soft); font-size:15px; margin-bottom:22px}
.doc h2{font-size:24px; margin:28px 0 10px}
.doc p, .doc li{margin:0 0 10px}
.doc ul, .doc ol{padding-inline-start:24px; margin:0 0 10px}
.todo{background:#FFD9DA; color:var(--ink); padding:0 4px; border-radius:4px; font-weight:600}