/* ==========================================================
   ContinuousReader site — main stylesheet
   Shared across index.html, features.html, platforms.html, download.html
   ========================================================== */

/* ==========================================================
   FONTS — self-hosted, subset by language, variable weight
   ========================================================== */

/* Source Serif 4 — Latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-latin-opsz.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-latin-opsz-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Serif 4 — Latin Extended (covers ES, FR, DE diacritics) */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-latin-ext-opsz.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-latin-ext-opsz-italic.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Serif 4 — Cyrillic (RU, UK) */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-cyrillic-opsz.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-serif-4-cyrillic-opsz-italic.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter — Latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter — Latin Extended */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-ext-wght.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — Cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-cyrillic-wght.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* JetBrains Mono — Latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-latin-wght.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — Cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-cyrillic-wght.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ==========================================================
   DESIGN TOKENS
   ========================================================== */
:root {
  --bg:             #F7F2E8;
  --bg-deeper:      #EFE8D8;
  --bg-darker:      #E8DFCA;

  --ink:            #1F3A52;
  --ink-soft:       #496982;
  --ink-fade:       #7D94A8;
  --ink-ghost:      #B4C2CF;

  --accent:         #C45D38;
  --accent-deep:    #A84B28;
  --accent-soft:    #E8BFA8;

  --rule:           rgba(31, 58, 82, 0.12);
  --rule-strong:    rgba(31, 58, 82, 0.25);

  --serif:    "Source Serif 4", Georgia, Cambria, Times, serif;
  --sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:     "JetBrains Mono", "Menlo", "Courier New", monospace;
}

/* ==========================================================
   RESET & BASE
   ========================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(196, 93, 56, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(31, 58, 82, 0.02) 0%, transparent 50%);
}

a { color: inherit; }

/* ==========================================================
   NAV
   ========================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(247, 242, 232, 0.78);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.nav.scrolled { border-bottom-color: var(--rule); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

/* Real butterfly logo SVG inlined; dimensions controlled here */
.nav-logo {
  display: inline-block;
  width: 28px;
  height: 19px;
  flex-shrink: 0;
}

.nav-logo svg { display: block; width: 100%; height: 100%; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  /* Anchor the language dropdown to the button's right edge: JS
     inserts the menu as a sibling of `.nav-lang` inside `.nav-links`,
     and menu uses `position: absolute; right: 0`. Without a relative
     ancestor closer than `.nav` (which is sticky and full-width),
     `right: 0` snaps to the viewport's right edge instead of the
     button's. `.nav-links` is exactly the right span — its right
     edge coincides with the button's right edge (button is the
     last flex item, gap applies between items only). */
  position: relative;
}

/* The three destination links live in `.nav-menu` so the mobile hamburger
   can toggle them independently of the always-visible language button.
   On desktop it's just an inline flex group (same 36px rhythm as before). */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color 180ms ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-links a.active {
  color: var(--ink);
  position: relative;
}
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 2px;
  background: var(--accent);
}

/* Mobile hamburger — injected by main.js, shown only <=600px (see media
   query below). Hidden on desktop where the inline nav-links show. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin: -8px 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 160ms ease;
}
.nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-lang {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  cursor: pointer;
  background: transparent;
  transition: border-color 180ms ease;
  position: relative;
}
.nav-lang:hover { border-color: var(--rule-strong); }
.nav-lang[aria-expanded="true"] { border-color: var(--rule-strong); }

/* Language dropdown panel */
.nav-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  min-width: 180px;
  z-index: 50;
  font-family: var(--sans);
}
.nav-lang-menu[hidden] { display: none; }
.nav-lang-menu li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  transition: background 120ms ease, color 120ms ease;
}
.nav-lang-menu li:hover {
  background: var(--rule);
  color: var(--ink);
}
.nav-lang-menu li.is-current {
  color: var(--ink);
  font-weight: 600;
}
.nav-lang-menu .nav-lang-code {
  display: inline-block;
  width: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.nav-lang-menu .nav-lang-name { flex: 1; }

/* Footer language list — wired up via JS through data-lang. The list is
   anchored, so we override link styling for clickable swaps and show
   the current one in bold. */
.footer-col [data-lang] { cursor: pointer; }
.footer-col [data-lang].is-current { color: var(--ink); font-weight: 600; }

/* ==========================================================
   LAYOUT
   ========================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}

.container-narrow {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}

/* ==========================================================
   PAGE HEADER (used on features, platforms, download)
   ========================================================== */
.page-header {
  padding: 80px 0 60px;
  position: relative;
  z-index: 2;
}

.page-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.page-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 14px;
  transform: translateY(-1px);
}

.page-title {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 28px;
}

.page-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.page-subtitle {
  font-family: var(--serif);
  font-size: clamp(19px, 1.4vw, 22px);
  color: var(--ink-soft);
  max-width: 56ch;
  line-height: 1.55;
  margin-bottom: 40px;
}

.page-intro {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 60ch;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}

