/* ══════════════════════════════════════════════════
   PANGEA PRINTING — BASE.CSS
   Single source of truth for all pages.
   Last updated: 2026-04-14
   ══════════════════════════════════════════════════ */

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box}

/* ── Variables ── */
:root{
  --bg:#F0F4F7;
  --bg-dark:#0A0A0A;
  --bg-white:#FFFFFF;
  --border:#C8CED6;
  --text:#0A0A0A;
  --text-inv:#F5F1EB;
  --text-dim:#444B55;
  --text-muted:#555B63;
  --red:#D64045;
  --blue:#4056D6;
  --amber:#C96A2B;
}

/* ── Base elements ── */
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--text)}
strong{font-weight:700}

/* ── Typography ── */
.heading{
  text-wrap:balance;
  font-size:clamp(28px,4.5vw,48px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:1.05;
  margin-bottom:20px;
  text-align:center;
}
.subtext{
  text-wrap:balance;
  font-size:16px;
  color:var(--text-dim);
  line-height:1.7;
  max-width:720px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.s-label{
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.s-label::before,.s-label::after{
  content:'';
  display:block;
  width:24px;
  height:2px;
  background:var(--red);
  flex-shrink:0;
}

/* ── Legal page typography ── */
h1{text-align:center}
h2{text-align:center}

/* ── Layout: sections ── */
.sec-padded{
  padding:80px 48px;
  max-width:1280px;
  margin:0 auto;
  border-bottom:2px solid var(--text);
}
.page{
  max-width:1140px;
  margin:0 auto;
  padding:0 48px;
}

/* ── Layout: legal pages ── */
main{
  max-width:720px;
  margin:0 auto;
  padding:64px 48px 120px;
}
main p{font-size:14px;line-height:1.8;margin-bottom:16px}
main li{font-size:14px;line-height:1.8;margin-bottom:8px}
main h2{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;margin:48px 0 16px}
main h2:first-of-type{margin-top:0}
main a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
main a:hover{color:var(--red)}
main strong{font-weight:600}
main ol,main ul{padding-left:24px;margin-bottom:16px}
.last-updated{font-family:'Space Mono',monospace;font-size:11px;color:var(--text-muted);letter-spacing:.08em;margin-bottom:32px;text-align:center}

/* ── Toast notifications ── */
.toast-bar{position:fixed;bottom:0;left:0;right:0;z-index:999;display:flex;justify-content:center;pointer-events:none}
.toast{background:var(--text);color:var(--bg);font-family:'Space Grotesk',sans-serif;font-size:13px;line-height:1.5;padding:14px 24px;max-width:520px;width:calc(100% - 32px);pointer-events:auto;transform:translateY(100%);opacity:0;transition:transform .3s ease,opacity .3s ease;margin:16px}
.toast.show{transform:translateY(0);opacity:1}
.toast.error{background:#b71c1c;color:#fff}
.toast.warn{background:#e65100;color:#fff}

/* ── Process steps (shared on learn, education, index) ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--text)}
.stp{padding:32px;border-right:2px solid var(--text);min-height:240px}
.stp:last-child{border-right:none}
.stp p{font-size:13px;color:var(--text-dim);line-height:1.65}

/* ══════════════════════════════════════════════════
   RESPONSIVE — TABLET (900px)
   ══════════════════════════════════════════════════ */
@media(max-width:900px){
  .sec-padded{padding:56px 32px}
  .page{padding:0 24px}
  .steps{grid-template-columns:repeat(2,1fr)!important}
  .stp:nth-child(2n){border-right:none}
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — MOBILE (580px)
   ══════════════════════════════════════════════════ */
@media(max-width:580px){
  .heading{font-size:clamp(22px,6vw,32px)}
  .subtext{font-size:14px}
  .sec-padded{padding:40px 20px}
  .page{padding:0 16px}
  main{padding:40px 20px 80px}
  .steps{grid-template-columns:1fr;gap:0}
  .stp{border-right:none;border-bottom:2px solid var(--text);min-height:auto;padding:24px}
  .stp:last-child{border-bottom:none}
}