:root {
  --paper: #f3ecde;
  --paper-texture: url("assets/paper-stock.png");
  --paper-texture-contrast-base: #f6efe2;
  --paper-raised: #faf5ec;
  --paper-deep: #e6dac5;
  --ink: #1e2823;
  --ink-soft: #66706a;
  --muted: #66706a;
  --moss: #293f33;
  --sage: #9bad8d;
  --sage-deep: #607062;
  --coral: #d97757;
  --coral-deep: #d97757;
  --line: rgba(30, 40, 35, 0.16);
  --line-light: rgba(245, 240, 231, 0.34);

  --font-display: "Literata", Georgia, serif;
  --font-ui: "Nunito Sans", "Avenir Next", sans-serif;
  --font-serif: var(--font-display);
  --font-sans: var(--font-ui);

  --text-caption: 0.75rem;
  --text-label: 0.875rem;
  --text-body: 1rem;
  --text-lead: 1.25rem;
  --text-subhead: clamp(1.875rem, 3vw, 2.5rem);
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
}

* { box-sizing: border-box; }

html {
  background: var(--paper-texture-contrast-base);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--paper-texture-contrast-base);
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(101, 84, 63, 0.055)),
    var(--paper-texture);
  background-blend-mode: normal, multiply;
  background-size: 100% 100%, 46rem auto;
  background-attachment: scroll, fixed;
  background-position: center, center;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

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

.grain {
  display: none;
}

.section-shell { width: min(73.75rem, calc(100% - 2.5rem)); margin: 0 auto; }

.site-header {
  display: flex;
  position: relative;
  z-index: 10;
  width: min(77.5rem, calc(100% - 2rem));
  height: 5rem;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
}

.brand { display: inline-flex; gap: var(--space-sm); align-items: center; font: 600 1.0625rem/1 var(--font-display); letter-spacing: -0.03em; }
.brand-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
.brand-title { white-space: nowrap; }
.brand-slogan { padding-left: 0.21875rem; color: var(--sage-deep); font: 600 0.6875rem/1.25 var(--font-ui); letter-spacing: 0.01em; white-space: nowrap; }
.brand-mark { display: block; width: 2.125rem; height: 2.125rem; border-radius: 50%; object-fit: cover; }

