/* ─── Ember landing page · styles ─────────────────────────────────────────
   Drives the cinematic landing (index.html) and the blog / "alternative"
   pages. Colors + type come from the shared token file; this stylesheet only
   holds layout and component styles. */

@import url("/styles/tokens.css");

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cave);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}
.wrap { max-width: 1020px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
a { color: inherit; text-decoration: none; }

/* ─── Sticky header ─── */
/* Hidden over the hero, fades in once the fold is passed. Translucent dark
   blur so it stays legible over both the cave image and the light sections. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 11px 24px;
  background: rgba(16,11,6,0.25);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 0.5px solid rgba(237,226,207,0.10);
  transform: translateY(0); opacity: 1; pointer-events: auto;
  transition: transform 0.34s ease, opacity 0.34s ease, background 0.34s ease;
}
.topbar.solid { background: rgba(16,11,6,0.72); }
.topbar.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.tb-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--cave-ink);
  flex-shrink: 0;
}
.tb-logo {
  width: 14px; height: 14px; border-radius: 4px;
  box-shadow: 0 0 10px rgba(232,119,42,0.5);
}
.tb-nav { display: flex; align-items: center; gap: 22px; }
.tb-nav a { font-size: 13px; color: var(--cave-muted); transition: color 0.15s; white-space: nowrap; }
.tb-nav a:hover { color: var(--cave-ink); }
.tb-download {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--text); font-weight: 600; font-size: 13px;
  padding: 8px 15px; border-radius: 8px;
  background: var(--ink); color: #FFFCF7 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  transition: transform 0.12s, box-shadow 0.12s;
}
.tb-download:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: opacity 0.2s ease; transform: none; }
}
@media (max-width: 720px) {
  .topbar { padding: 10px 18px; }
  .tb-nav a.tb-text { display: none; }
  .tb-nav { gap: 0; }
}

/* ─── The cave · opening ─── */
.cave {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cave-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
.cave-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,11,6,0.55) 0%, rgba(16,11,6,0) 22%, rgba(16,11,6,0) 55%, rgba(16,11,6,0.92) 92%, #100B06 100%);
}
.cave-top {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  padding-top: 30px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cave-ink);
}
.ember-dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFE9B5 0%, #E8772A 48%, #7A2812 100%);
  box-shadow: 0 0 12px rgba(232,119,42,0.55);
}
.cave-bottom {
  position: relative; z-index: 2;
  margin-top: auto;
  text-align: center;
  padding: 0 32px 64px;
}
.cave-bottom .first-line {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.4; color: var(--cave-ink);
  max-width: 30ch; margin: 0 auto;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(16,11,6,0.8);
}
.scroll-hint {
  margin-top: 30px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--cave-faint);
  animation: drift 2.8s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } }

/* ─── The story ─── */
.story {
  background: var(--cave);
  color: var(--cave-ink);
  padding: 110px 32px 50vh;
}
.story-inner { max-width: 560px; margin: 0 auto; }
.story p {
  font-family: var(--serif);
  font-size: 19px; line-height: 1.75;
  color: var(--cave-muted);
  text-wrap: pretty;
}
.story p + p { margin-top: 44px; }
.story p b {
  color: var(--cave-ink); font-weight: 400;
}
.story p.held {
  font-style: italic; color: var(--cave-ink);
}
.story .sig {
  margin-top: 60px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--cave-faint);
  display: flex; align-items: center; gap: 12px;
}
.story .sig::before { content: ""; width: 26px; height: 1px; background: var(--cave-faint); }

/* ─── Light sections ─── */
.day { background: var(--bg); }
.intro-app { text-align: center; padding: 40px 0 30px; }
.intro-app .small-cap {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ember-deep);
}
.intro-app h1, .intro-app h2 {
  font-family: var(--display); font-size: clamp(31px, 4.4vw, 43px);
  font-weight: 700; letter-spacing: -1.1px; line-height: 1.08; margin-top: 16px;
  text-wrap: balance;
}
.intro-app p {
  margin: 20px auto 0; max-width: 46ch;
  font-size: 16.5px; color: var(--muted); line-height: 1.7; text-wrap: pretty;
}