.page-intro p { margin-bottom: 16px; }
.page-intro p:last-child { margin-bottom: 0; }
.page-intro strong { color: var(--ink); font-weight: 500; }

.page-intro a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color 180ms;
}
.page-intro a:hover {
  border-bottom-color: var(--accent);
}

/* ==========================================================
   HERO (index.html only)
   ========================================================== */
.hero {
  padding: 64px 0 24px;
  position: relative;
  z-index: 2;
}

/* Hero is a two-column grid on desktop: text on the left, the line-art
   illustration on the right. Stacks below 920px so the illustration goes
   under the CTAs on tablets and phones. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: center;
}
.hero-content { min-width: 0; }
.hero-devices { width: 100%; max-width: 320px; justify-self: end; }
.hero-devices svg { width: 100%; height: auto; display: block; }

@media (max-width: 920px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-devices { justify-self: center; max-width: 280px; }
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeIn 700ms ease 100ms forwards;
}
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 14px;
  transform: translateY(-1px);
}

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 56px;
  max-width: 14ch;
  opacity: 0;
  animation: fadeIn 900ms ease 200ms forwards;
}
.hero-headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.hero-headline .punct {
  color: var(--accent);
  font-weight: 400;
}
.dropcap {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--accent);
}

.hero-subtitle {
  font-family: var(--serif);
  font-size: clamp(19px, 1.4vw, 23px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44ch;
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeIn 900ms ease 400ms forwards;
}
.hero-subtitle strong {
  color: var(--ink);
  font-weight: 500;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeIn 900ms ease 600ms forwards;
}

/* Reading strip under hero */
.reading-strip {
  padding: 0 0 80px;
  opacity: 0;
  animation: fadeIn 900ms ease 900ms forwards;
}

.reading-strip-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

.reading-strip-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-right: 8px;
}

.reading-strip-devices {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.device {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
}

/* Inline brand-name accent. Applied automatically by main.js to occurrences
   of Mac, iPad, iPhone, MacBook, macOS, iPadOS, iOS in body prose — solves
   the visual collision between Latin "Mac" and Cyrillic "Мас", and gives
   device names a consistent visual presence across all six languages. */
.dev {
  color: var(--accent);
  font-weight: 500;
}


.device-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
  position: relative;
}

.device-rule::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(0, -50%);
  animation: travel 6s ease-in-out infinite;
}

.reading-strip-caption {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-fade);
  margin-left: auto;
}

/* ==========================================================
   CTAs
   ========================================================== */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: background 200ms ease, transform 200ms ease;
}
.cta-primary:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
}
.cta-primary .price {
  font-weight: 600;
  opacity: 0.85;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid rgba(247, 242, 232, 0.25);
}

.cta-secondary {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 16px 4px;
  border-bottom: 1px solid var(--rule-strong);
  transition: color 180ms ease, border-color 180ms ease;
}
.cta-secondary:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.cta-secondary::after {
  content: " →";
  color: var(--accent);
  font-weight: 600;
}

/* ==========================================================
   COMMON SECTION COMPONENTS
   ========================================================== */
section { position: relative; z-index: 2; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 14px;
  transform: translateY(-1px);
}

.h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 40px;
  max-width: 18ch;
}

.h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.prose p {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 54ch;
}

.prose p strong, .prose li strong { color: var(--ink); font-weight: 500; }
.prose p em, .prose li em { font-style: italic; color: var(--ink); }

.prose h2 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 40px;
  margin-bottom: 12px;
}

.prose h2:first-child { margin-top: 0; }

.prose ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.prose li {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink-soft);
  padding: 6px 0 6px 18px;
  position: relative;
  max-width: 54ch;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================
   INDEX-SPECIFIC SECTIONS
   ========================================================== */
.index-section { padding: 120px 0; }

/* Device setup triptych in section 2 */
.device-setup {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

/* Mac (wide/landscape) gets its own full-width row on top; iPad + iPhone
   (both portrait) sit in two columns below. */
.device-mac { text-align: center; }
.device-mac h4 { justify-content: center; }
.device-mac p { max-width: 540px; margin-left: auto; margin-right: auto; }

.device-setup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 52px;
}

