/* Timeline Weaver front page (B-1103). Phone first; wider screens add columns.
   Colours are the app's own (src/theme.css): Classic when the device is light, Focus when it
   is dark. CTA faces are the app's --brand-2-btn with its dark ink (--cta-ink). */

:root {
  --bg: #FBF6EE;            /* --surface-1 */
  --surface: #FFFFFF;       /* --surface-2 */
  --surface-3: #F3EADF;
  --surface-4: #E8DCCB;
  --ink: #3A3632;           /* --text-primary */
  --ink-soft: #655E57;      /* --text-secondary */
  --line: rgba(58, 54, 50, .13);
  --line-strong: rgba(58, 54, 50, .24);
  --brand: #0A766C;         /* --brand-2, text and borders */
  --brand-tint: rgba(10, 118, 108, .09);
  --cta: #18C2B0;           /* --brand-2-btn */
  --cta-hover: #2ACDBB;
  --cta-ink: #0C1F17;       /* --cta-ink */
  --mw: #9A5C1E;            /* --meanwhile-text */
  --mw-tint: rgba(154, 92, 30, .07);
  --mw-line: rgba(154, 92, 30, .45);
  --life: #3E7FD0;          /* the memory web's "your life" node */
  --life-tint: rgba(62, 127, 208, .09);
  --land: #DCCFBD;
  --sea: #F3EADF;
  --dot: #0A766C;
  --arc: rgba(10, 118, 108, .55);
  --badge: #9A5C1E;
  --badge-bg: rgba(154, 92, 30, .07);
  --ring: #B07A4F;
  --ring-bg: #F1E4D3;
  --photo-a: #D9CBB8;
  --photo-b: #C7B6A0;
  --shadow: 0 1px 2px rgba(58, 54, 50, .06), 0 8px 24px rgba(58, 54, 50, .07);
  --radius: 16px;
  --header-h: 64px;
  /* The app's own tokens, as the running app resolves them (B-1105; audit/app-tokens.json). */
  --app-s1: #FBF6EE; --app-s2: #FFFFFF; --app-s3: #F3EADF; --app-s4: #E8DCCB;
  --app-text: #3A3632; --app-text-2: #655E57; --app-text-3: #6F6860; --app-muted: #746E66;
  --app-border: #ECE3D6; --app-border-strong: #D9CCB8;
  --app-brand-1: #34C28E; --app-brand-2: #0A766C; --app-meanwhile: #F0902F; --app-cta-ink: #0C1F17;
  --app-edu-text: #0F5FA9; --app-cat-0: #6E18B9; --app-cat-1: #A51483; --app-cat-2: #E83281; --app-cat-3: #1FA2AD; --app-cat-4: #1475CC; --app-cat-5: #899C1A; --app-cat-6: #0E664A;
  --app-glass-card: rgb(255 255 255 / 0.78); --app-glass-border: rgb(58 54 50 / 0.08);
  --app-glass-text: rgb(58 54 50 / 0.92); --app-glass-muted: rgb(58 54 50 / 0.80);
  --app-glass-surface: rgb(58 54 50 / 0.05); --app-glass-surface-hover: rgb(58 54 50 / 0.03);
  --app-chip-amber-bg: rgba(245,158,11,0.15); --app-chip-amber: #92400E; --app-chip-amber-border: rgba(245,158,11,0.30);
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131C22;
    --surface: #1E2A30;
    --surface-3: #243239;
    --surface-4: #2C383F;
    --ink: #EEF3F4;
    --ink-soft: #93A4AC;
    --line: rgba(238, 243, 244, .1);
    --line-strong: rgba(238, 243, 244, .2);
    --brand: #3DD6C4;
    --brand-tint: rgba(61, 214, 196, .1);
    --cta: #3DD6C4;
    --cta-hover: #5EE0D0;
    --mw: #FFA94D;
    --mw-tint: rgba(255, 169, 77, .06);
    --mw-line: rgba(255, 169, 77, .4);
    --life: #7DB2F5;
    --life-tint: rgba(125, 178, 245, .1);
    --land: #26343B;
    --sea: #10181D;
    --dot: #3DD6C4;
    --arc: rgba(61, 214, 196, .6);
    --badge: #E3A35F;
    --badge-bg: rgba(255, 169, 77, .07);
    --ring: #D39A6A;
    --ring-bg: #2A231D;
    --photo-a: #2E3C43;
    --photo-b: #3A4A52;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
    --app-s1: #131C22; --app-s2: #1E2A30; --app-s3: #243239; --app-s4: #2C383F;
    --app-text: #EEF3F4; --app-text-2: #93A4AC; --app-text-3: #97A2A8; --app-muted: #929CA1;
    --app-border: #2C383F; --app-border-strong: #3D4A52;
    --app-brand-1: #3FD79A; --app-brand-2: #3DD6C4; --app-meanwhile: #FFA94D; --app-cta-ink: #0C1F17;
    --app-edu-text: #6DB1FC; --app-cat-0: #9C38FE; --app-cat-1: #E73BBB; --app-cat-2: #FC9FBB; --app-cat-3: #2EE2F2; --app-cat-4: #54A5FA; --app-cat-5: #BFDA29; --app-cat-6: #1B976F;
    --app-glass-card: rgb(30 42 48 / 0.78); --app-glass-border: rgb(255 255 255 / 0.08);
    --app-glass-text: rgb(238 243 244 / 0.92); --app-glass-muted: rgb(238 243 244 / 0.58);
    --app-glass-surface: rgb(255 255 255 / 0.06); --app-glass-surface-hover: rgb(255 255 255 / 0.04);
    --app-chip-amber-bg: rgba(245,158,11,0.15); --app-chip-amber: rgba(252,211,77,0.9); --app-chip-amber-border: rgba(245,158,11,0.30);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131C22;
  --surface: #1E2A30;
  --surface-3: #243239;
  --surface-4: #2C383F;
  --ink: #EEF3F4;
  --ink-soft: #93A4AC;
  --line: rgba(238, 243, 244, .1);
  --line-strong: rgba(238, 243, 244, .2);
  --brand: #3DD6C4;
  --brand-tint: rgba(61, 214, 196, .1);
  --cta: #3DD6C4;
  --cta-hover: #5EE0D0;
  --mw: #FFA94D;
  --mw-tint: rgba(255, 169, 77, .06);
  --mw-line: rgba(255, 169, 77, .4);
  --life: #7DB2F5;
  --life-tint: rgba(125, 178, 245, .1);
  --land: #26343B;
  --sea: #10181D;
  --dot: #3DD6C4;
  --arc: rgba(61, 214, 196, .6);
  --badge: #E3A35F;
  --badge-bg: rgba(255, 169, 77, .07);
  --ring: #D39A6A;
  --ring-bg: #2A231D;
  --photo-a: #2E3C43;
  --photo-b: #3A4A52;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
  --app-s1: #131C22; --app-s2: #1E2A30; --app-s3: #243239; --app-s4: #2C383F;
  --app-text: #EEF3F4; --app-text-2: #93A4AC; --app-text-3: #97A2A8; --app-muted: #929CA1;
  --app-border: #2C383F; --app-border-strong: #3D4A52;
  --app-brand-1: #3FD79A; --app-brand-2: #3DD6C4; --app-meanwhile: #FFA94D; --app-cta-ink: #0C1F17;
  --app-edu-text: #6DB1FC;
  --app-cat-0: #9C38FE; --app-cat-1: #E73BBB; --app-cat-2: #FC9FBB; --app-cat-3: #2EE2F2; --app-cat-4: #54A5FA; --app-cat-5: #BFDA29; --app-cat-6: #1B976F;
  --app-glass-card: rgb(30 42 48 / 0.78); --app-glass-border: rgb(255 255 255 / 0.08);
  --app-glass-text: rgb(238 243 244 / 0.92); --app-glass-muted: rgb(238 243 244 / 0.58);
  --app-glass-surface: rgb(255 255 255 / 0.06); --app-glass-surface-hover: rgb(255 255 255 / 0.04);
  --app-chip-amber-bg: rgba(245,158,11,0.15); --app-chip-amber: rgba(252,211,77,0.9); --app-chip-amber-border: rgba(245,158,11,0.30);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; }
