/*
 * Understory: styles.css
 *
 * Editorial layout system. All styles live here. CSP is locked to 'self'
 * so there are no @import statements, no inline styles, no third-party
 * sheets. Dark mode is the primary aesthetic. Light mode is fully supported.
 *
 * Reading order:
 *   1. Brand tokens
 *   2. Reset and base
 *   3. Typography
 *   4. Layout primitives (container, columns)
 *   5. Navigation, footer, skip link
 *   6. Buttons and links
 *   7. Hero
 *   8. Section system (numbered eyebrow, section heading, rules)
 *   9. Privacy rings
 *  10. Feature ledger (editorial cards)
 *  11. Screenshot strip
 *  12. Dedication (pull-quote section)
 *  13. FAQ
 *  14. Phone mockup (CSS art preview)
 *  15. Policy pages (drop cap, long-form reading column)
 *  16. Callout
 *  17. Motion (page-load reveal, gated by prefers-reduced-motion)
 *  18. Responsive adjustments
 *  19. Print
 */


/* ============================================================
   1. BRAND TOKENS
   Role-based names. Re-declared inside @media (prefers-color-scheme: dark).
   WCAG AA verified on every text/surface pair, AAA where noted.
   ============================================================ */

:root {
  /* Surfaces (light mode default) */
  --bg:           #f5f2ec; /* warm cream base */
  --bg-elevated:  #ede9e1; /* cards, nav */
  --bg-inset:     #e3dfd6; /* recessed surfaces, code blocks */
  --bg-hero:      #efece5; /* hero band, slightly distinct from bg */

  /* Text */
  --label:            #1a1f1e; /* 16:1 on --bg (AAA) */
  --label-secondary:  #4a5250; /* 5.5:1 on --bg (AA) */
  --label-tertiary:   #6d7775; /* 4.0:1, large text only */

  /* Brand */
  --accent:           #2a7a6f; /* muted teal, 4.6:1 on --bg (AA) */
  --accent-hover:     #1f5d54; /* AAA on --bg */
  --accent-subtle:    #d4eae7; /* tint, behind eyebrows and callouts */

  /* Warm accent: forest sunlight, used sparingly for section numerals */
  --warm:             #a26b1e; /* 5.0:1 on --bg, AA */
  --warm-subtle:      #f3e6d0;

  /* Rules */
  --rule:             #c8c4b9; /* hairline divider */
  --rule-strong:      #a8a49b; /* visible divider */

  /* Focus */
  --focus-ring:       #2a7a6f;

  /* Type scale, in rem so OS text-size preference is honored */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.5rem;
  --text-6xl:   4.75rem;

  /* Spacing (4-based scale) */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Layout */
  --content-max:  74rem;
  --prose-max:    38rem;  /* ~62ch, comfortable for long reading */
  --col-narrow:   28rem;

  /* Motion */
  --duration-fast:    160ms;
  --duration-normal:  320ms;
  --duration-slow:    560ms;
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);

  /* Type families. System stack only (CSP is locked to self, no fonts
     are shipped yet). Picked for character on Apple platforms (where most
     of the audience reads), with graceful fallbacks elsewhere. */
  --font-serif:
    "Iowan Old Style", "Hoefler Text", "Apple Garamond",
    "ITC Garamond Narrow", "New York", ui-serif, Georgia, serif;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", system-ui, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Library-at-dusk dark. Not pure black, leans teal-warm. */
    --bg:           #0e1716;
    --bg-elevated:  #15211f;
    --bg-inset:     #0a1110;
    --bg-hero:      #0c1413; /* slightly deeper for hero atmosphere */

    --label:             #f0ece4; /* warm cream, ~16:1 on --bg (AAA) */
    --label-secondary:   #aac1bd; /* 7.2:1 on --bg (AAA on body) */
    --label-tertiary:    #788e8a; /* 4.3:1, used at >18px only */

    --accent:            #3db8a8; /* 4.8:1 on --bg (AA) */
    --accent-hover:      #5fd0c1; /* 6.8:1 on --bg (AAA) */
    --accent-subtle:     #142926; /* dark tint behind eyebrows */

    --warm:              #e5b876; /* 8.1:1 on --bg (AAA), used sparingly */
    --warm-subtle:       #221b10;

    --rule:              #1f2e2b;
    --rule-strong:       #365754;

    --focus-ring:        #5fd0c1;
  }
}


