/* Study Pill — the page-level stylesheet.
 *
 * Everything colour and type now comes from tokens.css. The block below is a
 * COMPATIBILITY LAYER: a dozen stylesheets and page <style> blocks were written
 * against short names (--paper, --ink, --coral), so each one is aliased to its
 * token rather than renamed across the app in the same change that alters what
 * it renders as.
 *
 * These were not aliases before. They were a SECOND PALETTE with its own
 * values, and it had drifted: --coral sat at oklch(60%...) here, five points
 * lighter than the token, which is the exact value tokens.css records as
 * failing AA at 3.97:1; and --pine was #10B981, the emerald that file says was
 * removed for measuring 2.29:1. Because app.css loads after tokens.css, the
 * failing values were the ones on screen — on every page, in both themes.
 */
:root {
  --paper: var(--sp-paper);
  --paper-2: var(--sp-paper-2);
  --paper-edge: var(--sp-paper-edge);
  --ink: var(--sp-ink);
  --ink-2: var(--sp-ink-2);
  --ink-soft: var(--sp-ink-soft);
  --rule: var(--sp-rule);
  --rule-soft: var(--sp-rule-soft);
  --coral: var(--sp-coral);
  --coral-2: var(--sp-coral-2);
  --coral-deep: var(--sp-coral-deep);
  --highlight: var(--sp-coral-soft);
  --highlight-soft: var(--sp-coral-soft);
  --pine: var(--sp-pine);
  --pine-soft: var(--sp-pine-soft);
  --cream: var(--sp-cream);

  /* Elevation system — three tiers, all gentle */
  --lift-1: var(--sp-lift-1);
  --lift-2: var(--sp-lift-2);
  --lift-3: var(--sp-lift-3);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* No scrollbar on the side, on any page or any box that scrolls (ruling 650,
   owner: "the scroll bar on the side of studypill has to be invisible").
   Scrolling stays: touch, wheel, the keys and a screen reader all still move
   the page. A bar of 0 width takes no space, so nothing moves sideways. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
*:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
html { scroll-behavior: smooth; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sp-font-prose);
  /* Fluid, not fixed: 17px at a 1440 desktop, easing to 16px on phones and
     18px on very wide screens — the marketing face scales the way the app
     face already does, instead of shipping one px value to every device. */
  font-size: clamp(16px, 12px + 0.35vw, 18px);
  line-height: 1.55;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* CLIP, NOT HIDDEN. Owner, on his phone: "most header scrols when you
     scroll". Both headers were already declared correctly - `.sp-app-bar` and
     `nav.top` are both `position: sticky; top: 0` - and this one line defeated
     them everywhere.
     `overflow-x: hidden` makes the element a SCROLL CONTAINER, so a sticky
     descendant sticks to that box instead of the viewport, which in practice
     means it does not stick at all. `overflow-x: clip` prevents the same
     sideways scroll WITHOUT creating a scroll container, so sticky survives.
     The reason the declarations looked right in review and failed on a real
     phone: the bug was never in the header. */
  overflow-x: clip;
}
@supports (font-variation-settings: normal) {
  .mono, .stat .big, .card .price, .phone-ui .q-meta,
  .nav-links a.cta, .btn { font-variant-numeric: tabular-nums; }
}
body {
  background-image: radial-gradient(circle at 20% 10%, rgba(233, 212, 188, 0.35) 0, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(233, 212, 188, 0.25) 0, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(201, 187, 169, 0.06) 35px 36px); background-image:
    radial-gradient(circle at 20% 10%, oklch(88% 0.04 70 / .35) 0, transparent 40%),
    radial-gradient(circle at 85% 70%, oklch(88% 0.04 70 / .25) 0, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 35px, oklch(80% 0.03 75 / .06) 35px 36px);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.mono { font-family: var(--sp-font-mono); font-size: 12px;   color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.display { font-family: var(--sp-font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 0.94; }
.italic-display { font-family: var(--sp-font-display); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hand { font-family: var(--sp-font-display); color: var(--coral); }
/* UI chrome: Inter for anything that isn't display prose */
.ui-sans { font-family: var(--sp-font-ui); }

/* ---------- PAGE FRAME ---------- */
.page {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
  position: relative;
}

/* ---------- NAV ---------- */
nav.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--rule-soft);
  position: sticky; top: 0; z-index: 40;
  background: var(--sp-nav-glass);
  backdrop-filter: saturate(1.2) blur(16px);
  -webkit-backdrop-filter: saturate(1.2) blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .pill {
  width: 30px; height: 30px; border-radius: 15px;
  background: linear-gradient(100deg, var(--coral) 0 50%, var(--highlight) 50% 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), var(--lift-1);
  transform: rotate(-18deg);
  position: relative; flex-shrink: 0;
}
.brand .pill::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), transparent 50%); background: radial-gradient(circle at 30% 30%, oklch(100% 0 0 / .35), transparent 50%);
}
/* The wordmark on the public pages is the app's: coral, the Heavy face, no
   capsule glyph beside it (ruling 296: one wordmark, no gradient ornament). */
