/* Landing: what an adult reads before the first round. It sits on app.css, so it has the game's typeface, colors,
   night and day modes, and its pieces: the syllable card, the answer buttons and the points bar show how a round goes.
   One column like the game; from 880px the steps sit side by side. Nothing here is inline: the CSP allows none.
   Its own class names must not be ones app.css already uses. */

/* skip.js is taking this visit to the game: show nothing meanwhile. */
.to-game body{visibility:hidden}

body.landing{-webkit-user-select:text;user-select:text}
.lp{gap:40px}
.lp a:focus-visible,.lp summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* the game's wordmark, as a name and not the page title */
.brand{margin:0;font-weight:700;font-size:clamp(1.3rem,6vw,1.9rem);line-height:1;color:var(--consonant)}
.brand .v{color:var(--vowel)}

.lp main{display:grid;gap:48px}
.lp h2{margin:0;font-size:1.6rem;line-height:1.15}
.lp section{display:grid;gap:var(--gap);align-content:start}

/* first screen: what it is, how it goes in one line, and the way in */
.hero h1{margin:0;color:var(--ink);font-size:clamp(2rem,9vw,3rem);line-height:1.15;text-wrap:balance}
/* A pencil line under the words that matter. A full highlight would cover the line above: Andika's letters are taller than the line height. */
.hero mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--pencil);text-decoration-thickness:.14em;text-underline-offset:.14em;text-decoration-skip-ink:none}
.lead{margin:0;font-size:1.2rem;line-height:1.5}
.cta{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:380px;padding:0 28px;text-decoration:none}
.perks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--gap-s)}
.perks li{padding:4px 12px;border:2px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:700;color:var(--ink-soft)}

/* three steps, each with the piece of the game it talks about. Named how-*: app.css already has a .step (the goal stepper). */
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:32px;counter-reset:step}
.how-step{display:grid;gap:var(--gap-m);align-content:start}
.how-step h3{display:flex;align-items:center;gap:var(--gap-m);margin:0;font-size:1.25rem;line-height:1.2}
.how-step h3::before{counter-increment:step;content:counter(step);flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pencil);color:var(--on-pencil)}
.how-step p{margin:0;color:var(--ink-soft)}
.how-step p strong{color:var(--ink)}
/* Each piece is a box like the game card, its content centered when the box is taller than it. */
.demo{pointer-events:none;margin-bottom:var(--lift);box-shadow:0 var(--lift) 0 var(--edge);align-content:center}
.demo .sheet{--fs:4.6rem}
.demo .btn{display:grid;place-items:center;min-height:56px;font-size:1.05rem}
.demo .fill{width:70%}
.prize{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-ctl);border:2px solid var(--pencil-edge);background:var(--pencil);color:var(--on-pencil)}
.prize svg{width:40px;height:40px}

/* what is in it */
.feat ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap-m)}
.feat li{position:relative;padding-left:34px}
.feat li::before{content:"";position:absolute;left:0;top:.1em;width:22px;height:22px;border-radius:7px;border:2px solid var(--pencil-edge);background:var(--pencil)}
.feat li::after{content:"";position:absolute;left:8px;top:calc(.1em + 4px);width:6px;height:11px;border:solid var(--on-pencil);border-width:0 3px 3px 0;transform:rotate(45deg)}

/* questions: closed by default, the answer under its question */
.faq-list{display:grid;gap:var(--gap-s)}
.faq details{border:2px solid var(--line);border-radius:var(--r-ctl);background:var(--paper)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-m);min-height:56px;padding:8px var(--gap);font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.6rem;line-height:1;color:var(--ink-soft)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding:0 var(--gap) var(--gap);color:var(--ink-soft)}

/* the way in again, at the end */
.final{justify-items:center;text-align:center;padding:28px var(--gap);border:2px solid var(--line);border-radius:var(--r-box);background:var(--paper)}
.final p{margin:0;color:var(--ink-soft)}
/* The gap of the column is already the room above the footer (app.css). */
.lp .foot{margin-top:0}

@media (min-width:880px){
  .lp{max-width:960px}
  .lp main{gap:72px}
  .hero{justify-items:center;text-align:center;max-width:760px;margin-inline:auto}
  .hero .perks{justify-content:center}
  .lp h2{text-align:center}
  /* Side by side, the steps share three rows (subgrid), so the titles, the pieces of the game and the texts
     each start at the same height, and the three pieces are as tall as the tallest. */
  .how-steps{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:var(--gap-m) 28px}
  .how-step{grid-row:span 3;grid-template-rows:subgrid}
  .how-step h3{flex-direction:column;align-items:flex-start;gap:var(--gap-s)}
  /* Every section spans the same column as the header and the steps; only the text inside keeps a reading width. */
  .feat ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .faq details p{max-width:72ch}
}