.device-setup-item h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.device-setup-item p {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.device-setup-item p em {
  font-style: italic;
  color: var(--ink);
}

/* Directly-visible device shots on the home page (the three devices sit on a
   common baseline so their captions line up; not lightbox-clickable). */
.device-setup-item .device-shot {
  height: 400px;
  margin: 4px 0 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.device-setup-item .device-shot img {
  max-height: 360px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* iPad is the larger device — render it a touch taller than the iPhone (both
   bottom-aligned in the same 400px box, so the captions still line up). #71 */
.device-ipad .device-shot img { max-height: 400px; }

/* Mac shot — full width on its own row (landscape), not height-capped. */
.device-mac .device-shot { height: auto; margin-bottom: 18px; }
.device-mac .device-shot img {
  width: 100%;
  max-width: 860px;
  max-height: none;
  height: auto;
}
/* On desktop the Mac shot breaks out wider than the reading column (matching the
   embedded feature screenshots) so the two-page spread reads big. Capped to the
   viewport so the slim side padding can't trigger horizontal scroll. */
@media (min-width: 960px) {
  .device-mac .device-shot {
    width: calc(100% + 160px);
    max-width: calc(100vw - 96px);
    margin-left: -80px;
    margin-right: -80px;
  }
  .device-mac .device-shot img { max-width: 100%; }
}

.device-setup-item h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
/* Center each column (heading + caption) over its device. */
.device-setup-item { text-align: center; }
.device-setup-item .device-shot { cursor: zoom-in; }

.callout-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: auto;
  padding: 0;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 180ms, border-color 180ms;
  animation: callout-pulse 2.4s ease-in-out infinite;
}

.callout-dot::before {
  content: '';
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--accent-soft);
}

.callout-dot:hover {
  background: var(--accent);
  animation: none;
}

.callout-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@keyframes callout-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 93, 56, 0.3); }
  50%      { box-shadow: 0 0 0 5px rgba(196, 93, 56, 0); }
}

/* Pull-quote callout */
.callout {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 40px 0 16px 32px;
  border-left: 2px solid var(--accent);
  margin: 48px 0;
  max-width: 38ch;
}

/* Theme strip on index typography section.
   Each row: a left-aligned theme label + a pill chip whose segments
   show real (bg, text) pairs from the app. Each segment renders 'Aa'
   in the paired text color, so the chip becomes a live preview of how
   that tone reads. Sample-screenshot callouts float outside the chip
   on the right of selected rows. */
.theme-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 48px 0;
  max-width: 420px;
}

.theme-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.theme-label {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  width: 96px;
  flex-shrink: 0;
}

.theme-chip {
  flex: 1;
  display: flex;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.theme-chip .seg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* Terminal: monospace 'Aa' for the Norton-Commander vibe. */
.theme-chip.terminal {
  font-family: var(--mono);
}

/* Callout dot floats outside the chip on the right; existing connector
   ::before line ends exactly at the row's right edge with this offset. */
.theme-row .callout-dot {
  position: absolute;
  left: calc(100% + 36px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* Inline section callout — sits after the final period of a prose
   paragraph. Margin gives the 32px connector line room to fit in the
   gap between text and dot without overlapping the closing word. */
.callout-dot.section-callout {
  vertical-align: middle;
  margin-left: 44px;
  position: relative;
  top: -2px;
}

/* Section divider — a full-container-width "vignette" between thematic
   sections. Thin rule lines extend from the container edges with small
   diamond accents at their inner ends, then a curved flourish that
   sweeps up to meet the brand butterfly mark in the center. The wider
   horizontal weight balances the left-aligned narrow text columns the
   site uses for prose. */
.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  margin: 72px auto;
  padding: 0 48px;
  color: var(--ink-fade);
  pointer-events: none;
  box-sizing: border-box;
}
.section-divider .rule {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}
.section-divider .rule .line {
  flex: 1;
  height: 1px;
  background: currentColor;
}
.section-divider .rule .dot {
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.section-divider .dot-sm { width: 3px; height: 3px; }
.section-divider .dot-md { width: 5px; height: 5px; }
.section-divider .dot-lg { width: 8px; height: 8px; }
.section-divider .mark {
  width: 36px;
  height: 26px;
  flex-shrink: 0;
  opacity: 0.85;
  margin: 0 8px;
}
@media (max-width: 720px) {
  .section-divider { padding: 0 24px; margin: 56px auto; }
}


/* Spec list pattern */
.spec-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 20px 40px;
  margin: 48px 0;
  max-width: 700px;
}

.spec-list dt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 4px;
}

.spec-list dd {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.spec-list dd em {
  font-style: italic;
  color: var(--ink);
}

/* Two-apps section on index */
.two-apps {
  padding: 120px 0;
  background: var(--bg-deeper);
}

.two-apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 64px;
}

.app-card {
  border-left: 2px solid var(--rule-strong);
  padding-left: 40px;
}

.app-card.paid {
  border-left-color: var(--accent);
}

.app-card-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}

.app-card-price {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

.app-card-price strong {
  color: var(--accent);
  font-weight: 600;
}

.app-card-desc {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

/* Footnote inside .app-card-desc (e.g. the "* within the major version"
   caveat on the paid card). Block-display lets it sit as its own line
   with a top margin against the desc body; smaller font + extra opacity
   set the visual hierarchy so it doesn't compete with the desc copy. */
.app-card-footnote {
  display: block;
  margin-top: 18px;
  font-size: 0.82em;
  line-height: 1.5;
  opacity: 0.72;
}

.app-card-cta {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.005em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}

.app-card-cta::after { content: " →"; color: var(--accent); }
.app-card-cta:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ==========================================================
   FEATURES PAGE — section structure
   ========================================================== */
section.feature-section { padding: 80px 0; }

.section-header { margin-bottom: 56px; }

.section-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.section-number {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--ink-fade);
  margin-right: 12px;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.section-h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 24px;
}

.section-h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.section-intro {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}

.section-intro strong { color: var(--ink); font-weight: 500; }

/* CR-only banner */
.cr-only-banner {
  margin-top: 32px;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 8px;
  max-width: 56ch;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cr-only-banner .marker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--accent);
  color: var(--bg);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* CR-only sections — slightly different bg */
.feature-section.cr-only {
  background: var(--bg-deeper);
  margin: 60px 0;
  padding: 100px 0;
}

/* Feature blocks (H3 + content) */
.feature {
  padding: 32px 0;
}

.feature:first-of-type {
  border-top: none;
  padding-top: 0;
}

.feature-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.feature-h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.feature-h3 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}