.brand .pill { display: none; }
.brand .name { font-family: var(--sp-font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--sp-coral-display); line-height: 1.1; }
.brand .tag { font-family: var(--sp-font-ui); font-size: 10px; color: var(--ink-soft);   margin-top: 2px; font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 28px; font-family: var(--sp-font-ui); }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; position: relative; transition: color .15s var(--ease-out); }
.nav-links a:hover { color: var(--coral); }
.nav-links a.cta {
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: var(--radius-sm);
  font-family: var(--sp-font-ui); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  text-transform: none;
  box-shadow: var(--lift-1);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s var(--ease-out);
}
.nav-links a.cta:hover { background: var(--coral); color: var(--paper); transform: translateY(-1px); box-shadow: var(--lift-2); }
.nav-links a.cta:active { transform: translateY(0); box-shadow: var(--lift-1); }
.nav-links a.cta { white-space: nowrap; }
/* Drop the user's first name from the "Continue · Victory →" CTA on phones —
   it pushes the pill wide enough to wrap text inside itself. The "Continue →"
   text alone is enough; the user knows who they're logged in as. */
@media (max-width: 720px) {
  .nav-links a.cta .cta-name { display: none; }
}
/* Mobile menu toggle */
.nav-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; color: var(--ink); }
.nav-toggle svg { display: block; }

/* ---------- MARGIN NUMBERS (§) ---------- */
.section-mark {
  position: absolute; left: 0; top: 0;
  font-family: var(--sp-font-mono);
  font-size: 11px; color: var(--ink-soft); letter-spacing: .12em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 8px 0;
}