.site-nav { display: none; }
.menu-button { display: grid; width: 2.75rem; height: 2.75rem; place-content: center; gap: 0.3125rem; border: 0; background: none; cursor: pointer; }
.menu-button span { width: 1.4375rem; height: 0.0625rem; background: var(--ink); transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
.site-nav.is-open { display: flex; position: absolute; top: 4.1875rem; right: 0; left: 0; flex-direction: column; gap: 0.1875rem; padding: var(--space-md); border: 0.0625rem solid var(--line); background: var(--paper-raised); }
.site-nav a { min-height: 2.75rem; padding: var(--space-sm); font-size: var(--text-label); font-weight: 700; }
.nav-cta { margin-top: var(--space-xs); border-top: 0.0625rem solid var(--line); }
.nav-cta .icon { color: var(--coral-deep); }

.hero { padding: clamp(3.5rem, 10vw, 6.25rem) 0 var(--space-xl); }
.eyebrow, .section-kicker { font: 700 var(--text-caption)/1.25 var(--font-ui); letter-spacing: 0.115em; text-transform: uppercase; }
.eyebrow { margin: 0 0 var(--space-lg); color: var(--coral-deep); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.hero-copy, .hero-actions { min-width: 0; }

.hero h1, .method h2, .feature-heading h2, .showcase h2, .privacy-band h2, .availability h2 {
  margin: 0;
  font: 400 clamp(3.6rem, 14vw, 6.9rem)/0.91 var(--font-display);
  letter-spacing: -0.075em;
  font-optical-sizing: auto;
}

.hero h1 em, .method h2 em, .showcase h2 em, .privacy-band h2 em, .availability h2 em { color: var(--coral-deep); font-weight: 400; }
.hero-intro { max-width: 31ch; margin: var(--space-xl) 0 var(--space-xl); color: var(--ink-soft); font-size: var(--text-lead); line-height: 1.52; }
.hero-actions, .availability-actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; }

.button {
  display: inline-flex;
  min-height: 3rem;
  padding: 0.75rem 1.125rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  border: 0.0625rem solid var(--ink);
  font-size: var(--text-label);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: transform 250ms cubic-bezier(.16, 1, .3, 1), background 250ms ease, color 250ms ease;
}

.button:hover { transform: translateY(-0.1875rem); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { border-color: var(--coral-deep); background: var(--coral-deep); }
.button-outline { border-color: var(--paper); color: var(--paper); }
.button-outline:hover { background: var(--paper); color: var(--moss); }
.button.disabled { cursor: default; opacity: 0.9; }
.text-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-xs); border-bottom: 0.0625rem solid currentColor; font-size: var(--text-label); font-weight: 800; line-height: 1; }
.icon { display: inline-block; width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.button .icon { width: 1.0625rem; height: 1.0625rem; }
.text-link .icon { color: var(--coral-deep); transition: transform 180ms cubic-bezier(.16, 1, .3, 1); }
.text-link:hover .icon { transform: translate(0.1875rem, -0.1875rem); }

.hero-art { display: grid; position: relative; min-height: 35rem; place-items: center; }
.hero-device { position: relative; z-index: 2; width: min(18rem, 70vw); margin: 0; padding: 0.375rem; border: 0.0625rem solid rgba(30, 40, 35, 0.38); border-radius: 2.25rem; background: #171b18; box-shadow: 1.25rem 1.375rem 0 rgba(41, 63, 51, 0.1), 0 1.5rem 3.25rem rgba(30, 40, 35, 0.2); overflow: hidden; transform: rotate(3deg); animation: device-breathe 7s ease-in-out infinite; }
.hero-device img { display: block; width: 100%; height: auto; border-radius: 1.875rem; }
.word-card { display: flex; position: relative; z-index: 2; width: min(19.6875rem, 88vw); height: 24.6875rem; padding: var(--space-lg); flex-direction: column; justify-content: space-between; background: #faeee4; box-shadow: 1.25rem 1.375rem 0 rgba(41, 63, 51, 0.1); color: #273129; transform: rotate(3deg); animation: card-breathe 7s ease-in-out infinite; }
.word-card::after { position: absolute; inset: 0.4375rem; border: 0.0625rem solid rgba(41, 63, 51, 0.2); content: ""; pointer-events: none; }
.card-topline, .card-bottom { display: flex; z-index: 1; justify-content: space-between; font: 800 0.6875rem/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.word-content { z-index: 1; }
.word-type { margin: 0 0 var(--space-xs); color: var(--sage-deep); font: italic 1rem/1.2 var(--font-display); }
.word-card h2 { margin: 0 0 var(--space-sm); font: 500 clamp(3rem, 9vw, 3.75rem)/0.88 var(--font-display); letter-spacing: -0.08em; }
.pronunciation { padding: 0.3125rem 0.5rem; border: 0; border-radius: 999rem; background: color-mix(in oklch, var(--sage) 30%, transparent); color: var(--ink-soft); font: 800 0.6875rem/1 var(--font-ui); letter-spacing: 0.04em; cursor: pointer; }
.pronunciation span { margin-left: var(--space-xs); color: var(--coral-deep); }
.word-definition { max-width: 21ch; font: 400 1.25rem/1.35 var(--font-display); letter-spacing: -0.035em; }
.card-bottom i { font-family: var(--font-display); text-transform: none; }.card-swipe b { color: var(--coral-deep); font-size: 1rem; }.orbit { position: absolute; border: 0.0625rem solid color-mix(in oklch, var(--moss) 25%, transparent); border-radius: 50%; }.orbit-one { width: 23.125rem; height: 23.125rem; transform: rotate(-24deg); }.orbit-two { width: 29.375rem; height: 15.625rem; transform: rotate(27deg); }.art-caption { position: absolute; bottom: 0.6875rem; left: 0; margin: 0; color: var(--muted); font: 700 var(--text-caption)/1.2 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }.hero-foot { display: flex; margin-top: var(--space-xl); padding-top: var(--space-md); flex-direction: column; gap: var(--space-xs); border-top: 0.0625rem solid var(--line); color: var(--muted); font: 700 var(--text-caption)/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }

.method { padding: clamp(7.5rem, 15vw, 10.5rem) 0 clamp(6.5rem, 13vw, 9.5rem); }.section-kicker { display: flex; gap: var(--space-lg); align-items: center; margin-bottom: var(--space-xl); }.section-kicker span { color: var(--coral-deep); }.section-kicker p { margin: 0; color: var(--muted); }.method-heading { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-bottom: var(--space-2xl); }.method h2 { font-size: clamp(3rem, 10vw, 5.25rem); }.method-heading > p { max-width: 35ch; margin: 0; align-self: end; color: var(--ink-soft); line-height: 1.65; }.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: var(--space-md); }.method-card { display: flex; min-height: 22rem; padding: var(--space-lg); flex-direction: column; border: 0.0625rem solid var(--line); }.method-card h3 { margin: var(--space-lg) 0 var(--space-xs); font: 500 var(--text-subhead)/0.98 var(--font-display); letter-spacing: -0.06em; }.method-card > p { max-width: 30ch; margin: 0; color: var(--ink-soft); font-size: var(--text-label); line-height: 1.6; }.card-number { color: var(--coral-deep); font: 800 var(--text-caption)/1 var(--font-ui); letter-spacing: 0.1em; }.card-words { background: #d9e3d3; }.card-practice { background: #f2c4ad; }.card-return { background: #e7e0d2; }.mini-word { display: grid; margin-top: auto; padding-top: var(--space-sm); grid-template-columns: 1fr auto; align-items: end; border-top: 0.0625rem solid var(--line); }.mini-word span { font: 500 1.75rem/0.95 var(--font-display); letter-spacing: -0.06em; }.mini-word i, .library-row i { color: var(--ink-soft); font: 800 var(--text-caption)/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }.mini-word p { grid-column: 1 / -1; margin: var(--space-xs) 0 0; font: 400 var(--text-label)/1.35 var(--font-display); }.practice-meter { display: grid; margin-top: auto; padding-top: var(--space-lg); grid-template-columns: 1fr auto; font: 800 var(--text-caption)/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }.practice-meter b { font: 500 1.75rem/.8 var(--font-display); }.practice-meter div { display: flex; grid-column: 1 / -1; gap: var(--space-xs); margin-top: var(--space-sm); }.practice-meter i { width: 1.25rem; height: 0.625rem; background: rgba(30, 40, 35, 0.17); }.practice-meter i:nth-child(-n+5) { background: var(--moss); }.streak { display: grid; margin-top: auto; padding-top: var(--space-lg); grid-template-columns: auto 1fr; gap: 0 var(--space-sm); align-items: baseline; }.streak > span { color: var(--ink-soft); font: 800 var(--text-caption)/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }.streak strong { font: 500 3.75rem/.78 var(--font-display); letter-spacing: -0.08em; }.streak > div { grid-column: 1 / -1; padding-top: var(--space-md); color: rgba(30, 40, 35, 0.24); font-size: var(--text-label); letter-spacing: 0.125rem; }.streak b { color: var(--coral-deep); font-weight: 400; }

.feature-section { padding: clamp(5.75rem, 11vw, 8rem) 0 clamp(4.5rem, 8vw, 6rem); background: var(--moss); color: var(--paper); }.section-kicker.light p { color: #c4d0c1; }.feature-heading { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-bottom: var(--space-2xl); }.feature-heading h2 { font-size: clamp(3rem, 10vw, 5.25rem); }.feature-heading p { max-width: 32ch; margin: 0; align-self: end; color: #c4d0c1; line-height: 1.7; }.feature-list { border-top: 0.0625rem solid var(--line-light); }.feature-item { display: grid; padding: var(--space-lg) 0; grid-template-columns: 2.75rem 1fr 1.875rem; gap: var(--space-xs); border-bottom: 0.0625rem solid rgba(245, 240, 231, 0.22); }.feature-index { margin: 0.25rem 0; color: var(--coral); font: 800 var(--text-caption)/1.2 var(--font-ui); letter-spacing: 0.08em; }.feature-item h3 { margin: 0 0 var(--space-xs); font: 500 clamp(1.625rem, 4vw, 2.125rem)/0.98 var(--font-display); letter-spacing: -0.05em; }.feature-item div p { max-width: 60ch; margin: 0; color: #c4d0c1; font-size: var(--text-label); line-height: 1.65; }.feature-icon { width: 1.75rem; height: 1.75rem; align-self: center; color: var(--sage); fill: none; justify-self: end; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.feature-icon-pulse circle { fill: var(--coral); stroke: none; animation: progress-pulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }.dark-mode-preview { display: grid; gap: var(--space-xl); margin-top: clamp(4.5rem, 9vw, 7rem); padding: var(--space-xl); border: 0.0625rem solid rgba(245, 240, 231, 0.22); background: rgba(13, 20, 16, 0.32); overflow: hidden; }.dark-mode-copy { align-self: center; }.dark-mode-copy .eyebrow { color: var(--coral); }.dark-mode-copy h3 { margin: 0; font: 400 clamp(2.75rem, 8vw, 4.75rem)/0.9 var(--font-display); letter-spacing: -0.075em; }.dark-mode-copy h3 em { color: var(--sage); font-weight: 400; }.dark-mode-copy > p:not(.eyebrow) { max-width: 27ch; margin: var(--space-lg) 0 0; color: #c4d0c1; line-height: 1.65; }.dark-mode-device { width: min(16rem, 72vw); margin: 0 auto; padding: 0.375rem; border: 0.0625rem solid rgba(245, 240, 231, 0.32); border-radius: 2.125rem; background: #11100f; box-shadow: 1rem 1rem 0 rgba(0, 0, 0, 0.2); overflow: hidden; transform: rotate(2.5deg); }.dark-mode-device img { display: block; width: 100%; height: auto; border-radius: 1.75rem; }

.widget-preview { display: grid; gap: var(--space-xl); margin-top: var(--space-lg); padding: var(--space-xl); border: 0.0625rem solid rgba(245, 240, 231, 0.22); background: rgba(13, 20, 16, 0.16); overflow: hidden; }.widget-preview-copy { align-self: center; }.widget-preview-copy .eyebrow { color: var(--coral); }.widget-preview-copy h3 { margin: 0; font: 400 clamp(2.75rem, 8vw, 4.75rem)/0.9 var(--font-display); letter-spacing: -0.075em; }.widget-preview-copy h3 em { color: var(--sage); font-weight: 400; }.widget-preview-copy > p:not(.eyebrow) { max-width: 30ch; margin: var(--space-lg) 0 0; color: #c4d0c1; line-height: 1.65; }.widget-preview-device { width: min(16rem, 72vw); margin: 0 auto; padding: 0.375rem; border: 0.0625rem solid rgba(245, 240, 231, 0.32); border-radius: 2.125rem; background: #11100f; box-shadow: 1rem 1rem 0 rgba(0, 0, 0, 0.2); overflow: hidden; transform: rotate(-2.5deg); }.widget-preview-device img { display: block; width: 100%; height: auto; border-radius: 1.75rem; }


.app-gallery { display: grid; padding: clamp(6.25rem, 13vw, 9rem) 0; grid-template-columns: 1fr; gap: var(--space-2xl); }.gallery-intro h2 { margin: 0; font: 400 clamp(3rem, 10vw, 5.25rem)/0.91 var(--font-display); letter-spacing: -0.075em; }.gallery-intro h2 em { color: var(--coral-deep); font-weight: 400; }.gallery-intro > p:not(.eyebrow) { max-width: 34ch; margin: var(--space-xl) 0 0; color: var(--ink-soft); line-height: 1.65; }.gallery-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }.app-screen { min-width: 0; margin: 0; padding: 0.25rem; border: 0.0625rem solid rgba(30, 40, 35, 0.4); border-radius: 1.5rem; background: #171b18; box-shadow: 0.625rem 0.75rem 0 var(--paper-deep); overflow: hidden; }.screen-image { aspect-ratio: 1206 / 2520; overflow: hidden; border-radius: 1.25rem; }.app-screen img, .library-preview img { display: block; width: 100%; height: auto; }.app-screen figcaption, .library-preview figcaption { margin: var(--space-md) var(--space-xs) var(--space-xs); color: var(--coral-deep); font: italic 1rem/1.3 var(--font-display); text-align: center; }.app-screen-detail { transform: rotate(-2deg); }.app-screen-explore { margin-top: clamp(2rem, 7vw, 4.5rem); transform: rotate(2deg); }.showcase { display: grid; padding: clamp(6.25rem, 13vw, 9rem) 0; grid-template-columns: 1fr; gap: var(--space-2xl); }.showcase-copy h2 { font-size: clamp(3rem, 10vw, 5.25rem); }.showcase-copy > p:not(.eyebrow) { max-width: 35ch; margin: var(--space-xl) 0; color: var(--ink-soft); line-height: 1.65; }.library-preview { width: min(20rem, 75vw); margin: 0 auto; padding: 0.375rem; border: 0.0625rem solid rgba(30, 40, 35, 0.4); border-radius: 2.25rem; background: #171b18; box-shadow: 0.875rem 0.875rem 0 var(--paper-deep); overflow: hidden; transform: rotate(-1.5deg); }.library-preview .screen-image { border-radius: 1.875rem; }.library-preview figcaption { margin: var(--space-md) var(--space-xs) var(--space-xs); }

.privacy-band { padding: clamp(5rem, 10vw, 7rem) 0; background: var(--coral); color: #fff8ed; }.privacy-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }.privacy-band .eyebrow { color: var(--moss); }.privacy-band h2 { font-size: clamp(3rem, 10vw, 5.25rem); }.privacy-band h2 em { color: var(--moss); }.privacy-layout > div:last-child { max-width: 35ch; align-self: end; }.privacy-layout > div:last-child p { margin: 0 0 var(--space-lg); color: #fff8ed; line-height: 1.7; }.availability { padding: clamp(7rem, 15vw, 10.25rem) 0 clamp(6.5rem, 12vw, 9rem); text-align: center; }.availability .eyebrow { margin-bottom: var(--space-lg); }.availability h2 { font-size: clamp(3.5rem, 12vw, 6.5rem); }.availability-copy { max-width: 42ch; margin: var(--space-xl) auto; color: var(--ink-soft); line-height: 1.7; }.availability-actions { justify-content: center; }.availability-note { margin-top: var(--space-xl); color: var(--muted); font: 800 var(--text-caption)/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }.site-footer { display: flex; padding: var(--space-lg) 0 var(--space-xl); flex-direction: column; gap: var(--space-lg); align-items: flex-start; border-top: 0.0625rem solid var(--line); }.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-label); font-weight: 700; }.footer-links a:hover { color: var(--coral-deep); }.site-footer p { margin: 0; color: var(--muted); font: 800 var(--text-caption)/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }.footer-contact { text-transform: none !important; letter-spacing: 0.025em !important; }.footer-contact a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: color 180ms ease, text-decoration-color 180ms ease; }.footer-contact a:hover { color: var(--coral-deep); text-decoration-color: currentColor; }

.reveal { opacity: 0; transform: translateY(1.0625rem); transition: opacity 750ms ease, transform 750ms cubic-bezier(.16, 1, .3, 1); }.reveal.visible { opacity: 1; transform: none; }.hero .reveal:nth-child(2) { transition-delay: 80ms; } @keyframes card-breathe { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-0.5rem); } } @keyframes device-breathe { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(1.6deg) translateY(-0.5rem); } }

.screen-image { aspect-ratio: 1206 / 2622; }

.streak { grid-template-columns: 1fr auto; gap: 0 var(--space-sm); align-items: end; }.streak-copy { display: flex; flex-direction: column; gap: var(--space-2xs); }.streak-copy span { color: var(--ink-soft); font: 800 var(--text-caption)/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }.streak strong { align-self: end; }.streak .streak-days { display: flex; grid-column: 1 / -1; gap: 0.5rem; margin-top: var(--space-md); padding-top: 0; color: inherit; font-size: inherit; letter-spacing: normal; }.streak-days i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(30, 40, 35, 0.24); }.streak-days i.is-current { background: var(--coral-deep); }

@keyframes progress-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.75); } }