h1, h2, .fraunces {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
  letter-spacing: -.015em;
  line-height: 1.1;
}
p { margin: 0; }
.wrap { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* For words read by screen readers only (the decade the Life Anthology moved to). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 12px;
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--cta); color: var(--cta-ink); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-3); }
.btn-small { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
}
.btn-link:hover { text-decoration-color: var(--brand); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* The wordmark: the app's display settings (.font-fraunces-display) and tracking. */
.mark {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none;
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-variation-settings: 'wght' 480, 'opsz' 72, 'SOFT' 0, 'WONK' 0;
  font-size: 21px; line-height: 1.1; letter-spacing: -.015em; white-space: nowrap;
}
/* The mark sits inside the text, sized to the capital height on the baseline (LogoMark's inline mode). */
.mark svg { display: inline-block; height: 1.2em; width: auto; margin-right: .3em; flex: none; }
/* B-1187: the name stays at every width (Daniel: the product name belongs at the top); on a phone it is a little smaller. */
@media (max-width: 599px) { .mark { font-size: 17px; } .mark svg { margin-right: .25em; } }
.header-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
.header-nav .btn { margin-left: 6px; }
/* B-1187: "Create an account" in the header appears only once the hero's button has scrolled out of view, so the two are never
   on screen together. It is hidden, not removed, so nothing shifts when it fades in. No script: it stays hidden and the hero button is the way in. */
.nav-slot { display: contents; }
.nav-cta { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
.cta-on .nav-cta { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease; }
@media (prefers-reduced-motion: reduce) { .nav-cta, .cta-on .nav-cta, .nav-signin { transition: none !important; } }
/* Phones: the header is the logo, the name and one slot. Sign in is in the slot at the top; the button takes it once the hero button has gone.
   Plans and the light/dark switch live in the footer. */
@media (max-width: 599px) {
  .hdr-theme, .nav-plans { display: none !important; }
  .nav-slot { display: inline-grid; justify-items: end; align-items: center; }
  .nav-slot > * { grid-area: 1 / 1; }
  .nav-signin { transition: opacity .18s ease, visibility 0s; }
  .cta-on .nav-signin { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
  .header-row { gap: 4px; }
  .header-nav .btn { margin-left: 0; padding-left: 12px; padding-right: 12px; }
}
}

/* B-1052 follow-up: the same Upright motion as the app's logo-motion.css (Daniel, 2026-10-11).
   Values must match that file; marketing/logo-motion.js adds .is-playing. */
.logo-mark g.lm-card { transform-box: fill-box; transform-origin: 50% 60%; }
.logo-mark.is-playing g.lm-card { animation: logo-upright var(--d) both; }
.logo-mark.is-playing g.lm-card:nth-of-type(1) { --d: 720ms linear 0ms; --a: 1; }
.logo-mark.is-playing g.lm-card:nth-of-type(2) { --d: 680ms linear 170ms; --a: .8; }
.logo-mark.is-playing g.lm-card:nth-of-type(3) { --d: 700ms linear 205ms; --a: .9; }
.logo-mark.is-playing g.lm-card:nth-of-type(4) { --d: 660ms linear 245ms; --a: .75; }
@keyframes logo-upright {
  0% { transform: rotate(0); }
  24% { transform: rotate(calc(var(--dir) * var(--a) * -9deg)); }
  50% { transform: rotate(calc(var(--dir) * var(--a) * 2.2deg)); }
  72% { transform: rotate(calc(var(--dir) * var(--a) * -0.8deg)); }
  100% { transform: rotate(0); }
}

/* ── Section rhythm ──────────────────────────────────────────────────────── */
main > section { padding: 56px 0; }
@media (min-width: 900px) { main > section { padding: 88px 0; } }
h2 { font-size: clamp(30px, 6.4vw, 46px); max-width: 22ch; }
.lede { margin-top: 14px; font-size: 17px; color: var(--ink-soft); max-width: 60ch; }
@media (min-width: 900px) { .lede { font-size: 19px; } }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -.005em; line-height: 1.3; }

/* ── 1. Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 40px !important; }
@media (min-width: 900px) { .hero { padding: 112px 0 64px !important; } }
.hero h1 { font-size: clamp(44px, 11vw, 84px); max-width: 14ch; }
.hero-sub { margin-top: 18px; font-size: 18px; color: var(--ink-soft); max-width: 36ch; }
@media (min-width: 900px) { .hero-sub { font-size: 21px; } }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--ink-soft); }

/* ── 2. Product preview ──────────────────────────────────────────────────── */
.preview { padding-top: 8px !important; }
.preview-tabs {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; /* B-1140: snapping keeps the page gutter */
  margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none;
}
.preview-tabs::-webkit-scrollbar { display: none; }
.preview-tab {
  flex: 0 0 auto; width: min(76vw, 300px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  min-height: 44px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); cursor: pointer;
}
.preview-tab .tab-title { font-weight: 700; font-size: 15px; }
.preview-tab .tab-line { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.preview-tab[aria-selected="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-tint); }
@media (min-width: 768px) {
  .preview-tabs { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0 0 18px; }
  .preview-tab { width: auto; }
}
/* The screen: the app's own screenshot (demo/shots/, captured by scripts/capture-front-page-shots.mjs),
   a clean-cut window. B-1110: no fade. B-1111: the capture is the app at 1200 px wide, so its chat button
   (fixed bottom left, 24 px in) is in the picture; the app's content starts 24 px in from the left and ends
   30.5 px from the right (measured), leaving 1145.5 px of app. On a computer the image is scaled so those
   24 px edges land 24 px inside the window and the empty margins are clipped. The 2x file is 2400 px wide
   and is shown at most 1200 css px wide (about 1121 at most), so it is never enlarged. */
.app-frame {
  position: relative; overflow: hidden;
  background: var(--app-s1);
}
.app-frame img { display: block; width: 100%; height: auto; }
@media (min-width: 600px) {
  .app-frame { height: auto; max-height: 900px; }
  .app-frame img { max-width: none; width: calc((100% - 48px) * 1.04757); margin-left: calc(24px - (100% - 48px) * 0.020952); }
}
.preview-panel[hidden] { display: none; }

/* ── 3. The scripted chat ────────────────────────────────────────────────── */
.chat-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .chat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 56px; align-items: start; } }
/* B-1107: the heading, line and example buttons stay in view while the long chat scrolls past. */
@media (min-width: 960px) { .chat-intro { position: sticky; top: calc(var(--header-h) + 24px); } }
/* B-1179: stacked (under 960): heading, line, the chat, then the examples that drive it; "See it on a phone" is hidden (already on one).
   .chat-intro dissolves into the grid so its children can be ordered around the chat box; computers keep the sticky column untouched. */
@media (max-width: 959px) {
  .chat-intro { display: contents; }
  .chat-intro > h2, .chat-intro > .lede { order: 0; }
  .chat-box { order: 1; scroll-margin-top: calc(var(--header-h) + 12px); }
  .chat-intro > .examples { order: 2; margin-top: 0; }
  .chat-intro > .mobile-line { display: none; }
  /* B-1185: phones play one example, so the heading and the three buttons go; the closing line stays, and Replay sits in the chat's top bar. */
  .chat-intro .examples-h, .chat-intro .ex-list { display: none; }
  .chat-replay:not([hidden]) { display: inline-flex; }
}
.chat-replay { margin: 0 auto 0 0; min-height: 36px; padding: 0 4px; font-size: 14px; }
.chat-replay[hidden] { display: none !important; }
@media (min-width: 960px) { .chat-replay { display: none !important; } }
/* B-1123: three explained examples (a quiet list, not buttons): the name in ink, one muted line, a subtle highlight on the one playing. */
.examples { margin-top: 28px; max-width: 460px; }
.examples-h { margin: 0 0 8px; font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ex-list { display: grid; gap: 2px; }
.ex-row { display: block; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; font: inherit; cursor: pointer; background: transparent; border: 0; border-left: 2px solid transparent; border-radius: 6px; color: var(--ink); }
.ex-row:hover { background: var(--surface-3); }
.ex-row[aria-pressed="true"] { background: var(--brand-tint); border-left-color: var(--brand); }
.ex-name { display: block; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.ex-line { display: block; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.examples-close { margin: 12px 0 0; font-size: 14px; line-height: 22px; color: var(--ink-soft); }
.mobile-line { margin-top: 20px; font-size: 14px; line-height: 22px; color: var(--ink-soft); display: grid; grid-template-columns: calc(1.2em + 6px) minmax(0, 1fr); } /* B-1140: the icon hangs; the sentence and its link share one left edge */
.mobile-line > .link-i { display: block; grid-column: 1; width: 1.2em; height: 1.2em; margin-top: 0.2em; }
.mobile-line > span { grid-column: 2; }
.mobile-line > details { grid-column: 2; }
.panel-link.panel-link--inline { display: block; margin: 4px 0 0; } /* B-1139: its own row under the sentence, level with the sentence's text (not the icon) */
.panel-link.panel-link--inline > summary { display: inline-block; padding: 11px 0; font-size: 14px; line-height: 22px; font-weight: 600; }
.panel-link.panel-link--inline > summary::after { display: none; }
.replay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 0 6px;
  background: none; border: 0; color: var(--brand); font-weight: 600; font-size: 15px; cursor: pointer;
}
.replay svg { width: 18px; height: 18px; }
/* The app's chat panel (ChatPanel + ChatInterface): full-height white panel, a close bar, the
   message list (p-6, space-y-6), then the composer. Sizes, radii and colours copied from the
   running app (audit/chat-a-app-desktop-styles.json). */
.chat-box {
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--app-s2); border: 1px solid var(--line); border-radius: 12px;
  font-size: 16px; line-height: 24px; color: var(--app-text);
}
@media (min-width: 960px) { .chat-box { min-height: 900px; } }
.chat-top { flex: none; height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; border-bottom: 1px solid var(--app-border); }
.chat-close { width: 36px; height: 36px; display: grid; place-items: center; color: var(--app-text-2); border-radius: 6px; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; } /* B-1185: the box keeps one height; a message that would overflow scrolls the list, as in the app */
@media (min-width: 768px) { .chat-list { padding: 24px; } }
.chat-log[hidden] { display: none; }
.chat-log > * + * { margin-top: 24px; }
.chat-greeting + .chat-log { margin-top: 24px; } /* B-1185: the greeting is outside the log, so it needs the log's own 24px (the app's space-y-6) before the first message */
.i12 { width: 12px; height: 12px; } .i14 { width: 14px; height: 14px; } .i16 { width: 16px; height: 16px; }
.i20 { width: 20px; height: 20px; } .i24 { width: 24px; height: 24px; } .i32 { width: 32px; height: 32px; }
svg[class^="i"] { flex: none; display: block; }
.msg { display: flex; align-items: flex-end; gap: 12px; width: 100%; max-width: 48rem; }
.msg.you { margin-left: auto; flex-direction: row-reverse; justify-content: flex-start; } /* the app's flex-row-reverse (B-1116): the avatar is the first child, so it sits at the outer right edge, the bubble beside it */
.persona {
  flex: none; width: 32px; height: 32px; border-radius: 9999px; display: grid; place-items: center;
  background: var(--app-brand-1); color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.you-avatar { flex: none; width: 32px; height: 32px; border-radius: 9999px; border: 1px solid var(--app-brand-2); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.you-silhouette { display: grid; place-items: center; background: var(--app-brand-1); color: var(--app-cta-ink); }
.bubble { border-radius: 16px; padding: 12px 20px; border: 1px solid; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); min-width: 0; }
.bubble p { margin: 0; font-size: 14px; line-height: 1.625; white-space: pre-wrap; }
.ai .bubble { background: var(--app-s2); border-color: var(--app-border); color: var(--app-text); border-bottom-left-radius: 0; }
.you .bubble { background: var(--app-brand-2); border-color: var(--app-brand-2); color: var(--app-s1); border-bottom-right-radius: 0; }
.view-link { display: inline-flex; margin-top: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--app-brand-2); }
/* The Meanwhile list under the reply: max-w-lg, w-[calc(100%-3rem)], ml-11. */
.mw { max-width: 32rem; width: calc(100% - 3rem); margin-left: 44px; }
.mw-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--app-muted); }
.mw-spark { color: var(--app-brand-2); }
.sug {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin-top: 12px; border-radius: 18px;
  background: color-mix(in srgb, var(--app-meanwhile) 4%, transparent); border: 1px dashed color-mix(in srgb, var(--app-meanwhile) 30%, transparent);
}
.mw-h + .sug { margin-top: 0; }
.sug-body { flex: 1; min-width: 0; }
.sug-k { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--app-meanwhile); }
.sug-t { margin: 2px 0 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--app-text); }
.sug-d { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--app-text-2); }
.sug-acts { display: flex; flex-direction: column; gap: 8px; }
.sug-act { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9999px; color: var(--app-text-2); }
.more {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; padding: 12px; border-radius: 8px;
  border: 1px dashed var(--app-s4); color: var(--app-brand-2); font-size: 12px; line-height: 16px; font-weight: 700;
}
.ai-note { margin: 12px 0 0; text-align: center; font-size: 11px; line-height: 16.5px; color: var(--app-muted); }
/* The composer: p-4, a hairline above, "Add event manually", then the 13px-radius input. */
.chat-compose { flex: none; padding: 16px; border-top: 1px solid var(--app-border); background: var(--app-s2); }
.compose-manual { display: flex; width: max-content; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--app-text-2); }
.compose-input {
  position: relative; display: flex; align-items: center; min-height: 50px; padding: 12px 56px 12px 20px;
  border-radius: 13px; background: var(--app-s3); border: 1px solid var(--app-border-strong); font-size: 16px; line-height: 24px; color: var(--app-text);
}
.compose-ph { color: var(--app-muted); }
.compose-send { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 8px; border-radius: 9999px; background: var(--app-s3); color: var(--app-muted); }
.compose-send.on { background: var(--app-brand-1); color: var(--app-cta-ink); }
/* B-1123: pressed, shown briefly (the app's send button goes solid brand-1, here a touch smaller and without hover lightening) */
.compose-send.is-pressed { background: var(--app-brand-1); color: var(--app-cta-ink); transform: translateY(-50%) scale(.88); transition: transform .12s ease-out; }
.compose-hint {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; padding: 2px 10px; border-radius: 9999px;
  font-size: 12px; line-height: 16px; font-weight: 500;
  background: var(--app-chip-amber-bg); color: var(--app-chip-amber); border: 1px solid var(--app-chip-amber-border);
}
.compose-hint span:last-child { opacity: .65; }
/* The script: steps waiting their turn, the typing dots, the caret. */
.js .is-waiting { display: none; }
.is-in { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--app-muted); animation: bounce 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── 4. Ways in ──────────────────────────────────────────────────────────── */
.ways-grid { display: grid; gap: 36px; margin-top: 32px; }
@media (min-width: 900px) { .ways-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.way h3 { margin-top: 18px; }
.way p { margin-top: 6px; color: var(--ink-soft); }
/* Way 2 and Way 3: the app's own Life Periods page and Library list, captured. */
.way-pic {
  position: relative; height: 320px; overflow: hidden; background: var(--app-s1);
}
.way-pic img { display: block; width: 100%; height: auto; }
/* Life Periods: a still crop from the top of the captured card, cut straight between rows (after the third year; the phone capture's rows are taller). */
.way-shot { height: auto; aspect-ratio: 768 / 893; } /* B-1135: one more year (four), still cut straight between rows */
@media (max-width: 599px) { .way-shot { aspect-ratio: 390 / 830; } }
/* The memory web. Phone: a column with a thread down its side. Wide: the board's web. */
.web { margin: 48px 0 0; padding: 22px 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
@media (min-width: 640px) { .web { padding: 28px; } }
.web figcaption h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(24px, 4.5vw, 30px); letter-spacing: -.01em; }
.web-stage { position: relative; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; padding-left: 18px; border-left: 2px dotted var(--line-strong); }
.web-lines { display: none; }
.node { padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); background: var(--brand-tint); }
.node-k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.node-t { font-weight: 700; font-size: 15px; line-height: 1.3; }
.node-d { font-size: 13px; color: var(--ink-soft); }
.you-node { border-color: color-mix(in srgb, var(--life) 45%, transparent); background: var(--life-tint); }
.you-node .node-k { color: var(--life); }
.world-node { border-color: var(--mw-line); background: var(--mw-tint); }
.world-node .node-k { color: var(--mw); }
@media (min-width: 1024px) {
  .web-stage { display: block; padding: 0; border: 0; aspect-ratio: 1120 / 470; margin-top: 8px; }
  .web-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .node { position: absolute; left: var(--x); top: var(--y); width: 17.4%; }
}
.web-lines path { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; opacity: .65; }
.web-lines path.side { stroke-dasharray: 2 5; stroke-width: 1.2; opacity: .5; }
.js .web.is-growing .node { opacity: 0; transform: translateY(4px); transition: opacity .45s ease, transform .45s ease; }
.js .web.is-growing .node.is-on { opacity: 1; transform: none; }
.js .web.is-growing .web-lines path { transition: stroke-dashoffset .7s ease; }
.js .web.is-growing .web-lines path.side { opacity: 0; transition: opacity .6s ease; }
.js .web.is-growing .web-lines path.side.is-on { opacity: .5; }

