/* LetterDesk site, Dossier design system.
   Palette and type locked in content/BRAND.md. Tokens drive both themes;
   components read tokens only, never raw hex. */

/* Apple-inspired type: the San Francisco system family. On the iPhone/Mac
   audience this renders real SF Pro (Display for headings, Text for body), the
   exact type the app uses, so the site and the app feel like one product. No
   webfont to download, no blur, no FOUT. */

:root {
  --ground: #F6F5F1;
  --ground-2: #EFEDE7;
  --card: #FFFFFF;
  --ink: #191A1C;
  --muted: #63666C;
  --line: #E3E1DA;
  --accent: #1C5490;
  --accent-deep: #14406F;
  --accent-soft: #E6EDF5;
  --money: #846632;    --money-soft: #F3EEE2;
  --urgent: #B44160;   --urgent-soft: #F7E9EE;
  --done: #347759;     --done-soft: #E4F1EA;
  --appt: #45708D;     --appt-soft: #E7F0F5;
  --hero-bg: #14406F;
  --hero-bg-2: #0F3159;
  --hero-ink: #FFFFFF;
  --hero-accent: #9DC0EC;
  --shadow-1: rgba(20, 30, 50, 0.06);
  --shadow-2: rgba(20, 30, 50, 0.10);
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1120px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0A0C12;
    --ground-2: #0E1119;
    --card: #141821;
    --ink: #EDEEF2;
    --muted: #9BA1AD;
    --line: #242934;
    --accent: #7FAAE0;
    --accent-deep: #9DC0EC;
    --accent-soft: #16233A;
    --money: #E3AC3F;    --money-soft: #37301C;
    --urgent: #F27E9B;   --urgent-soft: #3A1F2A;
    --done: #5EE6A8;     --done-soft: #12321F;
    --appt: #6BC1F5;     --appt-soft: #14304A;
    --hero-bg: #121A28;
    --hero-bg-2: #0C1220;
    --hero-ink: #F4F7FB;
    --hero-accent: #9DC0EC;
    --shadow-1: rgba(0, 0, 0, 0.30);
    --shadow-2: rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="light"] {
  --ground: #F6F5F1; --ground-2: #EFEDE7; --card: #FFFFFF; --ink: #191A1C;
  --muted: #63666C; --line: #E3E1DA; --accent: #1C5490; --accent-deep: #14406F;
  --accent-soft: #E6EDF5; --money: #846632; --money-soft: #F3EEE2;
  --urgent: #B44160; --urgent-soft: #F7E9EE; --done: #347759; --done-soft: #E4F1EA;
  --appt: #45708D; --appt-soft: #E7F0F5; --hero-bg: #14406F; --hero-bg-2: #0F3159;
  --hero-ink: #FFFFFF; --hero-accent: #9DC0EC;
  --shadow-1: rgba(20,30,50,0.06); --shadow-2: rgba(20,30,50,0.10);
}
:root[data-theme="dark"] {
  --ground: #0A0C12; --ground-2: #0E1119; --card: #141821; --ink: #EDEEF2;
  --muted: #9BA1AD; --line: #242934; --accent: #7FAAE0; --accent-deep: #9DC0EC;
  --accent-soft: #16233A; --money: #E3AC3F; --money-soft: #37301C;
  --urgent: #F27E9B; --urgent-soft: #3A1F2A; --done: #5EE6A8; --done-soft: #12321F;
  --appt: #6BC1F5; --appt-soft: #14304A; --hero-bg: #121A28; --hero-bg-2: #0C1220;
  --hero-ink: #F4F7FB; --hero-accent: #9DC0EC;
  --shadow-1: rgba(0,0,0,0.30); --shadow-2: rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Type scale, Apple SF Pro Display: bold weights, tight optical tracking,
   generous sizes, the way apple.com sets a headline. Body is SF Pro Text. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.06; letter-spacing: -0.021em; text-wrap: balance; margin: 0 0 0.4em; }
h1 { font-size: clamp(2.6rem, 6.6vw, 4.6rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.3vw, 1.55rem); letter-spacing: -0.018em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.12rem, 2.1vw, 1.4rem); color: var(--muted); line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; }
.eyebrow { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); margin: 0 0 0.8rem; }
.serif { font-family: var(--display); }
.tnum { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(56px, 9vw, 108px) 0; }
.section--tint { background: var(--ground-2); }
.center { text-align: center; }
.measure { max-width: 640px; }
.center .measure { margin-left: auto; margin-right: auto; }

