/* PracticeSATs — phone-first, calm, fast. Brand ink #193540. */
:root{
  --ink:#193540; --mid:#5b7c89; --line:#c7d2d8; --bg:#f4f7f8; --acc:#e8f0f2;
  --amber-bg:#fdf3e3; --amber-ink:#7a5614; --green-bg:#e8f0ec; --green-ink:#1f5a4d;
  --l6-bg:#efeaf2; --l6-ink:#4B2A45; --l6-line:#d9cfe0;
}
*{box-sizing:border-box}
body{margin:0;font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:#fff;-webkit-text-size-adjust:100%}
main{max-width:30rem;margin:0 auto;padding:0 1.1rem 2.5rem}
a{color:var(--ink)}
h1{font-size:1.55rem;line-height:1.25;margin:1.1rem 0 .5rem}
h2{font-size:1.05rem;margin:1.6rem 0 .5rem}
.who{font-weight:400;color:var(--mid);font-size:.95rem}
p{margin:.5rem 0}
.note{color:var(--mid);font-size:.92rem}
.center{text-align:center}

/* masthead + key-stage pill (system component — v3 §2.6) */
.mast{max-width:30rem;margin:0 auto;padding:.9rem 1.1rem;display:flex;align-items:center;
  justify-content:space-between;gap:.6rem;border-bottom:1px solid var(--line)}
.mast-l{display:flex;align-items:baseline;gap:.15rem .5rem;min-width:0;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.15rem;text-decoration:none;white-space:nowrap}
.back{color:var(--mid);text-decoration:none;font-weight:600;font-size:.88rem;line-height:1.3;white-space:normal}
.pill{color:#fff;font-size:.78rem;font-weight:700;padding:.28rem .7rem;border-radius:999px;white-space:nowrap;text-decoration:none;display:inline-block}

/* hero + big buttons (56px+ tap targets) */
.hero{text-align:center;padding-top:1.2rem}
.hero h1{font-size:1.7rem}
.trust{color:var(--mid);font-size:.9rem}
.bigbtn{display:block;background:var(--ink);color:#fff;text-decoration:none;border-radius:14px;
  padding:1rem 1.2rem;margin:.7rem 0;text-align:center}
.bigbtn strong{display:block;font-size:1.15rem}
.bigbtn span{display:block;font-size:.85rem;opacity:.85;margin-top:.15rem}
.bigbtn.outline{background:#fff;color:var(--ink);border:2px solid var(--ink)}

/* file rows + print buttons */
.file{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  border:1.5px solid var(--line);border-radius:12px;padding:.8rem .9rem;margin:.55rem 0;text-decoration:none}
.fi strong{display:block;font-size:.98rem}
.meta{color:var(--mid);font-size:.85rem}
.btn{flex:none;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;
  padding:.65rem 1.1rem;border-radius:10px;font-size:.95rem;min-width:64px;text-align:center}
.btn.ghost{background:var(--acc);color:var(--ink)}
.stepyou .file{background:var(--bg);border-color:var(--ink)}

/* badges */
.official{color:var(--mid);font-size:.95rem;margin:.15rem 0 .5rem}
.badges{margin:.2rem 0 .8rem}
.badge{display:inline-block;font-size:.8rem;font-weight:700;padding:.25rem .6rem;border-radius:8px}
.badge.current{background:var(--green-bg);color:var(--green-ink)}
.badge.old{background:var(--amber-bg);color:var(--amber-ink)}
.badge.l6{background:var(--l6-bg);color:var(--l6-ink)}
.badge.sample{background:var(--acc);color:var(--ink)}
.banner{background:var(--amber-bg);color:var(--amber-ink);border-radius:12px;padding:.8rem .9rem;
  margin:.8rem 0;font-size:.95rem}
.banner a{color:inherit;font-weight:700}
.banner.subtle{background:var(--acc);color:var(--ink)}
.banner.l6{background:var(--l6-bg);color:var(--l6-ink)}

/* audio */
.audio{margin:.6rem 0}
.audio p{margin:.2rem 0;font-size:.95rem;font-weight:600}
.audio audio{width:100%}

/* print guidance + collapsibles */
.print-tip{color:var(--mid);font-size:.95rem;margin-top:1.2rem}
details{border:1.5px solid var(--line);border-radius:12px;margin:.6rem 0}
details summary{padding:.8rem .9rem;font-weight:700;cursor:pointer;font-size:.95rem;color:var(--mid)}
details > div{padding:0 .9rem .8rem}
details.help > div p{font-size:.92rem}

/* cards */
.card{background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:.9rem 1rem;margin:1rem 0}
.card.soon{background:var(--acc)}
.soon-lead{font-weight:700;margin:0 0 .5rem}

/* signup */
.signup label{font-size:.92rem;font-weight:600;display:block;margin-bottom:.4rem}
.signup .row{display:flex;gap:.5rem}
.signup input{flex:1;min-width:0;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:10px;font-size:1rem}
.signup button{background:var(--ink);color:#fff;border:0;border-radius:10px;padding:.7rem 1rem;font-weight:700;font-size:.95rem}
.signup .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fine{color:var(--mid);font-size:.8rem;margin:.4rem 0 0}

/* year grids */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.7rem 0}
.chip{display:block;text-align:center;background:var(--acc);border:1.5px solid var(--line);border-radius:10px;
  padding:.85rem 0;font-weight:700;font-size:1.05rem;text-decoration:none}
.chip.old{background:#fff}
.chip.l6{background:var(--l6-bg);border-color:var(--l6-line)}
.chiplink{font-weight:700;font-size:.95rem}
.cancelled .fi strong{font-size:.92rem}

/* ogl + footer */
.ogl{border-top:1px solid var(--line);margin-top:1.6rem;padding-top:.8rem}
.ogl p{color:var(--mid);font-size:.8rem}
.foot{max-width:30rem;margin:0 auto;padding:1rem 1.1rem 2rem;border-top:1px solid var(--line)}
.foot p{color:var(--mid);font-size:.8rem}

@media(min-width:700px){
  main,.mast,.foot{max-width:34rem}
  h1{font-size:1.8rem}
}
  