/* ============================================================
   markjournal.app · the home page · "Chapters" (SITE-DESIGN.md 2.0)
   2026-10-17 · nine numbered chapters, each on one of the app's own papers;
   the product shown doing something; motion only where it means something.
   The other pages (about, support, privacy, terms) still use site.css.
   ============================================================ */

/* ── tokens · Mark's paper and ember, then each chapter's paper from the app's themes ── */
:root {
  --bg: #F4EEE3; --bg-soft: #FBF7EE; --card: #FCF8F0; --ink: #1B1916; --ink-2: #5E554A; --ink-3: #857B6F; --ink-4: #ADA497;
  --line: #DED7CD; --ember: #C56248; --ember-deep: #A9532E; --ember-soft: #EFDFD1; --on-ember: #1A0E08;
  /* chapters (deliberate, the same in both themes) */
  --hearth: #08090A; --hearth-card: #0F1011; --hearth-ink: #F6F4F0; --hearth-ink-2: #9AA39C; --hearth-line: rgba(255,255,255,.08);
  --bloom: #D6BBB6; --bloom-card: #E6D2CD; --bloom-ink: #3B1E22; --bloom-ink-2: #5F353A; --bloom-ink-3: #8C6168; --bloom-accent: #8E3B45;
  --cosmos: #0B0F26; --cosmos-card: #1A2048; --cosmos-ink: #EAE6F7; --cosmos-ink-2: #B8B0D6; --cosmos-ink-3: #7B7494;
  --sage: #AFBEB7; --sage-card: #C9D3CE; --sage-ink: #1C2623; --sage-ink-2: #36423E; --sage-ink-3: #5C6864; --sage-accent: #27584A;
  --gold: #EBD9B4; --gold-card: #F5EAD0; --gold-ink: #3A2A0C; --gold-ink-2: #6B5520; --gold-accent: #B8861F;
  --rose: #E27396; --teal: #5FB8B0; --ocean: #4A6D8C; --lavender: #9C8FE0; --pine: #35785A;
  --shadow: 0 30px 80px -30px rgba(27,25,22,.45);
  --maxw: 1180px; --gutter: clamp(16px, 5vw, 72px); --r-lg: 32px; --r-md: 20px; --r-sm: 12px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F0E0C; --bg-soft: #16140F; --card: #1A1814; --ink: #F6F4F0; --ink-2: #B9B1A6; --ink-3: #8C857B; --ink-4: #5E5951;
    --line: #2A2622; --ember: #D9734F; --ember-deep: #E9906F; --ember-soft: #3A2318; --shadow: 0 30px 80px -30px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F0E0C; --bg-soft: #16140F; --card: #1A1814; --ink: #F6F4F0; --ink-2: #B9B1A6; --ink-3: #8C857B; --ink-4: #5E5951;
  --line: #2A2622; --ember: #D9734F; --ember-deep: #E9906F; --ember-soft: #3A2318; --shadow: 0 30px 80px -30px rgba(0,0,0,.8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
::selection { background: var(--ember); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.serif, .l2 { font-family: var(--serif); font-style: italic; font-weight: 500; }
.l2 { color: var(--ember); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 12px; }
.eyebrow b { font-weight: 500; color: var(--ember); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; flex: none; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-3); }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 800; letter-spacing: -.03em; line-height: .98; }
h2 { font-size: clamp(38px, 6vw, 76px); }
p { margin: 0; }
.lead { font-size: clamp(18px, 2vw, 23px); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 17px; white-space: nowrap; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, border-color .25s; will-change: transform; }
.btn-ember { background: var(--ember); color: #fff; box-shadow: 0 12px 30px -12px rgba(197,98,72,.7); }
.btn-ember:hover { background: var(--ember-deep); box-shadow: 0 18px 40px -14px rgba(197,98,72,.8); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); flex: none; }
.btn:hover svg { transform: translateX(4px); }

/* reveals: once, up 26px, 0.9s */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s } .rv.d2 { transition-delay: .2s } .rv.d3 { transition-delay: .3s } .rv.d4 { transition-delay: .4s } .rv.d5 { transition-delay: .5s }

