/* Dewring website. The app's palette and type (cycle-tracker App/Theme.swift at 8a56347): paper by day,
   void by night, a soft phosphor for controls, one amber-leaning red used only for period days. Depth
   comes from type and space, never from cards, pills or shadows. System fonts only: nothing is fetched. */

:root {
  --paper: #E6E8E1;
  --void: #070809;
  --ink: #15181B;
  --quiet: #5B6066;
  --hairline: #C9CDC2;
  --accent: #0E7C66;
  --period: #C8321E;
  --fertile: #0E8A6E;
  --amber: #A85A08;
  --forest: #0F3A2C;
  --ground: var(--paper);
  --fg: var(--ink);
  --fg-quiet: var(--quiet);

  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 36rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E6E8E1;
    --quiet: #A9ABA6;
    --hairline: #24282A;
    --accent: #8FE3D0;
    --period: #EC4A2E;
    --fertile: #16A07F;
    --amber: #FFAA33;
    --forest: #05140F;
    --ground: var(--void);
    --fg: var(--ink);
    --fg-quiet: var(--quiet);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--fg);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
p { margin: 0; text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
body { font-feature-settings: "kern", "liga"; hanging-punctuation: first; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--fg-quiet); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose h2:not(:first-child) { margin-top: 1.6em; }
.prose h3:not(:first-child) { margin-top: 1.4em; }
.wrap { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; }

/* ---- Internal draft bar: gone from a public build (the build refuses to make one while it exists). */
.draft-bar {
  background: var(--amber);
  color: #fff;
  font: 500 0.78rem/1.4 var(--sans);
  padding: 0.45rem var(--gutter);
  text-align: center;
  letter-spacing: 0.01em;
}
@media (prefers-color-scheme: dark) { .draft-bar { color: #1a1206; } }
.placeholder {
  color: var(--amber);
  font: 500 0.78rem/1.4 var(--sans);
  letter-spacing: 0.02em;
  border: 1px dashed currentColor;
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
}
.placeholder-block {
  border-left: 2px dashed var(--amber);
  color: var(--amber);
  padding: 0.2rem 0 0.2rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.5;
}
/* Where Dewring can be had: a quiet line until there is a store listing to link. */
.availability {
  display: inline-flex; align-items: center;
  color: var(--fg-quiet); font: 500 0.95rem/1.3 var(--sans); letter-spacing: 0.01em;
}

/* ---- The wordmark: lowercase, engraved (an ink outline over fine hatching), a dew bead as the dot of
   the i. Same construction as the app's Wordmark. The bead is clear glass; on period days it is red. */
.wordmark {
  --size: 1em;
  /* Engraved in the app's greens: a deep forest line over phosphor hatching. */
  --wm-line: #0F3A2C;
  --wm-hatch: #0E7C66;
  font: 500 var(--size)/1 var(--serif);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  color: var(--fg);
}
.wordmark .engraved {
  color: transparent;
  -webkit-text-stroke: max(0.6px, calc(var(--size) * 0.013)) var(--wm-line);
  background: repeating-linear-gradient(to bottom, var(--wm-hatch) 0 max(0.6px, calc(var(--size) * 0.013)), transparent 0 max(2.2px, calc(var(--size) * 0.045)));
  -webkit-background-clip: text;
  background-clip: text;
}
.wordmark .dotless { position: relative; }
/* A zero-size box sitting on the baseline just after the dotless i: the bead hangs from it at one
   x-height plus a little, so it lands where the dot of an i belongs in any serif the system has. */
.wordmark .base { display: inline-block; position: relative; width: 0; height: 0; vertical-align: baseline; }
.wordmark .bead {
  position: absolute;
  bottom: calc(1ex + 0.03em);
  left: -0.255em;
  width: 0.2em; height: 0.2em;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 30% 20% at 34% 30%, rgba(255,255,255,0.95) 0 60%, transparent 62%),
    radial-gradient(circle at 62% 78%, rgba(255,255,255,0.85), transparent 34%),
    radial-gradient(circle, transparent 34%, color-mix(in srgb, var(--fg) 12%, transparent) 60%, color-mix(in srgb, var(--fg) 42%, transparent) 100%),
    var(--ground);
  box-shadow: inset 0 0 0 max(0.6px, calc(var(--size) * 0.012)) color-mix(in srgb, var(--fg) 70%, transparent),
              calc(var(--size) * 0.01) calc(var(--size) * 0.02) calc(var(--size) * 0.02) color-mix(in srgb, var(--fg) 30%, transparent);
  transition: background 0.9s ease, box-shadow 0.9s ease;
}
.wordmark:not(.is-clear) .bead {
  background:
    radial-gradient(ellipse 30% 20% at 34% 30%, rgba(255,255,255,0.95) 0 60%, transparent 62%),
    radial-gradient(circle at 60% 65%, color-mix(in srgb, var(--period) 80%, transparent), var(--period) 60%, color-mix(in srgb, var(--period) 95%, black));
  box-shadow: inset 0 0 0 max(0.6px, calc(var(--size) * 0.012)) var(--period),
              calc(var(--size) * 0.01) calc(var(--size) * 0.02) calc(var(--size) * 0.02) color-mix(in srgb, var(--fg) 20%, transparent);
}

@media (prefers-color-scheme: dark) { .wordmark { --wm-line: #CFEFE4; --wm-hatch: #4FBFA5; } }
.hero .wordmark, .cycle .wordmark { --wm-line: #0F3A2C; --wm-hatch: #0E7C66; }
.hero.is-night .wordmark { --wm-line: #CFEFE4; --wm-hatch: #4FBFA5; }

/* ---- Motion. The opening: the engraving fades up, the dew drops onto the i, then the garden grows
   (garden.js). Down the page, each section's content eases in once as it arrives. All of it is off
   under Reduce Motion. */
@keyframes rise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@keyframes drop {
  0% { opacity: 0; transform: translateY(-1.6em) scale(0.7, 1.25); }
  55% { opacity: 1; transform: translateY(0.03em) scale(1.12, 0.86); }
  72% { transform: translateY(-0.07em) scale(0.96, 1.04); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-mark .engraved { animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
  .hero-mark .bead { animation: drop 0.9s cubic-bezier(.3,.6,.3,1) 0.75s both; transform-origin: 50% 100%; }
  .hero-line { animation: rise 0.9s cubic-bezier(.2,.7,.2,1) 0.25s both; }
  .hero-sub { animation: rise 0.9s cubic-bezier(.2,.7,.2,1) 0.4s both; }
  .hero-actions { animation: rise 0.9s cubic-bezier(.2,.7,.2,1) 0.55s both; }
  .reveal-ready [data-reveal] { opacity: 0; transform: translateY(1.1rem); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---- Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.6rem; }
.site-header .home { text-decoration: none; }
.site-header .wordmark { --size: 1.7rem; }
.site-nav { display: flex; gap: clamp(0.9rem, 2.2vw, 2rem); font-size: 0.93rem; }
.site-nav a { text-decoration: none; color: var(--fg-quiet); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--fg); }
@media (max-width: 640px) { .site-nav .opt { display: none; } }

/* ---- The garden canvases */
.garden {
  position: relative; overflow: hidden; touch-action: pan-y; cursor: default;
  /* No visible box: the scene fades in at its top, so rain and leaves come out of the page. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
}
/* And where it stands on the page's own ground, its base dissolves into it. */
.garden.fade-base {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 76%, transparent 100%);
}
.garden canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.garden-plants { transition: filter 1.5s ease; }
.garden-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.cycle, .finale { position: relative; }
/* Moods colour only the plants themselves (filters touch drawn pixels, never the empty page). */
.garden-tint { display: none; }
.garden.mood-dew .garden-plants { filter: brightness(0.94) saturate(0.92); }
.garden.mood-bloom .garden-plants { filter: brightness(1.04) saturate(1.18); }
.garden.mood-warm .garden-plants { filter: sepia(0.24) saturate(1.14) brightness(1.02); }
.garden.is-rain .garden-plants { filter: saturate(0.7) brightness(0.9) hue-rotate(8deg); }
.garden.is-night .garden-plants { filter: brightness(0.88) saturate(0.92); }
.garden.is-night.mood-warm .garden-plants { filter: sepia(0.24) saturate(1.05) brightness(0.9); }
.garden.is-night.is-rain .garden-plants { filter: saturate(0.66) brightness(0.8) hue-rotate(8deg); }

/* ---- Hero: the wordmark, one line, one paragraph, one action; the garden below. */
.hero {
  --ground: var(--paper); --fg: #15181B; --fg-quiet: #5B6066;
  position: relative;
  display: flex; flex-direction: column;
  min-height: calc(100svh - 3.6rem);
  background: var(--ground);
  color: var(--fg);
  transition: background 1.2s ease, color 1.2s ease;
}
.hero.is-night { --ground: var(--void); --fg: #E6E8E1; --fg-quiet: #A9ABA6; }
.hero-copy { text-align: center; padding: clamp(2.75rem, 9vh, 6.5rem) var(--gutter) 0; position: relative; z-index: 2; }
.hero-mark { margin: 0; line-height: 1; }
.hero .hero-mark .wordmark { --size: clamp(4.4rem, 12vw, 9rem); }
.hero-line { font: 400 clamp(1.5rem, 3vw, 2.3rem)/1.2 var(--serif); letter-spacing: -0.01em; margin-top: clamp(1.1rem, 3vh, 1.9rem); text-wrap: balance; }
.hero-sub { max-width: 34rem; margin: 1rem auto 0; color: var(--fg-quiet); font-size: clamp(1rem, 1.3vw, 1.1rem); }
.hero-actions { margin-top: 1.7rem; display: flex; gap: 0.8rem 1.6rem; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 0.95rem; }
.hero-garden { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; margin-top: clamp(1.5rem, 4vh, 3rem); }
.hero [data-garden] { height: clamp(19rem, 48vh, 36rem); }
.hero-floor {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0 var(--gutter) 1.2rem; margin-top: -2.6rem; position: relative; z-index: 3;
  color: var(--fg-quiet); font-size: 0.82rem;
}
.hero-hint { opacity: 0.8; margin: 0; }
.light-toggle { display: flex; gap: 0.2rem; }
.light-toggle button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0.3rem 0.55rem; cursor: pointer;
  opacity: 0.62; border-bottom: 1px solid transparent;
}
.light-toggle button[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; }

.button {
  display: inline-block;
  font: 500 1rem/1 var(--sans);
  padding: 0.95rem 1.6rem;
  background: var(--accent);
  color: var(--paper);
  border: 0; border-radius: 0.5rem;
  text-decoration: none; cursor: pointer;
}
@media (prefers-color-scheme: dark) { .button { color: var(--void); } }
.text-link { color: var(--fg); font-weight: 500; }

/* ---- Sections: one pattern everywhere (headline, one paragraph, then the thing itself). No eyebrow labels. */
.section { padding-block: clamp(5rem, 11vw, 9rem); }
.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lede { margin-top: 1.1rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.more { margin-top: 1.6rem; font-size: 0.95rem; }

/* What it does */
.does { display: grid; gap: clamp(3rem, 6vw, 6rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .does { grid-template-columns: 0.95fr 1.05fr; } }
.feature-groups { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 600px) and (max-width: 899px) { .feature-groups { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
@media (min-width: 900px) { .feature-groups { max-width: 30rem; } .feature { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; } .feature p { margin-top: 0.15rem; } }
.feature { padding: 1.6rem 0 1.8rem; border-top: 1px solid var(--hairline); }
.feature h3 { font-size: 1.35rem; }
.feature p { margin-top: 0.55rem; color: var(--fg-quiet); font-size: 0.98rem; }
.feature p a { color: var(--fg); }
.phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(1.2rem, 3.5vw, 2.4rem); }
/* Three phones side by side, straight on, the same size, none covering another: Apple's product bezels
   are shown as is (no tilt, overlap, shadow or reflection), per Apple's marketing guidelines. */
.phones.trio { align-items: flex-start; gap: clamp(0.8rem, 2.2vw, 1.4rem); padding-block: 1rem; }
.phones.trio .device { --w: min(28vw, 11rem); }
/* The garden section opens with the first screen beside its heading. */
.garden-intro { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; max-width: 60rem; margin: 0 auto clamp(3rem, 6vw, 5rem); }
@media (min-width: 860px) { .garden-intro { grid-template-columns: 1fr auto; } }
.garden-intro .section-head { margin-bottom: 0; }
.splash-note { margin-top: 1.1rem; color: var(--fg-quiet); font-size: 0.95rem; max-width: 30rem; }
.splash-figure { margin: 0; display: flex; justify-content: center; }
.splash-figure .device { --w: min(52vw, 14rem); }

/* A screen from the app in Apple's iPhone 17 Pro bezel (Apple Design Resources), composited as is:
   the screenshot fills the bezel's screen opening, nothing is drawn over or around the device. */
.device { --w: min(44vw, 16.5rem); width: var(--w); flex: none; }
.device img { display: block; width: 100%; height: auto; }
.caption { font-size: 0.82rem; color: var(--fg-quiet); text-align: center; margin-top: 1.4rem; }

/* The garden through a cycle */
.cycle { padding-bottom: 0; }
@media (prefers-color-scheme: dark) { .cycle .wordmark { --wm-line: #CFEFE4; --wm-hatch: #4FBFA5; } .dial::-webkit-slider-thumb, .dial::-moz-range-thumb { background: var(--void); border-color: var(--ink); } }
.cycle .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cycle-panel { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: center; max-width: 60rem; margin-inline: auto; }
@media (min-width: 860px) { .cycle-panel { grid-template-columns: auto 1fr; } }
.ring { --ring-ink: var(--ink); --ring-ground: var(--ground); --ring-hair: var(--hairline); position: relative; width: min(84vw, 25rem); aspect-ratio: 1; margin-inline: auto; }
.ring canvas { width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ring canvas:active { cursor: grabbing; }
.ring:has(.ring-input:focus-visible) canvas { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 50%; }
.ring-input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ring-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.ring-centre .wordmark { --size: clamp(1.6rem, 4.4vw, 2.1rem); }
.ring-day { font: 400 clamp(2.8rem, 8vw, 3.8rem)/1 var(--serif); margin-top: 0.7rem; font-variant-numeric: lining-nums tabular-nums; }
.ring-phase { color: var(--fg-quiet); font-size: 0.95rem; margin-top: 0.45rem; max-width: 11rem; line-height: 1.35; }
.cycle-side { max-width: 30rem; }
@media (max-width: 859px) { .cycle-side { margin-inline: auto; text-align: center; } }
.cycle-text { color: var(--fg); font: 400 clamp(1.15rem, 1.7vw, 1.35rem)/1.45 var(--serif); min-height: 4.4em; }
.ring-legend { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; font-size: 0.84rem; color: var(--fg-quiet); }
@media (max-width: 859px) { .ring-legend { justify-content: center; } }
.ring-legend li { display: inline-flex; align-items: center; gap: 0.45rem; transition: opacity 0.4s; }
.ring-legend .key { width: 0.8rem; height: 0.8rem; border-radius: 50%; display: inline-block; }
.key.period { background: var(--period); }
.key.fertile { background: var(--fertile); }
.key.warm { background: #D68C28; }
.key.today { border: 1.5px solid var(--ink); background: transparent; }
.ring-legend .is-fertile-off { opacity: 0.3; }
.cycle-switches { display: flex; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1.6rem; font-size: 0.95rem; }
@media (max-width: 859px) { .cycle-switches { justify-content: center; } }
.switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 2.6rem; height: 1.5rem; border-radius: 1rem; background: var(--hairline); position: relative; cursor: pointer; transition: background 0.25s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); border-radius: 50%; background: #fff; transition: translate 0.25s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { translate: 1.1rem 0; }
.cycle-note { font-size: 0.8rem; color: var(--fg-quiet); margin-top: 1.1rem; }
.cycle.is-touched .cycle-walk { display: none; }
.cycle-garden { height: clamp(24rem, 46vw, 36rem); margin-top: clamp(1rem, 3vw, 2rem); }
/* The section deepens under the garden into the dark section below: the plants dissolve into it. */
.cycle { background: linear-gradient(to bottom, var(--ground) calc(100% - clamp(8rem, 12vw, 10rem)), #0D2A20 calc(100% - clamp(3rem, 5vw, 4.5rem)), var(--void) 100%); }
.cycle .floor { display: none; }
.floor { height: 3rem; background: var(--forest); margin-top: -1px; }

/* Your data */
.yours .section-head { max-width: 50rem; }
.yours { background: var(--void); color: #E6E8E1; --fg: #E6E8E1; --fg-quiet: #A9ABA6; --hairline: #24282A; --accent: #8FE3D0; --ground: var(--void); }
.promises { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.promises li {
  display: grid; grid-template-columns: 3rem 1fr; gap: clamp(1rem, 3vw, 2.4rem); align-items: start;
  padding: clamp(1.4rem, 3vw, 2.1rem) 0; border-top: 1px solid var(--hairline);
}
.promises li:last-child { border-bottom: 1px solid var(--hairline); }
.promises svg { width: 2.3rem; height: 2.3rem; color: var(--accent); margin-top: 0.25rem; }
.promises p { font: 400 clamp(1.45rem, 3.1vw, 2.45rem)/1.22 var(--serif); letter-spacing: -0.01em; }

.proof { margin-top: clamp(4.5rem, 9vw, 7rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hairline); display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .proof { grid-template-columns: 0.9fr 1.1fr; } }
.proof h3 { margin-top: 0.7rem; }
.proof-rows { display: grid; gap: 0; margin: 0; }
.proof-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--hairline); }
.proof-row:last-of-type { border-bottom: 1px solid var(--hairline); }
.proof-row dt { color: var(--fg-quiet); }
.proof-row dd { margin: 0; font: 400 1.5rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.proof-row.is-zero dd { color: var(--accent); }
.proof-list { list-style: none; padding: 0; margin: 0.9rem 0 0; font-size: 0.84rem; color: var(--fg-quiet); }
.proof-list li { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.proof-how { font-size: 0.92rem; color: var(--fg-quiet); margin-top: 0.9rem; max-width: 26rem; }

/* Breathe */
.breathe { text-align: center; }
.breathe .section-head { margin-bottom: 0; }
.breathe-stage { position: relative; width: min(76vw, 25rem); aspect-ratio: 1; margin: 1.5rem auto 0; }
.breathe-stage canvas { width: 100%; height: 100%; }
.breathe-word { font: 400 clamp(1.6rem, 3vw, 2.1rem)/1.2 var(--serif); margin-top: 0.8rem; min-height: 1.3em; }
.breathe-count { color: var(--fg-quiet); font-size: 0.9rem; font-variant-numeric: tabular-nums; margin-top: 0.35rem; min-height: 1.5em; }
.breathe .button { margin-top: 1.5rem; }

/* Closing: what it isn't, and what Powered by Synaping means. */
.closing { border-top: 1px solid var(--hairline); }
.closing-grid { display: grid; gap: clamp(3.5rem, 7vw, 6rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .closing-grid { grid-template-columns: 1fr 1fr; } }
.closing-block p { margin-top: 1rem; color: var(--fg-quiet); max-width: 32rem; }
/* The plate, unaltered, on a plain ground, with its clear space (0.3 x its height). */
.plate { height: 56px; padding: 0 0 calc(56px * 0.3); margin: 0; box-sizing: content-box; }
.plate img { height: 56px; width: auto; }
.plate .on-dark { display: none; }
@media (prefers-color-scheme: dark) { .plate .on-light { display: none; } .plate .on-dark { display: block; } }
.closing-block .notice { font-size: 0.8rem; margin-top: 1.4rem; }
.closing-block .placeholder-block { margin-top: 1.2rem; }

.finale { padding-top: clamp(5rem, 11vw, 9rem); text-align: center; border-top: 1px solid var(--hairline); }
.finale-copy h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 18ch; margin-inline: auto; }
.finale-copy .lede { margin: 1.2rem auto 0; }
.finale-garden { height: clamp(17rem, 34vw, 28rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
.finale .floor, .page-garden + .floor { display: none; }
.finale + .site-footer, .finale .floor + * { border-top: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--hairline); padding-block: 3rem 4rem; font-size: 0.9rem; color: var(--fg-quiet); }
.site-footer .wrap { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .site-footer .wrap { grid-template-columns: 1fr auto; } }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.site-footer nav a { text-decoration: none; color: var(--fg); }
.site-footer .wordmark { --size: 2rem; }
.site-footer p + p { margin-top: 0.5rem; }

/* Inner pages: a short head, then the page as rows across the full width: each section's heading on the
   left, its text on the right at a reading measure, one hairline between sections. No eyebrows, no
   contents list (the headings on the left are the contents). */
.page-head { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.page-head > * { max-width: 52rem; }
.page-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.page-head .lede { margin-top: 1.2rem; }
.page-body { padding-bottom: clamp(4rem, 9vw, 7rem); }
.legal-status { margin-top: 1.2rem; }
.doc { border-top: 1px solid var(--hairline); }
.doc-intro { padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--hairline); max-width: 40rem; }
.doc-sec { display: grid; grid-template-columns: 1fr; gap: 1rem clamp(2rem, 6vw, 6rem); padding-block: clamp(2rem, 4.5vw, 3.4rem); }
.doc-sec + .doc-sec { border-top: 1px solid var(--hairline); }
@media (min-width: 900px) {
  .doc-sec { grid-template-columns: minmax(14rem, 22rem) minmax(0, 40rem); }
  .doc-side { position: sticky; top: 5.5rem; align-self: start; }
}
.doc-side h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.18; }
.doc-text { font-size: 1.04rem; line-height: 1.65; }
.doc-text > * + * { margin-top: 0.9em; }
.doc-text h3 { font-size: 1.2rem; margin-top: 1.7em; }
.doc-text h3:first-child { margin-top: 0; }
.doc-text h3 + * { margin-top: 0.4em; }
.doc-text ul { padding-left: 1.1rem; }
.doc-text li + li { margin-top: 0.45em; }
/* A page's short version reads first and larger. */
.doc-sec:has(#short) .doc-text { font: 400 clamp(1.25rem, 1.9vw, 1.5rem)/1.45 var(--serif); color: var(--fg); }
/* Key numbers beside a section: figure and caption as rows on hairlines, never tiles. */
.figures { margin: 1.6rem 0 0; display: grid; gap: 0; }
.figures div { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.9rem; align-items: baseline; padding-block: 0.7rem; border-top: 1px solid var(--hairline); }
.figures dt { font: 400 1.9rem/1 var(--serif); color: var(--accent); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.figures dd { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--fg-quiet); }
.page-garden { height: clamp(10rem, 22vw, 16rem); }
.page-garden + .floor { height: 2.4rem; background: var(--forest); margin-top: -1px; }

/* Apple's trademark credit (Apple's guidelines for third parties): small and quiet, last in the footer column. */
.site-footer .credit { margin-top: 0.9rem; font-size: 0.75rem; color: var(--fg-quiet); max-width: 26rem; }