/* Close Point — an Apple-inspired system for a transaction coordination company.
   Layout: full-bleed alternating bands (paper / mist / night). Text holds to a 980px column,
   wide compositions to 1200px. Brand colors live in four tokens (--brand*) so the exact
   Close Point palette drops in with one edit. */
:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --line-2: #e8e8ed;
  --paper: #ffffff;
  --mist: #f5f5f7;
  --night: #0a0e1a;        /* deep navy, matched to the backdrop of Maddie's headshot */
  --night-2: #151a27;
  --night-3: #262c3b;
  --night-ink: #f5f5f7;
  --night-ink-2: #86868b;

  --brand: #1f3a5f;        /* Close Point blue */
  --brand-2: #3f78c4;      /* lighter companion for gradients */
  --brand-3: #9bbbe3;      /* brand tone that reads on black */
  --brand-soft: #edf2f8;   /* tinted surface */
  --brand-text: #356cb4;   /* brand-2 deepened for small text: 4.9:1 on mist, 5.3:1 on white */

  --accent: #0071e3;       /* buttons */
  --accent-hover: #0077ed;
  --link: #0066cc;
  --link-dark: #2997ff;
  --ok: #1f7a34;           /* 5.4:1 on white */
  --flag: #a15c00;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "CP Inter", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "CP Inter Display", "CP Inter", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --t-hero: clamp(48px, 8.4vw, 96px);
  --t-h1: clamp(44px, 7vw, 80px);
  --t-h2: clamp(36px, 5.4vw, 64px);
  --t-h3: clamp(24px, 2.8vw, 32px);
  --t-eyebrow: clamp(19px, 2.1vw, 24px);
  --t-intro: clamp(19px, 2vw, 21px);

  --wrap: 980px;
  --wide: 1200px;
  --gutter-l: max(22px, env(safe-area-inset-left, 0px));
  --gutter-r: max(22px, env(safe-area-inset-right, 0px));
  --radius: 28px;
  --radius-s: 18px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

