/* GPA Planner — shared styles. Palette matches the app and the app icon:
   Harvard Crimson #A51C30 primary, icon field #830D21→#5E0511, laurel gold. */
:root{
  --crimson:#A51C30; --crimson-lift:#C8324A; --crimson-deep:#830D21; --crimson-floor:#5E0511;
  --gold:#D1A560; --gold-high:#FBDB95;
  --ink:#140D10; --abyss:#0B0709; --surface:#1E1518; --surface-lift:#291D21; --hairline:#3A2A2F;
  --parchment:#F4EFE7; --parchment-dim:#B6A9A5; --parchment-faint:#7C6E6B;
  --serif:ui-serif,"Iowan Old Style","Apple Garamond",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --wrap:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--parchment);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  background-image:
    radial-gradient(60rem 40rem at 50% -10rem, rgba(165,28,48,.30), transparent 70%),
    linear-gradient(180deg,var(--ink),var(--abyss));
  background-attachment:fixed;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
a{color:var(--crimson-lift); text-decoration:none}
a:hover{text-decoration:underline}

header.site{padding:26px 0; border-bottom:1px solid var(--hairline)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--serif); font-weight:700; font-size:19px; color:var(--parchment)}
.brand .mark{width:34px;height:34px;border-radius:9px;display:block;
  border:1px solid rgba(209,165,96,.30); object-fit:cover}
nav.site a{margin-left:20px; color:var(--parchment-dim); font-size:14.5px}
nav.site a:hover{color:var(--parchment)}

.hero{padding:76px 0 56px; text-align:center}
.hero h1{font-family:var(--serif); font-size:clamp(34px,6vw,54px); line-height:1.1; margin:0 0 16px; font-weight:600}
.hero p.lede{font-size:clamp(16px,2.3vw,19px); color:var(--parchment-dim); max-width:56ch; margin:0 auto 30px}
.kicker{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:14px}
.btn{display:inline-block; padding:14px 26px; border-radius:999px; font-weight:650; font-size:16px;
  background:linear-gradient(135deg,var(--crimson-lift),var(--crimson)); color:var(--parchment);
  border:1px solid rgba(244,239,231,.18); box-shadow:0 8px 26px rgba(165,28,48,.35)}
.btn:hover{text-decoration:none; filter:brightness(1.07)}
.btn.ghost{background:var(--surface-lift); border:1px solid var(--hairline); box-shadow:none; color:var(--parchment)}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:44px 0}
.card{background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:20px}
.card h3{font-family:var(--serif); font-size:18px; margin:0 0 7px; font-weight:600}
.card p{margin:0; color:var(--parchment-dim); font-size:14.5px; line-height:1.6}
.card .ico{font-size:20px; margin-bottom:10px; display:block}

section.doc{padding:46px 0 70px}
section.doc h1{font-family:var(--serif); font-size:clamp(28px,5vw,40px); margin:0 0 6px; font-weight:600}
section.doc .updated{color:var(--parchment-faint); font-size:13.5px; margin-bottom:34px}
section.doc h2{font-family:var(--serif); font-size:21px; margin:36px 0 10px; font-weight:600; color:var(--parchment)}
section.doc h3{font-size:16px; margin:22px 0 6px; font-weight:650; color:var(--parchment)}
section.doc p,section.doc li{color:var(--parchment-dim); font-size:15.5px}
section.doc ul{padding-left:20px}
section.doc li{margin:6px 0}
section.doc strong{color:var(--parchment)}
.callout{background:rgba(209,165,96,.09); border:1px solid rgba(209,165,96,.28); border-radius:14px; padding:16px 18px; margin:22px 0}
.callout p{margin:0; color:var(--parchment)}

table.price{width:100%; border-collapse:collapse; margin:18px 0}
table.price th,table.price td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--hairline); font-size:15px}
table.price th{color:var(--gold); font-size:12px; letter-spacing:.09em; text-transform:uppercase}

footer.site{border-top:1px solid var(--hairline); padding:30px 0 46px; margin-top:40px}
footer.site .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
footer.site p{margin:0; color:var(--parchment-faint); font-size:13.5px}
footer.site a{color:var(--parchment-dim); font-size:13.5px; margin-left:18px}

@media (max-width:600px){
  nav.site a{margin-left:14px; font-size:13.5px}
  .hero{padding:52px 0 40px}
  footer.site .wrap{flex-direction:column; align-items:flex-start}
  footer.site a{margin:0 18px 0 0}
}