/* Homepage-only layout. Uses Design's tokens (tokens.css) and pieces (components.css); no colours, fonts or sizes
   of its own. Phone first; tablet from 700px, desktop from 1100px (Design's breakpoints). */

body{display:flex;flex-direction:column;min-height:100vh;overflow-wrap:anywhere}
main{flex:1}
a{color:inherit;text-underline-offset:3px}
.v-paper a{color:var(--accent-text)}
p{margin:0 0 var(--s-3)}
p:last-child{margin-bottom:0}

/* Skip link: hidden until a keyboard user tabs to it. */
.s-skip{position:absolute;left:var(--s-2);top:var(--s-2);z-index:2;padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);background:var(--brand-yellow);color:var(--brand-ink);font-weight:700;transform:translateY(-200%)}
.s-skip:focus{transform:none}

/* Top bar links */
.s-nav{gap:0}
.s-nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-2);font-weight:700;font-size:var(--text-sm);text-decoration:none;border-radius:var(--r-sm)}
.s-nav a[aria-current="page"]{color:var(--brand-yellow)}
.s-nav a:hover{text-decoration:underline}

/* Home */
.s-hero{padding-block:var(--s-4) var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)}
.s-hero__title{font-size:var(--h1);max-width:16ch}
.s-lead{font-size:var(--text-lg);color:var(--text-muted);max-width:60ch}
.s-cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.s-section{display:flex;flex-direction:column;gap:var(--s-4);padding-block:var(--s-4)}
.s-grid{display:grid;gap:var(--s-4)}
.s-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.s-step{position:relative;padding:var(--s-5);border-radius:var(--r-lg);color:var(--on-area);display:flex;flex-direction:column;gap:var(--s-2)}
.s-step p{margin:0}
.s-step--create{background:var(--area-create)}
.s-step--games{background:var(--area-games)}
.s-step--students{background:var(--area-students)}
.s-step__num{font-family:var(--font-display);font-style:var(--display-style);font-weight:900;font-size:var(--h2);line-height:1}
.s-promises{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-3)}
.s-promises li{background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);border-left:6px solid var(--brand-teal);border-radius:var(--r-md);padding:var(--s-3) var(--s-4)}
.s-big{font-size:var(--text-lg);font-weight:700}

/* Long reading pages (privacy, terms) */
.s-draft{margin:0}
.s-prose{max-width:80ch}
.s-prose h2{margin:var(--s-6) 0 var(--s-2)}
.s-prose ul{padding-left:var(--s-5);margin:0 0 var(--s-3)}
.s-prose li{margin-bottom:var(--s-2)}
.s-kids{font-size:var(--text-lg)}
/* "To be confirmed" and preview-only "FILL IN" marks: impossible to miss. */
.s-tbc,.s-fill{background:var(--warn-bg);color:var(--warn);border-radius:var(--r-sm);padding:0 var(--s-1);font-weight:700}

/* Footer */
.s-foot{background:var(--topbar);color:var(--on-topbar);margin-top:var(--s-8);padding-block:var(--s-6);border-top:5px solid transparent;border-image:var(--stripe) 1}
.s-foot__in{display:flex;flex-direction:column;gap:var(--s-2)}
.s-foot__links{display:flex;flex-wrap:wrap;gap:0 var(--s-1);margin-inline:calc(-1 * var(--s-2))}
.s-foot__links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-2);font-weight:700}
.s-small{font-size:var(--text-sm)}

@media (min-width:700px){
  .s-hero{padding-block:var(--s-8) var(--s-8)}
  .s-grid{grid-template-columns:repeat(3,1fr)}
  .s-grid--2{grid-template-columns:repeat(2,1fr)}
  .s-steps{grid-template-columns:repeat(3,1fr)}
  .s-nav a{padding:0 var(--s-3);font-size:var(--text-md)}
}
@media (min-width:1100px){
  .s-hero__title{font-size:var(--hero)}
}