/* ============================================================
   TextbookOS — landing page stylesheet
   Mobile-first. Self-contained. No third-party fetch.
   Tokens per DESIGN BRIEF §4.1 (Solarized-anchored).
   ============================================================ */

/* ---------- Self-hosted fonts (§8.2). No runtime Google Fonts. ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VF.woff2') format('woff2-variations'),
       url('fonts/Fraunces-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-VF.woff2') format('woff2-variations'),
       url('fonts/Fraunces-Italic-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-VF.woff2') format('woff2-variations'),
       url('fonts/HankenGrotesk-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VF.woff2') format('woff2-variations'),
       url('fonts/JetBrainsMono-VF.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Dark sections */
  --bg: #002B36;
  --bg-deep: #00212B;
  --felt: #04222A;
  --panel: #073642;
  --raise: #0A4551;
  --line: rgba(147, 161, 161, .14);
  --line-2: rgba(147, 161, 161, .24);

  --teal: #2AA198;
  --teal-hi: #35C4B8;
  --teal-ink: #00252E;
  --teal-soft: rgba(42, 161, 152, .14);   /* app light-theme glow value */
  --teal-glow: rgba(42, 161, 152, .25);   /* app dark-theme glow value */
  /* AA-safe teal for text/checks/links on the cream band (4.55:1) */
  --teal-aa: #177E74;

  /* Trust semantics — load-bearing */
  --grounded: #2DB48A;
  --general: #E3B341;
  --apphelp: #58A6FF;
  --reject: #FF5C6C;
  --purple: #6C71C4;

  /* Text on dark — Solarized ramp, matching the app's index.css.
     base1 #93A1A1 (~7.5:1) and base0 #839496 (~6:1) are the app's real text tokens.
     --t1 stays a brighter near-white for marketing display headings only. */
  --t1: #EAF3F2;
  --t2: #93A1A1;
  --t3: #839496;

  /* Light (cream) band — Solarized Light, matching the app's [data-theme="light"].
     Teal #2AA198 FAILS AA as text on cream (2.93:1) — decorative fills/underlines only.
     Any meaningful teal text/link/check/icon on cream uses --teal-aa #177E74 (4.55:1). */
  --paper: #FDF6E3;        /* base3  — page */
  --paper-2: #EEE8D5;      /* base2  — panels/cards */
  --paper-line: #DCD5C0;
  --lt1: #073642;          /* base02 — headings, 12:1 */
  --lt2: #586E75;          /* base01 — body, ~6.7:1 */
  --lt3: #657B83;          /* base00 — muted, AA-safe */

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-card: 0 1px 0 var(--line) inset, 0 12px 30px rgba(0, 0, 0, .35);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-hi); text-decoration: none; }
a:hover { color: var(--t1); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

/* <em> is repurposed globally as the teal accent voice */
em { font-style: italic; font-weight: inherit; color: var(--teal); }
:where(.band-light) em { color: var(--teal-aa); }

/* Focus visibility (§8.1) */
:focus-visible {
  outline: 2px solid var(--teal-hi);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--teal); color: var(--teal-ink);
  padding: 10px 16px; border-radius: 8px;
  font: 600 14px var(--f-body);
  transition: top .18s ease;
}
.skip:focus { top: 12px; color: var(--teal-ink); }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 601px) { .wrap { padding: 0 24px; } }

.sec { padding: clamp(56px, 9vw, 112px) 0; position: relative; }
[id] { scroll-margin-top: 72px; }

.head { max-width: 60ch; margin: 0 auto clamp(32px, 5vw, 48px); text-align: center; }
.head h2 { font-size: clamp(26px, 4.6vw, 44px); line-height: 1.08; }
.head p {
  color: var(--t2); margin-top: 14px;
  font-size: clamp(15px, 1.8vw, 17px); max-width: 54ch;
  margin-left: auto; margin-right: auto; text-wrap: pretty;
}

/* mono micro-label with glowing teal dash */
.bug {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-hi); margin-bottom: 14px;
}
.bug::before {
  content: ''; width: 22px; height: 2px; border-radius: 2px;
  background: var(--teal); box-shadow: 0 0 10px var(--teal-glow);
}
.band-light .bug { color: var(--teal-aa); }
.band-light .bug::before { background: var(--teal-aa); box-shadow: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  padding: 14px 24px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  min-height: 48px; transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--t1); }
.btn-ghost:hover { border-color: rgba(42, 161, 152, .55); background: var(--teal-soft); color: var(--t1); }

