:root {
  --paper: #e9e3d9;
  --paper-alt: #f0ede8;
  --ink: #16181c;
  --muted: #6f6a64;
  --accent: #7c5cff;
  --accent-dark: #5a3de8;
  --accent-secondary: #5c8cff;
  --accent-weak: #ece8ff;
  --accent-gradient: linear-gradient(135deg, #7c5cff 0%, #5c8cff 100%);
  --line: #e3dbcf;
  --card: #fff;
  --dark-bg: #0f0f18;
  --dark-card: #1a1a28;
  --dark-border: #2a2a3a;
  --dark-text: #f0f0f5;
  --dark-muted: #9090a0;
  --shadow-sm: 0 1px 3px rgba(17, 20, 24, 0.04), 0 4px 12px rgba(17, 20, 24, 0.06);
  --shadow: 0 4px 16px rgba(17, 20, 24, 0.08), 0 12px 40px rgba(17, 20, 24, 0.06);
  --shadow-lg: 0 8px 30px rgba(17, 20, 24, 0.10), 0 24px 60px rgba(17, 20, 24, 0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --max-width: 1100px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --section-gap: 80px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* The purple/blue wash that used to sit behind every page is gone: the ground
   is warm paper now, and tinting it violet at two corners fought the one thing
   the palette is for. The accent appears where something is actionable. */

/* ── Layout ── */
.page { max-width: var(--max-width); margin: 0 auto; padding: 0 28px 80px; }

/* ── Header ── */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 16px 0;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.logo {
  font-family: 'Spectral', serif; font-weight: 700; font-size: 22px;
  text-decoration: none; color: var(--ink); letter-spacing: -0.02em;
}
.header-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.site-nav a, .lang-switcher a {
  margin-left: 4px; text-decoration: none; color: var(--muted);
  font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.site-nav a:hover, .lang-switcher a:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.site-nav a[aria-current='page'], .lang-switcher a[aria-current='page'] { color: var(--accent); background: var(--accent-weak); }
.lang-switcher { padding-left: 8px; border-left: 1px solid var(--line); }
/* Account entry. Deliberately the only filled control in the header — it is the
   one action here that leaves the static site for the app. */
.nav-account {
  margin-left: 4px; padding: 6px 15px; border-radius: 999px;
  text-decoration: none; font-size: 13px; font-weight: 600;
  color: #fff; background: var(--accent-gradient); white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: filter var(--transition), transform var(--transition);
}
.nav-account:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ── Hero ── */
.hero { text-align: center; padding: 72px 0 48px; max-width: 760px; margin: 0 auto; }
.hero-title {
  font-family: 'Spectral', serif; font-size: clamp(36px, 5vw, 58px);
  line-height: 1.08; margin: 0 0 20px; letter-spacing: -0.03em;
}
.hero-subtitle { font-size: 18px; color: var(--muted); margin: 0 0 32px; line-height: 1.7; }
.hero .cta-row { justify-content: center; }

/* ── Hero Image ── */
.hero-image {
  margin-top: 48px; margin-left: auto; margin-right: auto;
  max-width: 700px; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(17, 20, 24, 0.18), 0 8px 24px rgba(17, 20, 24, 0.12);
  transition: transform var(--transition), box-shadow var(--transition);
}
.hero-image:hover { transform: translateY(-4px); box-shadow: 0 28px 80px rgba(17, 20, 24, 0.22); }
.hero-image img { width: 100%; height: auto; display: block; }

/* ── Buttons ── */
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 999px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1.5px solid var(--accent); color: var(--accent);
  background: transparent; transition: all var(--transition); cursor: pointer;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(124,92,255,0.15); background: var(--accent-weak); }
.button.primary { background: var(--accent-gradient); border-color: transparent; color: #fff; }
.button.primary:hover { box-shadow: 0 8px 28px rgba(124,92,255,0.35); background: linear-gradient(135deg, #6a48e8, #4a7aee); }

/* ── Trust Strip ── */
.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); margin-top: 8px;
}
.trust-strip > div { padding: 28px 24px; font-size: 14px; line-height: 1.6; color: var(--muted); position: relative; }
.trust-strip > div:not(:last-child)::after { content:''; position:absolute; right:0; top:20%; height:60%; width:1px; background:var(--line); }
.trust-strip strong { display: block; font-size: 15px; margin-bottom: 6px; color: var(--ink); }

/* ── Sections ── */
.section { padding: var(--section-gap) 0 0; }
.section-title {
  font-family: 'Spectral', serif; font-size: 30px; margin: 0 0 32px;
  letter-spacing: -0.015em; line-height: 1.2;
}
.section-subtitle {
  color: var(--muted); font-size: 17px; margin: -20px 0 32px; line-height: 1.6;
}

/* ── Feature Grid with Icons ── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card {
  padding: 28px 24px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 15px; line-height: 1.65;
  color: var(--muted); transition: all var(--transition); position: relative;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(124,92,255,0.25); }
.feature-card strong { display: block; margin-bottom: 8px; font-size: 16px; color: var(--ink); }

.feature-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; margin-bottom: 12px;
  background: transparent; color: var(--accent);
}
.feature-icon svg { width: 20px; height: 20px; }

/* ── Dark Showcase Section ── */
.section-dark {
  margin-left: -28px; margin-right: -28px;
  margin-top: var(--section-gap);
  padding: 56px 28px 64px;
  background: var(--dark-bg);
  color: var(--dark-text);
  position: relative; overflow: hidden;
}
.section-dark::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 800px 400px at 20% 0%, rgba(124,92,255,0.15), transparent 60%),
    radial-gradient(ellipse 600px 300px at 80% 100%, rgba(92,140,255,0.10), transparent 50%);
  pointer-events: none;
}
.section-dark .section-title { color: var(--dark-text); }
.section-dark .section-subtitle { color: var(--dark-muted); }

.section-dark .feature-card {
  background: var(--dark-card); border-color: var(--dark-border); color: var(--dark-muted);
}
.section-dark .feature-card strong { color: var(--dark-text); }
.section-dark .feature-card:hover { border-color: rgba(124,92,255,0.4); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.section-dark .feature-icon { background: transparent; }

/* ── Showcase Image ── */
.showcase-image {
  border-radius: var(--radius); overflow: hidden; margin-bottom: 48px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  max-width: 700px; margin-left: auto; margin-right: auto;
}
.showcase-image img { width: 100%; height: auto; display: block; }

/* ── Screenshots ── */
.screenshots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.screenshot-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: all var(--transition); margin: 0;
}
.screenshot-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.screenshot-card img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.screenshot-card figcaption { margin: 12px 8px 6px; font-size: 13px; color: var(--muted); }

/* ── Steps ── */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.step-card {
  padding: 32px 24px 28px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 15px; line-height: 1.65;
  color: var(--muted); transition: all var(--transition); counter-increment: step;
}
.step-card::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent-gradient);
  color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 16px;
}
.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(124,92,255,0.25); }
.step-card strong { display: block; margin-bottom: 8px; font-size: 16px; color: var(--ink); }

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.faq-card {
  padding: 28px 24px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 15px; line-height: 1.65;
  color: var(--muted); transition: all var(--transition);
}
.faq-card:hover { border-color: rgba(124,92,255,0.2); box-shadow: var(--shadow-sm); }
.faq-card strong { display: block; margin-bottom: 8px; font-size: 16px; color: var(--ink); }