/* ---------- HERO ---------- */
.hero {
  padding: clamp(40px, 7vw, 88px) 0 40px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.hero-eyebrow .line { flex: 1; height: 1px; background: var(--rule); max-width: 80px; }

.hero h1 {
  font-family: var(--sp-font-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.hero h1 .marker {
  position: relative; display: inline-block; padding: 0 .08em;
}
.hero h1 .marker::before {
  content: ''; position: absolute; inset: 8% -4%;
  background: var(--highlight);
  z-index: -1;
  transform: skewX(-3deg) rotate(-.8deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 0 oklch(0 0 0 / .05);
}
.hero h1 .it { font-family: var(--sp-font-display); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.hero h1 .coral { color: var(--coral); }

.hero-sub {
  grid-column: 2;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-bottom: 8px;
  position: relative;
}
.hero-sub::before {
  content: '¶'; position: absolute; left: -28px; top: 2px;
  font-family: var(--sp-font-display); color: var(--coral); font-size: 22px;
}
.hero-sub em { font-style: normal; background: var(--highlight-soft); padding: 0 3px; }

.hero-under {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  gap: 24px;
}
.btn {
  font-family: var(--sp-font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
  cursor: pointer; border: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: var(--lift-2);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--lift-3); filter: brightness(1.04); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--lift-1); }
.btn-ghost { color: var(--ink); border: 1px solid var(--rule); background: var(--paper); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--lift-1); }
.btn-ghost:active { transform: translateY(0); }
.btn .arrow { transition: transform .2s var(--ease-out); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

.hero-proof {
  font-family: var(--sp-font-mono); font-size: 11px;
  color: var(--ink-soft);  
  display: flex; align-items: center; gap: 10px;
}
.hero-proof .check { color: var(--pine); font-size: 14px; }
.hero-proof-right { justify-self: end; text-align: right; }

.marginalia {
  position: absolute;
  font-family: var(--sp-font-display);
  color: var(--coral);
  font-size: 22px;
  line-height: 1.1;
  transform: rotate(-4deg);
  pointer-events: none;
}
.marg-1 { bottom: 8%; right: 0; transform: rotate(4deg); max-width: 160px; }
@media (max-width: 1200px) { .marg-1 { display: none; } }

/* EXAM COUNTDOWN STRIP */
.countdown-strip {
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
  overflow: hidden;
}
.countdown-strip .label {
  font-family: var(--sp-font-mono); font-size: 12px; 
   color: var(--ink);
}
.ticker {
  overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.ticker-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: scroll 40s linear infinite;
  font-family: var(--sp-font-display); font-size: 18px; font-style: italic;
  color: var(--ink-2);
}
/* A drawn dot, not the U+2731 dingbat that used to sit here: text glyphs
   standing in for graphics render differently on every OS and read as
   clip-art next to the brand faces. */
.ticker-track span::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--coral);
  margin-right: 12px; vertical-align: middle;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- SECTION HEADER STYLE ---------- */
section { position: relative; padding: clamp(60px, 10vw, 120px) 0; }
.sec-num {
  font-family: var(--sp-font-mono);
  font-size: 12px;
  color: var(--coral); 
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.sec-num::after { content: ''; flex: 1; height: 1px; background: var(--rule); max-width: 180px; }
.sec-h {
  font-family: var(--sp-font-display);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 14ch;
  margin-bottom: 40px;
}
.sec-h .it { font-family: var(--sp-font-display); font-style: italic; }

/* ---------- FEATURES (textbook chapter cards) ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.feature {
  padding: 32px 28px;
  position: relative;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--lift-1);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: var(--rule); }
.feature .num {
  font-family: var(--sp-font-mono); font-size: 11px;
  color: var(--coral); letter-spacing: .14em;
  margin-bottom: 18px; font-variant-numeric: tabular-nums;
}
.feature h3 {
  font-family: var(--sp-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  line-height: 1.15;
}
.feature p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.feature .glyph {
  width: 52px; height: 52px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sp-font-display); font-size: 26px;
  color: var(--coral);
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--lift-1);
  transition: transform .22s var(--ease-out), border-color .22s var(--ease-out);
}
.feature:hover .glyph { transform: rotate(-6deg) scale(1.05); border-color: var(--coral); }

/* stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.stat {
  padding: 28px 24px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--lift-1);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.stat .big {
  font-family: var(--sp-font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stat .big .sup { font-family: var(--sp-font-display); font-style: italic; color: var(--coral); font-size: .6em; vertical-align: super; }
.stat .cap { font-family: var(--sp-font-mono); font-size: 10px;   color: var(--ink-soft); margin-top: 10px; }

/* ---------- HOW IT WORKS ---------- */
.how {
  background: var(--paper-2);
  position: relative;
}
.how::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(179, 154, 125, 0.15) 31px 32px); background-image: repeating-linear-gradient(0deg, transparent 0 31px, oklch(70% 0.05 70 / .15) 31px 32px);
  pointer-events: none;
}
.how-inner { position: relative; z-index: 1; }
.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 40px;
}
.how-steps { display: flex; flex-direction: column; gap: 4px; }
.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: padding .25s ease;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step .n {
  font-family: var(--sp-font-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--ink-soft);
  letter-spacing: -0.03em;
  transition: color .2s ease;
}
.step h4 { font-family: var(--sp-font-display); font-weight: 600; font-size: 22px; margin-bottom: 6px; letter-spacing: -.01em; }
.step p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.step.active .n { color: var(--coral); font-weight: 500; }
.step.active h4 { color: var(--coral); }

/* phone mock */
.phone-wrap {
  position: sticky; top: 40px;
  display: flex; justify-content: center;
}
.phone {
  width: 300px; height: 600px;
  background: #0E0804; background: oklch(14% 0.015 60);
  border-radius: 42px;
  padding: 14px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05),
    0 30px 60px -20px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px #362C24; box-shadow:
    0 2px 0 oklch(0 0 0 / .05),
    0 30px 60px -20px oklch(0 0 0 / .35),
    inset 0 0 0 1px oklch(30% 0.02 60);
  position: relative;
  transform: rotate(-2deg);
}
.phone::before {
  content:''; position:absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 22px; background: #020202; background: oklch(8% 0 0); border-radius: 20px; z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}
.phone-ui {
  padding: 44px 18px 18px;
  height: 100%;
  display: flex; flex-direction: column;
}
.phone-ui .chip {
  align-self: flex-start;
  background: var(--highlight);
  font-family: var(--sp-font-mono); font-size: 9px;
  padding: 4px 8px; border-radius: 3px;  
  margin-bottom: 14px;
}
.phone-ui h5 {
  font-family: var(--sp-font-display); font-size: 20px; font-weight: 600;
  line-height: 1.15; letter-spacing: -.015em; margin-bottom: 12px;
}
.phone-ui .q-meta { font-family: var(--sp-font-mono); font-size: 9px; color: var(--ink-soft); letter-spacing: .1em; margin-bottom: 14px; }
.phone-ui .opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: auto; }
.phone-ui .opt {
  border: 1px solid var(--rule);
  padding: 10px 12px; border-radius: 8px;
  font-size: 12px; display: flex; gap: 10px; align-items: center;
  background: var(--paper);
}
.phone-ui .opt .k { font-family: var(--sp-font-mono); font-size: 9px; width: 16px; height: 16px; background: var(--cream); border-radius: 3px; display: grid; place-items: center; }
.phone-ui .opt.right { border-color: var(--pine); background: #D5F9E0; background: oklch(95% 0.05 155); color: var(--pine); }
.phone-ui .opt.right .k { background: var(--pine); color: white; }
.phone-ui .bar {
  height: 4px; background: var(--cream); border-radius: 2px; overflow: hidden; margin-top: 14px;
}
.phone-ui .bar > i { display: block; height: 100%; width: 62%; background: var(--coral); }
.phone-ui .bottom-meta { display: flex; justify-content: space-between; font-family: var(--sp-font-mono); font-size: 9px; color: var(--ink-soft); margin-top: 8px; letter-spacing: .08em; }
.phone-caption {
  position: absolute; bottom: -30px; right: -30px;
  font-family: var(--sp-font-display); color: var(--coral); font-size: 22px; transform: rotate(4deg);
  max-width: 180px;
}

/* ---------- TESTIMONIAL BAND ---------- */
.testi {
  padding: clamp(60px, 10vw, 120px) 0;
}
.testi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 8px; }
.testi-card {
  padding: 32px 28px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--lift-1);
  display: flex; flex-direction: column; gap: 20px;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.testi-card:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.testi-card .stars { color: var(--coral); letter-spacing: 2px; }