/* ============================================================
   2. RESET AND BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--label);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

::selection {
  background: var(--accent);
  color: #fff;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  color: var(--label);
  line-height: 1.15;
}

/* Display serif for emotional content. */
.display,
h1, h2.section-heading, .hero__heading, .dedication__quote {
  font-family: var(--font-serif);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  letter-spacing: -0.012em;
}

h1 { font-size: var(--text-4xl); font-weight: 500; }
h2 { font-size: var(--text-3xl); font-weight: 500; }
h3 { font-size: var(--text-2xl); font-weight: 600; }
h4 { font-size: var(--text-xl);  font-weight: 600; }
h5 { font-size: var(--text-lg);  font-weight: 600; }
h6 { font-size: var(--text-base); font-weight: 600; }

p {
  color: var(--label);
  max-width: var(--prose-max);
}

strong { font-weight: 600; }
em     { font-style: italic; }

small {
  font-size: var(--text-sm);
  color: var(--label-secondary);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}

code {
  padding: 0.125em 0.375em;
  background-color: var(--bg-inset);
  border-radius: 0.25em;
}


/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-10); }
}


/* ============================================================
   5. NAV, FOOTER, SKIP LINK
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-3) var(--space-6);
  background-color: var(--accent);
  color: #fff;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
  text-decoration: none;
  font-size: var(--text-sm);
}
.skip-link:focus { top: 0; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Fallback for browsers without color-mix() support. */
  background-color: var(--bg-elevated);
  background-color: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-4);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-nav__brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.18rem;
  text-decoration: none;
  border-bottom: none;
  line-height: 1;
}

.site-nav__brand:hover .site-nav__wordmark { color: var(--accent); }

.site-nav__wordmark {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--label);
  letter-spacing: -0.008em;
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav__byline {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  line-height: 1;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin-inline-start: auto;
  margin-inline-end: var(--space-6);
}

.site-nav__links a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--label-secondary);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: none;
  position: relative;
  padding-block: var(--space-2);
}

.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--space-2) - 4px);
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--label);
}

.site-nav__links a:hover::after,
.site-nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (max-width: 880px) {
  .site-nav__links { display: none; }
}

@media (max-width: 640px) {
  .site-nav__brand { gap: 0; }
  .site-nav__byline { display: none; }
  .site-nav__wordmark { font-size: var(--text-xl); }
}

.site-footer {
  padding-block: var(--space-16) var(--space-12);
  border-top: 1px solid var(--rule);
  margin-top: var(--space-24);
}

.site-footer .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .site-footer .container {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.site-footer__wordmark {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--label);
  text-decoration: none;
}
.site-footer__wordmark:hover { color: var(--accent); }

.site-footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--label-secondary);
  margin-top: var(--space-2);
  max-width: 24rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  list-style: none;
  justify-content: flex-end;
}

.site-footer__links a {
  font-size: var(--text-sm);
  color: var(--label-secondary);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--label); }

