/* Landing page. The story is text -> AI -> calendar: a sample document with the
   dates the AI found, how each date was read, and where the events land.
   Light and dark themes: the system decides unless the visitor picks one with the
   nav toggle (theme.js sets html[data-theme]). Windows system fonts only, because
   the site CSP allows no font downloads. Models (review, desktop, feed) live in
   /landing/*.css and use these tokens. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --desk: #f1f2f4;
  --bar: rgb(241 242 244 / .88);
  --surface: #ffffff;
  --surface-2: #f6f7f8;
  --ink: #1d2026;
  --pencil: #585f6a;
  --rule: #d8dbe0;
  --control-edge: #80878f;
  --paper: #ffffff;
  --paper-ink: #1d2026;
  --paper-pencil: #585f6a;
  --hl: #ffe45e;
  --mark-bg: #ffe45e;
  --mark-text: inherit;
  --red: #d4352b;
  --on-red: #ffffff;
  --tile: #ffffff;
  --check: #8a4f00;
  --check-bg: #fff3d1;
  --button: #1d2026;
  --button-text: #ffffff;
  --button-hover: #363a43;
  --focus: #2f6feb;
  --error: #b42318;
  --shadow-sheet: 0 0 0 1px rgb(29 32 38 / .06), 0 1px 2px rgb(29 32 38 / .06), 0 22px 48px -24px rgb(29 32 38 / .28);
  --shadow-card: 0 0 0 1px rgb(29 32 38 / .07), 0 1px 2px rgb(29 32 38 / .05);
  --backdrop: rgb(29 32 38 / .45);

  --display: Bahnschrift, "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --narrow: Bahnschrift, "DIN Condensed", "Arial Narrow", sans-serif;
  --text: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --paper-serif: "Sitka Text", Cambria, Georgia, "Times New Roman", serif;

  --gutter: 2rem;
  --section: 6.5rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --desk: #131519;
    --bar: rgb(19 21 25 / .85);
    --surface: #1e2228;
    --surface-2: #262b32;
    --ink: #eceef1;
    --pencil: #a3aab5;
    --rule: #2c3139;
    --control-edge: #6b7380;
    --paper: #1e2228;
    --paper-ink: #e6e8eb;
    --paper-pencil: #a3aab5;
    --mark-bg: rgb(255 214 10 / .22);
    --mark-text: #ffe27a;
    --tile: #262b32;
    --check: #f0b35e;
    --check-bg: #2e2a22;
    --button: #eceef1;
    --button-text: #15171b;
    --button-hover: #ffffff;
    --focus: #7fa6ff;
    --error: #ff8f80;
    --shadow-sheet: 0 0 0 1px rgb(0 0 0 / .5), 0 24px 60px -24px rgb(0 0 0 / .7);
    --shadow-card: 0 0 0 1px rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .4);
    --backdrop: rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --desk: #131519;
  --bar: rgb(19 21 25 / .85);
  --surface: #1e2228;
  --surface-2: #262b32;
  --ink: #eceef1;
  --pencil: #a3aab5;
  --rule: #2c3139;
  --control-edge: #6b7380;
  --paper: #1e2228;
  --paper-ink: #e6e8eb;
  --paper-pencil: #a3aab5;
  --mark-bg: rgb(255 214 10 / .22);
  --mark-text: #ffe27a;
  --tile: #262b32;
  --check: #f0b35e;
  --check-bg: #2e2a22;
  --button: #eceef1;
  --button-text: #15171b;
  --button-hover: #ffffff;
  --focus: #7fa6ff;
  --error: #ff8f80;
  --shadow-sheet: 0 0 0 1px rgb(0 0 0 / .5), 0 24px 60px -24px rgb(0 0 0 / .7);
  --shadow-card: 0 0 0 1px rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .4);
  --backdrop: rgb(0 0 0 / .6);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body.landing {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 400 1rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.landing img { max-width: 100%; height: auto; }
.landing a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.landing :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.landing [hidden] { display: none !important; }
.landing h1, .landing h2, .landing h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
.landing h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.01em; font-variation-settings: "wdth" 86; }
.landing h3 { font-size: 1.3125rem; line-height: 1.25; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: min(75rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .5rem .75rem; background: var(--surface); border-radius: 6px; }
.skip-link:focus { top: .75rem; }

/* ---------- Daylight background ----------
   A fixed layer behind the whole page: a colour wash for the visitor's time of
   day, a sun (or moon) on its arc, slow colour orbs and paper grain.
   landing.js sets the colours; this default is a daytime wash. */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  --a: #d7e3f3; --b: #e5edf4; --c: #e2e0f1; --sun: #ffe2a8; --sun-x: 50%; --sun-y: -4%;
  background:
    radial-gradient(60% 55% at 12% 18%, color-mix(in srgb, var(--a) 80%, transparent), transparent 70%),
    radial-gradient(55% 60% at 88% 85%, color-mix(in srgb, var(--b) 80%, transparent), transparent 70%),
    radial-gradient(70% 55% at 60% 5%, color-mix(in srgb, var(--c) 70%, transparent), transparent 70%),
    var(--desk);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sky { --a: #213452; --b: #27394b; --c: #1a2a3b; --sun: #ffd79a; --glow: 12%; --halo: 5%; } }
:root[data-theme="dark"] .sky { --a: #213452; --b: #27394b; --c: #1a2a3b; --sun: #ffd79a; --glow: 12%; --halo: 5%; }
.sky > span { position: absolute; will-change: transform; }
.sky-sun {
  left: var(--sun-x); top: var(--sun-y); width: 46vmax; height: 46vmax; margin: -23vmax 0 0 -23vmax; border-radius: 50%;
  /* Faint in dark mode so grey text over it keeps its contrast. */
  background: radial-gradient(circle, color-mix(in srgb, var(--sun) var(--glow, 55%), transparent) 0, color-mix(in srgb, var(--sun) var(--halo, 18%), transparent) 38%, transparent 66%);
  opacity: .7; animation: sky-breathe 16s ease-in-out infinite alternate;
}
.sky-orb { width: 38vmax; height: 38vmax; border-radius: 50%; filter: blur(40px); opacity: .45; animation: sky-float 70s ease-in-out infinite alternate; }
.sky-orb.o1 { left: -10vmax; top: 30%; background: var(--a); }
.sky-orb.o2 { right: -12vmax; top: 5%; background: var(--c); animation-duration: 85s; animation-direction: alternate-reverse; }
.sky-orb.o3 { left: 30%; bottom: -18vmax; background: var(--b); animation-duration: 95s; }
.sky-orb.o4 { right: 18%; top: 55%; width: 22vmax; height: 22vmax; background: color-mix(in srgb, var(--sun) 10%, var(--b)); opacity: .3; animation-duration: 60s; animation-direction: alternate-reverse; }
.sky-grain {
  inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
@keyframes sky-breathe { from { transform: scale(.94); opacity: .6; } to { transform: scale(1.06); opacity: .8; } }
@keyframes sky-float { from { transform: translate(0, 0); } to { transform: translate(8vmax, -6vmax); } }
@media (prefers-reduced-motion: reduce) {
  .sky > span { animation: none !important; }
}
@media print { .sky { display: none; } }

/* ---------- Navigation ---------- */
.bar { position: sticky; top: 0; z-index: 30; background: var(--bar); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--rule); }
.bar-inner { display: flex; align-items: center; gap: 1.75rem; min-height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: .625rem; font: 600 1.125rem/1 var(--display); text-decoration: none; }
.brand img { border-radius: 6px; }
.bar-links { display: flex; gap: 1.75rem; margin-left: auto; font-size: .875rem; }
.bar-links a, .bar-account, .nav-extra { text-decoration: none; color: var(--pencil); }
.bar-links a { white-space: nowrap; }
.bar-links a:hover, .bar-account:hover, .nav-extra:hover { color: var(--ink); text-decoration: underline; }
.bar-account { font-size: .875rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.nav-extra { font-size: .875rem; }
.theme-toggle { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-right: -.375rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pencil); cursor: pointer; visibility: hidden; }
[data-theme-ready] .theme-toggle { visibility: visible; }
.theme-toggle::before { content: ""; position: absolute; inset: -4px; }
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
.theme-toggle[aria-pressed="true"] { color: var(--ink); }
.theme-toggle[aria-pressed="true"] path { fill: currentColor; }
/* The language switch: ET | EN, each a link to that language's page */
.lang-switch { display: inline-flex; align-items: center; gap: .125rem; margin-right: -.75rem; }
.lang-switch a { min-width: 2rem; padding: .375rem .4rem; border-radius: 6px; color: var(--pencil); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; line-height: 1; text-align: center; text-decoration: none; }
.lang-switch a:hover { background: var(--surface-2); color: var(--ink); }
.lang-switch [aria-current="true"] { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }

/* ---------- Buttons ---------- */
.button, .inv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: .625rem 1.125rem;
  border: 0; border-radius: 6px;
  font: 600 .9375rem/1.3 var(--text); text-decoration: none; cursor: pointer;
  transition: background-color .15s, box-shadow .15s;
}
.button.primary, .inv-btn.primary { background: var(--button); color: var(--button-text); }
.button.primary:hover, .inv-btn.primary:hover { background: var(--button-hover); }
.button.quiet, .inv-btn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--control-edge); }
.button.quiet:hover, .inv-btn:not(.primary):hover { background: var(--surface); }
.inv-btn:disabled { opacity: .6; cursor: progress; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: 3rem; }
.section-head h2 { max-width: 20ch; }
.section-head p { margin: 0; max-width: 46ch; color: var(--pencil); font-size: 1.0625rem; }
.section-head .fine { margin-top: .75rem; }
.fine { font-size: .8125rem; line-height: 1.5; color: var(--pencil); }
.model-fallback { margin: 0; padding: 2rem; border-radius: 10px; background: var(--surface); color: var(--pencil); box-shadow: var(--shadow-card); }
/* The desktop model is drawn when the visitor gets near it (landing.js); its room is kept, so nothing jumps when it arrives. */
[data-theme-ready] .model[data-model="desktop"] { min-height: 44.5rem; }   /* = .dk-stage in landing/desktop.css */
@media (max-width: 30rem) { [data-theme-ready] .model[data-model="desktop"] { min-height: 35.3125rem; } }