/* ── Trust band ───────────────────────────────────────────────────────────
   Three quiet reassurances (free / yours / private) sit under the intro
   value line, before the product window - the Obsidian "your thoughts are
   yours" placement, in Ember's voice. Deliberately understated so it never
   competes with the story hero above it. */
.trust-band {
  margin: 42px auto 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 0.5px solid var(--divider); border-radius: 14px; overflow: hidden;
}
.trust-col {
  padding: 24px 26px 26px; text-align: left;
  border-left: 0.5px solid var(--divider);
}
.trust-col:first-child { border-left: 0; }
.trust-key {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.3px; color: var(--ink);
}
.trust-key::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ember); margin-right: 8px;
  vertical-align: middle; transform: translateY(-1px);
}
.trust-col p {
  margin: 9px 0 0; max-width: none;
  font-size: 13.5px; color: var(--muted); line-height: 1.55; text-wrap: pretty;
}
.trust-col a { color: var(--ember-deep); text-decoration: none; }
.trust-col a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .trust-band { grid-template-columns: 1fr; max-width: 380px; }
  .trust-col { border-left: 0; border-top: 0.5px solid var(--divider); }
  .trust-col:first-child { border-top: 0; }
}

/* ── Shared typography for the light "day" sections ───────────────────────
   intro-app, surfaces and themes previously leaned on rules that were either
   scoped to unused markup (.surface-copy) or only set a margin/display
   (.themes h2, .themes .small-cap). Their eyebrows, headings and captions
   therefore fell back to raw browser defaults, which is why the stretch
   between the hero and the footer read as mismatched. These base rules give
   the whole region one consistent, reference-grade scale. */
.day .small-cap,
.day .tagline {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ember-deep);
}
.day .quiet {
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; line-height: 1.6; color: var(--faint); text-wrap: pretty;
}

/* surfaces — Life · The Journal / Attention · The Feed */
.surfaces { padding: 8px 0 44px; }
.surfaces h3,
.themes h2 {
  font-family: var(--display); font-size: clamp(27px, 3.3vw, 31px);
  font-weight: 700; letter-spacing: -0.7px; line-height: 1.15; text-wrap: balance;
}
.surfaces p,
.themes p {
  font-size: 16px; color: var(--muted); line-height: 1.7; text-wrap: pretty;
}
.surface-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; padding: 58px 0;
}
.surface-row + .surface-row { border-top: 0.5px solid var(--divider); }
.surface-row:nth-child(even) .surface-copy { order: 2; }
.surface-copy .tagline { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
.surface-copy h3 { font-family: var(--display); font-size: 25px; letter-spacing: -0.6px; margin-top: 10px; text-wrap: balance; }
.surface-copy p { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.65; max-width: 46ch; text-wrap: pretty; }
.surface-copy .quiet { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--faint); }

.vignette {
  background: var(--card); border: 0.5px solid var(--divider); border-radius: 14px;
  box-shadow: 0 0.5px 0 rgba(0,0,0,0.04), 0 14px 40px rgba(40,28,12,0.07);
  padding: 18px; font-size: 13px;
}
.vignette-clear {
  padding: 0; background: transparent; border: none; box-shadow: none;
}
.surface-img {
  width: 125%; max-width: none; display: block; height: auto;
}
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600;
  white-space: nowrap; vertical-align: baseline;
}
.pill i { width: 5px; height: 5px; border-radius: 50%; font-style: normal; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06);
}
.vcard {
  background: var(--card); border: 0.5px solid var(--divider); border-radius: 11px;
  padding: 13px 14px; box-shadow: 0 0.5px 0 rgba(0,0,0,0.04), 0 4px 14px rgba(40,28,12,0.05);
}
.vrow { display: flex; align-items: center; gap: 10px; }
.vname { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: -0.1px; }
.vmeta { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.vnote { margin-top: 9px; font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.journal-v { font-size: 14.5px; line-height: 1.9; color: var(--ink); }
.journal-v .date { font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0.5px; margin-bottom: 10px; text-transform: uppercase; }
.mention-trail {
  margin-top: 14px; padding-top: 12px; border-top: 0.5px dashed var(--divider-strong);
  display: flex; align-items: center; gap: 10px;
}
.mention-trail .vmeta { margin: 0; }
.decaybar { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-inset); position: relative; overflow: hidden; }
.decaybar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.hook {
  margin-top: 11px; padding: 9px 11px; border-radius: 8px;
  border: 0.5px dashed rgba(224,112,112,0.5); background: rgba(224,112,112,0.06);
  font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--ink); line-height: 1.5;
}
.duo { display: flex; flex-direction: column; gap: 12px; }
.duo-label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }

/* ─── Restraint ─── */
.restraint { border-top: 0.5px solid var(--divider); padding: 84px 20px; }
.restraint-inner { max-width: 640px; margin: 0 auto; }
.restraint .small-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ember-deep); text-align: center; display: block; }
.restraint h2 { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.8px; margin-top: 14px; text-wrap: balance; text-align: center; }
.restraint .lede { margin: 16px auto 0; font-size: 15px; color: var(--muted); line-height: 1.7; text-wrap: pretty; text-align: center; max-width: 52ch; }
.nots { margin-top: 40px; display: flex; flex-direction: column; }
.not-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 18px 0; border-top: 0.5px solid var(--divider);
  align-items: baseline;
}
.not-row:last-child { border-bottom: 0.5px solid var(--divider); }
.not-row .no {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; color: var(--faint); text-transform: uppercase;
}
.not-row .no::before { content: "✕ "; color: rgba(224,112,112,0.7); }
.not-row .instead { font-size: 14.5px; color: var(--muted); line-height: 1.6; text-wrap: pretty; }
.not-row .instead b { color: var(--ink); font-weight: 600; }
.not-row .instead code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-inset); padding: 1px 6px; border-radius: 4px; color: var(--ink); }
.shepherds {
  margin-top: 38px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 14.5px;
  color: var(--muted); line-height: 1.7; text-wrap: pretty;
}
.shepherds a { color: var(--ember-deep); border-bottom: 1px solid rgba(199,125,20,0.3); }

/* ─── No lock-in points ─── */
.lockin {
  margin-top: 38px; padding-top: 30px; border-top: 0.5px dashed var(--divider-strong);
}
.lockin h3 { font-family: var(--display); font-size: 17px; letter-spacing: -0.3px; }
.lockin p { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.7; text-wrap: pretty; }
.lockin p code { font-family: var(--mono); font-size: 12px; background: var(--bg-inset); padding: 1px 6px; border-radius: 4px; color: var(--ink); }
.lockin-points { margin-top: 18px; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
.lockin-points span { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.3px; }
.lockin-points i { font-style: normal; color: var(--ember); }

/* ─── Privacy ─── */
.privacy { border-top: 0.5px solid var(--divider); padding: 84px 0; }
.privacy-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.privacy .small-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ember-deep); }
.privacy h2 { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.8px; margin-top: 14px; text-wrap: balance; }
.privacy p { margin-top: 16px; font-size: 15px; color: var(--muted); line-height: 1.7; text-wrap: pretty; }
.priv-points {
  margin-top: 34px; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
}
.priv-points span {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.3px;
}
.priv-points i { font-style: normal; color: var(--ember); }

/* ─── Pricing ─── */
.pricing { border-top: 0.5px solid var(--divider); padding: 84px 0 90px; }
.pricing-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.pricing .small-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ember-deep); }
.pricing h2 { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.8px; margin-top: 14px; text-wrap: balance; }
.pricing .why { margin: 16px auto 0; max-width: 54ch; font-size: 15px; color: var(--muted); line-height: 1.7; text-wrap: pretty; }