.site-footer__copy {
  grid-column: 1 / -1;
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
  font-size: var(--text-xs);
  color: var(--label-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ============================================================
   6. LINKS, BUTTONS, CTAs
   ============================================================ */

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-hover);
  border-color: transparent;
}

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-bottom: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  letter-spacing: -0.005em;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.btn--primary {
  background-color: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.btn--primary:hover {
  background-color: var(--accent-hover);
  color: #fff;
  border-color: transparent;
}

.btn--ghost {
  background-color: transparent;
  color: var(--label);
  border: 1px solid var(--rule-strong);
}

.btn--ghost:hover {
  background-color: var(--bg-elevated);
  color: var(--label);
  border-color: var(--rule-strong);
}

/* Pill modifier: applies to any .btn to swap the rectangular radius
   for a pill shape and match the .btn--app-store height. */
.btn--pill {
  border-radius: 999px;
  padding-inline: 1.5rem;
  min-height: 52px;
}

/* App Store CTA. Two-line composition: small sans top line ("Download
   on the"), large serif bottom line ("App Store"). Background uses the
   teal accent so it sits as the primary destination call. No third-
   party badge artwork, so no Apple asset licensing concerns. */
.btn--app-store {
  background-color: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0.5rem 1.5rem;
  min-height: 52px;
  text-align: left;
  line-height: 1.1;
  letter-spacing: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 10px 22px -10px rgba(0, 0, 0, 0.35);
}

.btn--app-store:hover {
  background-color: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 14px 28px -12px rgba(0, 0, 0, 0.4);
}

.btn--app-store > span {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

/* Pre-launch state for any button. Swap to muted teal-grey, drop the
   hover lift, remove the cursor pointer. Pair with role="text" on a
   <span> so the element is non-interactive. Drop this modifier once
   the App Store listing is published. */
.btn--soon {
  background-color: var(--rule-strong);
  color: var(--label);
  cursor: default;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.btn--soon:hover {
  background-color: var(--rule-strong);
  color: var(--label);
  transform: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.btn--soon .btn__small {
  opacity: 0.78;
}

.btn__small {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.92;
  line-height: 1;
}

.btn__big {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}


/* ============================================================
   7. HERO
   Type-led layout. The headline is the image. The phone mockup
   sits lower in the visual hierarchy and reads as a quiet anchor.
   ============================================================ */

.hero {
  position: relative;
  background-color: var(--bg-hero);
  padding-block: var(--space-24) var(--space-20);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

/* Dappled-light atmosphere. Single layered radial gradient that
   suggests sunlight through canopy. Static (no animation). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 40% at 18% 12%,
      color-mix(in srgb, var(--warm) 9%, transparent),
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 35% at 82% 88%,
      color-mix(in srgb, var(--accent) 7%, transparent),
      transparent 70%
    );
  opacity: 0.85;
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: start;
}

@media (min-width: 960px) {
  .hero .container {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-20);
    align-items: center;
  }
}

.hero__masthead {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--label-tertiary);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.hero__masthead::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  background-color: var(--rule-strong);
  transform: translateY(-0.3em);
}

.hero__heading {
  font-size: clamp(2.25rem, 5.5vw, var(--text-6xl));
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--label);
  margin-bottom: var(--space-8);
  max-width: 18ch;
}

.hero__heading em {
  font-style: italic;
  color: var(--accent);
  font-feature-settings: "kern" 1, "liga" 1;
}

.hero__lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--label-secondary);
  margin-bottom: var(--space-8);
  max-width: 36rem;
}

.hero__lede strong {
  color: var(--label);
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.hero__signal {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-6);
  max-width: 36rem;
}

.hero__signal-item {
  font-size: var(--text-sm);
  color: var(--label-secondary);
  line-height: 1.55;
}

.hero__signal-item strong {
  display: block;
  color: var(--label);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-1);
}

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ============================================================
   8. SECTION SYSTEM
   Numbered eyebrows give the page an editorial cadence.
   ============================================================ */

.section {
  padding-block: var(--space-24);
  position: relative;
}

.section--alt {
  background-color: var(--bg-elevated);
  border-block: 1px solid var(--rule);
}

.section--sm   { padding-block: var(--space-16); }
.section--tight { padding-block: var(--space-12); }

@media (max-width: 640px) {
  .section       { padding-block: var(--space-16); }
  .section--sm   { padding-block: var(--space-12); }
}

.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
  max-width: var(--prose-max);
}

@media (min-width: 768px) {
  .section__head {
    grid-template-columns: minmax(6rem, 8rem) 1fr;
    gap: var(--space-8);
    max-width: 60rem;
    align-items: baseline;
  }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.eyebrow__numeral {
  color: var(--warm);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
}

.eyebrow__sep {
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.7;
}

.eyebrow__label { color: var(--label-tertiary); }

.section-heading {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--label);
  max-width: 22ch;
}

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

.section-lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--label-secondary);
  max-width: var(--prose-max);
  margin-top: var(--space-6);
}

.section__more {
  margin-top: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section__more a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--label);
  border-bottom-color: var(--rule-strong);
}

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

.section__more a::after {
  content: "→";
  transition: transform var(--duration-fast) var(--ease-out);
}

.section__more a:hover::after { transform: translateX(3px); }


/* ============================================================
   9. PRIVACY RINGS
   Concentric typography rather than three boxes.
   ============================================================ */

.rings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 50rem;
  margin-top: var(--space-4);
}

.ring {
  display: grid;
  grid-template-columns: minmax(5rem, 7rem) 1fr;
  column-gap: var(--space-8);
  row-gap: 0;
  padding-block: var(--space-8);
  border-top: 1px solid var(--rule);
}