/* Badges next to H3 — CR/JR colored by logo wings */
.badge-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 11px 4px 6px;
  border-radius: 100px;
  line-height: 1.4;
  white-space: nowrap;
  text-transform: uppercase;
}

.badge::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.badge.cr {
  background: #DCE7F0;
  color: #1F3A52;
  border: 1px solid #B8CCDD;
}

.badge.cr::before {
  background-image: url('../img/icon-cr.svg');
}

.badge.jr {
  background: #F5DDD0;
  color: #A84B28;
  border: 1px solid #E8BFA8;
}

.badge.jr::before {
  background-image: url('../img/icon-jr.svg');
}

/* Feature body */
.feature-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 64ch;
}

.feature-body h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 32px;
  margin-bottom: 8px;
}

.feature-body h3:first-child { margin-top: 0; }

.feature-body p { margin-bottom: 16px; }
.feature-body p:last-child { margin-bottom: 0; }
.feature-body strong { color: var(--ink); font-weight: 500; }
.feature-body em { font-style: italic; color: var(--ink); }

.feature-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
}
.feature-body a:hover { border-bottom-color: var(--accent); }

/* Caveat / footnote-style aside inside a feature body */
.feature-note {
  margin-top: 20px;
  padding: 12px 16px;
  border-left: 2px solid var(--rule-strong);
  background: var(--bg-deeper);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  color: var(--ink-fade);
}
.feature-note em { color: var(--ink-soft); }

/* Feature list pattern */
.feature-list { list-style: none; margin-top: 12px; }

.feature-list li {
  padding: 10px 0;
  padding-left: 18px;
  position: relative;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.feature-list li strong {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
  margin-right: 8px;
}

.feature-list li em { font-style: italic; color: var(--ink); }

/* Callout dot sitting inline right after the chip in a feature-list bullet:
   no auto-margin (parent isn't flex), small breathing space, suppressed
   connector line (the 32px ::before line is designed for right-edge layouts
   and would overlap the chip text here). Vertically centered against the
   chip's cap-height with a small downward nudge — the dot is 14px tall, the
   chip is 12px UPPERCASE; align-baseline puts the dot floating above. */
.feature-list li .callout-dot {
  margin-left: 0;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.feature-list li .callout-dot::before { display: none; }

/* Inline modifier for prose-style bullets where <strong> is a
   sentence subject (followed by a comma, em-dash, or colon) — not
   a chip label. Resets the uppercase / sans / margin-right chip
   styling so the surrounding punctuation reads naturally. Used on
   privacy.html where the bullets are "<strong>Your own devices</strong>,
   locally — …" rather than the features.html "<strong>Label</strong>
   Description" chip+text pattern. */
.feature-list--inline li strong {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  display: inline;
  margin-right: 0;
}

/* Code inline */
code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--accent);
  background: rgba(196, 93, 56, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Screenshot placeholders — clickable for lightbox */
.screenshot,
.screenshot-frame {
  margin: 32px 0 8px;
  background: var(--bg-deeper);
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  padding: 60px 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-fade);
  line-height: 1.6;
  max-width: 64ch;
  cursor: zoom-in;
  transition: border-color 180ms, background 180ms;
}

.screenshot:hover,
.screenshot-frame:hover {
  border-color: var(--accent-soft);
  background: var(--bg);
}

.screenshot-frame {
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4 / 3;
  max-width: none;
}

.screenshot-frame.tall {
  aspect-ratio: 3 / 4;
}

.screenshot-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.screenshot-caption {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-fade);
  letter-spacing: 0.04em;
}

.screenshot-caption .lang-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(196, 93, 56, 0.08);
  padding: 2px 8px;
  border-radius: 100px;
  margin-left: 8px;
}

/* Once real screenshots are added: img inside screenshot frame */
.screenshot img,
.screenshot-frame img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Real screenshots are captured WITH their own macOS window chrome + window
   shadow, so the placeholder frame (dashed border, deep-bg fill, big padding,
   forced aspect-ratio) would double up. When a frame actually holds an <img>,
   strip the frame box and the img's own rounding — let the screenshot's chrome
   be the only frame. The dashed placeholder boxes (no <img>) are untouched. */