.testi-card blockquote {
  font-family: var(--sp-font-display); font-size: 20px; line-height: 1.35;
  letter-spacing: -.01em; font-weight: 400; color: var(--ink);
}
.testi-card blockquote .hl { background: var(--highlight-soft); padding: 0 2px; }
.testi-card .attr { font-family: var(--sp-font-mono); font-size: 11px;  color: var(--ink-soft);  margin-top: auto; }
.testi-card .attr b { color: var(--ink); font-weight: 500; }

/* ---------- PRICING (index-card style) ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: var(--lift-1);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--lift-3); border-color: var(--ink); }
.card.featured { background: var(--ink); color: var(--paper); }
.card.featured .mono, .card.featured p { color: #C8BBB1; color: oklch(80% 0.02 60); }
.card.featured .line { background: #50453D; background: oklch(40% 0.02 60); }
.card .pin {
  position: absolute; top: -10px; right: 24px;
  background: var(--coral); color: var(--paper);
  font-family: var(--sp-font-mono); font-size: 10px; padding: 4px 10px;  
  transform: rotate(4deg);
}
.card h4 { font-family: var(--sp-font-display); font-size: 24px; font-weight: 600; margin-bottom: 4px; letter-spacing: -.01em; }
.card .price {
  font-family: var(--sp-font-display); font-size: 56px; font-weight: 500;
  letter-spacing: -0.03em; margin: 16px 0 6px; line-height: 1;
}
.card .price .cur { font-size: .45em; vertical-align: super; margin-right: 3px; color: var(--coral); }
.card .price .per { font-size: .22em; color: var(--ink-soft); font-family: var(--sp-font-mono); margin-left: 4px;   vertical-align: middle; }
.card.featured .price .per { color: #A89C92; color: oklch(70% 0.02 60); }
.card .line { height: 1px; background: var(--rule); margin: 20px 0; }
.card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; }
.card ul li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; }
.card ul li::before { content: '+'; color: var(--coral); font-family: var(--sp-font-mono); font-weight: 600; }
.card.featured ul li::before { color: var(--coral-2); }
.card .btn { justify-content: center; width: 100%; }
.card.featured .btn-primary { background: var(--coral); }
.card.featured .btn-ghost { color: var(--paper); border-color: var(--paper); }
.card.featured .btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* The line that keeps the listed price honest. The prices on this page are
   STUDENT prices; when the education cutoff is switched on, an unverified new
   account pays double. Saying so here means the page can never quote a number
   the wallet contradicts. Quiet by design — it is a condition, not a pitch. */