.ring:last-child {
  border-bottom: 1px solid var(--rule);
}

.ring__marker {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  line-height: 1.4;
  padding-top: 0.5rem;
}

.ring--0 .ring__marker { color: var(--accent); }
.ring--1 .ring__marker { color: var(--label-secondary); }
.ring--2 .ring__marker { color: var(--label-tertiary); }

.ring__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--label);
  margin-bottom: var(--space-3);
  max-width: 36rem;
}

.ring__qualifier {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--label-secondary);
}

.ring__body {
  font-size: var(--text-base);
  color: var(--label-secondary);
  line-height: 1.65;
  max-width: 38rem;
}

@media (max-width: 640px) {
  .ring {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
  .ring__marker {
    grid-row: auto;
    padding-top: 0;
  }
}


/* ============================================================
   10. FEATURE LEDGER
   Editorial cards. Each has a small running head ("Watch · daily")
   above its title, and a number to its left. Reads like a magazine
   contents page.
   ============================================================ */

.ledger {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger > * + * { border-left: 1px solid var(--rule); }
  .ledger > *:nth-child(2n+1) { border-left: none; }
  .ledger > *:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

.entry {
  padding: var(--space-10) var(--space-8);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
  transition: background-color var(--duration-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .ledger > .entry:nth-last-child(-n+2):nth-child(odd),
  .ledger > .entry:last-child {
    border-bottom: 1px solid var(--rule);
  }
}

.entry:hover { background-color: var(--bg-elevated); }

.entry__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--warm);
  margin-top: 0.25rem;
  font-feature-settings: "tnum" 1;
}

.entry__body { min-width: 0; }

.entry__kind {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  margin-bottom: var(--space-3);
}

.entry__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--label);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.entry__body p {
  font-size: var(--text-base);
  color: var(--label-secondary);
  line-height: 1.65;
  max-width: 100%;
}


/* ============================================================
   11. SCREENSHOT STRIP
   ============================================================ */

.strip-wrap {
  margin-top: var(--space-4);
  /* Strip bleeds slightly past the container on the right to suggest
     more content beyond the viewport. */
  margin-right: calc(-1 * var(--space-6));
}

@media (min-width: 768px) {
  .strip-wrap { margin-right: calc(-1 * var(--space-10)); }
}

.screenshot-strip {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--space-4) var(--space-6);
  padding-right: var(--space-12);
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}

.screenshot-strip__frame {
  flex-shrink: 0;
  width: 12.5rem;
  aspect-ratio: 9 / 19;
  border-radius: 1.5rem;
  background-color: var(--bg-elevated);
  border: 1px solid var(--rule);
  scroll-snap-align: start;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
}

.screenshot-strip__frame::before {
  content: "";
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  height: 60%;
  border: 1px dashed var(--rule);
  border-radius: 0.5rem;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-inset) 50%, transparent),
    transparent
  );
}

.screenshot-strip__frame p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  max-width: 100%;
}


/* ============================================================
   12. DEDICATION
   The "Built alongside, not for" essay. Pull-quote treatment.
   This is the heart of the site, so it gets its own typographic
   moment: serif, larger, indented, set apart with rules.
   ============================================================ */

.dedication {
  padding-block: var(--space-24);
  border-block: 1px solid var(--rule);
  position: relative;
}

.dedication .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .dedication .container {
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: var(--space-12);
  }
}

.dedication__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm);
  align-self: start;
}

.dedication__label::after {
  content: "";
  display: block;
  margin-top: var(--space-3);
  width: 2rem;
  height: 1px;
  background-color: var(--rule-strong);
}

.dedication__body {
  font-family: var(--font-serif);
  max-width: 36rem;
}

.dedication__quote {
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-3xl));
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--label);
  margin-bottom: var(--space-8);
}

.dedication__body p {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--label-secondary);
  margin-top: var(--space-5);
  max-width: 100%;
}

.dedication__body p:first-of-type {
  margin-top: 0;
}


/* ============================================================
   13. FAQ
   Numbered question/answer pairs. details/summary semantics.
   ============================================================ */

.faq-list {
  max-width: 48rem;
  border-top: 1px solid var(--rule);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item__question {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-6);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--label);
  min-height: 44px;
}

.faq-item__question::-webkit-details-marker { display: none; }

.faq-item__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--warm);
  font-feature-settings: "tnum" 1;
  align-self: center;
}