/* ── Highlight section ── */
.section-highlight {
  margin-left: -28px; margin-right: -28px;
  padding: var(--section-gap) 28px var(--section-gap);
  background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* ── CTA ── */
.cta-section { padding: var(--section-gap) 0 0; text-align: center; }
.cta-section .cta-row { justify-content: center; }
.cta-section .section-title { margin-bottom: 12px; }
.cta-section .cta-subtitle { color: var(--muted); font-size: 16px; margin: 0 0 28px; }

/* ── Footer ── */
.footer {
  margin-top: var(--section-gap); padding: 28px 0 0; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer p { margin: 0; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color var(--transition); }
.footer-links a:hover { color: var(--accent); }

/* ── Scroll Reveal ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero { padding: 48px 0 40px; }
  .hero-image { margin-left: 0; margin-right: 0; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-strip > div:nth-child(2)::after { display: none; }
  .trust-strip > div:nth-child(1)::after, .trust-strip > div:nth-child(3)::after { display: block; }
  .trust-strip > div:nth-child(1), .trust-strip > div:nth-child(2) { border-bottom: 1px solid var(--line); }
  .feature-grid, .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  :root { --section-gap: 56px; }
  .page { padding: 0 18px 60px; }
  .site-header { position: relative; padding: 12px 0 14px; backdrop-filter: none; background: var(--paper); }
  .hero { padding: 36px 0 28px; }
  .hero-title { font-size: 30px; }
  .hero-image { margin-left: 0; margin-right: 0; border-radius: 12px; }
  .section-title { font-size: 24px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip > div::after { display: none !important; }
  .trust-strip > div:not(:last-child) { border-bottom: 1px solid var(--line); }
  .feature-grid, .steps-grid, .faq-grid { grid-template-columns: 1fr; }
  .screenshots { grid-template-columns: 1fr; }
  .footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lang-switcher { padding-left: 0; border-left: none; }
  .section-highlight, .section-dark { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
}

/* ── Eyebrow label (draws the eye to new capabilities) ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-dark); background: var(--accent-weak);
  padding: 5px 12px; border-radius: 999px; margin: 0 0 16px;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ── YouTube caption showcase ── */
.yt-showcase { padding: var(--section-gap) 0 0; }
.yt-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }

/* Fake player frame with a live bilingual caption block, mirroring the extension. */
.yt-player {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(ellipse 120% 80% at 50% 30%, #26262f 0%, #101018 70%, #05050a 100%);
  box-shadow: 0 24px 70px rgba(17, 20, 24, 0.28), 0 8px 24px rgba(17, 20, 24, 0.16);
  border: 1px solid #23232e;
}
.yt-player__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.18); }
.yt-player__bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: #ff0033; }
.yt-player__play {
  position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 46px; border-radius: 12px; background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
}
.yt-player__play::after { content: ''; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff; margin-left: 2px; }
.yt-player__logo {
  position: absolute; top: 14px; left: 16px; font-family: 'Spectral', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.02em; color: #fff; opacity: 0.9;
}
.yt-player__logo span { color: #ff0033; }

/* Bilingual caption overlay — original (dim) above, translation (bright) below. */
.yt-cc {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  width: min(86%, 460px); text-align: center;
  background: rgba(8, 8, 8, 0.82); border-radius: 8px; padding: 10px 14px;
}
.yt-cc__orig { color: #d6d6df; font-size: clamp(12px, 1.5vw, 15px); line-height: 1.4; opacity: 0.82; }
.yt-cc__trans { color: #fff; font-size: clamp(14px, 1.9vw, 19px); font-weight: 600; line-height: 1.45; margin-top: 3px; }

.yt-copy .section-title { margin-bottom: 16px; }
.yt-copy .section-subtitle { margin-top: 0; margin-bottom: 24px; }

/* Checkmark benefit list */
.check-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.check-list li { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.check-list li strong { color: var(--ink); font-weight: 600; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-gradient);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

@media (max-width: 900px) {
  .yt-layout { grid-template-columns: 1fr; gap: 28px; }
  .yt-copy { order: 2; }
  .yt-player { order: 1; }
}

/* ── Pricing ──
   The plan cards are a grid rather than a flex row because the four cards
   must line their prices and their feature lists up with each other: with
   flex the Free card's shorter list pulled its CTA halfway up the card, and
   the eye read that as "this one is smaller" rather than "this one is free".
   Every card is the same height, the CTA is pinned to the bottom, and only
   the featured card carries colour.

   Four across needs the full 1100px column, so the padding tightens at that
   width and the grid drops to two-up well before the phone breakpoint —
   four 240px cards are legible, four 180px ones are not. */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.price-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(124,92,255,0.25); }
.price-card--featured { border-color: transparent; box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.price-card--featured:hover { box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); border-color: transparent; }
.price-badge {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--accent-gradient);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.price-name { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--ink); }
.price-tagline { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price-amount b { font-family: 'Spectral', Georgia, serif; font-size: 38px; font-weight: 700; line-height: 1; color: var(--ink); }
/* The on-premises card has words where the others have a number. 38px is sized
   for "$9.90"; the same size on "Let's talk" or "価格はご相談" runs past the card
   edge in at least one of the five languages, so the quote slot is smaller and
   keeps the serif face only so the eye still reads it as the price line. */
.price-amount--quote b { font-size: 24px; }
.price-period { font-size: 13.5px; color: var(--muted); }
.price-sub { margin: 0 0 20px; font-size: 13px; color: var(--muted); min-height: 19px; }

/* Same tick as .check-list, tightened: these lists sit inside a card, not a
   full-width column, so 32px of indent wasted a quarter of the line. */
.price-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.price-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.price-list li strong { color: var(--ink); font-weight: 600; }
.price-list li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--accent-gradient);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* margin-top:auto is what pins every CTA to the same baseline. */
.price-card .button { margin-top: auto; justify-content: center; text-align: center; }
/* The address under the Contact button. The button alone keeps it inside a
   mailto: — fine on a desktop with a mail client wired up, useless to someone
   on a phone who just wants to copy it into webmail. This is the only card
   whose next step is a conversation rather than a checkout, so it is the only
   one that has to survive the reader having no mail client at all. */
.price-contact { margin: 10px 0 0; font-size: 13px; text-align: center; color: var(--muted); word-break: break-all; }
.price-contact a { color: inherit; text-decoration: underline; }
.price-footnote { margin: 20px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.price-footnote a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1080px) {
  .price-card { padding: 24px 18px; }
}
@media (max-width: 980px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .pack-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .price-grid { grid-template-columns: 1fr; }
}

/* ── Legal documents (privacy / terms / eula) ──
   Long-form prose, so the 1100px column is narrowed to a readable measure and
   nothing here uses [data-reveal]: the observer in scripts/main.js fires at a
   0.2 intersection ratio, which a section taller than five viewports can never
   reach — it would leave a clause permanently invisible. */
.legal { padding-top: 56px; }
.legal .hero-title { font-size: clamp(32px, 4vw, 46px); margin-bottom: 12px; }
.legal-meta { color: var(--muted); font-size: 14px; margin: 0 0 28px; }

/* Sibling documents, always reachable from any of the three. */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; }
.legal-nav a {
  text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); transition: all var(--transition);
}
.legal-nav a:hover { color: var(--ink); border-color: rgba(124, 92, 255, 0.3); }
.legal-nav a[aria-current='page'] { color: var(--accent); background: var(--accent-weak); border-color: transparent; }