/* ---------- Access: a real sequence, so it is numbered ---------- */
.access { border-top: 1px solid var(--rule); }
.steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.step { display: flex; flex-direction: column; align-items: flex-start; padding-top: 1.25rem; border-top: 2px solid var(--ink); scroll-margin-top: 6rem; }
.step-num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 1.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--control-edge); font: 600 1rem/1 var(--display); font-variant-numeric: tabular-nums; }
.step p { margin: .625rem 0 1.5rem; color: var(--pencil); max-width: 34ch; }
.step .button { margin-top: auto; }
.step .fine { margin: .875rem 0 0; }

/* Visitors who are already in don't need the first steps */
[data-account="signed-in"] .step[data-step="invite"],
[data-account="enabled"] .step:is([data-step="invite"], [data-step="signin"]) { border-top-color: var(--rule); color: var(--pencil); }
[data-account="signed-in"] .step[data-step="invite"] .button,
[data-account="enabled"] .step:is([data-step="invite"], [data-step="signin"]) .button,
[data-account="enabled"] .hero [data-invite] { display: none; }
[data-account="enabled"] .hero .button[data-signin],
[data-account="enabled"] .step[data-step="download"] .button { background: var(--button); color: var(--button-text); box-shadow: none; }

/* ---------- Questions ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 4rem; align-items: start; border-top: 1px solid var(--rule); }
.faq-list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); scroll-margin-top: 6rem; }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.125rem; cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin: .45rem .25rem 0 0; border: solid var(--pencil); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: .7rem; }
.faq details p { margin: 0 0 1.25rem; max-width: 62ch; color: var(--pencil); }

/* ---------- Footer ---------- */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; padding-block: 2rem 2.5rem; border-top: 1px solid var(--rule); font-size: .8125rem; color: var(--pencil); }
.foot .brand { margin-right: auto; font-size: 1rem; color: var(--ink); }
.foot a:not(.brand) { text-decoration: none; }
.foot a:not(.brand):hover { text-decoration: underline; color: var(--ink); }
/* Links to the use-case pages: their own line under the footer links */
.foot-uses { order: 1; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; width: 100%; padding-top: .75rem; border-top: 1px solid var(--rule); }
.foot-uses [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Use-case pages (built by build/usecases.mjs) ---------- */
.points { border-top: 1px solid var(--rule); }
.point-list { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.point-list li { padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.point-list p { margin: .625rem 0 0; max-width: 34ch; color: var(--pencil); }
.uses { border-top: 1px solid var(--rule); padding-block: 4rem; }
.uses h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.use-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 2.5rem; }
.use-list a { display: flex; justify-content: space-between; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--rule); font-weight: 600; text-decoration: none; }
.use-list a::after { content: "→"; color: var(--pencil); }
.use-list a:hover { text-decoration: underline; }
@media (max-width: 56rem) {
  .point-list { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .use-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Invite dialog ---------- */
#invite { width: min(30rem, 100% - 2rem); padding: 0; border: 0; border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .5); }
#invite::backdrop { background: var(--backdrop); }
.inv-form, .inv-done { padding: 1.75rem; }
.inv-form h2, .inv-done h2 { font-size: 1.75rem; }
.inv-form > p, .inv-done > p { margin: .75rem 0 0; color: var(--pencil); font-size: .9375rem; }
.inv-field { display: grid; gap: .375rem; margin-top: 1.125rem; font-size: .875rem; font-weight: 600; }
.inv-field em { font-style: normal; font-weight: 400; color: var(--pencil); }
.inv-field input, .inv-field textarea { width: 100%; padding: .625rem .75rem; border: 1px solid var(--control-edge); border-radius: 6px; background: var(--desk); color: var(--ink); font: 400 1rem/1.4 var(--text); }
.inv-field textarea { resize: vertical; }
.inv-field input:focus-visible, .inv-field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.inv-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .625rem; align-items: start; margin-top: 1.25rem; font-size: .875rem; line-height: 1.45; color: var(--pencil); cursor: pointer; }
.inv-consent input { width: 1.125rem; height: 1.125rem; margin: .1rem 0 0; accent-color: var(--button); }
.inv-consent a { color: var(--ink); text-decoration: underline; }
.inv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inv-error { margin-top: 1rem !important; color: var(--error) !important; font-weight: 600; }
.inv-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
.inv-check { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 1.25rem; font-weight: 700; }

/* ---------- Responsive (shared parts) ---------- */
@media (max-width: 56rem) {
  :root { --section: 5rem; }
  /* Closer together, so the links and the language switch stay on one line */
  .bar-inner, .bar-links { gap: 1.125rem; }
  .section-head, .faq { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}
/* Tablet widths: five section links do not fit beside the account link, so the first one,
   which only leads to the section under the hero, steps aside. */
@media (max-width: 56rem) {
  .bar-links a:first-child { display: none; }
}
@media (max-width: 47.5rem) {
  :root { --gutter: 1rem; --section: 4rem; }
  .bar-inner { gap: 1rem; }
  .bar-links { display: none; }
  .bar-account { margin-left: auto; }
  .foot .brand { width: 100%; }
}
@media (max-width: 24rem) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .inv-btn, .faq summary::after { transition: none; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Hero ---------- */
/* One picture: a document goes in, the AI finds the dates, they land on your calendar. */
.hero { padding-block: 3rem 5.5rem; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; align-items: end; }
.hero h1 { grid-column: 1 / -1; font-size: clamp(2.375rem, 4.4vw, 3.875rem); line-height: 1.02; letter-spacing: -.02em; font-variation-settings: "wdth" 86; }
.lead { margin: 0; max-width: 64ch; font-size: 1.125rem; line-height: 1.5; color: var(--pencil); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.flow { display: grid; grid-template-columns: minmax(0, 1fr) 10rem minmax(0, 1fr); align-items: center; margin: 3.25rem 0 0; }
.doc { padding: 2rem 2.25rem 1.25rem; background: var(--paper); color: var(--paper-ink); border-radius: 6px; box-shadow: var(--shadow-sheet); font: 400 1rem/1.6 var(--paper-serif); }
.doc p { margin: 0 0 .875rem; }
.doc .doc-org { margin: 0; font-style: italic; font-size: .875rem; color: var(--paper-pencil); }
.doc .doc-title { margin: .125rem 0 1rem; font-weight: 600; font-size: 1.375rem; line-height: 1.25; }

/* The highlighter means one thing: the AI found this date */
.flow mark, .pairs mark {
  color: var(--mark-text);
  padding: 0 .12em; margin: 0 -.12em;
  border-radius: .25em .45em .3em .5em;
  background: linear-gradient(100deg, transparent .5%, var(--mark-bg) 2%, var(--mark-bg) 98%, transparent 99.5%) no-repeat 0 58% / 100% 86%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.flow-ai { display: grid; justify-items: center; gap: .625rem; padding-inline: 1rem; color: var(--control-edge); }
.flow-ai-label { padding: .3125rem .75rem; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); font: 600 .8125rem/1.2 var(--display); white-space: nowrap; }
.flow-arrow { width: 100%; height: 12px; }

.result { padding: 1.5rem 1.5rem 1.625rem; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-sheet); }
.result-title { margin: 0 0 1.125rem; font: 600 1rem/1.3 var(--display); color: var(--pencil); }
.result-list { display: grid; gap: 1.125rem; margin: 0; padding: 0; list-style: none; }
.result-list li { display: flex; align-items: center; gap: 1rem; }
.result-text { display: grid; gap: .125rem; min-width: 0; }
.result-text b { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.result-text span { font: 400 .9375rem/1.35 var(--display); font-variant-numeric: tabular-nums; color: var(--pencil); }
.flow-caption { grid-column: 1 / -1; margin-top: 1.25rem; font-size: .875rem; color: var(--pencil); }

/* Date tiles: red appears only here, like the app icon */
.tile { flex: none; display: grid; align-content: start; width: 3rem; overflow: hidden; text-align: center; background: var(--tile); border-radius: 7px; box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgb(0 0 0 / .08); }
.tile-month { background: var(--red); color: var(--on-red); font: 600 .6875rem/1.55 var(--display); letter-spacing: .02em; }
.tile-day { font: 300 1.4375rem/1.45 var(--narrow); font-variation-settings: "wdth" 75; font-variant-numeric: tabular-nums; }

/* The one orchestrated moment: the dates are highlighted and their events land
   on the calendar, all at once. Base styles are the final frame. */
/* The headline: "documents" is a highlighted word in a document; "calendar" is in
   the calendar red of the date tiles. */
.h-doc {
  padding: 0 .1em; margin: 0 -.02em;
  font-family: "Sitka Heading", "Sitka Text", Cambria, Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 1.04em; letter-spacing: 0; font-variation-settings: normal;
  color: var(--mark-text);
  background: linear-gradient(100deg, transparent .5%, var(--mark-bg) 2%, var(--mark-bg) 98%, transparent 99.5%) no-repeat 0 64% / 100% 72%;
  border-radius: .12em .2em .14em .22em;
}
.h-cal { color: var(--red); }

/* The one orchestrated moment: the headline word, then every date in the document
   at once, then all their events landing together. --pace scales every duration
   and delay of the sequence. */
.hero { --pace: .8; }
@media (prefers-reduced-motion: no-preference) {
  .h-doc { animation: sweep-word calc(.9s * var(--pace)) cubic-bezier(.3, .7, .2, 1) calc(.3s * var(--pace)) both; }
  .flow mark { animation: sweep calc(.85s * var(--pace)) cubic-bezier(.3, .7, .2, 1) calc(1s * var(--pace)) both; }
  .result-list li { animation: arrive calc(.7s * var(--pace)) cubic-bezier(.2, .8, .2, 1) calc(1.65s * var(--pace)) both; }
}
@keyframes sweep-word { from { background-size: 0% 72%; } }
@keyframes sweep { from { background-size: 0% 86%; } }
@keyframes arrive { from { opacity: 0; transform: translateX(-1rem); } }

/* ---------- How it reads dates: what the document said, what it became ---------- */
.how { border-top: 1px solid var(--rule); }
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; margin: 0; padding: 0; list-style: none; }
.pairs li { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr); align-items: center; gap: 1.25rem; padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.said { font: 400 1.25rem/1.4 var(--paper-serif); }
.pair-arrow { width: 2.5rem; height: 12px; color: var(--control-edge); }
.became { display: flex; align-items: center; gap: .875rem; font: 600 1.0625rem/1.3 var(--display); }
/* Each example plays once when it scrolls into view: the words are highlighted,
   the arrow draws, the calendar page drops in, and the date appears. */
.pair-arrow path { stroke-dasharray: 44; }
.pairs li:nth-child(even) { --r: .35s; }
@media screen and (prefers-reduced-motion: no-preference) {
  [data-reveal] .pairs li:not(.seen) mark { background-size: 0% 86%; }
  [data-reveal] .pairs li:not(.seen) .pair-arrow path { stroke-dashoffset: 44; }
  [data-reveal] .pairs li:not(.seen) .became > * { opacity: 0; }
  .pairs li.seen mark { animation: sweep .8s cubic-bezier(.3, .7, .2, 1) var(--r, 0s) both; }
  .pairs li.seen .pair-arrow path { animation: draw-arrow .5s ease-out calc(var(--r, 0s) + .75s) both; }
  .pairs li.seen .became .tile { animation: drop-page .55s cubic-bezier(.2, .9, .3, 1.25) calc(var(--r, 0s) + 1.15s) both; }
  .pairs li.seen .became > span:last-child { animation: show-date .45s ease-out calc(var(--r, 0s) + 1.55s) both; }
}
@keyframes draw-arrow { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }
@keyframes drop-page { from { opacity: 0; transform: translateY(-1rem) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes show-date { from { opacity: 0; transform: translateX(-.375rem); } to { opacity: 1; transform: none; } }
.how-fine { margin: 1.5rem 0 0; font-size: .875rem; }

/* ---------- Medium and small screens ---------- */
@media (max-width: 56rem) {
  .hero-top { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); margin-top: 2.25rem; }
  .flow-ai { grid-auto-flow: column; justify-content: center; align-items: center; padding: 1.25rem 0; }
  .flow-arrow { width: 2.75rem; transform: rotate(90deg); }
  .pairs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.5rem) {
  .hero { padding-block: 2rem 3.5rem; }
  .hero h1 { font-size: 2.375rem; }
  .lead { font-size: 1.0625rem; }
  .doc { padding: 1.5rem 1.25rem .75rem; font-size: .9375rem; }
  .result { padding: 1.25rem; }
  .pairs li { grid-template-columns: minmax(0, 1fr) 1.75rem minmax(0, 1fr); gap: .75rem; }
  .pair-arrow { width: 1.75rem; }
  .said { font-size: 1.0625rem; }
  .became { font-size: .9375rem; gap: .625rem; }
  .became .tile { width: 2.5rem; }
}
@media (forced-colors: active) {
  .h-doc { background: Mark; color: MarkText; animation: none; }
  .flow mark, .pairs mark { background: Mark; color: MarkText; animation: none; }
  .step-num { border: 1px solid CanvasText; }
  .tile-month { forced-color-adjust: none; }
}