.screenshot:has(img),
.screenshot-frame:has(img) {
  background: none;
  border: none;
  padding: 0;
  aspect-ratio: auto;
  max-width: 100%;   /* fill the content column (override the 64ch mono cap) */
}

/* Embedded screenshots break out a touch wider than the reading column on
   desktop, so UI detail stays legible. Capped to the viewport so the slim
   side padding can't trigger horizontal scroll. */
@media (min-width: 960px) {
  .feature .screenshot:has(img),
  .feature .screenshot-frame:has(img) {
    width: calc(100% + 160px);
    max-width: calc(100vw - 96px);
    margin-left: -80px;
    margin-right: -80px;
  }
}

.screenshot:has(img) img,
.screenshot-frame:has(img) img {
  /* Window captures are taken as flat rectangles (square corners); round them
     here. Harmless on device-framed shots — the radius falls in their
     transparent margin. */
  border-radius: 10px;
}

/* Smooth image loading. The width/height attrs reserve the aspect box (no
   layout shift); while the image decodes we show a spinner, then fade it in on
   load — kills the "old/partial image then pop" on slow (4G) connections.
   Gated on `.js` so images still display if scripting is off. */
@keyframes cr-spin { to { transform: rotate(360deg); } }

.js .screenshot:has(img),
.js .screenshot-frame:has(img),
.js .device-shot:has(img) { position: relative; }

.js .screenshot img,
.js .screenshot-frame img,
.js .device-shot img {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.js .screenshot img.is-loaded,
.js .screenshot-frame img.is-loaded,
.js .device-shot img.is-loaded { opacity: 1; }

.js .screenshot:has(img:not(.is-loaded))::after,
.js .screenshot-frame:has(img:not(.is-loaded))::after,
.js .device-shot:has(img:not(.is-loaded))::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 3px solid rgba(34, 48, 61, 0.15);
  border-top-color: var(--accent, #c45d38);
  animation: cr-spin 0.8s linear infinite;
}

/* Platforms summary on features page */
.platforms-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 32px 0;
}

.platform-summary-card h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.platform-summary-card p {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.platform-summary-card p strong { color: var(--ink); font-weight: 500; }

.platforms-link {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.platforms-link::after { content: " →"; color: var(--accent); }

/* Interface that fits — closing section */
.interface-fits {
  background: var(--bg-deeper);
  padding: 120px 0;
  margin-top: 80px;
}

.interface-fits .section-h2 { margin-bottom: 32px; }
.interface-fits .section-intro { margin-bottom: 56px; }

.interface-fits-block { margin: 56px 0; }

.interface-fits-block h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 16px;
}

.interface-fits-block h4 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

.interface-fits-block p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 64ch;
  margin-bottom: 16px;
}

/* Legend block on features page */
.legend {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--bg-deeper);
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 2.2;
  max-width: 60ch;
}

.legend strong { color: var(--ink); font-weight: 500; }

.legend .badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px 3px 6px;
  border-radius: 100px;
  vertical-align: middle;
}

.legend .badge-inline::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.legend .badge-inline.cr {
  background: #DCE7F0;
  color: #1F3A52;
  border: 1px solid #B8CCDD;
}

.legend .badge-inline.cr::before {
  background-image: url('../img/icon-cr.svg');
}

.legend .badge-inline.jr {
  background: #F5DDD0;
  color: #A84B28;
  border: 1px solid #E8BFA8;
}

.legend .badge-inline.jr::before {
  background-image: url('../img/icon-jr.svg');
}

/* ==========================================================
   PLATFORMS PAGE
   ========================================================== */
.platform-block { padding: 100px 0; }

.platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.platform-block.reverse .platform-text { order: 2; }
.platform-block.reverse .platform-visual { order: 1; }

.platform-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.platform-title {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 28px;
}

.platform-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.platform-intro {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 32px;
}

.platform-intro strong { color: var(--ink); font-weight: 500; }
.platform-intro em { font-style: italic; color: var(--ink); }

.platform-list-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-bottom: 16px;
}

.platform-list { list-style: none; }

.platform-list li {
  padding: 8px 0 8px 18px;
  position: relative;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.platform-list li:first-child { border-top: none; }

.platform-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.platform-list li strong {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
  margin-right: 6px;
}

.platform-closing {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 32px;
}

.platform-divider {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}
.platform-divider::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--rule);
}

/* Shared cross-platform block on platforms page (between per-platform and table) */
.platform-shared { padding: 60px 0 80px; }

.shared-content { max-width: 720px; }

.shared-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.shared-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 24px;
}

