/*
 * The legal pages' layout. Colors, type and the button come from
 * /site.css, so a privacy page looks like the rest of the product and
 * follows light and dark with it. This file is spacing only.
 */
*{box-sizing:border-box;margin:0}
.wrap{max-width:860px;margin:0 auto;padding:0 20px 40px}
nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;flex-wrap:wrap}
.nav_right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand_row{display:flex;align-items:center;gap:10px}
.brand a{color:var(--ink-strong);font:300 17px/1.2 roboto-regular,sans-serif;letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
header{padding:34px 0 10px}
.kicker{margin:0 0 6px;color:var(--accent-sea-green);font:700 11px/1.3 roboto-medium,sans-serif;letter-spacing:.14em;text-transform:uppercase}
h1{font:700 34px/1.15 roboto-bold,roboto-medium,sans-serif;letter-spacing:-.02em;margin-bottom:12px}
.lede{color:var(--secondary-lighter);font:400 17px/1.6 roboto-regular,sans-serif;max-width:680px;margin-bottom:12px}
.meta{color:var(--secondary-light-alt);font:500 13px/1.6 roboto-regular,sans-serif}
section{padding:26px 0;border-top:1px solid var(--primary-lighter-alt)}
h2{font:700 22px/1.25 roboto-bold,roboto-medium,sans-serif;margin-bottom:10px}
h3{font:700 15.5px/1.35 roboto-medium,sans-serif;margin:16px 0 6px;color:var(--ink-strong)}
p,li{color:var(--secondary-lighter);font:400 15.5px/1.65 roboto-regular,sans-serif}
p{margin-bottom:10px}
ul{margin:0 0 12px 20px}
li{margin-bottom:5px}
strong{color:var(--ink-strong)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:12px 0 6px}
/* Four cards: two by two, never three plus an orphan. */
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.card{background:var(--card);border:1px solid var(--primary-lighter-alt);border-radius:10px;padding:16px}
.card h3{margin:0 0 6px;color:var(--accent-sea-green)}
.card p{margin:0 0 6px;font-size:14.5px}
.card.warn{border-color:var(--accent-maroon)}
.card.warn h3{color:var(--accent-maroon)}
footer{border-top:1px solid var(--primary-lighter-alt);padding:26px 0 10px;color:var(--secondary-light-alt);font:400 13.5px/1.7 roboto-regular,sans-serif}
@media (max-width:560px){h1{font-size:27px}}
/* On paper, a card is never cut in half by a page break. */
@media print{.card,h2,h3{break-inside:avoid}h2,h3{break-after:avoid}}
/* The one line the terms need you to see first. */
.agree{margin:4px 0 12px;padding:10px 14px;border-left:3px solid var(--accent-sea-green);background:var(--card);border-radius:6px;color:var(--secondary-lighter);font:400 15.5px/1.6 roboto-regular,sans-serif;max-width:680px}
.card p.meta{margin:0;font-size:12.5px}

/*
 * FULL WIDTH ON A SCREEN (owner, 2026-11-01: every page uses the whole screen). Layout only: not one word
 * on these pages changes, and none of this applies on paper, so the PDFs and the printed pages stay as
 * they were. A section's heading sits on the left and its text beside it, like For teachers.
 */
@media screen{
  .wrap{max-width:none;padding-left:clamp(16px,4vw,72px);padding-right:clamp(16px,4vw,72px)}
}
@media screen and (min-width:1000px){
  header{max-width:80ch}
  .wrap > section:has(> h2){display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);column-gap:clamp(32px,4vw,72px);align-items:start}
  .wrap > section:has(> h2) > *{grid-column:2;max-width:80ch}
  .wrap > section:has(> h2) > :is(.grid,table,ul){max-width:none}
  .wrap > section:has(> h2) > h2{grid-column:1;grid-row:1 / span 40;position:sticky;top:20px}
  .wrap > section ul{columns:2;column-gap:40px}
  .wrap > section li{break-inside:avoid}
  .wrap > section p,.wrap > section li{font-size:clamp(15.5px,.95vw,18px);line-height:1.6}
}