/* Plain-language summary. Explicitly not a substitute for the text below it. */
.legal-summary {
  max-width: 760px; margin: 0 0 40px; padding: 24px 26px;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
/* Direct child only: this is the "short version" heading. A descendant
   selector would also block-break the emphasised phrases inside the bullets. */
.legal-summary > strong { display: block; margin-bottom: 10px; font-size: 15px; }
.legal-summary ul { margin: 0; padding-left: 20px; }
.legal-summary li { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-bottom: 6px; }
.legal-summary li strong { font-weight: 600; color: var(--ink); }
.legal-summary li:last-child { margin-bottom: 0; }

.legal-body { max-width: 760px; }
.legal-body h2 {
  font-family: 'Spectral', serif; font-size: 23px; line-height: 1.3;
  letter-spacing: -0.015em; margin: 44px 0 14px; scroll-margin-top: 90px;
}
.legal-body h3 { font-size: 16px; font-weight: 600; margin: 26px 0 8px; }
.legal-body p { font-size: 15.5px; line-height: 1.75; margin: 0 0 14px; }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { font-size: 15.5px; line-height: 1.7; margin-bottom: 8px; }
.legal-body a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--accent); }
.legal-body strong { font-weight: 600; }
/* Reserved for the clauses a reader must not skim past — the personal-use
   limit, the liability split, the illegal-use disclaimer. */
.legal-body .legal-callout {
  padding: 18px 22px; margin: 0 0 18px; border-radius: var(--radius-sm);
  background: var(--accent-weak); border: 1px solid rgba(124, 92, 255, 0.22);
  font-size: 15px; line-height: 1.7;
}
.legal-table-wrap { overflow-x: auto; margin: 0 0 18px; }
.legal-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.legal-table th, .legal-table td {
  text-align: left; padding: 11px 14px; border: 1px solid var(--line); vertical-align: top;
  line-height: 1.6;
}
.legal-table th { background: var(--paper-alt); font-weight: 600; }
.legal-table td { color: var(--muted); }

@media (max-width: 720px) {
  .legal { padding-top: 36px; }
  .legal-body h2 { font-size: 20px; margin-top: 36px; }
  .legal-summary { padding: 20px; }
}

::selection { background: var(--accent-weak); color: var(--ink); }