.shared-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.shared-intro {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.shared-intro strong { color: var(--ink); font-weight: 500; }

.shared-list li strong { display: block; margin-bottom: 4px; }

/* Framed iPad settings shot under the shared list — the device frame + shadow
   are baked into the webp (transparent margin), so this only centers and caps
   its width. Click opens the lightbox (wired via .device-shot in main.js). */
.shared-shot { max-width: 100%; margin: 48px auto 0; cursor: zoom-in; }
.shared-shot img { display: block; width: 100%; height: auto; }
/* On wider viewports, break the landscape shot out of the 720px text column to
   fill the whole container so it reads big. The left edge stays aligned with the
   text column (container content edge); it just extends rightward to the
   container edge. Capped to the container content width so it never overflows. */
@media (min-width: 760px) {
  .shared-shot {
    width: calc(100vw - 96px);
    max-width: 1104px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Comparison table on platforms page */
.table-section {
  background: var(--bg-deeper);
  padding: 120px 0;
  margin-top: 60px;
}

.table-header { margin-bottom: 56px; }

.table-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.table-title {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 24px;
}

.table-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.table-intro {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}

.feature-table-wrap {
  margin-top: 56px;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
}

.feature-table thead { background: var(--bg-darker); }

.feature-table thead th {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 18px 20px;
  text-align: left;
  border-bottom: 1px solid var(--bg-deeper);
}

.feature-table thead th:not(:first-child) { text-align: center; }

.feature-table tbody td {
  padding: 14px 20px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
  vertical-align: top;
  border-bottom: 1px solid var(--bg-deeper);
}

.feature-table tbody td:first-child {
  font-weight: 500;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  width: 32%;
  letter-spacing: -0.005em;
}

.feature-table tbody td:not(:first-child) {
  text-align: center;
  font-family: var(--serif);
  font-size: 14px;
}

.feature-table .check {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
}

.feature-table .dash {
  color: var(--ink-ghost);
  font-family: var(--mono);
  font-weight: 400;
}

.feature-table tbody tr:hover td {
  background: rgba(196, 93, 56, 0.025);
}

.table-footer {
  margin-top: 32px;
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 64ch;
}

.table-footer strong { color: var(--ink); font-weight: 500; font-style: normal; }

/* Purchase card on platforms page */
.purchase-section { padding: 120px 0; }

.purchase-card {
  border-left: 2px solid var(--accent);
  padding-left: 40px;
  max-width: 720px;
}

.purchase-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.purchase-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.purchase-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.purchase-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.purchase-body strong { color: var(--ink); font-weight: 500; }

.purchase-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
}
.purchase-body a:hover { border-bottom-color: var(--accent); }

/* ==========================================================
   DOWNLOAD PAGE
   ========================================================== */
.two-paths {
  padding: 80px 0 100px;
  position: relative;
  z-index: 2;
}

.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.path-card {
  padding-left: 40px;
  border-left: 2px solid var(--rule-strong);
}

.path-card.paid { border-left-color: var(--accent); }

.path-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 20px;
}

.path-price {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.path-price.free {
  color: var(--accent);
  font-style: italic;
}

.path-price-sub {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 32px;
}

.path-desc {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

.path-desc strong { color: var(--ink); font-weight: 500; }

.path-store-button {
  display: inline-block;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: background 200ms, transform 200ms;
}

.path-store-button:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
}

.path-store-button-note {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-fade);
  margin-top: 12px;
  font-style: italic;
}

/* Generic "section" on download page */
.section { padding: 100px 0; position: relative; z-index: 2; }
.section.alt-bg { background: var(--bg-deeper); }

/* Included list on download */
.included-list { list-style: none; margin-top: 16px; }

.included-list li {
  padding: 18px 0 18px 24px;
  position: relative;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}
.included-list li:first-child { border-top: none; padding-top: 0; }

.included-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  width: 12px;
  height: 1px;
  background: var(--accent);
}
.included-list li:first-child::before { top: 12px; }

.included-list li strong {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
}

.included-list li em { font-style: italic; color: var(--ink); }

.included-note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.55;
}

.included-note strong { color: var(--ink); font-style: normal; font-weight: 500; }

/* System requirements table */
.requirements-table {
  margin-top: 40px;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule);
  max-width: 540px;
}

.requirements-table table { width: 100%; border-collapse: collapse; }

.requirements-table tbody td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--bg-deeper);
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-soft);
}

.requirements-table tbody td:first-child {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  width: 35%;
}

.requirements-note {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  font-style: italic;
  max-width: 56ch;
}

.requirements-note a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
}
.requirements-note a:hover { border-bottom-color: var(--accent); }

/* Comparison table on download */
.comparison-wrap {
  margin-top: 40px;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
}

.comparison-table thead { background: var(--bg-darker); }

.comparison-table thead th {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 18px 20px;
  text-align: left;
  border-bottom: 1px solid var(--bg-deeper);
}

.comparison-table thead th:not(:first-child) {
  text-align: center;
  width: 16%;
}

.comparison-table tbody td {
  padding: 12px 20px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--bg-deeper);
  vertical-align: middle;
}

.comparison-table tbody td:first-child {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.comparison-table tbody td:not(:first-child) {
  text-align: center;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
}

.comparison-table .check { color: var(--accent); }
.comparison-table .dash { color: var(--ink-ghost); font-weight: 400; }

.comparison-table tr.divider td {
  background: var(--bg-deeper);
  padding: 14px 20px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--bg-deeper);
  border-top: 1px solid var(--bg-deeper);
  text-align: left;
}