/* Buttons, Apple-style: SF Pro, clean pill, solid fill, no heavy shadow, a
   gentle press. Filled accent for the primary action, quiet outline for the
   secondary, exactly like apple.com. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; font-family: var(--sans); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; padding: 0.72em 1.35em; border-radius: 980px; border: 1px solid transparent; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.08s ease, border-color 0.2s ease; }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent-deep); color: #fff; }
.btn--primary:hover { background: #10365f; }
@media (prefers-color-scheme: dark) { .btn--primary { background: var(--accent); color: #0A0C12; } .btn--primary:hover { background: #9cc2ee; } }
:root[data-theme="dark"] .btn--primary { background: var(--accent); color: #0A0C12; }
:root[data-theme="dark"] .btn--primary:hover { background: #9cc2ee; }
:root[data-theme="light"] .btn--primary { background: var(--accent-deep); color: #fff; }
:root[data-theme="light"] .btn--primary:hover { background: #10365f; }
.btn--ghost { background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn--onhero { background: #fff; color: var(--accent-deep); }
.btn--onhero:hover { background: #eef3f9; }
.btn--onhero-ghost { background: transparent; color: var(--hero-ink); border-color: rgba(255,255,255,0.4); }
.btn--onhero-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 20px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--ink); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.nav__links { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.nav__links a { color: var(--muted); font-size: 0.95rem; font-weight: 500; }
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav__cta { margin-left: 4px; }
.nav__cta-in { display: none; }
.nav__toggle, .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.nav__toggle { display: none; }
@media (max-width: 860px) {
  .nav__links { position: fixed; inset: 62px 0 auto 0; flex-direction: column; background: var(--ground); border-bottom: 1px solid var(--line); padding: 16px 22px 22px; gap: 14px; align-items: stretch; transform: translateY(-120%); transition: transform 0.25s ease; }
  .nav__links[data-open="true"] { transform: translateY(0); }
  .nav__links a { padding: 6px 0; font-size: 1.05rem; }
  .nav__toggle { display: inline-flex; margin-left: auto; }
  .nav__cta { display: none; }
  .nav__cta-in { display: inline-flex; justify-content: center; }
}

/* Hero */
.hero { position: relative; background: radial-gradient(120% 130% at 85% 0%, #1b4e86 0%, var(--hero-bg) 42%, var(--hero-bg-2) 100%); color: var(--hero-ink); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 8%, rgba(157,192,236,0.16), transparent 38%); pointer-events: none; }
.hero::before { content: ""; position: absolute; right: -8%; top: -20%; width: 46%; height: 140%; background: radial-gradient(closest-side, rgba(227,172,63,0.14), transparent 72%); pointer-events: none; }
.hero .wrap { position: relative; padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 8vw, 100px); }
.hero__grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero .eyebrow { color: var(--hero-accent); }
.hero h1 { color: var(--hero-ink); font-size: clamp(2.8rem, 7.2vw, 5.2rem); }
.hero__sub { font-size: clamp(1.12rem, 2vw, 1.32rem); color: rgba(255,255,255,0.84); max-width: 32ch; line-height: 1.45; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__note { margin-top: 18px; font-size: 0.9rem; color: rgba(255,255,255,0.66); }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { margin-top: 8px; } }

/* Hero media, the before and after: a real iPhone showing the calm summary, with
   the original scary letter tucked behind it as evidence of what it read. */
.hero__media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.hero__paper { position: absolute; left: 4%; top: 8%; width: 46%; max-width: 240px; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 24px 46px -18px rgba(0,0,0,0.55); transform: rotate(-6deg); }
.hero__paper::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12,18,32,0.5)); }
.hero__badge { position: absolute; z-index: 3; left: 2%; bottom: 12%; background: rgba(255,255,255,0.14); backdrop-filter: blur(10px); color: #fff; font-weight: 600; font-size: 0.82rem; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); display: inline-flex; align-items: center; gap: 7px; }
.hero__badge svg { color: var(--mint, #5EE6A8); }

/* Device frame, a clean modern iPhone. The screenshot already carries iOS's
   own status bar, so the frame adds only the titanium bezel and a subtle
   Dynamic Island pill in the space iOS leaves for it. */
.phone { position: relative; z-index: 2; width: min(300px, 74%); border-radius: 46px; padding: 10px; background: linear-gradient(150deg, #3a3d44, #16181d 55%, #0b0d12); box-shadow: 0 44px 90px -30px rgba(0,0,0,0.62), inset 0 0 0 1px rgba(255,255,255,0.08); }
.phone__screen { position: relative; border-radius: 37px; overflow: hidden; box-shadow: 0 0 0 2px #000; }
.phone__screen img { display: block; width: 100%; }
.phone__island { position: absolute; z-index: 3; top: 11px; left: 50%; transform: translateX(-50%); width: 26%; height: 17px; background: #000; border-radius: 999px; }
.phone img { border-radius: 37px; display: block; width: 100%; }
.phone--float { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .phone--float { animation: none; } }
@media (max-width: 520px) { .hero__media { min-height: 360px; } .hero__paper { max-width: 150px; left: 0; } }

/* Logos / trust row */
.trust { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: center; color: var(--muted); font-size: 0.9rem; }
.trust b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Feature cards */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: 0 1px 0 var(--shadow-1), 0 14px 30px -22px var(--shadow-2); transition: transform 0.16s ease, box-shadow 0.24s ease, border-color 0.2s ease; }
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 1px 0 var(--shadow-1), 0 26px 44px -26px var(--shadow-2); }
.card__icon { box-shadow: 0 8px 18px -8px color-mix(in srgb, currentColor 60%, transparent); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card__icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 16px; color: #fff; }
.ic-money { background: var(--money); } .ic-urgent { background: var(--urgent); }
.ic-done { background: var(--done); } .ic-appt { background: var(--appt); }
.ic-accent { background: var(--accent-deep); } .ic-ink { background: var(--ink); color: var(--ground); }
@media (prefers-color-scheme: dark) { .ic-accent { background: var(--accent); color:#0A0C12; } }
:root[data-theme="dark"] .ic-accent { background: var(--accent); color:#0A0C12; }

/* Category comparison */
.compare { overflow-x: auto; margin-top: 42px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.compare table { width: 100%; border-collapse: collapse; min-width: 620px; }
.compare th, .compare td { padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.compare tr:last-child td { border-bottom: none; }
.compare thead th { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-size: 1.02rem; }
.compare tbody th { text-align: left; font-weight: 500; color: var(--ink); }
.compare col.ld, .compare th.ld, .compare td.ld { background: var(--accent-soft); }
.compare th.ld { color: var(--accent); }
.compare .yes { color: var(--done); font-weight: 600; }
.compare .no { color: var(--muted); }
.compare .partial { color: var(--money); font-size: 0.86rem; }
.compare td .ic { display: inline-flex; }

/* File-tab section label */
.tablabel { display: inline-block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 5px 12px; border-radius: 7px 7px 0 0; border: 1px solid var(--line); border-bottom: none; }

/* Split feature row */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; }
.split--rev .split__media { order: 2; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } }
.split__media { display: flex; justify-content: center; }
.shot-frame { border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 30px 60px -30px var(--shadow-2); background: var(--card); }
.shot-frame img { display: block; }

/* Steps (how it works) */
.steps { counter-reset: step; display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.step__n { counter-increment: step; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-deep); color: #fff; display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark){ .step__n{ background: var(--accent); color:#0A0C12; } }
:root[data-theme="dark"] .step__n{ background: var(--accent); color:#0A0C12; }
.step__n::before { content: counter(step); }
.step h3 { margin: 2px 0 6px; }
.step p { margin: 0; color: var(--muted); }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; align-items: stretch; }
@media (max-width: 720px){ .plans{ grid-template-columns: 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; }
.plan--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 50px -30px var(--shadow-2); }
.plan__name { font-family: var(--display); font-size: 1.5rem; font-weight: 600; }
.plan__price { font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 8px 0 2px; letter-spacing: -0.02em; }
.plan__price small { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.plan__meta { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; }
.plan ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 0.98rem; }
.plan li svg { margin-top: 3px; color: var(--done); }
.plan .btn { margin-top: auto; justify-content: center; }
.pill { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; }

/* FAQ / accordion */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 1.06rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); font-weight: 400; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq__body { padding: 14px 0 18px; color: var(--muted); }
.faq__body p:last-child { margin-bottom: 0; }

/* Callout / disclaimer */
.callout { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; color: var(--ink); }
.callout--muted { border-left-color: var(--muted); background: var(--ground-2); }
.callout p:last-child { margin-bottom: 0; }
.note { font-size: 0.88rem; color: var(--muted); }

/* Article / blog */
.article { max-width: 720px; margin: 0 auto; }
.article .lead { margin-bottom: 1.6em; }
.article h2 { margin-top: 1.6em; }
.article h3 { margin-top: 1.3em; }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.article li { margin-bottom: 0.5em; }
.article img { border-radius: var(--radius); border: 1px solid var(--line); margin: 1.4em 0; height: auto; }
.article__hero { width: 100%; height: auto; max-height: 440px; object-fit: cover; object-position: top center; }
.article__meta { color: var(--muted); font-size: 0.9rem; display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 1.4em; }
.article__meta .tag { color: var(--accent); font-weight: 600; }
.blogcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 14px 30px -24px var(--shadow-2); transition: transform 0.14s ease, box-shadow 0.2s ease; }
.blogcard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 22px 40px -26px var(--shadow-2); }
.blogcard__body { padding: 22px 24px; }
.blogcard__cat { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.blogcard h3 { margin: 8px 0 8px; color: var(--ink); }
.blogcard p { color: var(--muted); font-size: 0.96rem; margin: 0; }
.blogcard__read { margin-top: 14px; color: var(--muted); font-size: 0.85rem; }

/* Stat band */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 620px){ .stats{ grid-template-columns: 1fr; } }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: clamp(2rem,5vw,3rem); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat span { color: var(--muted); font-size: 0.95rem; }

/* CTA band */
.ctaband { background: linear-gradient(160deg, var(--hero-bg), var(--hero-bg-2)); color: var(--hero-ink); border-radius: var(--radius-lg); padding: clamp(36px,6vw,64px); text-align: center; }
.ctaband h2 { color: var(--hero-ink); }
.ctaband p { color: rgba(255,255,255,0.82); }
.ctaband .btn--primary { background: #fff; color: var(--accent-deep); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--ground-2); padding: 54px 0 34px; margin-top: 20px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 780px){ .footer__grid{ grid-template-columns: 1fr 1fr; } }
.footer__grid h4 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.footer__grid a { display: block; color: var(--ink); font-size: 0.95rem; padding: 4px 0; }
.footer__grid a:hover { color: var(--accent); text-decoration: none; }
.footer__brand p { color: var(--muted); font-size: 0.92rem; max-width: 32ch; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.86rem; }

/* Chips + info box mimic (for on-page mini-mockups) */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.chip--money { color: var(--money); background: var(--money-soft); border-color: transparent; }
.chip--urgent { color: var(--urgent); background: var(--urgent-soft); border-color: transparent; }
.chip--done { color: var(--done); background: var(--done-soft); border-color: transparent; }
.chip--appt { color: var(--appt); background: var(--appt-soft); border-color: transparent; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Launch list form */
.waitlist { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 460px; }
.waitlist__input { flex: 1 1 220px; min-width: 0; font-family: var(--sans); font-size: 1rem; padding: 0.8em 1.1em; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.waitlist__input::placeholder { color: var(--muted); }
.waitlist__btn { flex: 0 0 auto; }
.waitlist__msg { flex-basis: 100%; margin: 2px 2px 0; font-size: 0.9rem; min-height: 1.2em; }
.waitlist__msg.ok { color: var(--done); }
.waitlist__msg.err { color: var(--urgent); }
.waitlist--hero .waitlist__input { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #fff; }
.waitlist--hero .waitlist__input::placeholder { color: rgba(255,255,255,0.6); }
.waitlist--hero .waitlist__msg.ok { color: #8be6b6; }
.waitlist--hero .waitlist__msg.err { color: #ffc0cf; }
.ctaband .waitlist { margin: 0 auto; justify-content: center; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--card); padding: 10px 16px; border-radius: 8px; border: 1px solid var(--accent); }