.student-price-note {
  font-family: var(--sp-font-ui);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: -2px 0 0;
  max-width: 30ch;
}
.card.featured .student-price-note { color: #C1B5AB; color: oklch(78% 0.02 60); }

/* ---------- PRICING ----------
   PRICES ARE IN DOLLARS. Owner ruling 2026-09-23: the headline price is USD
   everywhere a person is deciding, and the cedi figure appears only on the
   charge line, because mobile money settles in cedis.

   So the timezone no longer picks a CURRENCY. It still picks the PAYMENT
   METHOD: the shell's <head> script stamps html.gh-pricing (Africa/Accra
   clock) or html.intl-pricing, and .pay-gh / .pay-intl follow it, so
   mobile-money operator names appear only once Ghana is positively
   confirmed and an international visitor never sees them, not even for a
   frame. The DEFAULT, with script blocked, stays the neutral wallet line. */
.p-ghs, .pay-gh { display: none; }
.p-usd { display: inline; }
html.gh-pricing .pay-gh { display: inline; }
html.gh-pricing .pay-intl { display: none; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--rule); margin-top: 40px; }
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
  cursor: pointer;
  display: grid; grid-template-columns: 40px 1fr 40px; gap: 20px;
  align-items: start;
}
.faq-item .n { font-family: var(--sp-font-mono); font-size: 11px; color: var(--coral); padding-top: 6px; }
.faq-item h5 { font-family: var(--sp-font-display); font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.faq-item .a { font-size: 15px; color: var(--ink-2); margin-top: 10px; line-height: 1.6; max-width: 60ch;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease; }
.faq-item.open .a { max-height: 240px; opacity: 1; }
.faq-item .tog { font-family: var(--sp-font-display); font-size: 28px; color: var(--ink); text-align: right; line-height: 1; transition: transform .2s ease; padding-top: 2px; }
.faq-item.open .tog { transform: rotate(45deg); color: var(--coral); }

/* ---------- CTA BAND ---------- */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  margin-top: 80px;
}
.cta-band .inner {
  padding: clamp(60px, 8vw, 120px) 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: end;
}
.cta-band h2 {
  font-family: var(--sp-font-display); font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.9; letter-spacing: -0.035em;
}
.cta-band h2 .hl { background: var(--highlight); color: var(--ink); padding: 0 .1em; }
.cta-band h2 .it { font-family: var(--sp-font-display); font-style: italic; }
.cta-band p { color: #C8BBB1; color: oklch(80% 0.02 60); font-size: 17px; line-height: 1.55; margin-bottom: 24px; }
.cta-band .btn-primary { background: var(--coral); }
.cta-band .btn-ghost { color: var(--paper); border-color: var(--paper); }
.cta-band .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- FOOTER ---------- */
footer.site {
  background: var(--ink);
  color: var(--paper);
  padding: 60px 0 40px;
  border-top: 1px solid #362C24; border-top: 1px solid oklch(30% 0.02 60);
}
footer.site .inner { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; }
footer.site h6 { font-family: var(--sp-font-mono); font-size: 11px;   color: #A89C92; color: oklch(70% 0.02 60); margin-bottom: 18px; font-weight: 500; }
footer.site ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
footer.site a { color: #E2D5CB; color: oklch(88% 0.02 60); text-decoration: none; font-size: 14px; }
footer.site a:hover { color: var(--highlight); }
footer.site .brand-col p { color: #A89C92; color: oklch(70% 0.02 60); font-size: 14px; line-height: 1.55; max-width: 32ch; margin-top: 12px; }
.footer-bottom {
  margin-top: 60px; padding-top: 24px; border-top: 1px solid #362C24; border-top: 1px solid oklch(30% 0.02 60);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--sp-font-mono); font-size: 11px; color: #998D83; color: oklch(65% 0.02 60); letter-spacing: .06em;
}
.footer-bottom .colophon { font-style: italic; font-family: var(--sp-font-display); font-size: 14px; letter-spacing: 0; }

/* ---------- SCOPED PROSE PAGES (about, pricing, cohort_join) ---------- */
.prose-page { padding: 56px 0 96px; }
.prose-page .eyebrow {
  font-family: var(--sp-font-mono); font-size: 12px; color: var(--coral);
    margin-bottom: 16px;
}
.prose-page h1 {
  font-family: var(--sp-font-display); font-weight: 500;
  font-size: clamp(40px, 6vw, 72px); line-height: 0.95; letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.prose-page h1 .it { font-family: var(--sp-font-display); font-style: italic; }
.prose-page .lead { font-size: 19px; color: var(--ink-2); max-width: 60ch; margin-bottom: 32px; }
.prose-page h2 {
  font-family: var(--sp-font-display); font-weight: 600;
  font-size: 28px; letter-spacing: -.015em;
  margin: 36px 0 12px;
  border-bottom: 1px solid var(--rule); padding-bottom: 8px;
}
.prose-page p, .prose-page li { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.prose-page ol, .prose-page ul { margin: 12px 0 20px 24px; }
.prose-page li { margin-bottom: 6px; }
.prose-page code {
  background: var(--paper-2); border: 1px solid var(--rule);
  padding: 2px 8px; border-radius: 4px;
  font-family: var(--sp-font-mono); font-size: 0.9em;
}
.prose-page strong { color: var(--ink); font-weight: 600; }

/* ---------- THE LANDING PAGE, REDRAWN (ruling 296) ----------
   One scale (32 / 20 / 15 / 13), one gutter, the one coral action in the
   hero, the stroke icons in soft ink, rows with a hairline between them.
   Tokens only. Phone first; the measure is capped on a wide screen. */
.land-hero { display: block; padding: var(--sp-space-7) 0 var(--sp-space-6); max-width: 640px; }
.land-hero h1 {
  font-family: var(--sp-font-display); font-weight: 700;
  font-size: clamp(32px, 8vw, 44px); line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 var(--sp-space-4); color: var(--sp-ink);
}
.land-lede { font-family: var(--sp-font-ui); font-size: 17px; line-height: 1.55; color: var(--sp-ink-2); margin: 0 0 var(--sp-space-5); }
.land-hero .btn { width: 100%; justify-content: center; min-height: 52px; border-radius: var(--sp-radius-sm); font-size: 16px; }
.land-note { font-family: var(--sp-font-ui); font-size: 14px; color: var(--sp-ink-soft); margin: var(--sp-space-3) 0 0; }
/* Two faces: the Ghana hero paints by default and for a visitor on Accra's
   clock; the international one for everyone else (see _shell_marketing). */
.face-intl { display: none; }
html.intl-pricing .face-intl { display: block; }
html.intl-pricing .face-gh { display: none; }
.land-how, .land-plans, .land-faq { padding: var(--sp-space-7) 0 0; max-width: 640px; }
.land-how h2, .land-plans h2, .land-faq h2 {
  font-family: var(--sp-font-display); font-weight: 600; font-size: 20px; line-height: 1.25;
  letter-spacing: -.01em; margin: 0 0 var(--sp-space-2); color: var(--sp-ink);
}
.land-rows { list-style: none; margin: 0; padding: 0; }
.land-rows > li {
  display: flex; align-items: flex-start; gap: var(--sp-space-3);
  padding: var(--sp-space-3) 0; border-top: 1px solid var(--sp-rule);
  font-family: var(--sp-font-ui);
}
.land-rows > li > .sp-ico { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; color: var(--sp-ink-soft); }
.land-rows > li > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.land-rows b { font-size: 15px; font-weight: 600; color: var(--sp-ink); }
.land-rows span { font-size: 14px; line-height: 1.5; color: var(--sp-ink-2); }
.land-rows .student-price-note { font-size: 13px; color: var(--sp-ink-soft); }
.land-rows--plans > li { align-items: flex-start; }
.land-rows--plans > li > div { order: 1; }
.land-rows--plans .land-price { order: 2; }
.land-plan__list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.land-plan__list li { font-family: var(--sp-font-ui); font-size: 14px; line-height: 1.5; color: var(--sp-ink-2); }
.land-price {
  flex: 0 0 auto; margin: 0; text-align: right;
  font-family: var(--sp-font-ui); font-size: 15px; font-weight: 600; color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}
.land-price .p-usd { display: inline; }
.land-price .cur { font-size: 12px; font-weight: 600; color: var(--sp-ink-soft); margin-right: 1px; vertical-align: 1px; }
.land-per { display: block; font-size: 12px; font-weight: 400; color: var(--sp-ink-soft); }
.land-plans .btn { margin-top: var(--sp-space-4); }
.land-q { border-top: 1px solid var(--sp-rule); }
.land-q summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-3);
  min-height: 52px; padding: var(--sp-space-2) 0;
  font-family: var(--sp-font-ui); font-size: 16px; font-weight: 600; color: var(--sp-ink);
}
.land-q summary::-webkit-details-marker { display: none; }
.land-q summary:focus-visible { outline: var(--sp-focus-width, 3px) solid var(--sp-focus); outline-offset: 2px; border-radius: var(--sp-radius-xs); }
.land-q__go { flex: 0 0 auto; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--sp-ink-soft); transition: transform var(--sp-dur-base) var(--sp-ease-out); }
.land-q[open] .land-q__go { transform: rotate(180deg); }
.land-q p { font-family: var(--sp-font-ui); font-size: 15px; line-height: 1.55; color: var(--sp-ink-2); margin: 0 0 var(--sp-space-4); max-width: 60ch; }
.land-foot { font-family: var(--sp-font-ui); font-size: 14px; color: var(--sp-ink-soft); margin: var(--sp-space-8) 0 var(--sp-space-9); }
@media (min-width: 900px) {
  .land-hero { padding-top: var(--sp-space-9); }
  .land-hero .btn { width: auto; min-width: 220px; }
}

/* ---------- DENSITY ---------- */
.dense section { padding: clamp(40px, 7vw, 80px) 0; }
.dense .hero { padding: clamp(28px, 5vw, 60px) 0 20px; }
.dense .feature { padding: 28px 24px; }

/* ---------- RESPONSIVE ---------- */
/* Big screens: cap typography so lines stay readable */
@media (min-width: 1600px) {
  html, body { font-size: 18px; }
  .hero h1 { font-size: clamp(72px, 7vw, 148px); }
  .sec-h { font-size: clamp(48px, 5vw, 88px); }
}

/* Tablet */
@media (max-width: 1100px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .testi-grid { grid-template-columns: 1fr; gap: 16px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  footer.site .inner { grid-template-columns: 1.5fr repeat(2, 1fr); gap: 36px 24px; }
}

/* Mobile */
@media (max-width: 900px) {
  .page { padding: 0 clamp(18px, 5vw, 32px); }
  .page::before, .page::after { display: none; }
  nav.top { padding: 12px 0; }
  .nav-links { gap: 14px; }
  .nav-links a:not(.cta) { display: none; }
  .brand .tag { display: none; }
  .brand .name { font-size: 20px; }

  .hero { grid-template-columns: 1fr; padding: clamp(32px, 8vw, 64px) 0 24px; gap: 24px; }
  .hero h1 { font-size: clamp(44px, 11vw, 84px); line-height: .95; }
  .hero-sub { grid-column: 1; font-size: 17px; max-width: none; }
  .hero-sub::before { display: none; }
  .hero-under { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .hero-proof-right { justify-self: start; text-align: left; }

  section { padding: clamp(48px, 12vw, 80px) 0; }
  .sec-h { font-size: clamp(32px, 8vw, 52px); margin-bottom: 28px; }

  .features-grid, .stats-row, .testi-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature, .stat, .testi-card { padding: 26px 22px; }
  .stat .big { font-size: clamp(36px, 10vw, 56px); }

  .how-grid { grid-template-columns: 1fr; gap: 40px; }
  .phone-wrap { position: static; }
  .phone { transform: none; margin: 0 auto; }

  .cta-band .inner { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .cta-band h2 { font-size: clamp(36px, 10vw, 68px); }
  .cta-band .actions { flex-direction: column; align-items: stretch; }
  .cta-band .btn { justify-content: center; }

  footer.site { padding: 48px 0 28px; }
  footer.site .inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }

  .countdown-strip { grid-template-columns: 1fr; gap: 12px; padding: 14px 0; }

  .step { grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; }
  .step .n { font-size: 40px; }
  .step h4 { font-size: 19px; }

  .marginalia, .marg-1 { display: none; }

  .btn { padding: 14px 22px; width: auto; }

  .packs-head { flex-direction: column; align-items: flex-start; }
}

/* Small phones */
@media (max-width: 480px) {
  html, body { font-size: 16px; }
  .card { padding: 24px 20px; }
  .card .price { font-size: 44px; }
  .hero h1 { font-size: clamp(38px, 12vw, 64px); }
  .ticker-track { font-size: 16px; gap: 32px; }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- DARK THEME ----------
   Opt-in via `html[data-theme="dark"]`. The toggle lives in base.html's nav.
   Strategy: override the semantic tokens on :root so every `var(--paper|--ink|…)`
   reference swaps automatically, then patch the handful of hardcoded oklch()
   backgrounds (nav translucency, body gradient) that would otherwise stay light.
   Callout surfaces that were already dark on paper (footer, .card.featured,
   .phone shell) intentionally keep their palette — they already look correct
   against the dark body.  */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: var(--sp-paper);
  --paper-2: var(--sp-paper-2);
  --paper-edge: var(--sp-paper-edge);
  --ink: var(--sp-ink);
  --ink-2: var(--sp-ink-2);
  --ink-soft: var(--sp-ink-soft);
  --rule: var(--sp-rule);
  --rule-soft: var(--sp-rule-soft);
  --coral: var(--sp-coral);
  --coral-2: var(--sp-coral-2);
  --coral-deep: var(--sp-coral-deep);
  --highlight: var(--sp-coral-soft);
  --highlight-soft: var(--sp-coral-soft);
  --pine: var(--sp-pine);
  --pine-soft: var(--sp-pine-soft);
  --cream: var(--sp-cream);

  --lift-1: var(--sp-lift-1);
  --lift-2: var(--sp-lift-2);
  --lift-3: var(--sp-lift-3);
}
html[data-theme="dark"] body {
  background-image: radial-gradient(circle at 20% 10%, rgba(62, 41, 15, 0.35) 0, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(36, 38, 65, 0.25) 0, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(255, 255, 255, 0.03) 35px 36px); background-image:
    radial-gradient(circle at 20% 10%, oklch(30% 0.05 70 / .35) 0, transparent 40%),
    radial-gradient(circle at 85% 70%, oklch(28% 0.05 280 / .25) 0, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 35px, oklch(100% 0 0 / .03) 35px 36px);
}
html[data-theme="dark"] .how::before {
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, 0.05) 31px 32px); background-image: repeating-linear-gradient(0deg, transparent 0 31px, oklch(100% 0 0 / .05) 31px 32px);
}
html[data-theme="dark"] .phone-ui .opt.right {
  background: #00391B; background: oklch(30% 0.08 155);
}
html[data-theme="dark"] .btn-primary { color: #0E0804; color: oklch(14% 0.015 60); }
html[data-theme="dark"] .btn-ghost { background: var(--paper-2); }
html[data-theme="dark"] .btn-ghost:hover { background: var(--ink); color: var(--paper); }
/* Marketing hero + features shouldn't print pure-white text boxes */
html[data-theme="dark"] .feature,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .card {
  background: var(--paper-2);
}

/* Theme toggle button (lives in nav.top) */
.theme-toggle {
  background: transparent;
  border: 0;                 /* a plain glyph, as in the app's bar (ruling 296) */
  color: var(--ink-2);
  border-radius: var(--sp-radius-sm);
  padding: 8px 12px;
  min-width: 44px; min-height: 44px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  transition: background .15s ease, border-color .15s ease;
  font-family: var(--sp-font-ui);
}
.theme-toggle:hover { background: var(--paper-2); border-color: var(--ink-soft); }
.theme-toggle:active { transform: scale(.94); }

/* ── settings ───────────────────────────────────────────────────────────────
 * Owner-ruled 2026-09-10: the door is the row in the GlueArrow account menu;
 * this is the room behind it. Four rules, because everything else on the screen
 * is already a primitive - card, row, list, field, kicker, button.
 */
.set-page{ max-width:34rem; margin:0 auto; padding:var(--sp-space-4) var(--sp-space-4) var(--sp-space-9); }
.set-actions{ display:flex; gap:var(--sp-space-2); flex-wrap:wrap; }
/* Two fields in one card ran together: a hint ended and the next label began
   on the following line, so "Before a class starts" read as part of the
   paragraph above it. Found by photographing the page. */
.set-page .sp-field + .sp-field{ margin-top:var(--sp-space-5); }
.set-page .sp-kicker{ margin-bottom:var(--sp-space-3); }
.set-page .sp-list + .sp-field__hint{ margin-top:var(--sp-space-3); }
/* Two paragraphs in the danger card ran into each other, so "It does not close
   your GlueArrow account" - the one sentence somebody must not miss - read as
   the tail of the sentence above it. */
.set-page .sp-field__hint + .sp-field__hint{ margin-top:var(--sp-space-3); }
.set-page .sp-field__hint + form{ display:block; margin-top:var(--sp-space-4); }
.set-danger{ border-color:color-mix(in oklch, var(--sp-coral) 40%, var(--sp-rule)); }
/* THE SAME SIDE GAP AS COURSE, AND NO CARD INSIDE A CARD (ruling 667). On a
   phone the page cancels the main column's gutter and takes Course's own,
   clamp(12px, 4vw, 20px): 16px at 390, 14px at 360. The cards were at 36px.
   Inside a card the rows are lines, not a second set of boxed cards. */
@media (max-width: 639px){
  .set-page{ margin:0 calc(clamp(20px, 4vw, 64px) * -1); padding-left:clamp(12px, 4vw, 20px); padding-right:clamp(12px, 4vw, 20px); }
  .set-page .sp-card{ padding:var(--sp-space-4); }
}
.set-page .sp-card .sp-list{ gap:0; }
.set-page .sp-card .sp-row{
  padding-left:0; padding-right:0; background:none; border:0; border-radius:0;
  border-top:1px solid var(--sp-rule-soft); box-shadow:none;
}
.set-page .sp-card .sp-row:first-child{ border-top:0; }
.set-kicker-danger{ color:var(--sp-coral); }

/* Ask to remove a past paper (ruling 238): templates/past_remove.html. */
.pr-page { max-width: 560px; margin: 0 auto; }
.pr-page .pr-source { color: var(--ink-soft); margin: 0 0 24px; }
.pr-page .pr-field { margin: 0 0 18px; }
.pr-page label { display: block; font-weight: 600; margin-bottom: 6px; }
.pr-page .pr-hint { font-weight: 400; color: var(--ink-soft); }
.pr-page input, .pr-page textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink);
}
.pr-page textarea { min-height: 120px; resize: vertical; }
.pr-page .pr-error { color: #b3261e; margin: 6px 0 0; font-size: 14px; }
.pr-page .pr-note { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius-sm); margin: 0 0 20px; }
.pr-page .pr-note--bad { border-color: #b3261e; }

/* ---- standard surfaces (`sp:standard_theme`) ---------------------------------
 * Everything above that paints a warm literal gets one override here, scoped to
 * html[data-sp-surface="standard"], so a page outside the ring is untouched.
 * Each one points at a token: no cream patch survives on a white page. */
html[data-sp-surface="standard"] body { background-image: none; }
html[data-sp-surface="standard"] .phone { background: var(--sp-ink); }
html[data-sp-surface="standard"] footer.site {
  background: var(--sp-paper-2);
  color: var(--sp-ink);
  border-top-color: var(--sp-rule);
}
html[data-sp-surface="standard"] footer.site h6,
html[data-sp-surface="standard"] footer.site .brand-col p { color: var(--sp-ink-soft); }
html[data-sp-surface="standard"] footer.site a { color: var(--sp-ink-2); }
html[data-sp-surface="standard"] .footer-bottom {
  border-top-color: var(--sp-rule);
  color: var(--sp-ink-soft);
}
html[data-sp-surface="standard"] .card.featured .price .per {
  color: color-mix(in srgb, var(--sp-paper) 62%, var(--sp-ink));
}