@font-face { font-family: "CP Inter"; src: url("fonts/inter-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CP Inter"; src: url("fonts/inter-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "CP Inter"; src: url("fonts/inter-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "CP Inter"; src: url("fonts/inter-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "CP Inter Display"; src: url("fonts/inter-display-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "CP Inter Display"; src: url("fonts/inter-display-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
img { display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; letter-spacing: -0.02em; line-height: 1.07; }
p { margin: 0; text-wrap: pretty; }
li { text-wrap: pretty; }
ul, ol { margin: 0; }
button { font: inherit; letter-spacing: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.anchor { display: block; height: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 16px; }

/* safe-area band above sticky bars on phones */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: rgba(250, 250, 252, .92); }

/* ---------- bands & containers ---------- */
.band { padding-block: clamp(88px, 11vw, 160px); padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.band.tight { padding-block: clamp(64px, 8vw, 110px); }
.band.flush-top { padding-top: 0; }
.band.mist { background: var(--mist); }
.band.night { background: var(--night); color: var(--night-ink); }
.band.brand { background: var(--brand-soft); }
.wrap { max-width: var(--wrap); margin-inline: auto; }
.wide { max-width: var(--wide); margin-inline: auto; }
.narrow { max-width: 760px; margin-inline: auto; }
.center { text-align: center; }
.head { display: grid; gap: 16px; }
.center.head, .center .head { justify-items: center; }
.head + * { margin-top: clamp(40px, 6vw, 72px); }

/* ---------- type ---------- */
.eyebrow { text-wrap: balance; font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--brand); }
.night .eyebrow { color: var(--brand-3); }
.hero-title { font-size: var(--t-hero); letter-spacing: -0.03em; line-height: 1.03; }
.h1 { font-size: var(--t-h1); letter-spacing: -0.028em; line-height: 1.04; }
.h2 { font-size: var(--t-h2); letter-spacing: -0.026em; line-height: 1.06; }
.h3 { font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.12; }
.intro { font-family: var(--font-display); font-size: var(--t-intro); line-height: 1.38; font-weight: 600; letter-spacing: -0.016em; color: var(--ink-2); max-width: 36em; }
.center .intro, .hero .intro { text-wrap: balance; }
.intro strong, .copy strong { color: var(--ink); font-weight: 600; }
.night .intro { color: var(--night-ink-2); }
.night .intro strong, .night .copy strong { color: var(--night-ink); }
.center .intro { margin-inline: auto; }
.copy { font-size: 19px; line-height: 1.42; color: var(--ink-2); letter-spacing: -0.02em; }
.copy + .copy { margin-top: 16px; }
.night .copy { color: var(--night-ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.grad { background: linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.night .grad { background-image: linear-gradient(100deg, #ffffff 0%, var(--brand-3) 45%, var(--brand-2) 100%); }
sup.fn-ref { font-size: .5em; vertical-align: super; line-height: 0; margin-left: .06em; letter-spacing: 0; }
sup.fn-ref a { color: inherit; text-decoration: none; }

/* ---------- buttons & links ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.center .actions, .actions.center { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 980px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; border: 0; cursor: pointer; transition: background-color .2s, transform .2s var(--ease); text-align: center; }
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.secondary { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn.secondary:hover { background: var(--accent); color: #fff; }
.btn.light { background: #fff; color: var(--ink); }
.btn.light:hover { background: #e8e8ed; }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #333336; }
.more { font-size: 19px; letter-spacing: -0.02em; }
.more::after { content: "\00a0\203A"; font-size: 1.1em; }
.night .more { color: var(--link-dark); }
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 13px; border-radius: 980px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; }
.pill:hover { background: var(--accent-hover); text-decoration: none; }

/* ---------- global nav ---------- */
/* The frosted glass sits on a pseudo-element so the full-screen mobile menu inside the bar is fixed to the screen, not the bar. */
.gnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; }
.gnav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(250, 250, 252, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08); }
.has-lnav .gnav { position: relative; }
.gnav-in { position: relative; z-index: 2; max-width: 1024px; margin-inline: auto; height: 48px; display: flex; align-items: center; gap: 28px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.03em; white-space: nowrap; }
.wordmark:hover { text-decoration: none; }
.wordmark img { display: block; height: 22px; width: auto; }
.gnav-in > nav { flex: 1; }
.gnav-links { display: flex; justify-content: space-around; gap: 20px; list-style: none; padding: 0; margin: 0; }
.gnav-links a { color: var(--ink); opacity: .82; font-size: 12.5px; letter-spacing: -0.01em; white-space: nowrap; }
.gnav-links a:hover, .gnav-links a[aria-current="page"] { opacity: 1; text-decoration: none; }
.gnav-actions { display: flex; align-items: center; gap: 18px; }
.gnav-util { font-size: 12.5px; color: var(--ink); opacity: .82; white-space: nowrap; }
.gnav-util:hover { opacity: 1; text-decoration: none; }
.gnav-mcta { display: none; transition: opacity .2s; }
.menu-open .gnav-mcta { opacity: 0; pointer-events: none; }
.menu-btn { display: none; position: relative; width: 44px; height: 44px; margin-right: -12px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-btn span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.menu-btn span:nth-child(1) { top: 18px; }
.menu-btn span:nth-child(2) { top: 25px; }
.menu-open .menu-btn span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* Mobile menu: a white curtain drops from the bar, then each link fades in, one after another. */
.menu { display: none; position: fixed; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; background: var(--paper);
  padding: calc(48px + env(safe-area-inset-top, 0px) + 14px) var(--gutter-r) calc(48px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .34s cubic-bezier(.4, 0, .6, 1) .12s, visibility 0s linear .46s; }
.menu-open .menu { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .42s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
.menu ul { list-style: none; padding: 0; margin: 0; }
.menu a { display: block; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.menu a:hover, .menu a:focus-visible { text-decoration: none; color: var(--link); }
.menu-main a { padding: 7px 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.14; letter-spacing: -0.016em; }
.menu-label { margin: 34px 0 6px; font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; color: var(--ink-2); }
.menu-quick a { padding: 7px 0; font-size: 17px; font-weight: 600; line-height: 1.24; letter-spacing: -0.022em; color: #333336; }
.menu .stagger { opacity: 0; transform: translateY(-8px); transition: opacity .14s ease, transform .14s ease; }
.menu-open .menu .stagger { opacity: 1; transform: none; transition: opacity .44s var(--ease-out), transform .44s var(--ease-out); transition-delay: calc(.16s + var(--i) * 28ms); }
/* Lock the page behind the open menu. Only on the root: overflow on body would make body the sticky container
   and send the bar (and its close button) back to the top of the page. */
.menu-open { overflow: hidden; }

/* ---------- local nav (sticky product bar) ---------- */
.lnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 55; background: rgba(250, 250, 252, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.lnav.stuck { border-bottom-color: rgba(0, 0, 0, .14); background: rgba(250, 250, 252, .85); }
.lnav-in { max-width: 1024px; margin-inline: auto; height: 52px; display: flex; align-items: center; gap: 24px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.lnav-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.012em; margin-right: auto; white-space: nowrap; color: var(--ink); }
.lnav-title:hover { text-decoration: none; }
.lnav-links { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }
.lnav-links a { font-size: 12.5px; color: var(--ink); opacity: .8; white-space: nowrap; }
.lnav-links a:hover { opacity: 1; text-decoration: none; color: var(--link); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(52px, 8vw, 104px); padding-bottom: clamp(64px, 9vw, 128px); text-align: center; overflow: hidden; }
.hero .eyebrow + .hero-title, .hero .eyebrow + .h1 { margin-top: 14px; }
.hero .intro { margin: 26px auto 0; }
.hero .actions { margin-top: 34px; justify-content: center; }
.split-words .w { display: inline-block; }
.anim .split-words .w { animation: rise 1s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(.42em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.anim .hero .fade { animation: fadeUp 1s var(--ease-out) both; animation-delay: .55s; }
.anim .hero .fade.late { animation-delay: .8s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- iPhone lock screen (home hero) ---------- */
.stage { position: relative; margin-top: clamp(52px, 7vw, 88px); display: flex; justify-content: center; }
.stage-glow { position: absolute; left: 50%; top: 8%; width: min(900px, 140%); aspect-ratio: 1.6; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-2) 34%, transparent), transparent); pointer-events: none; }
.iphone { position: relative; width: min(340px, 84vw); aspect-ratio: 340 / 700; border-radius: 58px; padding: 12px; background: #1c1c1e; box-shadow: inset 0 0 0 2px #48484a, inset 0 0 0 6px #1c1c1e, 0 70px 120px -50px rgba(8, 20, 40, .55), 0 30px 60px -30px rgba(0, 0, 0, .35); will-change: transform; }
.iphone-screen { position: relative; height: 100%; border-radius: 47px; overflow: hidden; }
.island { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); width: 33%; height: 30px; border-radius: 20px; background: #000; }
.lock { color: #fff; background:
  radial-gradient(120% 70% at 20% 0%, color-mix(in srgb, var(--brand-3) 55%, transparent), transparent 60%),
  radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--brand-2) 70%, transparent), transparent 70%),
  linear-gradient(170deg, #0b1a2e 0%, var(--brand) 45%, var(--brand-2) 100%); }
.lock-date { padding-top: 64px; text-align: center; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; opacity: .92; }
.lock-time { text-align: center; font-family: var(--font-display); font-size: clamp(68px, 22vw, 92px); font-weight: 600; line-height: .95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.notes { position: absolute; left: 11px; right: 11px; bottom: 30px; display: flex; flex-direction: column; gap: 8px; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px 12px; border-radius: 22px; background: rgba(246, 246, 248, .78); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); color: #1d1d1f; text-align: left; box-shadow: 0 6px 24px rgba(0, 0, 0, .1); }
.note-icon { flex: none; width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(165deg, #2c4c76, #11233b); display: grid; place-items: center; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); }
.note-icon img { width: 70%; height: auto; }
.note-body { min-width: 0; flex: 1; }
.note-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.note-top b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-top span { flex: none; font-size: 12px; color: #6e6e73; }
.note p { margin-top: 1px; font-size: 13.5px; line-height: 1.28; letter-spacing: -0.015em; }
.anim .notes .note { animation: noteIn .8s var(--ease-out) both; animation-delay: calc(1.05s + (3 - var(--n)) * .55s); }
@keyframes noteIn { from { opacity: 0; transform: translateY(-16px) scale(.95); } to { opacity: 1; transform: none; } }

/* ---------- scroll-lit statement ---------- */
.lit { font-family: var(--font-display); font-size: clamp(32px, 5vw, 60px); font-weight: 600; line-height: 1.1; letter-spacing: -0.028em; }
.lit .w { transition: color .3s linear; }
.anim .lit .w { color: #d2d2d7; }
.anim .lit .w.on { color: var(--ink); }
.anim .lit .w.on.hl { color: var(--brand-2); }
.night .lit { color: var(--night-ink); }
.anim .night .lit .w { color: #2a3142; }
.anim .night .lit .w.on { color: var(--night-ink); }
.anim .night .lit .w.on.hl { color: var(--brand-3); }

/* ---------- reveal ---------- */
.anim [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 100ms); }
.anim [data-reveal].in { opacity: 1; transform: none; }
.anim [data-reveal="scale"] { transform: scale(.94); }
.anim [data-reveal="scale"].in { transform: none; }

/* ---------- highlights carousel ---------- */
.hl-band { padding-top: clamp(88px, 11vw, 150px); padding-bottom: clamp(72px, 9vw, 120px); }
.hl-head { max-width: var(--wide); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hl-track { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 44px max(22px, calc((100% - var(--wide)) / 2)) 28px; scroll-padding-inline: max(22px, calc((100% - var(--wide)) / 2)); scrollbar-width: none; }
.hl-track::-webkit-scrollbar { display: none; }
.hl-track:focus-visible { outline-offset: -3px; }
.hl-card { position: relative; flex: 0 0 auto; width: min(82vw, 372px); min-height: clamp(500px, 60vw, 600px); border-radius: var(--radius); scroll-snap-align: start; overflow: hidden; padding: 34px 30px 30px; display: flex; flex-direction: column; background: var(--mist); }
.hl-card h3 { font-size: clamp(26px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -0.022em; }
.hl-card > p { margin-top: 10px; font-size: 17px; line-height: 1.42; color: var(--ink-2); }
.hl-vis { margin-top: auto; }
.hl-card.dark { background: var(--night); color: var(--night-ink); }
.hl-card.dark > p { color: var(--night-ink-2); }
.hl-card.brandy { background: linear-gradient(165deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; }
.hl-card.brandy > p { color: rgba(255, 255, 255, .78); }
.hl-controls { display: flex; justify-content: center; align-items: center; gap: 14px; padding-inline: 22px; }
.hl-dots { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 99px; background: var(--line-2); }
.hl-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #9a9aa0; cursor: pointer; transition: width .4s var(--ease-out), background-color .3s; }
.hl-dots button[aria-current="true"] { width: 44px; background: var(--ink); }
.hl-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--line-2); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color .2s, opacity .2s; }
.hl-btn:hover { background: #dcdce1; }
.hl-btn:disabled { opacity: .35; cursor: default; }
.hl-btn svg { width: 18px; height: 18px; }
/* highlight visuals */
.big-num { white-space: nowrap; font-family: var(--font-display); font-size: clamp(88px, 10vw, 112px); font-weight: 700; line-height: .86; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.dark .big-num { background: linear-gradient(170deg, #ffffff 10%, var(--brand-3) 60%, var(--brand-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.big-cap { margin-top: 14px; font-size: 14px; color: var(--night-ink-2); }
.mini-notes { display: grid; gap: 10px; }
.mini-notes .note { background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .18); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mini-notes .note:nth-child(2) { transform: scale(.96); opacity: .8; }
.mini-notes .note:nth-child(3) { transform: scale(.92); opacity: .55; }
.cal { background: #fff; border-radius: 20px; padding: 18px 16px 16px; box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .2); }
.cal-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.cal-head span { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.cal-grid .dow { color: var(--ink-3); font-size: 10.5px; font-weight: 600; padding-bottom: 2px; }
.cal-grid i { font-style: normal; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.cal-grid i.mark { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.cal-grid i.close { background: var(--brand); color: #fff; font-weight: 700; }
.cal-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.cal-key span { display: inline-flex; align-items: center; gap: 7px; }
.cal-key span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.cal-key .k-dl::before { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand-2); }
.cal-key .k-cl::before { background: var(--brand); }
.mail-snip { background: #fff; color: var(--ink); border-radius: 20px; padding: 18px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .45); }
.mail-snip .from { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mail-snip .from b { display: block; font-size: 14px; }
.mail-snip .from span { color: var(--ink-3); }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(165deg, #2c4c76, #11233b); display: grid; place-items: center; }
.avatar img { width: 64%; height: auto; }
.mail-snip .snip-h { margin-top: 14px; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.mail-snip p { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.ticks { list-style: none; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--night-ink); }
.ticks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 99px; background: rgba(48, 209, 88, .14); color: #30d158; font-size: 13px; font-weight: 600; }
.price-big { font-family: var(--font-display); font-size: clamp(92px, 11vw, 120px); font-weight: 700; letter-spacing: -0.05em; line-height: .9; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-big sup { font-size: .4em; vertical-align: top; position: relative; top: .3em; margin-right: .04em; letter-spacing: 0; }

/* ---------- sticky story (contract to close) ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.story-steps { display: flex; flex-direction: column; }
.step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-block: 24px; opacity: .25; transition: opacity .5s var(--ease); }
.step.active { opacity: 1; }
.step .when { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--brand-text); }
.step h3 { font-size: clamp(30px, 3.4vw, 40px); }
.step p { font-size: 19px; line-height: 1.42; color: var(--ink-2); max-width: 26em; }
.step .chip { display: none; }
.story-vis { position: sticky; top: calc(50vh - 290px); height: 580px; display: flex; align-items: center; justify-content: center; }
.phone { width: 290px; height: 580px; border-radius: 54px; padding: 11px; background: #1c1c1e; box-shadow: inset 0 0 0 2px #48484a, 0 50px 90px -40px rgba(8, 20, 40, .45); }
.phone-screen { position: relative; height: 100%; border-radius: 44px; overflow: hidden; background: var(--paper); padding: 58px 20px 20px; }
.phone-screen .island { top: 11px; width: 92px; height: 27px; }
.ph-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ph-title { margin-top: 4px; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.ring { position: relative; width: 150px; height: 150px; margin: 24px auto 22px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring .track { stroke: var(--line-2); }
.ring .prog { stroke: url(#ringGrad); stroke-linecap: round; stroke-dasharray: 402.1; stroke-dashoffset: 335; transition: stroke-dashoffset 1s var(--ease-out); }
.ring b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.ring b small { display: block; margin-top: 4px; font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.ph-list { list-style: none; padding: 0; display: grid; gap: 9px; font-size: 13px; }
.ph-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink-3); transition: color .3s; }
.ph-list em { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--mist); color: var(--ink-3); transition: background-color .3s, color .3s; }
.ph-list li.done { color: var(--ink-2); }
.ph-list li.done em { background: #e7f6ea; color: var(--ok); }
.ph-list li.cur { color: var(--ink); font-weight: 600; }
.ph-list li.cur em { background: var(--brand-soft); color: var(--brand); }
.story-caps { display: none; }   /* phone-only captions, see the 900px breakpoint */

/* ---------- mail mock ---------- */
.mail { max-width: 760px; margin-inline: auto; background: #fff; color: var(--ink); border-radius: 24px; overflow: hidden; text-align: left; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); will-change: transform; }
.band:not(.night) .mail { box-shadow: 0 50px 100px -50px rgba(10, 25, 50, .45), 0 0 0 1px rgba(0, 0, 0, .06); }
.mail-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); background: #fbfbfd; }
.mail-bar i { width: 11px; height: 11px; border-radius: 50%; background: #d9d9de; }
.mail-bar span { margin-left: 10px; font-size: 12px; color: var(--ink-3); }
.mail-head { padding: 22px clamp(20px, 4vw, 36px) 18px; border-bottom: 1px solid var(--line-2); }
.mail-from { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.mail-from > div { min-width: 0; flex: 1; }
.mail-from b { display: block; font-size: 15px; }
.mail-from span { color: var(--ink-3); font-size: 13px; }
.mail-from time { flex: none; font-size: 13px; color: var(--ink-3); }
.mail-subj { margin-top: 16px; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.mail-body { padding: 22px clamp(20px, 4vw, 36px) 30px; display: grid; gap: 14px; font-size: 16px; line-height: 1.5; color: #333336; }
.mail-dates { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; }
.mail-dates div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; font-size: 15px; }
.mail-dates div + div { border-top: 1px solid var(--line-2); }
.mail-dates span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mail-dates div:last-child { background: var(--brand-soft); color: var(--brand); }
.sample-tag { display: block; text-align: center; margin-top: 18px; font-size: 12px; color: var(--ink-2); }
.night .sample-tag { color: var(--night-ink-2); }

/* ---------- standard tiles ---------- */
.std { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.std-tile { background: var(--paper); border-radius: var(--radius); padding: clamp(32px, 4.4vw, 52px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.band:not(.mist) .std-tile { background: var(--mist); }
.std-big { font-family: var(--font-display); font-size: clamp(52px, 6.4vw, 80px); font-weight: 700; letter-spacing: -0.045em; line-height: .95; background: linear-gradient(110deg, var(--brand) 0%, var(--brand-2) 70%, var(--brand-3) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.std-tile h3 { font-size: 24px; letter-spacing: -0.02em; }
.std-tile p { font-size: 17px; color: var(--ink-2); line-height: 1.47; }

/* ---------- feature rows (alternating) ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.feature > * { min-width: 0; }
.feature.flip > :first-child { order: 2; }
.feature .head { gap: 18px; }
.feature + .feature { margin-top: clamp(88px, 11vw, 150px); }

/* ---------- models (service chooser) ---------- */
.models { display: grid; grid-template-columns: repeat(3, 1fr); }
.model { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 8px clamp(14px, 2.6vw, 34px) 0; min-width: 0; }
.model + .model { border-left: 1px solid var(--line); }
.model-badge { min-height: 22px; font-size: 13px; font-weight: 600; color: var(--brand-text); }
.model h3 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.02em; }
.model .tag { font-size: 17px; color: var(--ink-2); min-height: 3em; }
.model .price { font-family: var(--font-display); font-size: clamp(40px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.model .per { font-size: 14px; color: var(--ink-2); margin-top: -6px; }
.model .actions { flex-direction: column; gap: 14px; margin-top: 6px; }
.model .feats { list-style: none; padding: 26px 0 0; margin-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 16px; width: 100%; font-size: 15px; color: var(--ink); }
.model .feats li { display: grid; justify-items: center; gap: 6px; }
.model .feats svg { width: 28px; height: 28px; color: var(--brand-2); }

/* ---------- product cards (services page) ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--mist); border-radius: var(--radius-s); padding: clamp(26px, 3vw, 34px); display: grid; gap: 10px; align-content: start; min-width: 0; }
.band.mist .card { background: var(--paper); }
.card h3 { font-size: 21px; letter-spacing: -0.018em; line-height: 1.2; }
.card p { font-size: 16px; color: var(--ink-2); }
.card .more { font-size: 17px; margin-top: 6px; }
.card .ico { width: 40px; height: 40px; color: var(--brand-2); }
/* Cards that end in an action: the links line up along the bottom of the row. */
.cards-act .card { grid-template-rows: auto auto 1fr auto; align-content: stretch; }
.prod { background: var(--mist); border-radius: var(--radius); padding: clamp(30px, 3.4vw, 42px); display: flex; flex-direction: column; gap: 14px; min-width: 0; scroll-margin-top: 80px; }
.band.mist .prod { background: var(--paper); }
.prod.feature-card { background: var(--night); color: var(--night-ink); }
.prod .kicker { font-size: 13px; font-weight: 600; color: var(--brand-text); }
.prod.feature-card .kicker { color: var(--brand-3); }
.prod h3 { font-size: 26px; letter-spacing: -0.022em; line-height: 1.12; }
.prod .amount { font-family: var(--font-display); font-size: clamp(52px, 5.4vw, 64px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 6px; }
.prod .amount small { font-family: var(--font); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); margin-left: 6px; }
.prod.feature-card .amount small, .prod.feature-card p { color: var(--night-ink-2); }
.prod p { color: var(--ink-2); }
.incl { list-style: none; padding: 20px 0 0; margin-top: 6px; border-top: 1px solid var(--line); display: grid; gap: 11px; font-size: 15.5px; flex: 1; align-content: start; }
.prod.feature-card .incl { border-color: var(--night-3); }
.incl li { display: flex; gap: 11px; line-height: 1.4; }
.incl li::before { content: ""; flex: none; width: 17px; height: 17px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3L13 4.5' fill='none' stroke='%23248a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat; }
.prod.feature-card .incl li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3L13 4.5' fill='none' stroke='%2330d158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.prod .btn { align-self: flex-start; margin-top: 8px; }

/* ---------- spec sheet ---------- */
.specs { border-top: 1px solid var(--line); }
.spec { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding-block: 32px; border-bottom: 1px solid var(--line); }
.spec > * { min-width: 0; }
.spec h3 { font-size: 21px; letter-spacing: -0.018em; }
.spec .when { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--brand-text); }
.spec ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 17px; color: var(--ink); }
.spec li { padding-left: 20px; position: relative; }
.spec li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); }

/* ---------- compare table ---------- */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { padding: 18px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.compare th:first-child, .compare td:first-child { text-align: left; padding-left: 0; }
.compare thead th { font-family: var(--font-display); font-size: 17px; font-weight: 600; vertical-align: bottom; }
.compare thead th small { display: block; margin-top: 4px; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; }
.compare td.y::after { content: ""; display: inline-block; width: 20px; height: 20px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3L13 4.5' fill='none' stroke='%233f78c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.compare td.n::after { content: "\2014"; color: var(--ink-2); }
table.vs { width: 100%; min-width: 620px; border-collapse: collapse; }
.vs th, .vs td { text-align: left; padding: 22px 18px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 16px; line-height: 1.45; }
.vs th:first-child, .vs td:first-child { padding-left: 0; width: 26%; font-weight: 600; color: var(--ink); }
.vs thead th { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.vs td:nth-child(2) { color: var(--ink-2); }
.vs td:nth-child(3) { color: var(--ink); font-weight: 500; }
.vs thead th:nth-child(3) { color: var(--brand-text); }

/* ---------- process ---------- */
.big-steps { display: grid; gap: 20px; }
.big-step { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: clamp(30px, 4.4vw, 52px); border-radius: var(--radius); background: var(--paper); align-items: start; }
.band:not(.mist) .big-step { background: var(--mist); }
.big-step > * { min-width: 0; }
.big-step .num { font-family: var(--font-display); font-size: clamp(64px, 7.4vw, 96px); font-weight: 700; letter-spacing: -0.05em; line-height: .85; font-variant-numeric: tabular-nums; background: linear-gradient(170deg, var(--brand-2), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
.big-step h3 { font-size: clamp(26px, 3vw, 34px); }
.big-step p { margin-top: 12px; font-size: 19px; color: var(--ink-2); max-width: 36em; }
.phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
.phase { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.phase .when { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--brand-text); }
.phase h3 { font-size: 22px; letter-spacing: -0.018em; }
.phase p { font-size: 16px; color: var(--ink-2); }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.role { border-radius: var(--radius); padding: clamp(30px, 4vw, 46px); background: var(--paper); min-width: 0; }
.role.us { background: var(--night); color: var(--night-ink); }
.role h3 { font-size: 15px; font-family: var(--font); font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.role.us h3 { color: var(--brand-3); }
.role ul { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 16px; }
.role li { font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.role:not(.us) li { color: var(--ink); }
.docs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.docs li { display: flex; gap: 14px; align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; }
.docs li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ink-3); transform: translateY(4px); }
.docs li small { display: block; margin-top: 3px; font-size: 14px; font-weight: 400; color: var(--ink-2); }

/* hours card */
.hours { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.band:not(.mist) .hours { background: var(--mist); }
.hours > div { padding: clamp(30px, 4vw, 48px); min-width: 0; }
.hours > div + div { border-left: 1px solid var(--line); }
.hours .label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.hours .val { color: var(--ink); margin-top: 10px; font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.hours p { margin-top: 10px; color: var(--ink-2); }
.open { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.open.is-open { color: var(--ok); }
.open.is-open::before { background: #30d158; box-shadow: 0 0 0 4px rgba(48, 209, 88, .18); }

/* vertical timeline */
.vtl { list-style: none; padding: 0; position: relative; max-width: 760px; margin-inline: auto; }
.vtl::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 40px; width: 2px; background: linear-gradient(var(--brand-2), var(--line)); }
.vtl li { position: relative; padding: 0 0 44px 60px; }
.vtl li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 3px solid var(--brand-2); }
.band.mist .vtl li::before { background: var(--mist); }
.vtl .when { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--brand-text); }
.vtl h3 { margin-top: 6px; font-size: clamp(22px, 2.6vw, 28px); }
.vtl p { margin-top: 8px; font-size: 17px; color: var(--ink-2); }

/* ---------- photos ---------- */
.photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; background: linear-gradient(160deg, #26364d 0%, #0c1220 100%); }
.photo img { width: 100%; height: 114%; object-fit: cover; will-change: transform; }
.photo.wide-ph { aspect-ratio: 16 / 10; }
.photo .ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: #c9d6e8; }
.photo .ph svg { width: 44px; height: 44px; opacity: .75; }
.photo .ph strong { font-size: 17px; }
.photo .ph span { font-size: 13px; opacity: .8; max-width: 22em; }
.photo.light { background: linear-gradient(160deg, #eef2f7 0%, #dbe3ee 100%); }
.photo.light .ph { color: var(--ink-2); }
.photo.art { background:
  radial-gradient(60% 50% at 25% 20%, color-mix(in srgb, var(--brand-3) 60%, transparent), transparent 70%),
  radial-gradient(70% 60% at 85% 90%, color-mix(in srgb, var(--brand-2) 70%, transparent), transparent 70%),
  linear-gradient(160deg, #0c1a2e, var(--brand)); }
.photo.art .mono { position: absolute; inset: auto 28px 26px; color: rgba(255, 255, 255, .9); font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.flag { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--flag); background: #fff4e0; }
.night .flag, .dark .flag { color: #ffd27a; background: rgba(255, 210, 122, .14); }
.signature { font-size: 15px; color: var(--night-ink-2); }
.signature strong { display: block; font-size: 17px; color: var(--night-ink); }
blockquote.pull { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; letter-spacing: -0.026em; line-height: 1.16; }
.night blockquote.pull { color: var(--night-ink); }

/* ---------- clients page ---------- */
.portal-card { position: relative; overflow: hidden; border-radius: 36px; padding: clamp(36px, 6vw, 72px); background: var(--night); color: var(--night-ink); display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; }
.portal-card > * { position: relative; min-width: 0; }
.portal-card::before { content: ""; position: absolute; width: 560px; height: 560px; right: -180px; top: -220px; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-2) 55%, transparent), transparent); }
.portal-card h2 { font-size: clamp(36px, 4.8vw, 56px); }
.portal-card .copy { margin-top: 14px; color: var(--night-ink-2); }
.portal-card .copy strong { color: var(--night-ink); }
.portal-card .actions { margin-top: 28px; }
.mini-steps { list-style: none; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.mini-steps li { counter-increment: s; position: relative; padding: 16px 18px 16px 60px; border-radius: 18px; background: var(--night-2); font-size: 15px; color: var(--night-ink-2); }
.mini-steps li strong { display: block; font-size: 16px; color: var(--night-ink); }
.mini-steps li::before { content: counter(s); position: absolute; left: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--brand-3) 18%, transparent); color: var(--brand-3); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.portal-note { margin-top: 14px; font-size: 14px; color: var(--night-ink-2); }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 6px; }
.copy-row code { font-family: var(--font); font-size: 18px; font-weight: 600; color: var(--ink); user-select: all; word-break: break-all; }
.copy-row .mail-link:hover { text-decoration: none; }
.copy-row .mail-link:hover code { color: var(--link); }
.copy-btn { font-size: 14px; font-weight: 500; color: var(--link); background: none; border: 1.5px solid currentColor; border-radius: 99px; padding: 5px 14px; cursor: pointer; }
.copy-btn:hover { background: var(--link); color: #fff; border-color: var(--link); }

/* ---------- guide (resources) ---------- */
.guide-wrap { display: flex; justify-content: center; perspective: 1200px; }
.guide { display: block; width: min(340px, 78vw); transform: rotate(-4deg); }
.guide img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 50px 90px -40px rgba(15, 35, 65, .6), 0 0 0 1px rgba(0, 0, 0, .06); }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field label span { font-weight: 400; color: var(--ink-2); }
.field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); background: #fff; border: 1px solid #c7c7cc; border-radius: 12px; padding: 13px 15px; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.form .btn { justify-self: start; }
.form-note { font-size: 14px; color: var(--ink-2); }
.form-note.ok { color: var(--ok); font-weight: 600; }
.hp { display: none; }   /* spam trap: bots fill it in, people and screen readers never see it */
.panel { background: var(--paper); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); }
.band:not(.mist) .panel { background: var(--mist); }

/* booking */
.booking { position: relative; min-height: 420px; border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.band:not(.mist) .booking { background: var(--mist); }
.cal-embed { width: 100%; min-height: 640px; }
.cal-embed:empty { display: none; }
.cal-fallback { min-height: 420px; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 40px 24px; text-align: center; }
.cal-fallback svg { width: 56px; height: 56px; color: var(--brand-2); }
.cal-fallback h2 { font-size: clamp(26px, 3vw, 34px); }
.cal-fallback p { color: var(--ink-2); max-width: 30em; }
.booking.cal-ready .cal-fallback { display: none; }

/* ---------- FAQ ---------- */
.faq-group { margin-top: 56px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-family: var(--font); }
.faq-group:first-child { margin-top: 0; }
.faq { margin-top: 14px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 24px 52px 24px 0; font-family: var(--font-display); font-size: clamp(19px, 2.1vw, 23px); font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .4s var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq .answer { padding: 0 52px 26px 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 44em; }
.faq .answer p + p { margin-top: 12px; }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { background: var(--paper); border-radius: var(--radius); padding: clamp(28px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.quote p { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.quote footer { margin-top: auto; font-size: 14px; color: var(--ink-2); }
.quote footer strong { display: block; color: var(--ink); font-size: 15px; }

/* ---------- area chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips span { padding: 10px 18px; border-radius: 99px; background: var(--paper); font-size: 16px; font-weight: 500; box-shadow: 0 0 0 1px var(--line-2); }
.band:not(.mist) .chips span { background: var(--mist); box-shadow: none; }
.phone-row { margin-top: 10px; font-size: 15px; }
.phone-row a { font-weight: 500; }
.chips-note { margin-top: 22px; text-align: center; font-size: 17px; color: var(--ink-2); }

/* ---------- prose (privacy) ---------- */
.prose { max-width: 720px; margin-inline: auto; font-size: 17px; line-height: 1.6; color: #333336; }
.prose h2 { margin-top: 44px; font-size: 26px; color: var(--ink); }
.prose p, .prose ul { margin-top: 14px; }
.prose ul { padding-left: 22px; display: grid; gap: 8px; }

/* ---------- CTA ---------- */
.cta .h1 { max-width: 13em; margin-inline: auto; }
.cta .intro { margin-top: 22px; }
.cta .actions { margin-top: 34px; }

/* ---------- footer ---------- */
.footer { background: var(--mist); color: var(--ink-2); font-size: 12px; line-height: 1.34; letter-spacing: -0.01em; padding: 20px var(--gutter-r) 26px var(--gutter-l); }
.footer-in { max-width: var(--wrap); margin-inline: auto; }
.footer a { color: var(--ink); }
.fnotes { padding-bottom: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 9px; }
.fnotes p { max-width: 70em; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-block: 15px; border-bottom: 1px solid var(--line); }
.crumbs a, .crumbs span { color: var(--ink); }
.crumbs .sep { color: var(--ink-3); }
.fcols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding-block: 22px; }
.fcols > * { min-width: 0; }
.fcols h2 { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 9px; line-height: 1.33; }
.fcols ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.fcols a { color: var(--ink-2); }
.fcols a:hover { color: var(--ink); }
.flegal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.flegal nav { display: flex; gap: 16px; }

/* ---------- additions ---------- */
.ico { display: block; width: 40px; height: 40px; color: var(--brand-2); }
.ico svg { width: 100%; height: 100%; }
.std-tile .ico { width: 48px; height: 48px; margin-bottom: 4px; }
.more-row { margin-top: clamp(40px, 5vw, 56px); text-align: center; }
.feature > .head + * { margin-top: 0; }
.night .copy-row code { color: var(--night-ink); }
.sys { background: #fff; border-radius: 26px; padding: clamp(22px, 3vw, 30px); box-shadow: 0 40px 80px -40px rgba(10, 25, 50, .35), 0 0 0 1px rgba(0, 0, 0, .04); }
.sys-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.sys-head b { font-size: 17px; letter-spacing: -0.02em; }
.sys-head span { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.sys-list { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 16px; }
.sys-list li { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 15px; font-weight: 500; }
.sys-list li span { min-width: 0; }
.sys-list em { font-style: normal; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sys-list i { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 9px; background: var(--line-2); overflow: hidden; }
.sys-list i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: 9px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.hl-vis .sys { color: var(--ink); text-align: left; padding: 20px 20px 22px; border-radius: 22px; }
.hl-vis .sys-head { padding-bottom: 12px; }
.hl-vis .sys-head b { font-size: 15px; }
.hl-vis .sys-list { margin-top: 14px; gap: 11px; }
.hl-vis .sys-list li { font-size: 14px; }
.anim .sys-list i::after { transition: width 1.4s var(--ease-out) .3s; }
.anim [data-reveal]:not(.in) .sys-list i::after { width: 0; }
.sys-list li.done i::after { background: var(--ok); }
.sys-list li.cur span { color: var(--brand-2); }
.sys-list li:not(.done):not(.cur) { color: var(--ink-3); }
.band.mist .mail-snip { box-shadow: 0 40px 80px -40px rgba(10, 25, 50, .4), 0 0 0 1px rgba(0, 0, 0, .04); }
.feature .mail-snip { padding: clamp(20px, 3vw, 28px); }
.feature .mail-snip .snip-h { font-size: clamp(19px, 2vw, 22px); }
.feature .mail-snip p { font-size: 15px; }

/* ---------- brand pieces ---------- */
/* portrait that dissolves into the deep navy band */
.portrait { position: relative; isolation: isolate; width: 100%; max-width: 460px; margin-inline: auto; aspect-ratio: 1024 / 1376; }
.portrait::before { content: ""; position: absolute; z-index: -1; inset: -2% -18% 8%; background: radial-gradient(closest-side, rgba(22, 28, 54, .95) 0%, rgba(17, 22, 44, .7) 45%, rgba(10, 14, 26, 0) 100%); pointer-events: none; }
.portrait picture, .portrait img { display: block; width: 100%; height: 100%; }
.portrait img { object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 68%, transparent 100%);
  mask-composite: intersect; }
.coordinator { overflow: hidden; }
.coordinator .feature { gap: clamp(20px, 5vw, 72px); }
.photo picture { display: block; height: 100%; }
.portrait-card img { object-position: 50% 28%; }

/* tagline and sentence-by-sentence lit text */
.lit .ln { transition: color .5s linear; }
.anim .lit .ln { color: #d2d2d7; }
.anim .lit .ln.on { color: var(--ink); }
.lit .ln.hl { background-image: linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .06em; }
.anim .lit .ln.hl { color: #d2d2d7; }
.anim .lit .ln.hl.on { color: transparent; }
.night .lit .ln.hl { background-image: linear-gradient(100deg, #ffffff 0%, var(--brand-3) 50%, var(--brand-2) 100%); }
.anim .night .lit .ln { color: #2a3142; }
.anim .night .lit .ln.on { color: var(--night-ink); }
.anim .night .lit .ln.hl { color: #2a3142; }
.anim .night .lit .ln.hl.on { color: transparent; }
.lit.tagline { font-size: clamp(54px, 9.6vw, 118px); line-height: 1.02; letter-spacing: -0.042em; }

/* an agent's day (Why page) */
.day { background: #fff; color: var(--ink); border-radius: 26px; padding: clamp(20px, 3vw, 26px); max-width: 440px; margin-inline: auto; text-align: left; box-shadow: 0 40px 80px -40px rgba(10, 25, 50, .35), 0 0 0 1px rgba(0, 0, 0, .05); }
.day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.day-head b { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.day-head span { font-size: 14px; color: var(--ink-3); }
.day-list { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 8px; }
.day-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.day-list time { align-self: start; padding-top: 9px; text-align: right; font-size: 12.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.day-list .ev > div { border-radius: 10px; padding: 8px 12px; background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand-2); }
.day-list .ev b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; }
.day-list .ev span { display: block; font-size: 12.5px; color: var(--ink-2); }
.day-list .cp .ic { justify-self: end; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(165deg, #2c4c76, #11233b); display: grid; place-items: center; }
.day-list .cp .ic img { width: 72%; height: auto; }
.day-list .cp .t { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 12px; border-radius: 99px; background: var(--mist); font-size: 12.5px; color: var(--ink-2); }
.day-list .cp .t::after { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }

/* client reminders (Post-Close Client Care) */
.rem { background: #fff; color: var(--ink); border-radius: 20px; padding: 18px 18px 6px; text-align: left; box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .2); }
.feature .rem { max-width: 420px; margin-inline: auto; padding: 24px 24px 10px; box-shadow: 0 40px 80px -40px rgba(10, 25, 50, .35), 0 0 0 1px rgba(0, 0, 0, .05); }
.rem-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; }
.rem-head b { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-2); }
.rem-head span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rem ul { list-style: none; padding: 0; margin: 0; }
.rem li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line-2); }
.rem li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #c7c7cc; box-sizing: border-box; }
.rem li.done::before { border-color: var(--brand-2); background: var(--brand-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.rem li b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.015em; }
.rem li span { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-3); }
.rem li.done b { color: var(--ink-3); }

/* services extras */
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.also { margin-top: clamp(36px, 5vw, 52px); text-align: center; font-size: 17px; color: var(--ink-2); text-wrap: balance; }
.price-card .pc-price { margin-top: 2px; font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-card .pc-price small { margin-left: 6px; font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); }
.table-note { margin-top: 26px; text-align: center; font-size: 15px; color: var(--ink-2); }
.head .h3 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.024em; }

/* ---------- responsive ---------- */
@media (max-width: 1068px) {
  .gnav-links { gap: 20px; }
  .gnav-util { display: none; }
}
@media (max-width: 900px) {
  .gnav-links, .gnav-actions { display: none; }
  .menu { display: block; }
  .wordmark img { height: 20px; }
  .menu-btn { display: block; margin-left: auto; }
  /* The bar with the menu stays put on every page. On tablets the page's own bar sits right under it. */
  .has-lnav .gnav { position: sticky; }
  .lnav { top: calc(48px + env(safe-area-inset-top, 0px)); }
  html:has(body.has-lnav) { scroll-padding-top: 116px; }
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-vis { display: none; }
  .step { min-height: 0; opacity: 1; padding-block: 30px; border-top: 1px solid var(--line); }
  .step .chip { display: inline-flex; align-self: flex-start; padding: 4px 11px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 600; }

  /* Six phases on phones and tablets: the iPhone pins under the bar and the phases play as you scroll.
     The steps become invisible spacers that set the scroll length; script adds .story-pin unless motion is reduced. */
  :root { --bars: calc(48px + env(safe-area-inset-top, 0px)); }
  .story-pin .story { display: grid; grid-template-columns: minmax(0, 1fr); }
  .story-pin .story-steps, .story-pin .story-vis { grid-area: 1 / 1; }
  .story-pin .step { height: 56vh; height: 56svh; min-height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; pointer-events: none; }
  .story-pin .story-vis { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    position: sticky; top: var(--bars); align-self: start; height: calc(100vh - var(--bars)); height: calc(100svh - var(--bars)); padding: 14px 0 22px; }
  .story-pin .phone-fit { flex: none; width: calc(290px * var(--ps, .6)); height: calc(580px * var(--ps, .6)); }
  .story-pin .phone { transform: scale(var(--ps, .6)); transform-origin: 0 0; box-shadow: inset 0 0 0 2px #48484a, 0 40px 70px -34px rgba(8, 20, 40, .42); }
  .story-pin .story-caps { display: block; width: 100%; max-width: 520px; text-align: center; }
  .story-prog { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; width: 168px; margin-inline: auto; }
  .story-prog i { height: 4px; border-radius: 4px; background: var(--line-2); transition: background-color .45s var(--ease); }
  .story-prog i.on { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
  .caps { display: grid; margin-top: 18px; }
  .cap { grid-area: 1 / 1; opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
  .cap.on { opacity: 1; transform: none; }
  .cap .when { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--brand-text); }
  .cap .cap-h { margin-top: 6px; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
  .cap p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
  .feature, .feature.flip { grid-template-columns: 1fr; }
  .feature.flip > :first-child { order: 0; }
  .portal-card, .roles, .hours { grid-template-columns: 1fr; }
  .hours > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .cards-3, .quotes { grid-template-columns: 1fr; }
  .coordinator .portrait { max-width: 380px; }
  /* Phones and tablets: two dark sections meet here, so trim the doubled spacing and the photo's empty headroom. */
  .band.night + .band.night { padding-top: 16px; }
  .coordinator .portrait { aspect-ratio: 1024 / 1200; }
  .coordinator .portrait img { object-position: 50% 100%; }
  .phase-grid { grid-template-columns: 1fr 1fr; }
  .fcols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 734px) {
  /* Phones: one bar on every page, with the page's button beside the menu. */
  .lnav { display: none; }
  html:has(body.has-lnav) { scroll-padding-top: 72px; }
  .gnav-in { gap: 10px; }
  .gnav-mcta { display: inline-flex; }
  .menu-btn { margin-left: 0; }
  .std, .docs, .phase-grid, .cards-2 { grid-template-columns: 1fr; }
  .models { grid-template-columns: 1fr; gap: 48px; }
  .model + .model { border-left: 0; border-top: 1px solid var(--line); padding-top: 44px; }
  .model .tag { min-height: 0; }
  .big-step { grid-template-columns: 1fr; gap: 12px; }
  .spec { grid-template-columns: 1fr; gap: 14px; }
  .form .row { grid-template-columns: 1fr; }
  .fcols { grid-template-columns: 1fr 1fr; }
  .faq summary { padding-right: 40px; }
  .faq .answer { padding-right: 0; }
  .hl-card { padding: 30px 26px 26px; }
  table.vs { min-width: 0; }
  .vs thead { display: none; }
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; }
  .vs tr { padding-block: 20px; border-bottom: 1px solid var(--line); }
  .vs th, .vs td { border: 0; padding: 5px 0; }
  .vs th:first-child { width: auto; padding-bottom: 8px; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; }
  .vs td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
  .vs td:nth-child(3)::before { color: var(--brand-text); }
  table.compare { min-width: 0; font-size: 14px; }
  .compare th, .compare td { padding: 14px 5px; }
  .compare thead th { font-size: 12.5px; line-height: 1.2; }
  .compare thead th small { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim [data-reveal], .anim .split-words .w, .anim .hero .fade, .anim .notes .note { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .anim .lit .w { color: inherit !important; }
  .step { opacity: 1; }
  .hl-track { scroll-behavior: auto; }
  .menu, .menu .stagger, .menu-open .menu, .menu-open .menu .stagger { transition: none !important; }
}