/* B-1188: below the board (under 1024 px, with script) the web is a small web in about one screen: three or four memories
   readable, the rest small title-only chips, the lines drawn between them as on the board. Without script the column above stays.
   The visual web is hidden from screen readers on phones, where a visually hidden list says the whole chain once. */
.web-sr { display: none; }
@media (max-width: 1023px) {
  .js .web-stage { display: block; padding: 0; border: 0; position: relative; width: 100%; max-width: 420px; margin: 8px auto 0; aspect-ratio: 342 / 600; }
  .js .web-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .js .node { position: absolute; left: var(--xs); top: var(--ys); width: var(--ws); box-sizing: border-box; }
  .js .node[data-tier="read"] { padding: 7px 10px; border-radius: 10px; }
  .js .node[data-tier="read"] .node-k { font-size: 9px; letter-spacing: .1em; }
  .js .node[data-tier="read"] .node-t { font-size: 13px; line-height: 1.25; }
  .js .you-node .node-k { color: color-mix(in srgb, var(--life) 72%, var(--ink)); } /* the board's blue label is 3.7:1 on its fill in Classic; moved toward the ink (darker in Classic, lighter in Focus) to clear 4.5:1 */
  .js .node .node-d { display: none; }
  .js .node[data-tier="chip"] { padding: 5px 9px; border-radius: 999px; }
  .js .node[data-tier="chip"] .node-k { display: none; }
  .js .node[data-tier="chip"] .node-t { font-size: 11.5px; line-height: 1.25; font-weight: 600; }
  .js .web-sr { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; list-style: none; }
}
.web-lines path.leap { stroke-dasharray: 2 5; stroke-width: 1.4; opacity: .7; }