/* Google Sign-In button — compliance-locked (§4.5). Do not restyle. */
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #FFFFFF; border: 1px solid #DADCE0; border-radius: 8px;
  color: #1F1F1F; font-family: var(--f-body); font-weight: 600; font-size: 15px;
  height: 48px; padding: 0 16px; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transition: background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.gbtn:hover { background: #F8F9FA; color: #1F1F1F; box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
.gbtn svg { flex: none; }
.gbtn--sm { height: 40px; font-size: 14px; padding: 0 13px; gap: 8px; }

/* Google's official DARK theme variant — for the nav, where the light button
   reads as a foreign white block on the translucent dark bar. Still a Google
   button: official 4-color G, approved wording, unmodified mark. */
.gbtn--dark {
  background: #131314;
  border-color: #8E918F;
  color: #E3E3E3;
  box-shadow: none;
}
.gbtn--dark:hover { background: #1E1F20; color: #E3E3E3; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* ---------- Nav (§ Section 0) ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; height: 64px;
  background: rgba(0, 43, 54, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, box-shadow .2s ease;
}
.nav.nav-shadow { background: rgba(0, 43, 54, .9); box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 16px; }
.nav-links { display: none; margin-left: auto; gap: 26px; }
.nav-links a { color: var(--t2); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--t1); }
/* Nav CTA is Google's dark variant so it sits in the bar instead of on top of it. */
.nav .gbtn { margin-left: auto; }
@media (min-width: 800px) { .nav-links { display: flex; } .nav-links + .gbtn { margin-left: 0; } }

/* Small phones: tighten the lock-up so the button keeps its full label
   (Google requires the "Sign in with Google" text — never icon-only). */
@media (max-width: 430px) {
  .nav .wrap { gap: 8px; }
  .logo { gap: 8px; min-width: 0; }
  .logo-glyph { width: 30px; height: 30px; }
  .logo-word { font-size: 17px; }
  .nav .gbtn--sm { font-size: 12.5px; padding: 0 10px; gap: 6px; }
}
@media (max-width: 370px) { .logo-word { display: none; } }

/* Logo lock-up (§6.1) — glyph must byte-match the OAuth consent logo */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-glyph { width: 36px; height: 36px; flex: none; border-radius: 10px; }
.logo-word {
  font-family: var(--f-display); font-weight: 700; font-size: 21px;
  letter-spacing: -.02em; color: var(--t1); line-height: 1;
}
.logo-word b { font-weight: 700; color: var(--teal); }

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(48px, 9vw, 96px);
  padding-bottom: clamp(56px, 9vw, 104px);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -12%, rgba(42, 161, 152, .20), transparent 58%);
}
.hero .wrap { position: relative; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero-copy { text-align: center; }
.hero h1 {
  font-size: clamp(34px, 6.5vw, 60px); line-height: 1.04;
  text-wrap: balance; margin: 18px 0 0;
}
.hero .lede {
  color: var(--t2); margin-top: 18px;
  font-size: clamp(16px, 1.9vw, 20px); line-height: 1.55;
  max-width: 62ch; margin-left: auto; margin-right: auto; text-wrap: pretty;
}
.empathy {
  margin-top: 16px; color: var(--t1);
  font-size: clamp(15px, 1.7vw, 17px); font-weight: 500;
  border-left: 2px solid var(--teal); padding-left: 14px;
  text-align: left; display: inline-block;
}
.pill-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal-hi);
  border: 1px solid rgba(42, 161, 152, .38); background: var(--teal-soft);
  padding: 7px 14px; border-radius: 999px;
}
.pill-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-hi);
  box-shadow: 0 0 8px var(--teal-hi);
}
.cta-row {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 28px; align-items: stretch;
}
.cta-row .gbtn, .cta-row .btn { width: 100%; }
.micro {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--t3); margin-top: 16px; text-transform: uppercase;
}
@media (min-width: 560px) {
  .cta-row { flex-direction: row; align-items: center; justify-content: center; }
  .cta-row .gbtn, .cta-row .btn { width: auto; }
}
@media (min-width: 920px) {
  .hero-grid { grid-template-columns: .92fr 1.08fr; gap: 48px; }
  .hero-copy { text-align: left; }
  .hero .lede, .hero h1 { margin-left: 0; margin-right: 0; }
  .cta-row { justify-content: flex-start; }
}

/* Phone cluster */
.cluster {
  display: grid; grid-template-columns: 1fr; justify-items: center;
  position: relative; gap: 18px;
}
.cluster .side { display: none; }
@media (min-width: 920px) {
  .cluster {
    grid-template-columns: repeat(3, 1fr); align-items: center;
    gap: 0; padding: 8px 0;
  }
  .cluster .side { display: block; filter: brightness(.82); }
  .cluster .side.left { transform: translateX(16%) translateY(22px) scale(.84); z-index: 1; }
  .cluster .side.right { transform: translateX(-16%) translateY(22px) scale(.84); z-index: 1; }
  .cluster .lead { z-index: 3; }
}
.float-pill {
  position: absolute; top: -4px; right: 0; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(7, 54, 66, .92); border: 1px solid rgba(45, 180, 138, .5);
  border-radius: 999px; padding: 8px 14px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--t1); box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