.faq-item__mark {
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  align-self: center;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform var(--duration-normal) var(--ease-out);
}

.faq-item__mark::before,
.faq-item__mark::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  border-radius: 1px;
}

.faq-item__mark::before {
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  transform: translateY(-50%);
}

.faq-item__mark::after {
  top: 0; left: 50%;
  width: 1.5px; height: 100%;
  transform: translateX(-50%);
  transition: transform var(--duration-normal) var(--ease-out);
}

.faq-item[open] .faq-item__mark::after { transform: translateX(-50%) scaleY(0); }

.faq-item__question:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 2px;
}

.faq-item__question:hover .faq-item__mark { color: var(--accent-hover); }

.faq-item__answer {
  padding-left: calc(var(--text-xs) + var(--space-5) + 0.5rem);
  padding-bottom: var(--space-8);
  padding-right: var(--space-10);
  max-width: 48rem;
}

.faq-item__answer p {
  font-size: var(--text-base);
  color: var(--label-secondary);
  line-height: 1.7;
  max-width: 100%;
}

.faq-item__answer p + p { margin-top: var(--space-3); }

@media (max-width: 640px) {
  .faq-item__question { font-size: var(--text-lg); }
  .faq-item__answer { padding-left: 0; padding-right: 0; }
}


/* ============================================================
   14. PHONE MOCKUP
   CSS-only preview. Shows three concept cards stacked: morning
   reading, today's spoons, recent session. Tells the story of
   what the app does without needing a real screenshot.
   ============================================================ */

.phone {
  position: relative;
  width: 17.5rem;
  aspect-ratio: 9 / 19;
  margin-inline: auto;
  border-radius: 2.5rem;
  background: linear-gradient(
    155deg,
    var(--bg-inset) 0%,
    var(--bg-elevated) 60%
  );
  border: 1px solid var(--rule-strong);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--label) 6%, transparent) inset,
    0 32px 64px -16px rgba(0, 0, 0, 0.32),
    0 8px 16px -4px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.phone__notch {
  position: absolute;
  top: 0.875rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 1.375rem;
  background-color: #000;
  border-radius: 999px;
  z-index: 2;
}

.phone__screen {
  position: absolute;
  inset: 0.5rem;
  border-radius: 2rem;
  background-color: var(--bg);
  padding: var(--space-12) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
}

.phone__statusbar {
  position: absolute;
  top: var(--space-4);
  left: var(--space-5);
  right: var(--space-5);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  color: var(--label);
  font-weight: 600;
  z-index: 2;
}

.phone__date {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  margin-bottom: var(--space-1);
}

.phone__greeting {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--label);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.phone__card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
  padding: var(--space-3) var(--space-4);
}

.phone__card-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  margin-bottom: var(--space-1);
}

/* Morning reading card */
.phone__metric {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.phone__metric-value {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--label);
  letter-spacing: -0.01em;
  line-height: 1;
}

.phone__metric-unit {
  font-size: 0.625rem;
  color: var(--label-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.phone__metric-trend {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--accent);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

/* Spoon meter */
.phone__spoons {
  display: flex;
  gap: 4px;
  margin-top: var(--space-2);
}

.phone__spoon {
  flex: 1;
  height: 0.5rem;
  border-radius: 2px;
  background-color: var(--bg-inset);
  border: 1px solid var(--rule);
}

.phone__spoon--filled {
  background-color: var(--accent);
  border-color: var(--accent);
}

.phone__spoon--partial {
  background: linear-gradient(
    to right,
    var(--accent) 50%,
    var(--bg-inset) 50%
  );
}

.phone__spoon-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.6875rem;
  color: var(--label-secondary);
  margin-top: var(--space-2);
  line-height: 1.3;
}

/* Session log */
.phone__session {
  display: flex;
  gap: var(--space-3);
  font-size: 0.6875rem;
  color: var(--label-secondary);
  line-height: 1.4;
}

.phone__session-time {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--label-tertiary);
  flex-shrink: 0;
  width: 2.5rem;
}

.phone__session-title {
  font-family: var(--font-serif);
  color: var(--label);
  font-weight: 500;
}

.phone__session-cost {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--label-tertiary);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.phone__tab {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.phone__tab-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--label-tertiary);
  opacity: 0.5;
}