.legal-page .site-header { border-bottom: 0.0625rem solid var(--line); }.legal-page .site-header, .legal-intro, .legal-title-block, .legal-intro-copy, .legal-content, .faq { min-width: 0; }.back-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-xs); flex: 0 0 auto; font-size: var(--text-label); font-weight: 800; }.back-link .icon { color: var(--coral-deep); }.legal-shell { width: min(70rem, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(4.75rem, 10vw, 7.25rem) 0 clamp(6.5rem, 12vw, 9rem); }.legal-intro { display: grid; gap: var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 0.0625rem solid var(--line); }.legal-title-block { max-width: 28rem; }.legal-shell h1 { margin: 0; font: 400 clamp(3.5rem, 10vw, 5.75rem)/0.92 var(--font-display); letter-spacing: -0.075em; font-optical-sizing: auto; overflow-wrap: anywhere; }.legal-meta { margin: var(--space-lg) 0 0; color: var(--muted); font: 800 var(--text-caption)/1.35 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }.legal-intro-copy { max-width: 43rem; }.legal-lead { max-width: 35ch; }.legal-lead p { margin: 0; font: 400 clamp(1.375rem, 3vw, 1.875rem)/1.42 var(--font-display); letter-spacing: -0.035em; }.legal-content, .faq { width: min(100%, 43.5rem); margin-left: auto; }.legal-content { padding-top: var(--space-3xl); }.legal-content h2 { margin: var(--space-3xl) 0 var(--space-sm); font: 500 clamp(1.75rem, 3vw, 2.375rem)/1.06 var(--font-display); letter-spacing: -0.055em; font-optical-sizing: auto; }.legal-content h2:first-child { margin-top: 0; }.legal-content p, .faq details p { margin: 0; color: var(--ink-soft); font-size: var(--text-body); line-height: 1.75; }.legal-content a { color: var(--coral-deep); border-bottom: 0.0625rem solid currentColor; text-underline-offset: 0.2em; }.support-email { margin-top: var(--space-xl); }.faq { margin-top: clamp(3.5rem, 8vw, 5rem); border-top: 0.0625rem solid var(--line); }.faq details { padding: 0; border-bottom: 0.0625rem solid var(--line); }.faq summary { position: relative; min-height: 4.5rem; padding: var(--space-lg) var(--space-3xl) var(--space-lg) 0; list-style: none; cursor: pointer; font: 500 clamp(1.5rem, 3vw, 2rem)/1.12 var(--font-display); letter-spacing: -0.045em; }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { position: absolute; top: 50%; right: var(--space-xs); color: var(--coral-deep); content: '+'; font: 400 1.75rem/1 var(--font-ui); transform: translateY(-50%); }.faq details[open] summary::after { content: '−'; }.faq details p { max-width: 58ch; margin: 0 0 var(--space-xl); }.support-note { padding-top: var(--space-3xl); border-top: 0.0625rem solid var(--line); }.support-note h2 { margin-top: 0; }

@media (min-width: 45rem) {
  .site-header { height: 5.875rem; }.menu-button { display: none; }.site-nav { display: flex; gap: var(--space-xl); align-items: center; font-size: var(--text-label); }.site-nav a { padding: 0; }.nav-cta { margin: 0; border: 0; }.hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: var(--space-xl); align-items: center; }.hero h1 { font-size: clamp(4.5rem, 8vw, 7.5rem); }.hero-art { min-height: 35rem; }.hero-device { width: 20.75rem; }.word-card { width: 21.5rem; height: 26.875rem; padding: var(--space-xl); }.orbit-one { width: 26.25rem; height: 26.25rem; }.orbit-two { width: 33.125rem; height: 17.8125rem; }.hero-foot { flex-direction: row; justify-content: space-between; }.method-heading { grid-template-columns: 1.25fr 0.75fr; }.feature-heading { grid-template-columns: 1.2fr 0.8fr; }.feature-item { padding: 1.75rem 0; grid-template-columns: 5.625rem 1fr 2.625rem; }.dark-mode-preview, .widget-preview { grid-template-columns: 1fr minmax(14rem, 0.72fr); align-items: center; padding: clamp(2rem, 5vw, 4rem); }.dark-mode-device, .widget-preview-device { width: min(17.5rem, 100%); }.app-gallery { grid-template-columns: 0.78fr 1.22fr; gap: clamp(3rem, 8vw, 7rem); align-items: center; }.showcase { grid-template-columns: 0.9fr 1.1fr; gap: clamp(3rem, 8vw, 7rem); align-items: center; }.library-preview { width: min(24rem, 100%); padding: var(--space-xs); }.privacy-layout { grid-template-columns: 1.15fr 0.85fr; }.site-footer { flex-direction: row; align-items: center; justify-content: space-between; }.footer-links { gap: var(--space-xl); }
}

/* Keep the paper stock legible on phones without letting it become marbled. */
@media (max-width: 44.9375rem) {
  body {
    background-image:
      linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 38%, rgba(101, 84, 63, 0.06)),
      var(--paper-texture);
    background-blend-mode: normal, multiply;
    background-size: 100% 100%, 30rem auto;
    background-attachment: scroll, fixed;
    background-position: center, center top;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 13vw, 3.4rem);
  }

  .hero-actions {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
  }
}

@media (max-width: 44.9375rem) { .legal-page .site-header { gap: var(--space-sm); }.legal-page .brand { min-width: 0; }.legal-page .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

@media (min-width: 62.5rem) { .hero-art { transform: translateX(0.9375rem); }.method-card { min-height: 23.75rem; padding: var(--space-xl); }.feature-item { grid-template-columns: 7.5rem 1fr 2.625rem; }.library-preview { transform: rotate(-2.5deg); }.legal-intro { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(var(--space-3xl), 8vw, var(--space-4xl)); align-items: end; }.legal-intro-copy { justify-self: end; } }

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