.comparison-table tr.divider td::before {
  content: "↓ ";
  color: var(--accent);
}

.comparison-table tr.intro-row td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--bg-deeper);
  font-size: 14px;
}

.comparison-table tr.intro-row td:first-child {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.comparison-table tr.intro-row td:not(:first-child) {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 400;
}

.comparison-table tr.intro-row td strong {
  color: var(--ink);
  font-weight: 600;
}

.comparison-footer {
  margin-top: 32px;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
}

.comparison-footer strong { color: var(--ink); font-weight: 500; font-style: normal; }

/* FAQ */
.faq-list { margin-top: 24px; }

.faq-item {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}

.faq-item:first-child { border-top: none; padding-top: 16px; }

.faq-question {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 16px;
}

.faq-question em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

.faq-answer {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
}

.faq-answer p { margin-bottom: 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--ink); font-weight: 500; }
.faq-answer em { font-style: italic; color: var(--ink); }

.faq-answer a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
}
.faq-answer a:hover { border-bottom-color: var(--accent); }

/* About on download */
.about-section { padding: 100px 0; }

.about-card {
  padding-left: 40px;
  border-left: 2px solid var(--accent);
  max-width: 720px;
}

.about-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.about-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.about-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.about-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.about-body strong { color: var(--ink); font-weight: 500; }
.about-body em { font-style: italic; color: var(--ink); }

.about-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
}
.about-body a:hover { border-bottom-color: var(--accent); }

/* ==========================================================
   FINAL CTA (used on all pages)
   ========================================================== */
.final-cta {
  padding: 100px 0 120px;
  text-align: center;
}

.final-cta h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 300;
  margin: 0 auto 20px;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.final-cta h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.final-cta p {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink-soft);
  margin-bottom: 48px;
  font-style: italic;
}

.final-cta-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  /* inline-flex collapses to content width; text-align: center on the
     parent .final-cta then horizontally centers the whole group */
}

/* ==========================================================
   CONTACT FORM
   ========================================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg-deeper);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field select {
  height: 46px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.form-submit {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.15s ease;
}

.form-submit:hover { opacity: 0.85; }

.contact-note {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 40px;
  max-width: 520px;
}

.contact-note a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
}

.contact-note a:hover { border-bottom-color: var(--accent); }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  padding: 80px 48px 48px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
  max-width: 1200px;
}

.footer-brand .brand-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 16px;
}

.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 32ch;
  line-height: 1.5;
}

.footer-col h5 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-col a:hover { color: var(--ink); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-fade);
  max-width: 1200px;
}

/* Translation-feedback invite — only the machine-translated locales (es/fr/de)
   carry text; en/ru/uk leave the key empty, so :empty collapses the line. */
.footer-mt-note {
  flex: 0 0 100%;
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-fade);
  opacity: 0.8;
}
.footer-mt-note:empty { display: none; }
.footer-mt-note a { color: inherit; text-decoration: underline; }

/* ==========================================================
   LIGHTBOX (for screenshots)
   ========================================================== */
.lightbox {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
}