.phone__tab-dot--active {
  background-color: var(--accent);
  opacity: 1;
  width: 0.5rem;
  height: 0.5rem;
}

@media (max-width: 480px) {
  .phone { width: 15rem; }
}


/* ============================================================
   15. POLICY PAGES
   Long-form reading layout. Drop cap on first paragraph, generous
   leading, serif h2/h3 in body, clear hierarchy.
   ============================================================ */

.policy-header {
  padding-block: var(--space-20) var(--space-12);
  border-bottom: 1px solid var(--rule);
  background-color: var(--bg-hero);
  position: relative;
}

.policy-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 50% 40% at 12% 18%,
      color-mix(in srgb, var(--warm) 6%, transparent),
      transparent 70%
    );
  opacity: 0.85;
}

.policy-header .container {
  position: relative;
}

.policy-header__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.policy-header__eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background-color: var(--rule-strong);
}

.policy-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--label);
  margin-bottom: var(--space-4);
  max-width: 24ch;
}

.policy-header .meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label-tertiary);
}

.policy-body {
  padding-block: var(--space-16) var(--space-24);
}

.policy-body .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 960px) {
  .policy-body .container {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-16);
  }
}

.policy-body__aside {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  padding-top: var(--space-3);
}

.policy-body__aside::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background-color: var(--rule-strong);
  margin-bottom: var(--space-3);
}

.prose {
  max-width: var(--prose-max);
  font-size: var(--text-base);
  line-height: 1.75;
}

.prose > * + * { margin-top: var(--space-5); }

.prose h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.prose h2:first-of-type { margin-top: var(--space-8); }

.prose h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 500;
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  color: var(--label);
  max-width: 36rem;
}

.prose p {
  color: var(--label);
  max-width: 100%;
}

.prose p + p { margin-top: var(--space-4); }

.prose ul, .prose ol {
  padding-left: var(--space-6);
  max-width: 100%;
  color: var(--label);
}

.prose li {
  color: var(--label);
  margin-top: var(--space-2);
  line-height: 1.65;
}

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

.prose strong { color: var(--label); }

/* Drop cap on the first paragraph after the "short version" h2 */
.prose h2:first-of-type + p::first-letter {
  font-family: var(--font-serif);
  font-size: 3.5em;
  font-weight: 500;
  line-height: 0.85;
  float: left;
  padding-right: 0.08em;
  padding-top: 0.06em;
  color: var(--accent);
}

@media (max-width: 480px) {
  .prose h2:first-of-type + p::first-letter {
    font-size: 2.75em;
  }
}


/* ============================================================
   16. CALLOUT
   ============================================================ */

.callout {
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-8);
  border-left: 2px solid var(--warm);
  background-color: var(--warm-subtle);
  font-size: var(--text-sm);
  color: var(--label-secondary);
  line-height: 1.65;
  border-radius: 0 0.25rem 0.25rem 0;
  max-width: 100%;
}

.callout--review { /* alias, behavior identical */ }

.callout strong {
  color: var(--label);
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0;
}


/* ============================================================
   17. MOTION
   One orchestrated hero reveal on page load. All micro-interactions
   gated by prefers-reduced-motion.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal--in {
  opacity: 1;
  transform: none;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal-stagger--in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms;   }
.reveal-stagger--in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 100ms; }
.reveal-stagger--in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 200ms; }
.reveal-stagger--in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 300ms; }
.reveal-stagger--in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 400ms; }
.reveal-stagger--in > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero::before, .policy-header::before { opacity: 0.5; }
}


/* ============================================================
   18. RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 480px) {
  .hero { padding-block: var(--space-16) var(--space-12); }
  .hero__heading { font-size: clamp(2rem, 8vw, 2.75rem); }
  .hero__signal { grid-template-columns: 1fr; gap: var(--space-4); }
  .section-heading { font-size: var(--text-2xl); }
  .entry { padding: var(--space-8) var(--space-5); gap: var(--space-4); }
  .entry__title { font-size: var(--text-xl); }
}


/* ============================================================
   19. PRINT
   ============================================================ */

@media print {
  .site-nav,
  .hero__actions,
  .hero__visual,
  .strip-wrap,
  .site-footer,
  .callout {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
    font-family: Georgia, serif;
  }

  a { color: #000; border-bottom: none; }

  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  .hero, .section, .policy-header, .policy-body {
    padding-block: 1rem;
    border: none;
  }
}