/* ── nav · fixed, glass after 40px; on phones the logo, the toggles and "Get Mark" ── */
.nav { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; padding: 12px var(--gutter); display: flex; align-items: center; gap: 18px; color: #fff; transition: background .4s, box-shadow .4s; }
.nav.glass { background: rgba(15,14,12,.62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.nav .brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); transition: transform .3s var(--ease); }
.nav .brand:hover img { transform: translateY(-1px) scale(1.03); }
.nav .links { margin-left: auto; display: flex; gap: 22px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.78); }
.nav .links a:hover { color: #fff; }
.nav .right { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.nav .right:first-of-type { margin-left: auto; }
.nav .pillbtn { height: 36px; min-width: 36px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: background .25s, border-color .25s; }
.nav .pillbtn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.nav .pillbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav .theme .t-moon { display: none; }
:root[data-theme="dark"] .nav .theme .t-sun { display: none; }
:root[data-theme="dark"] .nav .theme .t-moon { display: block; }
.nav .door { font-family: var(--sans); font-size: 13px; letter-spacing: 0; font-weight: 500; }
.nav .cta { height: 40px; padding: 0 16px; font-size: 14px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); box-shadow: none; }
.nav .cta:hover { background: rgba(255,255,255,.22); }
@media (max-width: 1000px) { .nav .links { display: none; } .nav .right:first-of-type { margin-left: auto; } }
@media (max-width: 640px) { .nav .door { display: none; } .nav { gap: 10px; } }

/* ── 01 · the sky ── */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; color: var(--hearth-ink); overflow: hidden; padding: calc(96px + env(safe-area-inset-top, 0px)) 0 80px; background: var(--hearth); }
.sky { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--sky-a, #2a1f3a) 0%, var(--sky-b, #c56248) 42%, var(--sky-c, #0f1014) 100%); }
.sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 70% 30%, rgba(255,255,255,.14), transparent 60%), linear-gradient(180deg, transparent 55%, var(--hearth) 100%); }
.stars { position: absolute; inset: 0; opacity: var(--stars, 0); transition: opacity 2s; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 32% 8%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 56% 22%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 88% 30%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 44% 34%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 66% 5%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 22% 40%, #fff 50%, transparent 52%); }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(60px, 10.5vw, 150px); letter-spacing: -.045em; line-height: .9; }
.hero h1 .l2 { color: #FFD9C7; }
.hero .lead { color: rgba(255,255,255,.82); margin-top: 26px; }
.hero .eyebrow { color: rgba(255,255,255,.7); }
.hero .eyebrow b { color: #FFD9C7; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.hero .fine { margin-top: 22px; color: rgba(255,255,255,.55); }
.clock { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.85); font-size: 13px; backdrop-filter: blur(8px); max-width: 100%; flex-wrap: wrap; }
.clock .dot { width: 8px; height: 8px; border-radius: 50%; background: #FFD9C7; box-shadow: 0 0 12px #FFD9C7; flex: none; }
.clock input { width: 120px; accent-color: #FFD9C7; }
.clock .t { font-family: var(--mono); min-width: 7ch; }

/* the phone · the app itself, drawn in HTML so it can move: rituals → tick → write → a thread → a moment → journal → the home → the story → today's page */
.phone { --acc: #D9B8F2; --acc-ink: #1A0E2A; --ok: #6FD58B; --ember-m: #E0834F; width: min(340px, 100%); margin: 0 auto; aspect-ratio: 9/19.3; border-radius: 48px; background: #0B0C0A; border: 10px solid #1B1C1F; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.06); position: relative; overflow: hidden; color: #F6F4F0; transform: perspective(1200px) rotateY(-8deg) rotateX(2deg); transition: transform .8s var(--ease); font-size: 12px; line-height: 1.4; }
.phone:hover { transform: perspective(1200px) rotateY(-2deg) rotateX(0); }
/* 2026-10-20 · Mark: "it's kind of curved a little bit, except the image itself doesn't seem to. It just looks off
   because of the curve … put it straight and make the phone more realistic." And "even the October 20th isn't the
   same font as what we have on the real phone." So: no tilt; a thin titanium band around a black screen border,
   the side buttons, the status bar, and inside the screen the app's own face (Instrument Serif, like Mark on iPhone). */
.device { position: relative; width: min(340px, 100%); margin: 0 auto; }
.device .phone { --serif: "Instrument Serif", Georgia, "Times New Roman", serif; width: 100%; transform: none; border-radius: 56px; border: 11px solid #050506;
  box-shadow: 0 0 0 1.5px #55555b, 0 0 0 3px #2a2a2e, 0 0 0 3.8px #6a6a70, 0 50px 110px -34px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.05); }
.device .phone:hover { transform: none; }
.device .phone::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.07), rgba(255,255,255,0) 34%); }
.device .btn { position: absolute; width: 4px; z-index: -1; border-radius: 2px; background: linear-gradient(90deg, #1d1d20, #66666c 55%, #2a2a2e); }
.device .btn.act { left: -6px; top: 17.5%; height: 4.2%; }
.device .btn.vu { left: -6px; top: 25%; height: 8.4%; }
.device .btn.vd { left: -6px; top: 35.4%; height: 8.4%; }
.device .btn.pw { right: -6px; top: 27%; height: 12.5%; }
.device .btn.cc { right: -5px; top: 55%; height: 6.5%; width: 3px; }
.phone .sbar { position: absolute; top: 19px; left: 30px; right: 24px; z-index: 12; display: flex; justify-content: space-between; align-items: center;
  font: 600 13.5px/1 -apple-system, "SF Pro Text", Inter, sans-serif; letter-spacing: -.01em; color: #fff; pointer-events: none; }
.phone .sbar span { display: inline-flex; gap: 5px; align-items: center; }
.phone .sbar svg { display: block; fill: #fff; }
.phone .cal .d.w { background: rgba(255,255,255,.05); }
.phone .cal .d.w i { position: absolute; left: 6px; right: 8px; top: 8px; height: 2px; background: #6E756F; box-shadow: 0 5px 0 #6E756F, 0 10px 0 #4D534E; }
.phone .island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; border-radius: 16px; background: #000; z-index: 11; }
.phone .inner { position: absolute; inset: 0; padding: 54px 0 0; background: linear-gradient(180deg, #1C2719 0%, #10140F 34%, #0B0C0A 62%); overflow: hidden; transition: opacity .4s; }
.phone .inner.dim { opacity: 0; }
.phone .mono { font-family: var(--mono); letter-spacing: .22em; text-transform: uppercase; font-size: 9px; color: inherit; }
.phone .head { padding: 0 16px; position: relative; }
.phone .wd { font-family: var(--mono); font-size: 9px; letter-spacing: .32em; color: var(--acc); text-transform: uppercase; }
.phone .date { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1; margin-top: 6px; }
.phone .date b { color: var(--acc); font-weight: 500; }
.phone .who { position: absolute; right: 16px; top: 2px; text-align: center; }
.phone .who img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--acc); object-fit: cover; display: block; margin: 0 auto; }
.phone .who span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 8px; letter-spacing: .2em; color: var(--acc); }
.phone .pill { margin-top: 16px; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.07); font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; position: relative; z-index: 2; }
.phone .pill span { padding: 7px 12px; border-radius: 999px; color: #9AA39C; transition: all .4s var(--ease); display: inline-flex; align-items: center; gap: 5px; }
.phone .pill span.on { background: rgba(255,255,255,.14); color: #F6F4F0; }
.phone .pill i { font-style: normal; font-size: 9px; }
.phone .pill.hide { display: none; }
.phone .screens { position: relative; margin-top: 14px; height: 520px; }
.phone .screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s; }
.phone .screen.on { opacity: 1; }
.phone .pages { overflow: hidden; height: 100%; }
.phone .track { display: flex; width: 200%; transition: transform .7s var(--ease); }
.phone .page { width: 50%; padding: 0 16px; }
.phone .track.b { transform: translateX(-50%); }
.phone .strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.04); }
.phone .strip div { text-align: center; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: #8E978F; padding: 5px 0; border-radius: 9px; }
.phone .strip div b { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; color: #F6F4F0; letter-spacing: 0; margin: 3px 0 2px; }
.phone .strip div i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--acc); margin: 0 auto; }
.phone .strip div i.n { background: transparent; }
.phone .strip .sa { border: 1.5px solid var(--acc); background: rgba(217,184,242,.08); color: #F6F4F0; }
.phone .chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 600; }
.phone .chip::before { content: "🔖"; font-size: 10px; }
.phone .todayline { display: flex; align-items: baseline; gap: 8px; margin: 14px 2px 8px; font-size: 11px; }
.phone .todayline b { font-weight: 600; font-size: 12px; }
.phone .todayline span { font-family: var(--mono); color: #9AA39C; letter-spacing: .06em; }
.phone .rows { display: grid; gap: 6px; }
.phone .rit { position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 10px 40px 10px 12px; border-radius: 13px; background: rgba(255,255,255,.05); min-height: 44px; transition: background .4s; }
.phone .rit:not(.done) { padding-right: 12px; }
.phone .rit .ic { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #5FB8B0; color: #5FB8B0; display: grid; place-items: center; font-size: 12px; transition: all .4s var(--ease); }
.phone .rit.book .ic { border: 0; font-size: 16px; }
.phone .rit.done .ic { border-radius: 8px; background: rgba(255,255,255,.07); border-color: transparent; font-size: 16px; width: 32px; height: 32px; }
.phone .rit .nm { font-size: 13.5px; font-weight: 600; line-height: 1.15; }
.phone .rit .nm small { display: block; font-weight: 400; font-size: 10.5px; color: #B9B1A6; margin-top: 2px; opacity: 0; max-height: 0; transition: all .4s var(--ease); }
.phone .rit.done .nm small { opacity: 1; max-height: 16px; }
.phone .rit .nm em { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 11px; margin-top: 2px; }
.phone .rit .tm { font-family: var(--mono); font-size: 10px; color: #9AA39C; }
.phone .rit .tm.late { color: var(--ember-m); }
.phone .rit .ok { position: absolute; right: 14px; top: 50%; color: var(--ok); font-size: 16px; font-weight: 700; transform: translateY(-50%) scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.phone .rit.done .ok { transform: translateY(-50%) scale(1); }
.phone .rit.done .tm { display: none; }
.phone .rit.done { background: rgba(255,255,255,.06); }
.phone .reflect { margin-top: 10px; padding: 14px 14px 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.phone .reflect h4 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.phone .reflect h4 i { font-family: var(--serif); font-weight: 500; color: var(--acc); }
.phone .reflect p { margin: 6px 0 0; font-size: 12px; color: #D6D1C9; }
.phone .reflect p.q { font-family: var(--serif); font-style: italic; color: #F6F4F0; font-size: 12.5px; }
.phone .reflect .k { font-size: 11px; color: #8E978F; margin-top: 2px; }
.phone .reflect .nx { margin-top: 8px; font-size: 10.5px; color: #8E978F; }
/* the app's card: up to two of the day's photos, "N pages so far", the kept count, read › */
.phone .reflect .rrow { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.phone .reflect .rth { display: flex; gap: 5px; }
.phone .reflect .rth i { width: 32px; height: 32px; border-radius: 8px; background-size: cover; background-position: center; }
.phone .reflect .rth i.new { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
.phone .reflect .rst { flex: 1; min-width: 0; }
.phone .reflect .rst b { display: block; font-size: 12px; font-weight: 500; color: #D6D1C9; }
.phone .reflect .rst small { display: block; font-size: 10.5px; color: #8E978F; margin-top: 1px; }
.phone .reflect .rd { font-size: 11.5px; font-weight: 600; color: var(--acc); }
.phone .day .ev em { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 11.5px; color: #B9B1A6; margin-top: 1px; }
.phone .sheet .att { width: 66px; height: 66px; margin-top: 10px; border-radius: 11px; background: url(/assets/shots/home-v2/day-2.webp) center / cover; transform: scale(0); transform-origin: left bottom; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.phone .sheet .att.on { transform: none; }
.phone .reflect .nx::before { content: "◎ "; color: #5FB8B0; }
.phone .lbl { margin: 12px 2px 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--acc); }
.phone .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.phone .tile { padding: 10px 9px 9px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 11px; font-weight: 600; line-height: 1.15; }
.phone .tile i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.08); font-style: normal; font-size: 11px; margin-bottom: 8px; color: var(--acc); }
.phone .threads { display: flex; gap: 10px; overflow: hidden; }
.phone .th { flex: none; width: 50px; text-align: center; font-size: 9.5px; color: #B9B1A6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone .th img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 5px; border: 1.5px solid transparent; transition: border-color .3s, transform .3s var(--ease); }
.phone .th.hit img { border-color: var(--acc); transform: scale(1.08); }
/* the journal's home */
.phone .week { font-family: var(--mono); font-size: 9px; letter-spacing: .26em; color: #9AA39C; margin: 2px 2px 8px; text-transform: uppercase; }
.phone .mem { position: relative; height: 196px; border-radius: 14px; overflow: hidden; background: #222; }
.phone .mem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone .mem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 35%, rgba(0,0,0,.7)); }
.phone .mem .eb { position: absolute; top: 12px; left: 12px; z-index: 1; color: #fff; }
.phone .mem .q { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.1; }
.phone .mem .q small { display: block; margin-top: 5px; font-family: var(--mono); font-style: normal; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.phone .insight { margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); }
.phone .insight .eb { color: var(--acc); }
.phone .insight p { margin: 6px 0 8px; font-size: 13px; line-height: 1.35; }
.phone .insight .dots { display: flex; justify-content: space-between; }
.phone .insight .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.phone .insight .dots i.o { background: transparent; border: 1px solid #9AA39C; }
.phone .twins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.phone .twin { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); }
.phone .twin .eb { color: #9AA39C; }
.phone .twin b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin-top: 8px; line-height: 1; }
.phone .twin b small { font-size: 11px; color: var(--acc); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
/* the story */
.phone .search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.06); color: #8E978F; font-size: 12px; }
.phone .search::before { content: "⌕"; font-size: 14px; }
.phone .monthrow { display: flex; align-items: baseline; margin: 12px 2px 8px; font-size: 17px; font-weight: 600; }
.phone .monthrow span { margin-left: auto; font-size: 12px; color: var(--acc); }
.phone .chips { display: flex; gap: 6px; margin-bottom: 8px; }
.phone .chips span { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-size: 12px; font-weight: 600; color: #B9B1A6; }
.phone .chips span.on { background: rgba(255,255,255,.12); color: #F6F4F0; }
.phone .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.phone .cal .dow { text-align: center; font-family: var(--mono); font-size: 9px; color: #6E756F; padding: 2px 0 4px; }
.phone .cal .d { position: relative; aspect-ratio: 1; border-radius: 7px; background-size: cover; background-position: center; font-size: 10px; font-weight: 600; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.phone .cal .d::after { content: ""; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--acc); }
.phone .cal .d.e { background: none; color: #4D534E; text-shadow: none; }
.phone .cal .d.e::after { display: none; }
.phone .cal .d.t { background: rgba(255,255,255,.06); border: 1.5px solid var(--acc); }
.phone .cal .d.t i { position: absolute; left: 6px; right: 6px; top: 7px; height: 2px; background: #9AA39C; box-shadow: 0 5px 0 #9AA39C, 0 10px 0 #6E756F; }
.phone .cal .d.x { visibility: hidden; }
/* today's page */
.phone .day { position: absolute; inset: 0; background: #0B0C0A; z-index: 4; transform: translateX(104%); transition: transform .55s var(--ease); overflow: hidden; }
.phone .day.in { transform: none; }
.phone .dayscroll { position: absolute; left: 16px; right: 16px; top: 52px; will-change: transform; }  /* the page, read top to bottom by the demo */
.phone .day .run { margin: 4px 0 0 20px; color: #6E756F; }
.phone .day .morning.mt { margin-top: 24px; }
.phone .day .thr { margin: 8px 0 0 36px; color: #6E756F; }
.phone .day .nth { margin: 8px 0 0 36px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; color: var(--acc); }
.phone .day .nth .mono { color: #6E756F; }
.phone .day .keep { margin: 20px auto 0; width: max-content; padding: 8px 22px; border-radius: 999px; border: 1px solid rgba(217,184,242,.5); color: var(--acc); font-weight: 600; font-size: 13px; }
.phone .day .else { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; }
.phone .day .else i { font-style: normal; color: var(--acc); }
.phone .day .else b { display: block; font-size: 13px; font-weight: 600; }
.phone .day .else small { display: block; font-size: 10.5px; color: #8E978F; margin-top: 2px; }
.phone .day .else span { color: #6E756F; }
.phone .day .tail { height: 84px; }
.phone .day .dayfade { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(180deg, transparent, #0B0C0A 65%); pointer-events: none; }
.phone .day .top { display: flex; align-items: center; justify-content: space-between; }
.phone .day .top img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--acc); object-fit: cover; }
.phone .day .pill { margin-top: 0; }
.phone .day h3 { margin: 18px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: 0; }
.phone .day h3 b { color: var(--acc); font-weight: 500; }
.phone .day .sub { margin-top: 8px; font-family: var(--serif); font-style: italic; color: #8E978F; font-size: 13px; }
.phone .day .chap { margin-top: 12px; font-size: 15px; font-weight: 600; }
.phone .day .chap b { color: var(--acc); font-weight: 600; }
.phone .day .chap::before { content: "🔖 "; font-size: 11px; }
.phone .day .kept { margin: 6px 0 0 20px; color: #6E756F; }
.phone .day .morning { margin-top: 16px; color: #6E756F; display: flex; align-items: center; gap: 8px; }
.phone .day .morning::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.phone .day .tl { margin-top: 8px; display: grid; gap: 8px; }
.phone .day .ev { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.phone .day .ev .ic { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; font-size: 11px; }
.phone .day .ev .tm { font-family: var(--mono); font-size: 10px; color: #6E756F; }
.phone .day .ev.m { color: #8E978F; font-family: var(--mono); font-size: 11px; font-weight: 400; }
.phone .day .photo { margin: 6px 0 0 36px; height: 120px; border-radius: 12px; background-size: cover; background-position: center; }
.phone .day .words { margin: 10px 0 0 36px; font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.35; }
.phone .day .bar { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 48px; border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-around; font-size: 14px; color: #D6D1C9; z-index: 2; }
.phone .day .bar span:first-child { color: var(--acc); }
.phone .tabbar { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 54px; border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center; font-size: 10.5px; color: #9AA39C; text-align: center; z-index: 3; }
.phone .tabbar .plus { width: 46px; height: 46px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; font-size: 24px; margin: 0 auto; box-shadow: 0 0 24px rgba(217,184,242,.45); }
.phone .tabbar span { margin: 5px; padding: 8px 0; border-radius: 999px; transition: all .35s var(--ease); }
.phone .tabbar span.cur { background: #F6F4F0; color: #1A0E08; font-weight: 600; }
.phone .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, #0B0C0A 70%); pointer-events: none; z-index: 2; }
/* the composer, a sheet over the page */
.phone .sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 46px; background: #141516; border-radius: 26px 26px 0 0; padding: 16px 16px 14px; transform: translateY(104%); transition: transform .6s var(--ease); z-index: 6; display: flex; flex-direction: column; box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
.phone .sheet.up { transform: none; }
.phone .sheet .x { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 11px; color: #B9B1A6; }
.phone .sheet .when { margin-top: 12px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; }
.phone .sheet .when span { color: var(--acc); }
.phone .sheet .tchip { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(217,184,242,.12); color: var(--acc); font-size: 10.5px; font-weight: 600; width: max-content; }
.phone .sheet .tchip::before { content: "⤳"; }
.phone .sheet .words { margin-top: 14px; font-size: 13.5px; line-height: 1.45; min-height: 90px; }
.phone .sheet .words .ph { color: #6E756F; font-style: italic; }
.phone .sheet .caret { display: inline-block; width: 2px; height: 1em; background: var(--acc); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
.phone .sheet .tools { margin-top: auto; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 12px; }
.phone .sheet .tools span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.phone .sheet .tools span:first-child { background: rgba(217,184,242,.2); }
.phone .sheet .save { margin-top: 8px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: rgba(255,255,255,.06); color: #6E756F; transition: all .4s; }
.phone .sheet .save.lit { background: var(--acc); color: var(--acc-ink); box-shadow: 0 8px 24px -8px rgba(217,184,242,.7); }
/* the finger */
.phone .tap { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.25); border: 1.5px solid rgba(255,255,255,.6); transform: translate(-50%,-50%) scale(0); pointer-events: none; z-index: 9; }
.phone .tap.go { animation: tap .55s var(--ease); }
@keyframes tap { 0% { transform: translate(-50%,-50%) scale(0); opacity: 1 } 40% { transform: translate(-50%,-50%) scale(1); opacity: .9 } 100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0 } }
@keyframes blink { 50% { opacity: 0 } }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .phone { transform: none; width: min(300px, 100%); } .hero { padding-bottom: 60px; } }

/* ── chapters ── */
.sec { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.sec .eyebrow { margin-bottom: 26px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* 02 · memories (paper) */
.memories .lead { margin-top: 24px; }
/* 2026-10-20 · the photos are made up, and the page says so (Mark: "yes, we know it's fake, but no, we're not going to use real family photos") */
.memfig { margin: 0; }
.madeup { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.memtile { position: relative; aspect-ratio: 4/5; max-width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: #222; color: #fff; }
.memtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s linear, opacity .8s; transform: scale(1.04); }
.memtile.swap img { transform: scale(1.1); }
.memtile .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05) 40%, rgba(0,0,0,.75)); }
.memtile .eb { position: absolute; top: 22px; left: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.9); transition: opacity .5s, transform .5s var(--ease); }
.memtile .q { position: absolute; left: 24px; right: 24px; bottom: 28px; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; transition: opacity .5s, transform .5s var(--ease); }
.memtile .q small { display: block; margin-top: 10px; font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.8); }
.memtile.swap .eb, .memtile.swap .q { opacity: 0; transform: translateY(10px); }
.lenses { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.lenses span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); transition: all .4s; }
.lenses span.on { background: var(--ember); border-color: var(--ember); color: #fff; }

/* 03 · everything (bloom) · a ledger, not boxes */
.bloom { background: var(--bloom); color: var(--bloom-ink); }
.bloom .eyebrow { color: var(--bloom-ink-3); } .bloom .eyebrow b { color: var(--bloom-ink); }
.bloom .lead { color: var(--bloom-ink-2); }
.bloom .l2 { color: var(--bloom-accent); }
.ledger { margin-top: 54px; border-top: 1px solid rgba(59,30,34,.18); }
.row { display: grid; grid-template-columns: 64px 1fr 1.25fr; gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid rgba(59,30,34,.18); transition: opacity .5s var(--ease); cursor: default; }
.row .n { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--bloom-ink-3); transition: color .4s; }
.row .w { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -.01em; transition: color .4s, transform .5s var(--ease); display: inline-block; }
.row p { font-size: 16.5px; line-height: 1.55; color: var(--bloom-ink-2); transition: color .4s; }
.row p b { font-weight: 600; color: var(--bloom-ink); }
.ledger.live .row { opacity: .45; }
.ledger.live .row.lit, .row:hover { opacity: 1; }
.row.lit .n, .row:hover .n { color: var(--bloom-accent); }
.row.lit .w, .row:hover .w { color: var(--bloom-accent); transform: translateX(6px); }
.row.lit p, .row:hover p { color: var(--bloom-ink); }
@media (max-width: 760px) { .row { grid-template-columns: 44px 1fr; row-gap: 8px; padding: 20px 0; } .row p { grid-column: 2; } }

/* 04 · eight looks (cosmos) */
.cosmos { background: var(--cosmos); color: var(--cosmos-ink); overflow: hidden; }
.cosmos .eyebrow { color: var(--cosmos-ink-3); } .cosmos .eyebrow b { color: var(--lavender); }
.cosmos .lead { color: var(--cosmos-ink-2); } .cosmos .l2 { color: var(--lavender); }
/* the app's own screens (Mark's, 2026-10-18): the eight themes on one rail, the same day dressed differently on a second, going the other way */
.marquee { margin-top: 56px; display: flex; width: max-content; animation: slide 60s linear infinite; }
.marquee.back { margin-top: 28px; animation-direction: reverse; animation-duration: 52s; }
.marquee:hover { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.look { width: 220px; flex: none; margin-right: 22px; transition: transform .5s var(--ease); }   /* the spacing is the item's own, so half the rail is one period */
.marquee.back .look { width: 176px; }
.look:hover { transform: translateY(-10px) rotate(-1deg); }
.look .ph { border-radius: 32px; border: 6px solid #1B1C1F; background: #000; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); }
.marquee.back .look .ph { border-radius: 26px; border-width: 5px; }
.look img { width: 100%; height: auto; display: block; }
.look .cap { margin-top: 12px; text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--cosmos-ink-2); }
.look .cap b { font-weight: 500; color: var(--lavender); }
.cosmos .also { margin-top: 56px; }
.tints { margin-top: 36px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tints span { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); transition: transform .4s var(--ease); }
.tints span:hover { transform: scale(1.25); }
.tints .mono { margin-left: 8px; color: var(--cosmos-ink-3); width: auto; height: auto; box-shadow: none; }
.tints .mono:hover { transform: none; }

/* 05 · sealed (hearth) */
.hearth { background: var(--hearth); color: var(--hearth-ink); }
.hearth .eyebrow { color: var(--hearth-ink-2); } .hearth .eyebrow b { color: var(--teal); }
.hearth .lead { color: var(--hearth-ink-2); } .hearth .l2 { color: var(--teal); }
.seal { border-radius: var(--r-lg); background: var(--hearth-card); border: 1px solid var(--hearth-line); padding: 28px; display: grid; gap: 18px; min-width: 0; }
.seal .line { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; font-size: 14px; min-width: 0; }
.seal .line .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--hearth-ink-2); text-transform: uppercase; grid-column: 2; margin-bottom: -10px; }
.seal .ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.05); display: grid; place-items: center; }
.seal .ic svg { width: 18px; height: 18px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.seal .txt { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--hearth-ink); word-break: break-all; min-height: 2.9em; min-width: 0; }
.seal .txt.ct { color: var(--teal); opacity: .85; }
.seal .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; }
.seal .bar i { display: block; height: 100%; width: 0; background: var(--teal); transition: width 1.6s var(--ease); }
.seal .state { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hearth-ink-2); }
.seal .state b { color: var(--teal); font-weight: 500; }
.nums { display: grid; grid-template-columns: repeat(3, auto); gap: 30px; margin-top: 34px; width: max-content; max-width: 100%; }
.num b { display: block; font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.num span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hearth-ink-2); }

/* 06 · web + iPad (sage) */
.sage { background: var(--sage); color: var(--sage-ink); }
.sage .eyebrow { color: var(--sage-ink-3); } .sage .eyebrow b { color: var(--sage-ink); }
.sage .lead { color: var(--sage-ink-2); } .sage .l2 { color: var(--sage-accent); }
.sage .lead a { font-weight: 600; color: var(--sage-ink); }
.shot { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(28,38,35,.12); transition: transform .8s var(--ease); background: var(--sage-card); }
.shot:hover { transform: translateY(-6px); }
.shot img { width: 100%; height: auto; }
.devices { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-top: 54px; align-items: end; }
@media (max-width: 860px) { .devices { grid-template-columns: 1fr; } }
.sage .mono a { color: var(--sage-accent); font-weight: 500; }

/* 07 · day one (gold) · three numbered rows, not boxes */
.gold { background: var(--gold); color: var(--gold-ink); }
.gold .eyebrow { color: var(--gold-ink-2); } .gold .eyebrow b { color: var(--gold-ink); }
.gold .lead { color: var(--gold-ink-2); } .gold .l2 { color: var(--gold-accent); }
.steps { margin-top: 54px; border-top: 1px solid rgba(58,42,12,.18); }
.step { display: grid; grid-template-columns: 90px 1fr 1.25fr; gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid rgba(58,42,12,.18); }
.step .n { font-family: var(--serif); font-style: italic; font-size: 54px; line-height: 1; color: var(--gold-accent); }
.step h3 { font-size: 22px; letter-spacing: -.02em; }
.step .mono { display: block; margin-top: 8px; color: var(--gold-ink-2); }
.step p { font-size: 16.5px; line-height: 1.55; color: var(--gold-ink-2); }
@media (max-width: 760px) { .step { grid-template-columns: 56px 1fr; row-gap: 8px; } .step p { grid-column: 2; } .step .n { font-size: 40px; } }

/* 08 · plans (paper) */
.plans .grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; margin-top: 54px; }
.plan { border-radius: var(--r-lg); padding: 34px; border: 1px solid var(--line); background: var(--card); min-width: 0; }
.plan.pro { background: var(--ink); color: var(--bg); border-color: transparent; position: relative; overflow: hidden; }
.plan.pro::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(197,98,72,.55), transparent 70%); animation: breathe 6s ease-in-out infinite; pointer-events: none; }
.plan > * { position: relative; }
@keyframes breathe { 50% { transform: scale(1.25) } }
.plan .nm { font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; opacity: .7; }
.plan .price { font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 18px 0 6px; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 16px; font-weight: 500; letter-spacing: 0; opacity: .7; margin-left: 6px; }
.plan .line { font-size: 15px; color: var(--ink-2); }
.plan.pro .line { color: inherit; opacity: .75; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 9px; font-size: 15px; }
.plan li { display: flex; gap: 10px; align-items: baseline; }
.plan li::before { content: "✓"; color: var(--ember); font-weight: 700; }
.plan.pro li::before { color: #FFB89C; }
.plan.pro .btn-ember { background: #fff; color: var(--on-ember); box-shadow: none; }
.plan.pro .btn-ember:hover { background: var(--bg-soft); }
.plans .fine { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 62em; }
@media (max-width: 760px) { .plans .grid { grid-template-columns: 1fr; } .plan { padding: 26px; } }
/* good to know · hairline rows */
.faq { margin-top: clamp(64px, 9vw, 110px); }
.faq h3 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 0; }
.faq .list { margin-top: 34px; border-top: 1px solid var(--line); max-width: 46em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 20px 0; font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-weight: 400; color: var(--ink-3); transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 40em; }
.faq a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.faq .more { margin-top: 24px; font-size: 15px; color: var(--ink-2); }

/* 09 · close (ember) */
.close { background: var(--ember); color: #fff; text-align: center; padding: clamp(100px, 16vw, 200px) 0; overflow: hidden; position: relative; }
.close h2 { font-size: clamp(56px, 11vw, 160px); font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; line-height: .95; }
.close p { margin: 28px auto 0; max-width: 30em; color: rgba(255,255,255,.85); font-size: clamp(17px, 2vw, 21px); }
.close .btn-ember { background: #fff; color: var(--on-ember); box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); margin-top: 36px; }
.close .btn-ember:hover { background: #FFF3EC; }
.close .ring { position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.12); animation: spin 60s linear infinite; pointer-events: none; }
.close .ring::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); box-shadow: 0 0 20px #fff; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg) } }
.close .wrap { position: relative; }

/* footer (hearth) */
.foot { background: var(--hearth); color: var(--hearth-ink-2); padding: 64px 0 calc(44px + env(safe-area-inset-bottom, 0px)); font-size: 14.5px; }
.foot .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; }
.foot .brand img { width: 44px; height: 44px; border-radius: 12px; }
.foot .blurb { max-width: 34ch; line-height: 1.6; margin-top: 16px; }
.foot h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hearth-ink-2); margin: 0 0 16px; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a:hover { color: var(--hearth-ink); }
.foot .base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hearth-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
@media (max-width: 760px) { .foot .grid { grid-template-columns: 1fr 1fr; } .foot .brandcol { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  .marquee, .close .ring, .plan.pro::before, .phone .caret, .phone .rit.done .ic { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
  .memtile img, .phone, .phone .track, .phone .day, .phone .sheet, .shot, .look { transition: none; }
  html { scroll-behavior: auto; }
}

/* ── 2026-10-21 · the hero's loop, closer to the app (Mark: "feel a little more like the real app") ──
   the ritual's peek (half, then pulled all the way up) · swipe to mark, the "how was …?" card ·
   the moment's own page: edit, then share → the share card → the share sheet → Messages, sent. */
.phone .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .4s; z-index: 5; pointer-events: none; }
.phone .scrim.on { opacity: 1; }
.phone .grab { width: 34px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); margin: 0 auto; }
.phone .cbtn { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: 11px; color: #D6D1C9; }
/* the peek */
.phone .peek { position: absolute; left: 0; right: 0; top: 100%; bottom: 0; background: #0C0D0C; border-radius: 24px 24px 0 0; padding: 8px 16px 0; z-index: 6; overflow: hidden; box-shadow: 0 -20px 50px rgba(0,0,0,.6); transition: top .6s var(--ease); }
.phone .peek.half { top: 47%; }
.phone .peek.full { top: 44px; }
.phone .peek .ph1 { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.phone .peek .cat { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: #B9B1A6; }
.phone .peek .cat::before { content: "●"; color: #5FB8B0; font-size: 6px; margin-right: 6px; vertical-align: 2px; }
.phone .peek .lbl2 { margin-top: 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--acc); }
.phone .peek h5 { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.05; letter-spacing: -.01em; color: #F6F4F0; }
.phone .peek .since { margin-top: 6px; font-size: 11.5px; color: #B9B1A6; }
.phone .peek .since::before { content: "🔥 "; font-size: 10px; }
.phone .peek .row2 { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.phone .peek .row2 b { font-size: 17px; font-weight: 600; margin-right: 4px; }
.phone .peek .row2 span { font-size: 12.5px; }
.phone .peek .tchip2 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(217,184,242,.55); background: rgba(217,184,242,.08); font-family: var(--mono); font-size: 10.5px; color: #F6F4F0; }
.phone .peek .tchip2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.phone .peek .ranges { display: flex; justify-content: flex-end; gap: 4px; margin-top: 7px; font-family: var(--mono); font-size: 10px; color: #9AA39C; }
.phone .peek .ranges span { padding: 3px 7px; border-radius: 999px; }
.phone .peek .ranges span.on { background: rgba(255,255,255,.1); color: #F6F4F0; }
.phone .peek .ranges span:last-child { opacity: .35; }
.phone .peek .sq { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; margin-top: 10px; }
.phone .peek .sq i { aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,.07); }
.phone .peek .sq i.k { background: #5FB8B0; }
.phone .peek .sq i.t { background: transparent; box-shadow: inset 0 0 0 1px #9AA39C; }
.phone .peek .ends { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #9AA39C; }
.phone .peek .more { opacity: 0; transition: opacity .5s .15s; }
.phone .peek.full .more { opacity: 1; }
.phone .peek .sec2 { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: #9AA39C; text-transform: uppercase; }
.phone .peek .sec2::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.phone .peek .rem { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 11px; color: #9AA39C; }
.phone .peek .stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.phone .peek .stats small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: #9AA39C; }
.phone .peek .stats b { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.phone .peek .stats b.up { color: var(--ok); }
.phone .peek .stats em { font-style: normal; font-size: 10px; color: #9AA39C; margin-left: 2px; }
.phone .peek .rec { margin-top: 8px; font-size: 11px; color: #9AA39C; }
.phone .peek .hist { margin-top: 18px; text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #9AA39C; }
.phone .peek .markit { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 42px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
/* swipe to mark, then "how was …?" */
.phone .rit { transition: background .4s, transform .45s var(--ease), filter .4s, opacity .4s; }
.phone .rows { position: relative; }
/* swipe to mark, as the app does it (Mark: "when you swipe it slowly, it becomes [the accent] and says mark … marked"):
   the row slides right over a pill in the accent, "mark" until it's far enough, then "marked" */
.phone .rit { z-index: 1; }
.phone .rit.swiping { transform: translateX(34%); background: #171A16; transition: transform .38s cubic-bezier(.3,.7,.3,1), background .2s; }
.phone .rit.armed { transform: translateX(47%); }
.phone .swipebg { position: absolute; left: 0; width: 0; z-index: 0; border-radius: 13px; background: var(--acc); color: var(--acc-ink); display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; overflow: hidden; white-space: nowrap; transition: width .38s cubic-bezier(.3,.7,.3,1), transform .25s var(--ease); }
.phone .swipebg svg { flex: none; margin-left: 12px; }   /* no padding on the pill: at width 0 it's gone */
.phone .swipebg.armed { transform: scale(1.02); }
.phone .rows.focus .rit:not(.hold) { filter: blur(3px); opacity: .35; }
.phone .howcard { position: absolute; left: 14px; right: 14px; z-index: 6; padding: 14px 14px 12px; border-radius: 20px; background: linear-gradient(180deg, #2A1F1B, #171413); border: 1px solid rgba(217,184,242,.25); box-shadow: 0 24px 50px -10px rgba(0,0,0,.8); opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; }
.phone .howcard.on { opacity: 1; transform: none; }
.phone .howcard .t1 { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.phone .howcard .t1 i { font-family: var(--serif); font-weight: 500; font-size: 18px; }
.phone .howcard .at { margin-top: 3px; font-size: 11.5px; color: #B9B1A6; }
.phone .howcard .at b { color: var(--acc); font-weight: 600; }
.phone .howcard .emo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 12px; }
.phone .howcard .emo span { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.05); display: grid; place-items: center; font-size: 16px; transition: box-shadow .3s, background .3s, transform .3s var(--ease); }
.phone .howcard .emo span.pick { background: rgba(217,184,242,.16); box-shadow: inset 0 0 0 1.5px var(--acc); transform: scale(1.06); }
.phone .howcard .note { display: flex; align-items: center; margin-top: 9px; padding: 9px 6px 9px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 12px; min-height: 34px; }
.phone .howcard .note .nt { flex: 1; color: #6E756F; }
.phone .howcard .note .nt.typed { color: #F6F4F0; }
.phone .howcard .note .plus2 { width: 22px; height: 22px; border-radius: 50%; background: rgba(217,184,242,.18); color: var(--acc); display: grid; place-items: center; font-size: 13px; }
.phone .howcard .go { margin-top: 10px; height: 38px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; font-weight: 600; font-size: 13.5px; }
/* the moment's own page: edit, share */
.phone .read { position: absolute; inset: 0; z-index: 5; background: #0B0C0A; transform: translateY(104%); transition: transform .55s var(--ease); overflow: hidden; }
.phone .read.in { transform: none; }
.phone .read .bg { position: absolute; left: 0; right: 0; top: 0; height: 270px; background-size: cover; background-position: center; filter: blur(14px) brightness(.55); transform: scale(1.15); }
.phone .read .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #0B0C0A); }
.phone .read .rtop { position: absolute; left: 14px; right: 14px; top: 52px; display: flex; gap: 6px; z-index: 2; }
.phone .read .rtop .cbtn { background: rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.phone .read .rtop .cbtn:first-child { margin-right: auto; }
.phone .read .done { height: 28px; padding: 0 12px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-weight: 600; font-size: 12px; display: none; align-items: center; }
.phone .read.edit .done { display: inline-flex; }
.phone .read.edit .cbtn.e { display: none; }
.phone .read .rbody { position: absolute; left: 16px; right: 16px; top: 100px; z-index: 1; }
.phone .read .rd { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1; }
.phone .read .rd b { color: var(--acc); font-weight: 500; }
.phone .read .rt { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.1; }
.phone .read .rw { margin-top: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: #9AA39C; }
.phone .read .rimg { margin-top: 12px; height: 128px; border-radius: 12px; background-size: cover; background-position: center; }
.phone .read .rtext { margin-top: 12px; font-size: 13px; line-height: 1.5; color: #E9E5DE; }
.phone .read .rtext .add { color: #F6F4F0; }
.phone .read .rtext .caret { display: none; width: 2px; height: 1em; background: var(--acc); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
.phone .read.edit .rtext .caret { display: inline-block; }
.phone .read.edit .rtext { padding: 8px 10px; margin-left: -10px; margin-right: -10px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(217,184,242,.35); }
.phone .read .emobar { display: none; gap: 6px; margin-top: 10px; }
.phone .read.edit .emobar { display: flex; }
.phone .read .emobar span { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: 15px; }
.phone .read .rtext .emj { display: inline-block; animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: scale(0) } 100% { transform: scale(1) } }
.phone .read .rplace { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #B9B1A6; }
.phone .read .rplace::before { content: "📍 "; font-size: 10px; }
.phone .menu { position: absolute; right: 14px; top: 86px; z-index: 7; width: 150px; border-radius: 14px; background: rgba(44,44,46,.96); backdrop-filter: blur(20px); overflow: hidden; font-size: 13px; opacity: 0; transform: scale(.9); transform-origin: top right; transition: opacity .25s, transform .3s var(--ease); }
.phone .menu.on { opacity: 1; transform: none; }
.phone .menu div { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.phone .menu div:last-child { border-bottom: 0; }
/* the share card, at the app's proportions (Mark: "it looks very condensed"): a tall card, the
   photo at 1.4:1, air under it, the words at reading size, the sign-off well below */
.phone .sharesheet { position: absolute; left: 0; right: 0; bottom: 0; top: 44px; z-index: 7; background: #131416; border-radius: 24px 24px 0 0; padding: 8px 16px 14px; transform: translateY(104%); transition: transform .55s var(--ease); display: flex; flex-direction: column; }
.phone .sharesheet.up { transform: none; }
.phone .sharesheet .sl { margin-top: 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: #9AA39C; }
.phone .sharesheet .st { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.1; }
.phone .scard { margin: 18px auto 0; width: 76%; padding: 15px 14px 13px; border-radius: 18px; background: #0F1117; border: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; }
.phone .scard .sh { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 7.5px; letter-spacing: .26em; color: #9AA39C; }
.phone .scard .sh img { width: 22px; height: 22px; border-radius: 6px; }
.phone .scard .sp { margin-top: 10px; aspect-ratio: 1.4; border-radius: 9px; background-size: cover; background-position: center; }
.phone .scard .stt { margin-top: 30px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.1; }
.phone .scard .sq2 { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 11.5px; line-height: 1.42; color: #D6D1C9; }
.phone .scard .sd { margin-top: 8px; font-family: var(--mono); font-size: 7.5px; color: #9AA39C; }
.phone .scard .sd::before { content: "— "; color: var(--acc); }
.phone .scard .sm { margin-top: 26px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 9.5px; color: #9AA39C; }
.phone .sharesheet .sb { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone .sharesheet .sb span { height: 40px; border-radius: 999px; display: grid; place-items: center; font-size: 13.5px; font-weight: 600; background: rgba(255,255,255,.05); color: #9AA39C; }
.phone .sharesheet .sb span + span { background: #F6F4F0; color: #1A0E08; }
/* the system's share sheet, as iOS draws it in dark mode: the item, people (AirDrop and Messages),
   apps, then the round actions (Mark: "add what's normally there when you do a share") */
.phone .ios { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 8; border-radius: 30px; background: rgba(44,44,48,.94); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); padding: 14px 0 16px; transform: translateY(110%); transition: transform .5s var(--ease); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; overflow: hidden; box-shadow: 0 -10px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.phone .ios.up { transform: none; }
.phone .ios .ih { display: flex; align-items: center; gap: 11px; margin: 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
.phone .ios .ih .thumb { flex: none; width: 46px; height: 46px; border-radius: 10px; background: #0F1117; border: 1px solid rgba(255,255,255,.1); overflow: hidden; display: flex; flex-direction: column; padding: 4px; }
.phone .ios .ih .thumb i { flex: 1; border-radius: 4px; background-size: cover; background-position: center; }
.phone .ios .ih .thumb u { height: 2px; margin-top: 4px; width: 60%; border-radius: 1px; background: #6E6E73; }
.phone .ios .ih b { font-size: 14px; font-weight: 600; line-height: 1.2; color: #fff; }
.phone .ios .row3 { display: flex; gap: 12px; margin: 12px 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.09); margin-right: 16px; overflow: hidden; }
.phone .ios .row3.last { border-bottom: 0; padding-bottom: 0; }
.phone .ios .it { flex: none; width: 60px; text-align: center; font-size: 10px; line-height: 1.2; color: #F2F2F7; }
.phone .ios .it small { display: block; color: #8E8E93; font-size: 9px; }
.phone .ios .av { position: relative; width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 500; color: #fff; background: linear-gradient(180deg, #A5ABB6, #858B96); }
.phone .ios .av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.phone .ios .av .badge { position: absolute; right: -2px; bottom: -2px; width: 19px; height: 19px; border-radius: 50%; background: #2C2C30; display: grid; place-items: center; }
.phone .ios .tileic { width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 13px; background: #232326; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); display: grid; place-items: center; overflow: hidden; }
.phone .ios .tileic.notes { display: block; background: linear-gradient(180deg, #FFD60A 0 26%, #2A2A2D 26%); }
.phone .ios .tileic.notes svg { display: block; margin: 17px auto 0; }
.phone .ios .round { width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.phone .imsg { position: absolute; inset: 0; z-index: 9; background: #000; transform: translateY(104%); transition: transform .5s var(--ease); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; display: flex; flex-direction: column; padding-top: 50px; }
.phone .imsg.up { transform: none; }
.phone .imsg .mh { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 14px 10px; font-size: 13px; }
.phone .imsg .mh span:first-child { color: #0A84FF; }
.phone .imsg .mh b { font-weight: 600; }
.phone .imsg .to { padding: 8px 14px; border-top: 1px solid #1C1C1E; border-bottom: 1px solid #1C1C1E; font-size: 13px; color: #8E8E93; }
.phone .imsg .to b { color: #0A84FF; font-weight: 500; margin-left: 4px; }
.phone .imsg .thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 4px; padding: 10px 12px; }
.phone .imsg .bub { max-width: 74%; padding: 7px 12px; border-radius: 17px; background: #0A84FF; color: #fff; font-size: 13px; line-height: 1.3; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .4s var(--ease); }
.phone .imsg .bub.att { padding: 0; overflow: hidden; background: #0F1117; width: 66%; max-width: none; border-radius: 18px; border: 1px solid #2C2C2E; }
.phone .scard.msg { width: 100%; margin: 0; padding: 9px 9px 10px; border: 0; border-radius: 0; }
.phone .scard.msg .sh { font-size: 6px; }
.phone .scard.msg .sh img { width: 16px; height: 16px; border-radius: 4px; }
.phone .scard.msg .sp { margin-top: 7px; border-radius: 7px; }
.phone .scard.msg .stt { margin-top: 14px; font-size: 13px; }
.phone .scard.msg .sq2 { font-size: 9.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phone .scard.msg .sd { font-size: 6.5px; }
.phone .imsg .field .pre { padding: 0 6px 4px; color: #F2F2F7; }
.phone .imsg .bub.on { opacity: 1; transform: none; }
.phone .imsg .dl { font-size: 9.5px; color: #8E8E93; opacity: 0; transition: opacity .3s; }
.phone .imsg .dl.on { opacity: 1; }
.phone .imsg .compose { display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px 8px; }
.phone .imsg .compose .plus3 { width: 28px; height: 28px; border-radius: 50%; background: #2C2C2E; display: grid; place-items: center; color: #8E8E93; font-size: 18px; }
.phone .imsg .field { flex: 1; border: 1px solid #3A3A3C; border-radius: 18px; padding: 6px; font-size: 13px; min-height: 30px; }
.phone .imsg .field .att2 { width: 62%; border-radius: 12px; overflow: hidden; margin-bottom: 6px; border: 1px solid #2C2C2E; transition: opacity .25s; }
.phone .imsg .field .ft { display: flex; align-items: center; gap: 6px; padding: 0 2px 0 6px; }
.phone .imsg .field .ft #msgTyped { flex: 1; min-height: 1.2em; }
.phone .imsg .field .ft .send { flex: none; }
.phone .imsg .field .ft .caret { display: inline-block; flex: none; width: 2px; height: 1.1em; background: #0A84FF; animation: blink 1s steps(1) infinite; }
.phone .imsg .send { width: 24px; height: 24px; border-radius: 50%; background: #0A84FF; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; opacity: .25; transition: opacity .3s; }
.phone .imsg .send.lit { opacity: 1; }
.phone .imsg .kb { height: 168px; background: #2B2B2D; padding: 8px 3px 0; display: grid; gap: 7px; align-content: start; }
.phone .imsg .kb div { display: flex; justify-content: center; gap: 4px; }
.phone .imsg .kb i { width: 24px; height: 32px; border-radius: 5px; background: #6B6B6F; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; }
.phone .imsg .kb .wide { width: 150px; }
.phone .imsg .kb .mid { width: 36px; background: #46464A; }
.phone .mini .sp { height: 64px; margin-top: 0; border-radius: 0; }
.phone .mini { padding: 0 0 7px; }
.phone .mini .stt { margin: 6px 8px 0; font-size: 12px; }
.phone .mini .sm { margin-top: 3px; font-size: 7.5px; }
/* the finger, held and dragged */
.phone .tap.hold { transform: translate(-50%,-50%) scale(1); opacity: .9; animation: none; }
@media (prefers-reduced-motion: reduce) { .phone .peek, .phone .read, .phone .sharesheet, .phone .ios, .phone .imsg, .phone .howcard { transition: none; } }
/* --doo-r, not --bloom: --bloom is the bloom chapter's paper colour; registering it as a percentage
   blanked chapter 03's pink (seen in dark mode, Mark 2026-10-21: "hard to read").
   between loops (Mark: "the doodle background with the M brushstrokes … animated … disappear slowly, and then it
   starts over", 4–5 s): the app's onboarding doodles bloom out from the middle, the script m writes itself left to
   right, "make your mark." comes up under it, then the whole screen gives way to Today, slowly. */
@property --doo-r { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.phone .splash { position: absolute; inset: 0; z-index: 10; background: #0B0C0A; opacity: 0; pointer-events: none; overflow: hidden; }
.phone .splash.on { opacity: 1; transition: opacity .6s ease; }
.phone .splash.on.out { opacity: 0; transition: opacity 1.4s cubic-bezier(.4,0,.2,1); }
.phone .splash .doo { position: absolute; inset: 0; background: url(/assets/shots/home-v2/splash-doodles.webp) center / cover no-repeat; opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse at 50% 46%, #000 var(--doo-r), transparent calc(var(--doo-r) + 22%)); mask-image: radial-gradient(ellipse at 50% 46%, #000 var(--doo-r), transparent calc(var(--doo-r) + 22%)); }
.phone .splash .doo { filter: blur(.6px); }
.phone .splash.on .doo { animation: bloom 2.4s .15s cubic-bezier(.25,.6,.3,1) forwards; }
@keyframes bloom { from { opacity: 0; --doo-r: 0%; transform: scale(1.06); } 25% { opacity: .5; } to { opacity: .42; --doo-r: 120%; transform: none; } }   /* soft, behind the m (Mark: "too sharp") */
.phone .splash .wm { position: absolute; left: 50%; top: 45%; width: 56%; aspect-ratio: 986 / 700; transform: translate(-50%, -50%); background: url(/assets/shots/home-v2/splash-m.webp) center / contain no-repeat; clip-path: inset(0 100% 0 0); }
.phone .splash.on .wm { animation: write 2.6s .7s cubic-bezier(.45,.05,.35,1) forwards; }   /* slower (Mark: "make the m a bit slower") */
@keyframes write { to { clip-path: inset(0 0 0 0); } }
.phone .splash .mym { position: absolute; left: 0; right: 0; top: 61%; text-align: center; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: #C9C1B6; opacity: 0; }   /* not cursive (Mark) */
.phone .splash.on .mym { animation: rise .9s 3.2s ease forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 2026-10-22 · the loop goes on into the rest of the app (Mark: "close that, go to threads, open a thread
   … click on one of the images … book mode … do a search … change it to the paper theme"). Each scene is
   the app's own: the threads shelf, a thread's title page and folio, its bound book, search, your look. */
.phone .lbl3 { margin: 4px 2px 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: #9AA39C; }
.phone .shelf { padding: 0 16px; }
.phone .vols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.phone .vol { position: relative; height: 150px; border-radius: 4px 12px 12px 4px; background-size: cover; background-position: center; overflow: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.phone .vol::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.78)); }
.phone .vol::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(0,0,0,.38); box-shadow: 1.5px 0 0 rgba(255,255,255,.08); }
.phone .vol b { position: absolute; left: 14px; right: 8px; bottom: 26px; z-index: 1; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 18px; line-height: 1; color: #FBF8F4; }
.phone .vol small { position: absolute; left: 14px; bottom: 11px; z-index: 1; font-family: var(--mono); font-size: 7.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,248,244,.8); }
.phone .vol.j { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.phone .vol .fold { position: absolute; right: 0; top: 0; width: 22px; height: 22px; z-index: 2; background: linear-gradient(225deg, transparent 50%, #E0834F 50%); filter: drop-shadow(-1px 1px 1px rgba(0,0,0,.3)); }
.phone .vol .hrt { position: absolute; right: 10px; top: 8px; z-index: 2; color: #FF453A; font-size: 17px; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.phone .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone .tc { position: relative; height: 112px; border-radius: 12px; background-size: cover; background-position: center; overflow: hidden; }
.phone .tc::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.72)); }
.phone .tc b { position: absolute; left: 10px; right: 8px; bottom: 21px; z-index: 1; font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: #FBF8F4; }
.phone .tc small { position: absolute; left: 10px; bottom: 9px; z-index: 1; font-family: var(--mono); font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(251,248,244,.8); }

.phone .thv { position: absolute; inset: 0; background: #0B0C0A; z-index: 4; transform: translateX(104%); transition: transform .55s var(--ease); overflow: hidden; }
.phone .thv.in { transform: none; }
.phone .thscroll { position: absolute; left: 16px; right: 16px; top: 52px; will-change: transform; }
.phone .thv .top { display: flex; align-items: center; justify-content: space-between; }
.phone .thv .top .pill { margin-top: 0; }
.phone .thv .top img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--acc); object-fit: cover; }
.phone .thv .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 12px; }
.phone .thv .mast .mono { color: #6E756F; letter-spacing: .34em; }
.phone .thv .tog { justify-self: end; display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.06); }
.phone .thv .tog i { font-style: normal; width: 26px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; color: #9AA39C; }
.phone .thv .tog i.on { background: rgba(224,131,79,.18); color: var(--ember-m); }
.phone .thv .kick { margin-top: 18px; color: var(--ember-m); letter-spacing: .26em; }
.phone .thv h4 { margin: 10px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.phone .thv .rule { width: 28px; height: 2px; background: var(--ember-m); margin: 12px 0; }
.phone .thv .about { margin: 0; font-size: 12.5px; line-height: 1.4; color: #B9B1A6; max-width: 240px; }
.phone .thv .facts { margin-top: 12px; color: #6E756F; font-size: 8px; letter-spacing: .14em; }
.phone .thv .divd { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; color: var(--ember-m); font-size: 11px; }
.phone .thv .divd::before, .phone .thv .divd::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.phone .thv .divd i { font-style: normal; }
.phone .thv .fe { margin-bottom: 20px; }
.phone .thv .fr { display: flex; align-items: baseline; }
.phone .thv .fr .n { width: 30px; flex: none; font-family: var(--mono); font-size: 9px; color: var(--ember-m); }
.phone .thv .fr .mono { font-size: 8.5px; letter-spacing: .14em; color: #9AA39C; }
.phone .thv .plate { margin: 8px -16px 0; height: 130px; background-size: cover; background-position: center; }
.phone .thv .ft { margin: 10px 0 0 30px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.phone .thv .fw { margin: 5px 0 0 30px; font-size: 12px; line-height: 1.45; color: #B9B1A6; }
.phone .thv .dayfade { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(180deg, transparent, #0B0C0A 65%); pointer-events: none; }
.phone .thv .bar { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 48px; border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-around; font-size: 14px; color: #D6D1C9; z-index: 2; }
.phone .thv .bar span:first-child { color: var(--ember-m); font-size: 20px; }

.phone .bookv { position: absolute; inset: 0; z-index: 5; background: #0B0C0A; opacity: 0; transform: scale(.94); pointer-events: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.phone .bookv.in { opacity: 1; transform: none; }
.phone .bookv .btop { position: absolute; left: 14px; right: 14px; top: 50px; display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; text-align: center; color: #D6D1C9; z-index: 2; }
.phone .bookv .btop b { font-size: 12px; font-weight: 600; color: #B9B1A6; }
.phone .bookv .btop span:first-child { font-size: 20px; text-align: left; }
.phone .bookv .bwin { position: absolute; left: 0; right: 0; top: 80px; bottom: 44px; overflow: hidden; }
.phone .bookv .bpages { display: flex; height: 100%; transition: transform .55s cubic-bezier(.3,.7,.2,1); }
.phone .bookv .bp { flex: none; width: 100%; box-shadow: inset 12px 0 18px -14px rgba(0,0,0,.9); }
.phone .bookv .bimg { height: 190px; background-size: cover; background-position: center; }
.phone .bookv .bimg.none { height: 24px; }
.phone .bookv .bdt { margin: 14px 18px 0; color: var(--ember-m); font-size: 8.5px; letter-spacing: .16em; }
.phone .bookv .btt { margin: 8px 18px 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.phone .bookv .bw { margin: 8px 18px 0; font-size: 12.5px; line-height: 1.5; color: #C9C2B8; }
.phone .bookv .bfoot { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.phone .bookv .dash { --k: 2; position: relative; width: 120px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 6px, transparent 6px 10px); }
.phone .bookv .dash::after { content: ""; position: absolute; top: 0; height: 2px; width: 16px; left: calc(var(--k) * 10px); background: var(--ember-m); transition: left .55s cubic-bezier(.3,.7,.2,1); }
.phone .bookv .bfoot .mono { font-size: 9px; letter-spacing: .14em; color: #6E756F; }

.phone .spage { padding: 0 16px; }
.phone .srow { display: flex; align-items: center; gap: 10px; }
.phone .sfield { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(224,131,79,.55); font-size: 13px; }
.phone .sfield span { color: var(--ember-m); font-size: 14px; }
.phone .sfield b { font-weight: 500; }
.phone .sfield .caret { width: 1.5px; height: 14px; background: var(--ember-m); animation: blink 1s steps(1) infinite; }
.phone .scancel { color: var(--ember-m); font-size: 12px; }
.phone .sres { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease); }
.phone .sres.on { opacity: 1; transform: none; }
.phone .sres > .mono { display: block; margin: 12px 2px 0; font-size: 8.5px; letter-spacing: .16em; color: #9AA39C; }
.phone .sres .best { margin: 3px 2px 8px; font-size: 8.5px; letter-spacing: .16em; color: var(--ember-m); }
.phone .srr { display: grid; grid-template-columns: 1fr 56px; gap: 10px; align-items: center; padding: 11px 12px; margin-bottom: 7px; border-radius: 14px; background: rgba(255,255,255,.05); }
.phone .srr .mono { font-size: 7.5px; letter-spacing: .14em; color: #9AA39C; }
.phone .srr .st2 { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.05; }
.phone .srr p { margin: 4px 0 0; font-size: 10.5px; line-height: 1.35; color: #B9B1A6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phone .srr p b { color: var(--ember-m); font-weight: 500; }
.phone .srr i { width: 56px; height: 56px; border-radius: 10px; background-size: cover; background-position: center; }

/* the real path to a new look: profile picture → its pop-up → settings → appearance → your look (2026-10-22, Mark).
   The pages draw from --pg/--pc/--pi… so "use this" (.phone.warm) recolours whatever is showing, as the app does. */
.phone { --pg: #0B0C0A; --pc: rgba(255,255,255,.055); --pi: #F6F4F0; --pi3: #9AA39C; --pl: rgba(255,255,255,.08); --pa: #E0834F; }
.phone.warm { --pg: #F4EEE3; --pc: #FCF8F0; --pi: #1B1916; --pi3: #6B6258; --pl: rgba(27,25,22,.08); --pa: #5FB8B0; }
.phone .prof { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 8; padding: 10px 14px 16px; border-radius: 26px; background: #141516; transform: translateY(110%); transition: transform .5s var(--ease); }
.phone .prof.up { transform: none; }
.phone .prof .grab { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 0 auto 12px; }
.phone .prof .ph { display: flex; align-items: center; gap: 14px; }
.phone .prof .ph img { width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid #E0834F; object-fit: cover; }
.phone .prof .pn { color: #E0834F; letter-spacing: .3em; font-size: 9px; }
.phone .prof .pd { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.1; margin-top: 2px; }
.phone .prof .pd small { font-family: var(--sans); font-style: normal; font-size: 12px; }
.phone .prof .pw { color: #9AA39C; font-size: 8.5px; letter-spacing: .16em; margin-top: 3px; }
.phone .prof .pcard { margin-top: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.phone .prof .prow { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; }
.phone .prof .prow + .prow { border-top: 1px solid rgba(255,255,255,.06); }
.phone .prof .prow i { font-style: normal; color: #B9B1A6; font-size: 13px; }
.phone .prof .prow b { display: block; font-size: 13.5px; font-weight: 500; }
.phone .prof .prow small { display: block; font-size: 10.5px; line-height: 1.3; color: #9AA39C; margin-top: 2px; }
.phone .prof .prow span { color: #6E756F; }

.phone .ovl { position: absolute; inset: 0; z-index: 8; background: var(--pg); color: var(--pi); padding: 48px 14px 0; transition: transform .5s var(--ease), background .5s, color .5s; overflow: hidden; }
.phone .sett { transform: translateY(104%); }
.phone .sett.up { transform: none; }
.phone .appr, .phone .lookv { transform: translateX(104%); }
.phone .appr.in, .phone .lookv.in { transform: none; }
.phone .ovl .oh { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; text-align: center; margin-bottom: 12px; }
.phone .ovl .oh b { font-size: 14px; font-weight: 600; }
.phone .ovl .oh .ser { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; }
.phone .ovl .cbtn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); color: var(--pi); font-size: 13px; }
.phone .ovl .ser { font-family: var(--serif); font-style: italic; font-weight: 500; }
.phone .sett .pcard2 { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--pc); border: 1px solid var(--pl); }
.phone .sett .pcard2 img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--pa); object-fit: cover; flex: none; }
.phone .sett .pcard2 b { font-size: 19px; }
.phone .sett .sn { font-size: 11px; color: var(--pi3); }
.phone .sett .sn em { font-size: 18px; color: var(--pi); }
.phone .sett .bars { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-top: 5px; }
.phone .sett .bars i { width: 3.4px; border-radius: 1px; background: var(--pa); opacity: .85; }
.phone .sett .how { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--pc); border: 1px solid var(--pl); }
.phone .sett .how .mono { font-size: 8px; letter-spacing: .26em; color: var(--pi3); }
.phone .sett .how .ser { font-size: 16px; margin-top: 3px; }
.phone .ovl .lbl4 { margin: 14px 4px 6px; font-size: 8px; letter-spacing: .26em; color: var(--pi3); }
.phone .ovl .rcard { border-radius: 16px; background: var(--pc); border: 1px solid var(--pl); }
.phone .ovl .srow2 { display: grid; grid-template-columns: 22px 1fr auto 10px; gap: 10px; align-items: center; padding: 10px 12px; font-size: 13px; }
.phone .ovl .srow2 + .srow2 { border-top: 1px solid var(--pl); }
.phone .ovl .srow2 i { font-style: normal; font-size: 12px; color: var(--pi3); }
.phone .ovl .srow2 b { font-weight: 500; }
.phone .ovl .srow2 b small { display: block; font-size: 10.5px; font-weight: 400; color: var(--pi3); margin-top: 1px; }
.phone .ovl .srow2 span { font-family: var(--mono); font-size: 10px; color: var(--pi3); display: inline-flex; align-items: center; gap: 6px; }
.phone .ovl .srow2 em { font-style: normal; color: var(--pi3); }
.phone .ovl .swd { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--pa); }
.phone .appr .look1 i.lk { width: 20px; height: 32px; border-radius: 5px; background: radial-gradient(circle at 30% 75%, var(--pa) 0 2.5px, transparent 3px), var(--pg); border: 1px solid var(--pl); }
.phone .appr .lbl5 { margin: 14px 4px 8px; font-size: 12px; color: var(--pi3); display: flex; justify-content: space-between; align-items: center; }
.phone .appr .lbl5.tg i { width: 34px; height: 20px; border-radius: 999px; background: #E0834F; position: relative; }
.phone .appr .lbl5.tg i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.phone .appr .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone .appr .seg span { padding: 9px 0; border-radius: 12px; text-align: center; font-size: 12px; background: var(--pc); color: var(--pi3); border: 1px solid var(--pl); }
.phone .appr .seg span.on { color: var(--pi); border: 1.5px solid var(--pi); }
.phone .appr .icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.phone .appr .icons span { height: 46px; border-radius: 12px; background: #111; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 26px; }
.phone .appr .icons span.on { box-shadow: 0 0 0 2px var(--pi); }
.phone .lookv .mini { --mb: #1F1215; --mi: #F6F4F0; --mc: rgba(255,255,255,.07); --ma: #E0834F; width: 112px; height: 186px; margin: 4px auto 0; border-radius: 18px; border: 3px solid rgba(127,127,127,.35); background: var(--mb); padding: 16px 9px 0; position: relative; transition: background .5s; overflow: hidden; }
.phone .lookv .mini .md { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1; color: var(--mi); transition: color .5s; }
.phone .lookv .mini .md b { color: var(--ma); font-weight: 500; transition: color .5s; }
.phone .lookv .mini .mr { height: 15px; margin-top: 7px; border-radius: 5px; background: var(--mc); transition: background .5s; }
.phone .lookv .mini .mr.s { width: 75%; }
.phone .lookv .mini .mp { height: 50px; margin-top: 7px; border-radius: 6px; background-size: cover; background-position: center; }
.phone .lookv .mini .mt { position: absolute; left: 7px; right: 7px; bottom: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 6px; color: var(--mi); }
.phone .lookv .mini .mt i { font-style: normal; width: 13px; height: 13px; border-radius: 50%; background: var(--ma); color: #fff; display: grid; place-items: center; font-size: 9px; transition: background .5s; }
.phone .lookv.warm .mini { --mb: #F4EEE3; --mi: #1B1916; --mc: #FCF8F0; --ma: #C56248; }
.phone .lookv.warm.teal .mini { --ma: #5FB8B0; }
.phone .lookv .lrow { display: flex; justify-content: space-between; margin: 12px 2px 7px; font-size: 11px; color: var(--pi3); }
.phone .lookv .lrow span:last-child { color: var(--pi); }
.phone .lookv .sws { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.phone .lookv .sc { text-align: center; color: var(--pi3); }
.phone .lookv .sc small { display: block; margin-top: 4px; font-size: 7.5px; }
.phone .lookv .sw { position: relative; height: 36px; border-radius: 8px; padding: 8px 5px 0; box-shadow: inset 0 0 0 1px rgba(127,127,127,.25); transition: box-shadow .3s; }
.phone .lookv .sw i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #E0834F; margin-bottom: 5px; }
.phone .lookv .sw u { display: block; height: 2px; border-radius: 1px; background: currentColor; opacity: .55; margin-top: 3px; }
.phone .lookv .sw u + u { width: 60%; }
.phone .lookv .sw.warm { background: #F4EEE3; color: #2B2420; } .phone .lookv .sw.nina { background: #AFBEB7; color: #1C2623; }
.phone .lookv .sw.dim { background: #221E1B; color: #E9E2D6; } .phone .lookv .sw.cosmos { background: #0B0F26; color: #E8E6F5; } .phone .lookv .sw.cosmos i { background: #9C8FE0; }
.phone .lookv .sw.noir { background: #0A0A0A; color: #F4F4F5; } .phone .lookv .sw.bloom { background: #E8C9CB; color: #3A1F25; } .phone .lookv .sw.hearth { background: #1F1215; color: #F6F4F0; box-shadow: 0 0 0 2px #E0834F; }
.phone .lookv.warm .sw.hearth { box-shadow: inset 0 0 0 1px rgba(127,127,127,.25); }
.phone .lookv.warm .sw.warm { box-shadow: 0 0 0 2px #C56248; }
.phone .lookv .accs { display: flex; justify-content: space-between; padding: 0 2px; }
.phone .lookv .accs i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: box-shadow .3s; }
.phone .lookv .accs i:first-child { box-shadow: 0 0 0 2px var(--pg), 0 0 0 3.5px #C56248; }
.phone .lookv.teal .accs i:first-child { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.phone .lookv.teal #acTeal { box-shadow: 0 0 0 2px var(--pg), 0 0 0 3.5px #5FB8B0; }
.phone .lookv .luse { margin-top: 16px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--pc); color: var(--pi3); transition: all .35s; }
.phone .lookv .luse.lit { background: #E0834F; color: #fff; }
.phone.warm .lookv .luse.lit { background: #5FB8B0; }
.phone .lookv .lnote { margin-top: 8px; text-align: center; font-size: 10px; color: var(--pi3); min-height: 14px; }

/* warm, with the turquoise accent: the story, as Mark lands on it after "use this" */
.phone.warm { --acc: #5FB8B0; --acc-ink: #FFFFFF; color: #1B1916; }
.phone.warm .inner { background: linear-gradient(180deg, #F7F2E9 0%, #F4EEE3 45%); }
.phone.warm .sbar svg { fill: #1B1916; }
.phone.warm .sbar { color: #1B1916; }
.phone.warm .pill { background: rgba(27,25,22,.06); }
.phone.warm .pill span { color: #6B6258; }
.phone.warm .pill span.on { background: rgba(95,184,176,.2); color: #2F8C84; }
.phone.warm .search { background: #FCF8F0; color: #9C9388; box-shadow: inset 0 0 0 1px rgba(27,25,22,.06); }
.phone.warm .monthrow { color: #1B1916; }
.phone.warm .chips span { border-color: rgba(27,25,22,.12); color: #6B6258; }
.phone.warm .chips span.on { background: rgba(95,184,176,.18); color: #2F8C84; border-color: rgba(95,184,176,.5); }
.phone.warm .cal .dow { color: #9C9388; }
.phone.warm .cal .d.e { color: #B8AFA4; }
.phone.warm .cal .d.w { background: #FCF8F0; color: #6B6258; text-shadow: none; }
.phone.warm .cal .d.w i { background: #C9C0B4; box-shadow: 0 5px 0 #C9C0B4, 0 10px 0 #DDD5CA; }
.phone.warm .cal .d.t { background-color: #FCF8F0; }
.phone.warm .fade { background: linear-gradient(180deg, transparent, #F4EEE3 70%); }
.phone.warm .tabbar { background: rgba(252,248,240,.85); color: #3D3833; box-shadow: 0 1px 0 rgba(27,25,22,.06); }
.phone.warm .tabbar span.cur { background: #1B1916; color: #F6F4F0; }
.phone.warm .tabbar .plus { box-shadow: 0 0 22px rgba(95,184,176,.5); }
.phone.warm .inner, .phone.warm .tabbar, .phone.warm .pill span, .phone.warm .search, .phone.warm .chips span { transition: background .6s, color .6s, border-color .6s; }
@media (prefers-reduced-motion: reduce) { .phone .splash { display: none; } }