/* The phone (B-1114): a status bar over a viewport that shows a 390 x 880 screen at 294/390 of its size, so everything in it keeps
   the app's own sizes: the app's phone chat (MobileChatView: Back, the same bubbles, the composer, the keyboard when typing),
   its bottom tab bar (MobileNav), and a real capture of the timeline as the last screen. The real site hides the tab bar while
   a field has focus, so it shows after sending, as on a phone. Taller than a real phone on purpose: 880 rather than 844. */
.phone {
  width: 320px; height: 720px; border-radius: 42px; padding: 10px; display: flex; flex-direction: column;
  background: #0B0F12; border: 3px solid #2E3A40; box-shadow: var(--shadow); overflow: hidden;
  --pn-idle: #6F6860; --kb-bg: #D1D5DB; --kb-key: #fff; --kb-key-ink: #111; --kb-fn: #ADB3BC;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone { --pn-idle: #97A2A8; --kb-bg: #2B2B2D; --kb-key: #6B6B6E; --kb-key-ink: #fff; --kb-fn: #464648; } }
:root[data-theme="dark"] .phone { --pn-idle: #97A2A8; --kb-bg: #2B2B2D; --kb-key: #6B6B6E; --kb-key-ink: #fff; --kb-fn: #464648; }
.phone-status { flex: none; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 700; font-size: 12px; color: var(--app-text); background: var(--app-s1); border-radius: 32px 32px 0 0; }
.phone-status .notch { width: 80px; height: 22px; border-radius: 12px; background: #000; }
.phone-status .bars { width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid var(--app-text); }
.phone-vp { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--app-s1); }
.phone-vs { position: absolute; left: 0; top: 0; width: 390px; height: 880px; zoom: .753846; color: var(--app-text); font-size: 16px; line-height: 24px; }
.pv { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--app-s1); }
.pv[hidden], .phone [data-pstep][hidden], .phone [hidden] { display: none; }
.pv-timeline img { display: block; width: 390px; height: 880px; }
.phone-back { flex: none; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--app-border); color: var(--app-brand-2); font-size: 16px; font-weight: 600; }
.phone-chat { flex: 1; min-height: 0; overflow: hidden; padding: 16px; }
.phone-chat > * + * { margin-top: 24px; }
.phone .chat-compose { background: var(--app-s1); }
.phone-typed { white-space: normal; overflow-wrap: anywhere; }
.phone .compose-input { min-height: 50px; padding-right: 56px; }
.phone .compose-ph[hidden] { display: none; }
.js .phone-typed.is-caret::after { content: ""; display: inline-block; width: 1px; height: 18px; margin-left: 1px; background: var(--app-text); vertical-align: -4px; animation: blink 1s infinite; }
.phone-kb { flex: none; display: none; padding: 10px 3px 26px; background: var(--kb-bg); }
.pv-chat.kb-up .phone-kb { display: block; }
.pv-chat.kb-up .phone-nav { display: none; }
.kb-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.kb-row:last-child { margin-bottom: 0; }
.kb-row span { flex: 1 1 0; height: 42px; display: grid; place-items: center; border-radius: 5px; background: var(--kb-key); color: var(--kb-key-ink); font-size: 22px; line-height: 1; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.kb-r2 { padding: 0 18px; }
.kb-r3 .kb-w { flex: 0 0 42px; background: var(--kb-fn); }
.kb-r3 { gap: 6px; }
.kb-r4 .kb-w2 { flex: 0 0 92px; font-size: 16px; background: var(--kb-fn); }
.kb-r4 .kb-sp { font-size: 16px; }
.phone-nav { flex: none; display: flex; height: 65px; border-top: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-s2) 80%, transparent); }
.pn-tab { flex: 1; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--pn-idle); }
.pn-tab svg { width: 24px; height: 24px; }
.pn-tab span { font-size: 10px; line-height: 15px; font-weight: 500; }
.pn-tab.is-active { color: var(--app-brand-2); }