.lightbox::backdrop {
  background: rgba(31, 58, 82, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Round the square-cornered window captures; keep no extra drop shadow
     (device-framed shots carry their own, and the radius is invisible in their
     transparent margin). Larger here than inline since the lightbox shows the
     image near full size, matching the macOS window corner. */
  border-radius: 18px;
  box-shadow: none;
  /* Hidden until the new image has fully decoded, then fade in — so the
     previously-opened image never flashes while the new one downloads. */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox-content img.is-loaded { opacity: 1; }
/* While loading, hide the (old) image INSTANTLY — no fade-out — so the
   previously-opened image never flashes before the new one fades in. */
.lightbox.is-loading .lightbox-content img { opacity: 0; transition: none; }

/* Spinner shown while the lightbox image loads */
.lightbox-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: cr-spin 0.8s linear infinite;
}
.lightbox.is-loading .lightbox-spinner { display: block; }

.lightbox-close {
  position: fixed;
  top: 24px;
  right: 24px;
  background: var(--bg);
  color: var(--ink);
  border: none;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1;
}

.lightbox-close:hover { background: var(--accent); color: var(--bg); }

/* ==========================================================
   ANIMATIONS
   ========================================================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes travel {
  0%   { left: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  45%  { left: 50%; }
  50%  { left: 50%; opacity: 1; }
  55%  { left: 50%; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .device-rule::before { animation: none; left: 50%; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 900px) {
  .nav-inner { padding: 18px 24px; }
  .container, .container-narrow, .platform-divider {
    padding: 0 24px;
  }
  .page-header { padding: 48px 0 40px; }
  .hero { padding: 48px 0 60px; }
  .index-section { padding: 80px 0; }
  section.feature-section { padding: 60px 0; }
  .feature-section.cr-only,
  .interface-fits { padding: 80px 0; }
  .platform-block { padding: 60px 0; }
  .table-section, .purchase-section,
  .two-paths, .section, .about-section { padding: 60px 0; }
  .section-header { margin-bottom: 40px; }
  .feature { padding: 28px 0; }
  .feature-h3 { font-size: 22px; }
  .feature-body, .feature-list li { font-size: 16px; }
  .h2 { font-size: 40px; margin-bottom: 32px; }
  .prose p, .prose li { font-size: 18px; max-width: none; }
  .prose h2 { font-size: 20px; }
  .spec-list { grid-template-columns: 1fr; gap: 4px; }
  .spec-list dt { padding-top: 20px; }
  .device-setup-row { grid-template-columns: 1fr; gap: 32px; }
  .platforms-summary { grid-template-columns: 1fr; gap: 32px; }
  .two-apps-grid { grid-template-columns: 1fr; gap: 48px; }
  .platform-grid { grid-template-columns: 1fr; gap: 40px; }
  .platform-block.reverse .platform-text { order: 2; }
  .platform-block.reverse .platform-visual { order: 1; }
  .paths-grid { grid-template-columns: 1fr; gap: 48px; }
  .path-card { padding-left: 24px; }
  .path-price { font-size: 44px; }
  .about-card { padding-left: 24px; }
  .faq-question { font-size: 19px; }
  .faq-answer { font-size: 16px; }
  .feature-table tbody td { padding: 12px 14px; font-size: 14px; }
  .feature-table tbody td:first-child { font-size: 12px; }
  .feature-table thead th { padding: 14px; font-size: 10px; }
  .footer { padding: 60px 24px 32px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .legend { font-size: 14px; padding: 16px 18px; }
  .callout { font-size: 22px; padding-left: 24px; margin: 32px 0; }
}

@media (max-width: 600px) {
  .nav-toggle { display: flex; }
  /* nav-links stays an inline row: language button + hamburger side by side. */
  .nav-links { gap: 14px; }
  /* Only the destination links collapse into a dropdown under the hamburger. */
  .nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 190px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(26, 22, 14, 0.16);
    display: none;
  }
  .nav.nav-open .nav-menu { display: flex; }
  .nav-menu a { padding: 11px 14px; font-size: 15px; border-radius: 9px; }
  .nav-menu a:hover { background: var(--bg-deeper); color: var(--ink); }
  .nav-menu a.active { background: var(--bg-deeper); }
  .nav-menu a.active::after { display: none; }
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: 20px; }
  .reading-strip-inner { flex-wrap: wrap; gap: 12px; }
  .reading-strip-caption { width: 100%; margin-left: 0; }
  .final-cta-buttons { flex-direction: column; align-items: center; gap: 20px; }
  .cr-only-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .feature-table-wrap, .comparison-wrap, .requirements-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .feature-table { min-width: 540px; }
  .comparison-table { min-width: 480px; }
  .requirements-table { max-width: none; }
  .included-list li { font-size: 16px; }
  .lightbox-content { padding: 16px; }
  .lightbox-close { top: 16px; right: 16px; }
}

@media (max-width: 480px) {
  .nav-brand span:last-child { display: none; }
}

/* Features-page right-side TOC. Fixed sticky position, hidden below 1280px
   where the right gutter narrows enough that the sidebar would overlap
   the main column. Subsections (h3/h4 level) hidden by default and shown
   only under the currently-active section (accordion). */
.features-toc {
  position: fixed;
  top: 120px;
  right: 32px;
  width: 200px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  z-index: 50;
  scrollbar-width: thin;
}

.features-toc nav,
.features-toc ul { margin: 0; padding: 0; }
.features-toc ul { list-style: none; }

.features-toc > nav > ul > li { margin-bottom: 4px; }

.features-toc > nav > ul > li > a {
  display: block;
  padding: 6px 0 6px 12px;
  margin-left: -12px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-left: 2px solid transparent;
  transition: color 180ms, border-color 180ms;
}

/* TOC labels carry <em>...</em> from the source headings — flatten styling
   inside the TOC so the chip-uppercase reads consistently. */
.features-toc > nav > ul > li > a em {
  font-style: normal;
  color: inherit;
}

.features-toc > nav > ul > li.active > a {
  color: var(--accent);
  border-left-color: var(--accent);
}

.features-toc > nav > ul > li:not(.active) > a:hover { color: var(--ink-soft); }

.features-toc ul ul {
  display: none;
  margin: 4px 0 10px 0;
  padding-left: 0;
}

.features-toc > nav > ul > li.active > ul { display: block; }

.features-toc ul ul a {
  display: block;
  padding: 3px 0 3px 12px;
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.4;
  border-left: 1px solid var(--rule);
  transition: color 180ms, border-color 180ms;
}

.features-toc ul ul a em {
  font-style: normal;
  color: inherit;
}

.features-toc ul ul a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}

.features-toc ul ul a:hover {
  color: var(--ink);
}

@media (max-width: 1280px) {
  .features-toc { display: none; }
}