.tiers {
  display: grid; grid-template-columns: 1fr 1.12fr; gap: 24px;
  margin-top: 52px; text-align: left; align-items: start;
}
.tier { border-radius: 20px; padding: 32px 30px; }
.tier-free { background: var(--bg-inset); border: 0.5px solid var(--divider); }
.tier-plus {
  position: relative; background: var(--card);
  border: 1px solid rgba(232,160,32,0.5);
  box-shadow: 0 0.5px 0 rgba(0,0,0,0.04), 0 22px 55px rgba(199,125,20,0.13);
}
.tier-ribbon {
  position: absolute; top: -11px; right: 26px;
  background: linear-gradient(135deg, #E8A020, #C77D14); color: #FFFCF7;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(199,125,20,0.35);
}
.tier-head { display: flex; align-items: center; gap: 10px; }
.tier-name { font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -0.4px; }
.pro-badge { background: rgba(232,160,32,0.15); color: #B07410; font-size: 10px; padding: 4px 8px; border-radius: 6px; font-family: var(--mono); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
.tier-note { margin-top: 7px; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--faint); }

.feature-list { list-style: none; padding: 0; margin: 22px 0 0; }
.feature-list li { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 0.5px solid var(--divider); font-size: 14px; color: var(--ink); }
.feature-list li:last-child { border-bottom: none; }
.feature-list li.off { color: var(--faint); }
.feature-list li.off .feature-text { text-decoration: line-through; }
.feature-list .flag { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase; color: #B07410; background: rgba(232,160,32,0.14); padding: 3px 7px; border-radius: 5px; font-weight: 700; }
.icon-check { color: var(--ember-deep); font-weight: 700; font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.icon-cross { color: var(--faint); font-weight: 700; font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.free-foot { margin-top: 22px; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Plus price options */
.plans { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.plan {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 12px;
  border: 0.5px solid var(--divider); background: var(--bg);
}
.plan.best { border-color: rgba(232,160,32,0.55); background: rgba(232,160,32,0.06); }
.plan-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plan-term { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.best-flag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; color: #B07410; background: rgba(232,160,32,0.18); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.limited-flag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; color: #C25555; background: rgba(224,112,112,0.14); padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.plan.limited { border-color: rgba(224,112,112,0.4); }
.plan-sub { font-size: 12px; color: var(--faint); }
.plan-price { margin-left: auto; text-align: right; white-space: nowrap; }
.plan-amount { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); }
.plan-amount span { font-family: var(--text); font-size: 12px; font-weight: 500; color: var(--muted); }

@media (max-width: 768px) {
  .tiers { grid-template-columns: 1fr; }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--text); font-weight: 600; font-size: 14.5px;
  padding: 13px 30px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--ink); color: var(--bg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 14px rgba(31,26,20,0.18);
  transition: transform 0.12s, box-shadow 0.12s;
  margin-top: 34px;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 7px 20px rgba(31,26,20,0.22); }
.pricing .fine { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--faint); }

/* On touch / coarse-pointer devices the embedded app-window iframes (graph,
   journal, feed) trap single-finger scrolling — there is no wheel to forward,
   so a drag over them pans the demo instead of scrolling the page, and the
   visitor can't get past the section. Make them static previews there; desktop
   (fine pointer + hover) keeps full interactivity and the wheel forwarder. */
@media (hover: none), (pointer: coarse) {
  .appwin-holder iframe { pointer-events: none; }
}

/* ─── Footer ─── */
footer { background: var(--bg); border-top: 0.5px solid var(--divider); padding: 34px 0 46px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin-top: 60px; margin-bottom: 40px; }
.foot-col { display: flex; flex-direction: column; gap: 14px; }
.foot-col-title { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.foot-col a { font-size: 14px; color: var(--muted); text-decoration: none; }
.foot-col a:hover { color: var(--ember); }
.foot-bottom { border-top: 1px solid var(--divider-strong); padding-top: 24px; padding-bottom: 40px; display: flex; align-items: center; justify-content: space-between; }
.foot-brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }
.foot-links { margin-left: auto; display: flex; gap: 20px; }
.foot-links a { font-size: 12.5px; color: var(--faint); }
.foot-links a:hover { color: var(--ink); }
.foot-line { margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--faint); }

@media (max-width: 880px) {
  .surface-row { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .surface-row:nth-child(even) .surface-copy { order: 0; }
  .story { padding: 80px 28px 50vh; }
  .story p { font-size: 17px; }
  .not-row { grid-template-columns: 1fr; gap: 6px; }
  .surface-img { width: 100%; border-radius: 12px; }
}
@media (max-width: 768px) {
  .tiers { grid-template-columns: 1fr; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-links { margin-left: 0; flex-wrap: wrap; }
  .restraint, .privacy { padding: 72px 20px; }
}
@media (max-width: 600px) {
  .plan { flex-direction: column; align-items: flex-start; gap: 8px; }
  .plan-price { margin-left: 0; text-align: left; }
  .vrow { flex-wrap: wrap; }
}

/* ─── Article / Blog Format ─── */
.article-wrap {
  max-width: 680px;
  margin: 140px auto 100px;
  padding: 0 24px;
}
.article-header {
  margin-bottom: 48px;
}
.article-header h1 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 16px;
}
.article-meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ember-deep);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.article-content {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}
.article-content h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin: 48px 0 16px;
  letter-spacing: -0.5px;
}
.article-content h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 12px;
}
.article-content p {
  margin-bottom: 24px;
}
.article-content a {
  color: var(--ember-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.article-content a:hover {
  color: var(--ember);
}
.article-content ul {
  margin-bottom: 24px;
  padding-left: 20px;
}
.article-content li {
  margin-bottom: 12px;
}
.article-content blockquote {
  border-left: 3px solid var(--ember);
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--ink);
  font-size: 19px;
}
.article-cta {
  margin-top: 60px;
  padding: 40px;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 16px;
  text-align: center;
}
.article-cta h3 {
  margin-top: 0;
}
/* The CTA button is an <a> inside .article-content, so the prose link styling
   would otherwise make it an underlined orange link. Keep it a solid button. */
.article-content a.btn,
.article-content a.btn:hover {
  color: var(--bg);
  text-decoration: none;
}
.article-content a.btn:hover { background: var(--ember-deep); }
.article-cta p {
  font-size: 16px;
  margin-bottom: 24px;
}

/* ─── Editor Typography Overrides for Article Pages ─── */
/* Makes the blog read exactly like the native macOS app editor */
.article-header h1 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0px !important;
}

.article-content {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.article-content h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: 0px !important;
  margin: 32px 0 12px !important;
}

.article-content h3 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0px !important;
  margin: 24px 0 10px !important;
}

.article-content p, .article-content ul, .article-content blockquote {
  margin-bottom: 20px !important;
}

/* ─── Theming ──────────────────────────────────────────────────────────────
   The whole site now carries a theme (data-theme + data-mode). Semantic tokens
   (--bg, --ink, --ember-deep…) resolve per theme in themes.css, so most
   components need no per-theme rules. Two page types share landing.css:

     • Landing (body.page-landing): the cave hero + story stay cinematic and
       fixed; the "day" sections and footer below theme via var(--bg). Its
       topbar keeps the cave styling (it sits over the dark hero).
     • Blog articles (body.page-article): fully themed, including the topbar. */

/* Blog article surface follows the theme. (Landing body stays cave — its
   hero owns the top; its .day/footer already read var(--bg).) */
body.page-article { background: var(--bg); color: var(--ink); }

/* Themed, translucent top bar — blog only. */
.page-article .topbar {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 0.5px solid var(--divider-strong);
}
.page-article .topbar.solid {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.page-article .topbar .tb-brand { color: var(--ink); }
.page-article .topbar .tb-nav a { color: var(--muted); }
.page-article .topbar .tb-nav a:hover { color: var(--ink); }
.page-article .topbar .tb-download { background: var(--ink); color: var(--bg) !important; }
.page-article .topbar .tb-download:hover { background: var(--ember); color: var(--card) !important; }

/* The landing topbar is fixed/cinematic (it sits over the dark hero), so its
   CTA stays a fixed dark pill regardless of the chosen theme. */
.page-landing .topbar .tb-download { background: #1F1A14; color: #FFFCF7 !important; }

/* Theme-picker trigger tint per header context (the menu itself is themed). */
.page-landing .topbar .tp-trigger { color: var(--cave-muted); }
.page-landing .topbar .tp-trigger:hover { color: var(--cave-ink); }
.page-article .topbar .tp-trigger { color: var(--muted); }
.page-article .topbar .tp-trigger:hover { color: var(--ink); }

/* Screen Reader Only (Hidden H1 for SEO) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; 
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}