/* ── Mid-page button ─────────────────────────────────────────────────────── */
.mid-cta { padding: 8px 0 24px; }
.mid-cta-row {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.mid-cta-row p { font-size: 14px; color: var(--ink-soft); }

/* ── 5. Places: the app's Life Anthology ─────────────────────────────────── */
/* B-1130: the window and, from 1200 px, three notes beside it. The window is at most 770 px (B-1140: the same picture column as Life Periods, so the words beside both start at one x); it narrows before the notes do (240 px at least). */
.atlas { position: relative; display: grid; gap: 18px; margin-top: 32px; }
.atlas-main { width: 100%; min-width: 0; }
.atlas-notes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.atlas-notes h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.atlas-notes p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-soft); }
@media (min-width: 1200px) {
  .atlas { grid-template-columns: minmax(0, 770px) minmax(240px, 1fr); column-gap: 56px; align-items: start; }
  .js .atlas-notes { position: relative; display: block; }
  .js .atlas-notes li { position: absolute; left: 0; right: 0; top: 0; }
}

.anth { margin: 0; }
.anth.stage { padding: 0; }
.anth-stage { position: relative; }
.anth-stage img.anth-img { display: block; width: 100%; height: auto; }
.anth-top { position: relative; }
.anth-top img.anth-img { display: block; width: 100%; height: auto; }
.anth-hot { position: absolute; inset: 0; }
.hot { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 9999px; }
.hot:focus-visible { outline: 2px solid var(--app-brand-2); outline-offset: 2px; }
/* B-1139: a place chip's ring hugs its pill (the measured box B-1137 uses for the fill), not the 44 px tap area; keyboard focus only. */
.hot-chip:focus-visible { outline: none; }
.hot-chip:focus-visible::before { content: ''; position: absolute; left: var(--pill-l, 0); top: var(--pill-t, 0); width: var(--pill-w, 100%); height: var(--pill-h, 100%); box-sizing: border-box; border-radius: 999px; pointer-events: none; outline: 2px solid var(--app-brand-2); outline-offset: 2px; }
.hot-dot { min-width: 44px; min-height: 44px; transform: translate(-50%, -50%); }
.hot-dot.is-on::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--app-brand-2); }
/* A chosen place name, as the app marks it (bg-brand-2/20, border-brand-2/50). */
/* B-1137: as the app draws it (TimeSegmentCard's location chip): the tap area stays invisible and the pill itself gets brand-2 at 20% with a brand-2 border at 50%.
   The pill is a picture, so its text keeps its own colour; the box is laid over its measured bounds. */
.hot-chip.is-on::after { content: ''; position: absolute; left: var(--pill-l, 0); top: var(--pill-t, 0); width: var(--pill-w, 100%); height: var(--pill-h, 100%); border-radius: 999px; box-sizing: border-box; pointer-events: none; background: color-mix(in srgb, var(--app-brand-2) 20%, transparent); border: 1px solid color-mix(in srgb, var(--app-brand-2) 50%, transparent); }
.hot-arrow { border-radius: 9999px; }
/* The window's 1 px edge scales the panel by a hair; the tap areas never drop under 44 px. */
.hot-arrow, .hot-chip { min-height: 44px; min-width: 44px; }
.hot-arrow:disabled { cursor: default; }
.hot-photo { border-radius: 8px; }
/* B-1127: the app's slim photo strip (TimeSegmentCard "Visual context": 5 columns of 90 px rows, 6 px gaps, 6 px corners; 3 columns on a phone).
   It sits between the captured top and foot of the panel; the one-pixel edge row repeated down the middle keeps the card's own
   background, border and decade bar going. front.js sets the width and zoom so it scales with the capture. */
.vc { position: relative; }
.vc-edge { position: absolute; inset: 0; background-repeat: repeat-y; background-size: 100% 1px; }
.vc-edge.th-classic { background-image: var(--edge-classic); }
.vc-edge.th-focus { background-image: var(--edge-focus); }
.vc-body { position: relative; padding: 16px var(--vc-r, 24px) 0 var(--vc-l, 12px); }
.vc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vc-h { display: flex; align-items: center; gap: 8px; margin: 0; font-family: inherit; font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--app-text-2); }
.vc-i { width: 12px; height: 12px; flex: none; }
.vc-toggle { position: relative; display: grid; place-items: center; padding: 2px; border: 0; border-radius: 4px; background: transparent; color: var(--app-text-3); cursor: pointer; }
.vc-toggle::before { content: ""; position: absolute; inset: -14px; }
.vc-toggle:hover { color: var(--app-text); }
.vc-toggle:focus-visible { outline: 2px solid var(--app-brand-2); outline-offset: 2px; }
.vc-arrow { width: 12px; height: 12px; transition: transform .15s; }
.vc-toggle[aria-expanded="false"] .vc-arrow { transform: rotate(180deg); }
.vc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 90px; gap: 6px; }
.vc-grid[hidden] { display: none; }
@media (max-width: 599px) { .vc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vc-tile { position: relative; display: block; overflow: hidden; padding: 0; border: 0; border-radius: 6px; background: var(--app-s3); cursor: pointer; transition: transform .15s; }
.vc-tile:hover { transform: scale(1.02); }
.vc-tile:focus-visible { outline: 2px solid var(--app-brand-2); outline-offset: 2px; }
.vc-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vc-tile--ph { cursor: default; background: var(--app-s3); }
.vc-tile--ph:hover { transform: none; }
.vc-era-deckled { box-shadow: 0 0 0 2px #f4ece0 inset, 0 0 0 3px rgba(0, 0, 0, .4); }
.vc-era-print { box-shadow: 0 0 0 3px #fafafa inset, 0 0 0 4px rgba(0, 0, 0, .3); }
.vc-era-stamped, .vc-era-modern { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
/* The placeholders and the "Add more photos" tile: the category's tint and dashed edge, as PlaceholderTile draws them. */
.vc-ghost { display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 6px; text-align: center; cursor: default; background: color-mix(in srgb, var(--c) 4%, transparent); border: 1px dashed color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); }
.vc-ghost > span { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.25; opacity: .7; }
.vc-ghost .vc-plus { width: 14px; height: 14px; }
.vc-ghost:not(.vc-ghost--cta) .vc-plus { width: 16px; height: 16px; opacity: .5; }
.vc-cta { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.anth-foot { display: block; }
.anth-foot-img { display: block; width: 100%; height: auto; }
.anth-pop { position: absolute; z-index: 6; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .18)); }
.anth-pop img { display: block; width: 100%; height: auto; border-radius: 12px; }
.map-note { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }

/* ── 6. Yours ────────────────────────────────────────────────────────────── */
.yours-grid { display: grid; gap: 18px; margin-top: 32px; }
@media (min-width: 960px) { .yours-grid { grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; } }
/* B-1135: both cards end on one line. The two captures are cut to one shape (a straight cut at the bottom of the taller one), so the
   cards match by the grid stretching them, and the picture sits at the card's foot. */
@media (min-width: 960px) {
  .yours-grid .ycard { display: flex; flex-direction: column; }
  .yours-grid .ycard .shot { margin-top: auto; padding-top: 8px; }
  .yours-grid .ycard .win { aspect-ratio: 1200 / 840; }
  .yours-grid .ycard .win img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
}
/* B-1107: the left card stays in view while the two taller cards scroll past it. */
.ycard { padding: 22px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
@media (min-width: 640px) { .ycard { padding: 30px; } }
.ycard.accent { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.ycard h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 24px; letter-spacing: -.01em; }
.points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 16px; line-height: 1.55; }
.pi { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); font-size: 14px; }
.small { margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
.shot { margin-top: 8px; }
.shot img { display: block; width: 100%; height: auto; }

/* ── 7. Plans ────────────────────────────────────────────────────────────── */
.plans-grid { display: grid; gap: 18px; margin-top: 32px; }
@media (min-width: 768px) { .plans-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.plan { display: flex; flex-direction: column; padding: 24px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
@media (min-width: 640px) { .plan { padding: 30px; } }
.plan { position: relative; isolation: isolate; }
/* B-1135: the Plus card's edge, the app's colour walk (src/views/PlansView.css .pl-plan--walk): the four logo colours travel round a masked 2 px ring, one turn every 4 s. */
:root { --logo-blue: #5FA4EF; --logo-amber: #F8AC33; --logo-violet: #AE86F5; --logo-green: #46CE78; }
@property --pl-ang { syntax: '<angle>'; initial-value: 200deg; inherits: false; }
@keyframes pl-travel { from { --pl-ang: 200deg; } to { --pl-ang: 560deg; } }
.plan.plus { border-color: transparent; }
.plan.plus::after {
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 22px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--pl-ang), var(--logo-blue), var(--logo-amber), var(--logo-violet), var(--logo-green), var(--logo-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pl-travel 4s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .plan.plus::after { animation: none; } }
.plan-name { font-size: 18px; font-weight: 700; }
.plan-price { margin-top: 6px; font-family: 'Fraunces', Georgia, serif; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; }
.plan ul { margin: 18px 0 24px; padding: 0 0 0 20px; display: grid; gap: 8px; flex: 1; align-content: start; }
.plan li::marker { color: var(--brand); }
.plan .btn { align-self: flex-start; }
.terms { margin-top: 24px; max-width: 72ch; font-size: 14px; color: var(--ink-soft); }
.contact { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.contact a { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* ── 8. Last call ────────────────────────────────────────────────────────── */
.last-card {
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
  padding: 56px 20px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--brand-tint), transparent 70%), var(--surface);
}
@media (min-width: 900px) { .last-card { padding: 80px 32px; } }
.last-card h2 { font-size: clamp(32px, 6.4vw, 52px); max-width: 16ch; }
.last-card p { font-size: 14px; color: var(--ink-soft); margin-top: -8px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding: 20px 0 32px; font-size: 14px; color: var(--ink-soft); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.footer-row a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ink-soft); }
.footer-row a:hover { color: var(--ink); }
.footer-row .theme-toggle { width: 44px; }

/* ── Lightbox, as the app's (Lightbox.tsx, PhotoFrame.tsx, CaptionPill.tsx, theme.css .era-*) ── */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgb(0 0 0 / .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
.lb-close {
  position: absolute; top: 24px; right: 24px; z-index: 10; min-width: 44px; min-height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; color: rgb(255 255 255 / .85); /* B-1106: as the app now draws it */
}
.lb-close:hover { color: #fff; }
.lb-inner { position: relative; max-width: 64rem; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-frame { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.lb-photo img { -webkit-user-drag: none; user-select: none; display: block; max-width: 100%; max-height: 80vh; object-fit: contain; }
.lb-photo .modern { border-radius: 8px; }
.lb-arrow {
  position: absolute; padding: 12px; border: 0; border-radius: 9999px; cursor: pointer; z-index: 30;
  background: var(--app-glass-surface); color: var(--app-glass-text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.lb-arrow:hover { background: var(--app-glass-surface-hover); }
.lb-arrow.prev { left: 16px; }
.lb-arrow.next { right: 16px; }
.lb-arrow[hidden] { display: none; }
.lb-pill {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 9999px; flex: none;
  border: 1px solid var(--app-glass-border); background: var(--app-glass-card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
.lb-pill span { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--app-glass-text); }
.lb-pill svg { color: var(--app-brand-2); }
.lb-pill .dot { color: var(--app-glass-muted); opacity: .4; }
/* Era 03, Stamped Print (1985 to 2004): the envelope behind, the LCD stamp on the photo. */
@font-face { font-family: 'DSEG7Modern'; src: url('fonts/DSEG7Modern-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
.stamped { position: relative; line-height: 0; display: inline-block; }
.stamped img { position: relative; z-index: 10; }
.era-envelope { position: absolute; top: -50px; left: -18px; right: -18px; bottom: -14px; background: #fab617; border: 1px solid rgba(160, 110, 0, .45); transform: rotate(-3deg); z-index: 0; overflow: hidden; line-height: 1; }
.era-envelope-strip { position: absolute; top: 0; left: 0; right: 0; height: 34px; background: #fff; border-bottom: 2px solid #1a1a1a; display: flex; align-items: center; gap: 14px; padding: 0 12px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 10px; line-height: 1; color: #1a1a1a; }
.era-envelope-field { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.era-envelope-field-label { font-weight: 700; letter-spacing: .5px; }
.era-envelope-field-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Caveat', cursive, system-ui; color: #5980d4; font-size: 18px; font-weight: 500; line-height: 1; display: inline-block; transform: translateY(-2px) rotate(-1deg); transform-origin: left center; }
.era-envelope-brand { margin-left: auto; flex: 0 0 auto; font-family: Impact, "Arial Black", "Helvetica Neue", sans-serif; font-weight: 900; font-size: 13px; color: #e30613; letter-spacing: -.3px; text-transform: uppercase; }
.era-lcd-stamp { position: absolute; bottom: 8px; right: 10px; z-index: 20; font-family: 'DSEG7Modern', "Courier New", ui-monospace, monospace; font-size: 11px; color: #ff5722; font-weight: 700; line-height: 1; text-shadow: 0 0 1px rgba(255, 87, 34, .9), 0 0 3px rgba(255, 87, 34, .55), 0 0 7px rgba(255, 87, 34, .3); mix-blend-mode: screen; pointer-events: none; }

/* ── Reduced motion: every demo shows its end state. ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .web.is-growing .node, .js .web.is-growing .web-lines path.side { opacity: 1; transform: none; }
}

/* One-column grids must not grow to their widest child (the photo row scrolls inside its column). */
.chat-grid, .ways-grid, .yours-grid, .plans-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .chat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .yours-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 900px) { .ways-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 768px) { .plans-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* B-1104/B-1105: every picture comes in Classic and Focus (th-classic / th-focus), and follows the
   device and the header's sun/moon toggle together. */
.th-focus { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .th-classic { display: none !important; } :root:not([data-theme="light"]) .th-focus { display: block !important; } }
:root[data-theme="dark"] .th-classic { display: none !important; }
:root[data-theme="dark"] .th-focus { display: block !important; }

/* ── B-1107/B-1110: the app windows ──────────────────────────────────────────
   Each full screenshot is a real app window (its own header and logo kept) with rounded corners and a
   thin edge, resting on the plain page. No glow, no gradient, no drop shadow. */
:root { --win-edge: rgba(255, 255, 255, .9); }          /* a step lighter than the screenshot's own edge */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --win-edge: rgba(255, 255, 255, .16); } }
:root[data-theme="dark"] { --win-edge: rgba(255, 255, 255, .16); }
.stage { position: relative; padding: 16px 0 20px; }
.win { border-radius: 14px; border: 1px solid var(--win-edge); overflow: hidden; }
.stage > .app-frame, .stage > .way-pic { border-radius: 14px; border: 1px solid var(--win-edge); }
@media (min-width: 900px) { .win, .stage > .app-frame, .stage > .way-pic { border-radius: 16px; } }
/* The preview's window sits below its tabs. */
.preview .stage { margin-top: 0; }

/* ── B-1110: the theme toggle in the header: a moon in Classic (tap for Focus), a sun in Focus ── */
.theme-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { background: var(--surface-3); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-toggle .tt-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tt-moon { display: none; } :root:not([data-theme="light"]) .tt-sun { display: block; } }
:root[data-theme="dark"] .tt-moon { display: none; }
:root[data-theme="dark"] .tt-sun { display: block; }

/* ── B-1111: the preview and the chat are one section, joined by a path ─────────────────────────────────
   The path starts at the app's chat button in the preview (the Chat tab on a phone) and runs down to the
   chat panel. It sits above the picture (it starts on the button) and runs only through empty space.
   front.js draws it as you scroll; the static path in the markup is what shows without script. */
.flow { position: relative; }
.preview.flow { padding-bottom: 56px !important; }
@media (min-width: 900px) { .preview.flow { padding-bottom: 88px !important; } }
.flow .chat-section { margin-top: 72px; }
@media (min-width: 960px) { .flow .chat-section { margin-top: 176px; } }
/* Without script the path is a fixed drawing for the computer layout, centred on the page (the 1152 px content is centred too). */
.flow-path { position: absolute; left: 50%; top: 0; width: 1440px; height: 1200px; margin-left: -720px; z-index: 2; pointer-events: none; overflow: visible; }
.js .flow-path { left: 0; width: 100%; height: 100%; margin-left: 0; }
.flow-path path { fill: none; stroke: var(--app-brand-1); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* B-1186: on phones the pointer needs the script (its geometry is measured); without it, nothing is drawn. */
@media (max-width: 959px) { html:not(.js) .flow-path { display: none; } }
.js .flow-path path { vector-effect: none; stroke-dasharray: 1; stroke-dashoffset: var(--flow-off, 0); }

/* ── B-1112: side panels ─────────────────────────────────────────────────────────────────────────────────
   One pattern for every feature link: a summary (or link) with data-panel-open="<id>" opens the element with
   that id as a panel that slides in from the right over a dimmed page. Without script the details element
   opens inline and the panel content is just content; front.js moves it out and builds the dialog. */
.panel-link { margin-top: 14px; }
.panel-link > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  color: var(--brand); font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.panel-link > summary::-webkit-details-marker { display: none; }
.panel-link > summary .link-i { width: 1.1em; height: 1.1em; flex: none; margin-right: -2px; }
.panel-link > summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.panel-link[open] > summary::after { transform: rotate(45deg); }
/* ── B-1122: the panel is a tall floating modal (measured on Linear's: 640 wide, inset 24 px, 8 px corners, a 66 px header bar with a
   small uppercase label and the cross over a 1 px divider, a body that scrolls under it, 32 px side padding, a 48 px title, one summary
   paragraph, the visual in a framed box, then short label and detail rows). No shadow: the dim and the border separate it. ───── */
.panel h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(28px, 7vw, 36px); letter-spacing: -.02em; line-height: 1.15; }
.panel h3:focus-visible { outline: none; }
.panel-summary { margin: 16px 0 0; max-width: 60ch; color: var(--ink-soft); font-size: 16px; line-height: 24px; }
.panel-link > .panel { padding: 16px 0 8px; }
.panel-lib { margin-top: 24px; }
.phone-wrap { position: relative; width: 320px; max-width: 100%; margin: 24px auto 0; }
.phone-wrap .panel-replay { position: absolute; left: calc(100% + 16px); bottom: 0; margin: 0; }
.phone-wrap .panel-replay[hidden] { display: none; }
@media (max-width: 759px) { .phone-wrap .panel-replay { left: auto; right: 14px; bottom: 80px; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); } .phone-wrap .panel-replay span { display: none; } }
.panel-rows { margin: 28px 0 0; border-top: 1px solid var(--line); }
.panel-rows > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.panel-rows dt { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--ink); }
.panel-rows dd { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-soft); }
.panel .panel-replay { margin: 12px 0 0; }

.panel-root { position: fixed; inset: 0; z-index: 100; }
.panel-root[hidden] { display: none; }
.panel-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); opacity: 0; transition: opacity .25s ease-out; }
.panel-frame {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); transform: translateX(calc(100% + 24px)); transition: transform .25s ease-out;
}
@media (min-width: 600px) { .panel-frame { top: 24px; right: 24px; bottom: 24px; width: 640px; max-width: calc(100vw - 48px); border-radius: 12px; } }
.panel-root.is-open .panel-dim { opacity: 1; }
.panel-root.is-open .panel-frame { transform: none; }
.panel-head { flex: none; height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .panel-head { padding: 0 16px 0 32px; } }
.panel-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.panel-frame > .panel { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 20px 32px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
@media (min-width: 600px) { .panel-frame > .panel { padding: 32px 32px 40px; } }
.panel-inner { width: 100%; }
.panel-close { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 999px; color: var(--ink); cursor: pointer; }
.panel-close:hover { background: var(--surface-3); }
.panel-close svg { width: 20px; height: 20px; }
@media (max-width: 599px) { .panel-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
html.panel-open { overflow: hidden; }

/* ── B-1113: the chat about 20% smaller ─────────────────────────────────────────────────────────────────
   One scale factor for the whole panel (the CSS zoom property): text, bubbles, avatars, Meanwhile cards and
   spacing all scale together, so it still looks exactly like the app. The panel's own width follows: it is
   the column's width times the scale, so it is narrower as well as shorter. */
.chat-box { --chat-scale: .8; zoom: var(--chat-scale); }
/* In a zoomed box a percentage still means the column's width as drawn, so the scale itself is the width. */
.chat-box { width: calc(var(--chat-scale) * 100%); justify-self: end; }
@media (max-width: 599px) { .chat-box { --chat-scale: .9; } }
@media (max-width: 959px) { .chat-box { justify-self: center; } }

/* ── B-1113: two ways in, threads first ─────────────────────────────────────────────────────────────── */
.ways .web { margin-top: 36px; }
.way-solo { display: grid; gap: 24px; margin-top: 48px; align-items: center; }
@media (min-width: 900px) { .way-solo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; } }
/* B-1138: from 1200 px the picture is shown at the capture's own size (768 px, 1:1, plus its 1 px border) with the words beside it,
   as in the places section (B-1130): a 56 px gap, the words taking the rest (240 px at least; the picture narrows before the words do). */
@media (min-width: 1200px) {
  .way-solo { grid-template-columns: minmax(0, 770px) minmax(240px, 1fr); gap: 56px; align-items: start; }
  .way-solo .way-text { order: 0; max-width: none; padding-top: 16px; } /* the stage above has 16 px of top padding: the heading lines up with the picture top */
  .way-solo .way-shot { aspect-ratio: 768 / 721; }
}
.way-solo .way-text h3 { margin-top: 0; font-size: 22px; }
.way-solo .way-text p { margin-top: 8px; font-size: 17px; }



/* ── B-1120: the Library, built in code from the app's own (LibraryView: TopicCard, TopicDetailPanel, EventRow) ───
   The app's tokens, sizes and Heroicons; Tailwind's px and rem values written out. Both themes come from the page's own
   --app-* tokens; --lib-amber is the app's amber. No actions: Adopt, Remove, jog, search and the filters are left out. */
.lib { --lib-amber: #F59E0B; --lib-amber-rgb: 245 158 11; --lib-t3: #6F6860; --lib-bs: #D9CCB8; --lib-green: #34C28E; text-align: left; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lib { --lib-t3: #97A2A8; --lib-bs: #3D4A52; --lib-green: #3FD79A; } }
:root[data-theme="dark"] .lib { --lib-t3: #97A2A8; --lib-bs: #3D4A52; --lib-green: #3FD79A; }
.lib-list { display: flex; flex-direction: column; gap: 6px; padding: 3px 4px 3px 3px; }
.lib-topic { position: relative; display: block; width: 100%; min-height: 55px; text-align: left; font: inherit; cursor: pointer; background: var(--app-s2); border: 1px solid var(--app-border); border-radius: 8px; overflow: hidden; padding: 10px 12px 10px 14px; color: var(--app-text); }
.lib-topic:hover { background: var(--app-s3); border-color: var(--lib-bs); }
.lib-topic[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--lib-green); }
.lib-topic:focus-visible { outline: 2px solid var(--app-brand-2); outline-offset: 3px; }
.lib-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.lib-topic-in { display: flex; align-items: center; gap: 10px; }
.lib-i16 { width: 16px; height: 16px; flex: none; } .lib-i12 { width: 12px; height: 12px; } .lib-i14 { width: 14px; height: 14px; } .lib-i20 { width: 20px; height: 20px; flex: none; }
.lib-topic-t { flex: 1; min-width: 0; display: block; }
.lib-topic-h { display: block; font-size: 13px; line-height: 16.25px; font-weight: 700; color: var(--app-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-topic-m { display: block; margin-top: 2px; font-size: 10px; line-height: 15px; color: var(--lib-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-pill { flex: none; padding: 3px 9px; border-radius: 999px; border: 1px solid rgb(var(--lib-amber-rgb) / .4); background: rgb(var(--lib-amber-rgb) / .1); color: var(--lib-amber); font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .025em; white-space: nowrap; }
.lib-panes { margin-top: 16px; }
.lib-pane { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--app-s2); border: 1px solid var(--app-border); border-radius: 8px; }
.lib-pane[hidden] { display: none; }
.lib-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.lib-head { padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--app-border); }
.lib-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; line-height: 16.5px; color: var(--lib-t3); }
.lib-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: inherit; font-size: 17px; line-height: 28px; font-weight: 700; letter-spacing: 0; color: var(--app-text); }
.lib-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lib-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; border: 1px solid rgb(var(--lib-amber-rgb) / .4); background: rgb(var(--lib-amber-rgb) / .1); color: var(--lib-amber); font-size: 12px; line-height: 16px; font-weight: 700; }
.lib-note { font-size: 11px; line-height: 16.5px; color: var(--lib-t3); }
.lib-events { max-height: 520px; overflow-y: auto; padding: 16px 20px 16px 24px; scrollbar-width: thin; scrollbar-color: var(--lib-bs) transparent; }
.lib-events:focus-visible { outline: 2px solid var(--app-brand-2); outline-offset: -2px; }
.lib-evh { margin-bottom: 10px; font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lib-t3); }
.lib-evh-n { margin-left: 4px; color: var(--lib-amber); }
.lib-pre { margin: 0 0 12px; font-size: 11px; line-height: 16.5px; font-style: italic; color: var(--lib-t3); }
.lib-decade { position: sticky; top: -16px; z-index: 1; padding: 26px 0 10px; margin-bottom: 6px; background: var(--app-s2); border-bottom: 1px solid var(--app-border); font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lib-t3); }
.lib-ev { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--app-border); }
.lib-ev:last-child { border-bottom: 0; }
.lib-date { padding-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; line-height: 15px; color: var(--lib-t3); }
.lib-ev-t { font-size: 13px; line-height: 19.5px; font-weight: 600; color: var(--app-text); }
.lib-ev-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 0; font-size: 11px; line-height: 17.9px; color: var(--app-text-2); }
.lib-ev-a { display: flex; flex-direction: column; align-items: flex-end; }
.lib-added, .lib-add { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 4px; border: 1px solid; font-size: 10px; line-height: 15px; font-weight: 700; white-space: nowrap; }
.lib-added { background: rgb(var(--lib-amber-rgb) / .1); border-color: rgb(var(--lib-amber-rgb) / .35); color: var(--lib-amber); }
.lib-add { background: var(--app-s3); border-color: var(--lib-bs); color: var(--app-text-2); }
@media (max-width: 639px) {
  .lib-ev { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .lib-date { grid-column: 1; grid-row: 1; }
  .lib-ev-b { grid-column: 1; grid-row: 2; }
  .lib-ev-a { grid-column: 2; grid-row: 1 / span 2; }
}

/* B-1129: a decade's strip in the app's desktop grid (large tiles 2 x 2, dense flow); a phone gets the plain 3-column grid. */
.vc-grid { grid-auto-flow: row dense; }
@media (max-width: 599px) { .vc-grid { grid-auto-flow: row; } }
.vc-tile--large { grid-column: span 2; grid-row: span 2; }

/* B-1133: the privacy section. Plain (no picture) with two columns of rows on a computer; with the preview demo, the demo on the left
   (about the width of the Life Periods picture) and the rows on the right. Slim: about 700 px or less. */
.privacy { padding-top: 56px; padding-bottom: 56px; }
.privacy-body { margin-top: 24px; }
.privacy-rows { margin-top: 0; }
@media (min-width: 900px) {
  .privacy-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .privacy-rows > div:nth-child(2) { border-top: 1px solid var(--line); }
}
.privacy-small { margin-top: 20px; }
.privacy .lede { margin-top: 8px; }
@media (min-width: 900px) {
  .has-demo .privacy-body { display: grid; grid-template-columns: minmax(0, 553px) minmax(0, 1fr); gap: 48px; align-items: start; }
  .has-demo .privacy-rows { display: block; }
  .has-demo .privacy-rows > div:nth-child(2) { border-top: 0; }
}
.pv-demo { min-width: 0; }
.pv-stage { position: relative; padding-bottom: 52px; display: flex; flex-direction: column; gap: 12px; }
.pv-slot { position: relative; overflow: hidden; transition: height .3s ease; } /* B-1135: height set from front.js, B-1173: on the slot */
.pv-nb { padding: 12px 16px; border-left: 3px solid var(--app-cat-4); border-radius: 0 18px 18px 0; background: color-mix(in srgb, var(--app-cat-4) 5.1%, var(--app-s2)); color: var(--app-text); display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 560px) { .pv-nb { flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; } .pv-nb .pv-i--cat, .pv-nb .pv-pill { display: none; } .pv-nb .pv-title { font-size: 15px; line-height: 22px; } .pv-nb .pv-date { white-space: nowrap; } }
.pv-switch-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 32px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.pv-switch { position: relative; width: 36px; height: 20px; border-radius: 9999px; background: var(--app-s4); transition: background-color .25s; }
.pv-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .25s; }
.pv-switch.is-on { background: var(--app-brand-2); }
.pv-switch.is-on i { transform: translateX(16px); }
/* The card: the app's event card (UserEventCard.tsx): 3 px category bar, 18 px right corners, 16 px padding, the category's 5% tint. */
.pv-card, .pv-ghost { padding: 16px; border-left: 3px solid var(--app-cat-4); border-radius: 0 18px 18px 0; background: color-mix(in srgb, var(--app-cat-4) 5.1%, var(--app-s2)); color: var(--app-text); font-size: 16px; line-height: 24px; }
.pv-card { position: absolute; left: 0; right: 0; top: 40px; }
.pv-ghost { position: static; visibility: hidden; }
.pv-head { display: flex; flex-direction: column; gap: 6px; }
.pv-meta { display: flex; align-items: center; gap: 10px; }
.pv-i { flex: none; }
.pv-i--cat { width: 16px; height: 16px; color: var(--app-edu-text); }
.pv-i--pin { width: 12px; height: 12px; }
.pv-date { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--app-edu-text); }
.pv-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pv-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: 0; color: var(--app-text); }
.pv-pill { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--app-edu-text); border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--app-edu-text); }
/* B-1146: the app's Locked chip (LockedChip.tsx: an outline pill in the tertiary text colour, a 12px shut padlock). */
.pv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--app-text-3); border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--app-text-3); }
.pv-chip[hidden] { display: none; }
.pv-i--chip { width: 12px; height: 12px; }
.pv-place { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--app-text-2); }
.pv-bodyin { margin-top: 16px; }
.pv-text { margin: 0; color: var(--app-text-2); font-size: 16px; line-height: 24px; white-space: pre-wrap; }
.pv-card.is-locked .pv-head { gap: 6px; }
.pv-replay { position: absolute; left: 0; bottom: 0; margin: 0; }
.pv-replay[hidden], .pv-place[hidden], .pv-bodyin[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pv-switch, .pv-switch i, .pv-slot { transition: none; } }