@media (min-width: 920px) { .float-pill { top: 6px; right: 6px; } }
@media (prefers-reduced-motion: no-preference) {
  .float-pill { animation: floaty 3s ease-in-out infinite; }
  .pill-eyebrow .dot { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ---------- Phone frame primitive (§4.6, frame A) ---------- */
.phone {
  position: relative; width: 100%; max-width: 300px;
  aspect-ratio: 390 / 844;
  border-radius: 38px; padding: 9px;
  background: linear-gradient(160deg, #14535e, #04222A 42%, #001d25);
  box-shadow:
    0 0 0 1px rgba(42, 161, 152, .28),
    0 26px 60px rgba(0, 0, 0, .55),
    0 4px 14px rgba(0, 0, 0, .4);
}
.phone .screen {
  width: 100%; height: 100%; border-radius: 30px; overflow: hidden;
  background: var(--panel); position: relative;
  display: flex; flex-direction: column;
}
.phone--sm { max-width: 232px; }

/* Labeled screenshot placeholder (real captures swap in later) */
.shot {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 22px 18px;
  background:
    linear-gradient(rgba(42, 161, 152, .05), rgba(42, 161, 152, .05)),
    repeating-linear-gradient(135deg, rgba(147, 161, 161, .07) 0 10px, transparent 10px 20px),
    var(--panel);
  border: 1px dashed rgba(42, 161, 152, .4);
  border-radius: 30px;
}
.shot .tag {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-hi);
  border: 1px solid rgba(42, 161, 152, .45); border-radius: 999px;
  padding: 4px 10px;
}
.shot .name {
  font-family: var(--f-display); font-weight: 600;
  font-size: 17px; line-height: 1.2; color: var(--t1);
}
.shot .meta {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em;
  color: var(--t3); line-height: 1.7; text-transform: uppercase;
}
.shot .glyph { color: var(--teal); opacity: .8; }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 11px;
  border: 1px solid var(--line-2); color: var(--t2);
  background: rgba(0, 0, 0, .2);
}
.badge .disc { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.badge--grounded { border-color: rgba(45, 180, 138, .5); color: #8FE3C6; }
.badge--grounded .disc { background: var(--grounded); }
.badge--general { border-color: rgba(227, 179, 65, .5); color: #F2D89B; }
.badge--general .disc { background: var(--general); }
.badge--apphelp { border-color: rgba(88, 166, 255, .5); color: #A9CFFF; }
.badge--apphelp .disc { background: var(--apphelp); }

/* ---------- Split (How it works) ---------- */
.split { display: grid; gap: 32px; align-items: center; }
.split .visual { display: flex; justify-content: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1.02fr .98fr; gap: 40px; }
}
.steps { display: grid; gap: 22px; }
.step { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.step .num {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-soft); border: 1px solid rgba(42, 161, 152, .45);
  color: var(--teal-hi); font-family: var(--f-mono); font-weight: 700; font-size: 14px;
}
.step h3 { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.25; }
.step p { color: var(--t2); margin-top: 7px; font-size: 15px; text-wrap: pretty; }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.chip {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 6px 13px; border: 1px solid var(--line-2);
  color: var(--t2);
}
.chip--ok { border-color: rgba(45, 180, 138, .55); color: #8FE3C6; background: rgba(45, 180, 138, .1); }
.chip--edit { border-color: rgba(42, 161, 152, .55); color: var(--teal-hi); background: var(--teal-soft); }
.chip--no { border-color: rgba(255, 92, 108, .5); color: #FFA8B1; background: rgba(255, 92, 108, .1); }
.closing { color: var(--t3); margin-top: 20px; font-size: 14.5px; }

/* ---------- The app band ---------- */
.band-felt { background: var(--felt); }
.row3 { display: grid; gap: 26px; }
@media (min-width: 760px) { .row3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.row3 .item { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.row3 .cap { text-align: center; max-width: 34ch; }
.row3 .cap h3 { font-size: clamp(18px, 2.2vw, 21px); }
.row3 .cap p { color: var(--t2); font-size: 14.5px; margin-top: 6px; text-wrap: pretty; }
.row3 .cap .lead-line { color: var(--t1); font-style: italic; font-size: 14.5px; margin-top: 6px; }

.pair { display: grid; gap: 16px; margin-top: clamp(40px, 6vw, 64px); }
@media (min-width: 520px) { .pair { grid-template-columns: 1fr 1fr; gap: 20px; } }
.card {
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 22px 20px; box-shadow: var(--shadow-card);
}
.card--grounded { border-color: rgba(45, 180, 138, .45); }
.card--general { border-color: rgba(227, 179, 65, .45); }
.card p { color: var(--t2); margin-top: 13px; font-size: 15px; text-wrap: pretty; }
.pair-cap {
  text-align: center; margin-top: 22px; color: var(--t3);
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em;
  text-wrap: pretty;
}

/* ---------- Honesty cards ---------- */
.honesty { position: relative; overflow: hidden; }
.honesty::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 0%, rgba(42, 161, 152, .16), transparent 60%);
}
.honesty .wrap { position: relative; }
.grid3 { display: grid; gap: 16px; }
@media (min-width: 880px) { .grid3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.icard {
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 24px 22px; box-shadow: var(--shadow-card);
  display: grid; gap: 14px; grid-template-columns: 44px 1fr; align-items: start;
}
@media (min-width: 880px) { .icard { grid-template-columns: 1fr; } }
.icard .ico {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-soft); border: 1px solid rgba(42, 161, 152, .35);
  color: var(--teal-hi);
}
.icard h3 { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.25; }
.icard p { color: var(--t2); margin-top: 9px; font-size: 15px; text-wrap: pretty; }
.icard b { color: var(--t1); font-weight: 600; }

/* ---------- Study anywhere scene ---------- */
.scene { display: grid; gap: 28px; align-items: center; justify-items: center; }
@media (min-width: 880px) {
  .scene { grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.1fr); gap: 24px; }
}
.hinge { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hinge .ho-pill {
  display: inline-flex; align-items: center; gap: 9px; text-align: center;
  background: var(--teal); color: var(--teal-ink); border-radius: 999px;
  padding: 11px 18px; font-family: var(--f-mono); font-size: 11px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 34px var(--teal-glow);
}
.hinge .offline {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(45, 180, 138, .5); color: #8FE3C6;
  border-radius: 999px; padding: 6px 12px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em;
}
.hinge .wire { display: none; }
@media (min-width: 880px) {
  .hinge .wire { display: block; width: 1px; height: 34px; background: linear-gradient(var(--line-2), transparent); }
}

/* Concept map — built in HTML/CSS, no image weight (§5) */
.map-wrap { width: 100%; overflow-x: auto; }
.cmap {
  width: 100%; min-width: 300px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 16px; box-shadow: var(--shadow-card);
}
.cmap svg { width: 100%; height: auto; }
.cmap-legend {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 12px; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .1em; color: var(--t3); text-transform: uppercase;
}
.cmap-legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .beacon { animation: beacon 2.2s ease-in-out infinite; transform-origin: center; }
}
@keyframes beacon {
  0%, 100% { opacity: .35; r: 20; }
  50% { opacity: .05; r: 27; }
}
.scene-body { max-width: 60ch; margin: clamp(28px, 4vw, 40px) auto 0; text-align: center; }
.scene-body p { color: var(--t2); font-size: 15.5px; text-wrap: pretty; }
.scene-body .mono {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--t3); margin-top: 14px; text-transform: uppercase;
}

/* ---------- What you get (the one LIGHT band) ---------- */
.band-light { background: var(--paper); color: var(--lt1); }
.band-light h2 { color: var(--lt1); }
.band-light .head p { color: var(--lt2); }
.plan {
  max-width: 460px; margin: 0 auto;
  background: var(--paper-2); border: 1px solid var(--paper-line);
  border-radius: 20px; padding: 28px 24px;
  box-shadow: 0 14px 40px rgba(7, 54, 66, .12);
}
.plan .tier {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-aa);
}
.plan .price {
  font-family: var(--f-display); font-size: 40px; font-weight: 620;
  color: var(--lt1); line-height: 1.1; margin-top: 8px;
}
.plan .price small {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; color: var(--lt3); text-transform: uppercase;
  display: block; margin-top: 6px;
}
.plan ul { display: grid; gap: 12px; margin: 22px 0; }
.plan li {
  display: grid; grid-template-columns: 20px 1fr; gap: 11px;
  align-items: start; color: var(--lt1); font-size: 15.5px;
}
.plan li svg { color: var(--teal-aa); margin-top: 3px; }
.plan .gbtn { width: 100%; }
.plan .foot {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--lt3); text-align: center; margin-top: 14px; text-transform: uppercase;
}

/* ---------- Footer ---------- */
.foot { background: var(--bg-deep); border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 80px) 0 32px; }
.foot-grid { display: grid; gap: 36px; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.foot .tagline { color: var(--t2); margin-top: 12px; max-width: 34ch; }
.foot h4 {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--t3);
  margin: 0 0 14px;
}
.foot ul { display: grid; gap: 11px; }
.foot ul a { color: var(--t2); font-size: 15px; }
.foot ul a:hover { color: var(--t1); }
.copyrow {
  border-top: 1px solid var(--line); margin-top: clamp(32px, 5vw, 48px);
  padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--t3);
}

/* ---------- Progressive-enhancement reveal (no-JS = visible) ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }