/* TableTalk marketing site. LIGHT THEME (owner 2026-10-17: "site is white and a different blue"): white page everywhere, cobalt #1E4FD8, dark-grey ink; only the phone model itself is dark.
   Copied here so the page never waits on /tokens.css. No cream backgrounds, no orange, no boxes: hairlines, type and photo. */
:root {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #F4F6F9; --surface-2: #E9EDF2; --ink: #1F2428; --muted: #5C6670; --line: #DFE4EA; --line-strong: #848E98;
  --accent: #1E4FD8; --accent-deep: #173FB5; --accent-ink: #FFFFFF; --accent-text: #1A47C4;
  --font-display: "Clash Display", "Bricolage Grotesque", system-ui, sans-serif; --font-sans: "Satoshi", "Instrument Sans", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace;
  --card: #F4F6F9; --radius-card: 20px; --radius: 14px; --radius-pill: 999px; --gutter: 48px; --max: 1200px; --ease: cubic-bezier(.2,.7,.2,1);
}
/* Self-hosted (Fontshare + Google files in fonts/): no render-blocking cross-origin CSS, no fallback flash. */
@font-face { font-family: "Clash Display"; font-weight: 500; font-display: swap; src: url(fonts/clash-display-500.woff2) format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 600; font-display: swap; src: url(fonts/clash-display-600.woff2) format("woff2"); }
@font-face { font-family: "Satoshi"; font-weight: 400; font-display: swap; src: url(fonts/satoshi-400.woff2) format("woff2"); }
@font-face { font-family: "Satoshi"; font-weight: 500; font-display: swap; src: url(fonts/satoshi-500.woff2) format("woff2"); }
@font-face { font-family: "Satoshi"; font-weight: 700; font-display: swap; src: url(fonts/satoshi-700.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url(fonts/geist-mono-400.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url(fonts/geist-mono-500.woff2) format("woff2"); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
html { background: var(--bg); }
body { font: 400 17px/1.55 var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* atlas background: bg.js paints halftone blobs + paper grain on a fixed canvas (z-index -1); html carries the colour */
::selection { background: var(--accent); color: var(--accent-ink); }
img { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }
.mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
section.band { padding: 80px 0; } /* 80 + 80 = 160px between sections */
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; word-spacing: .06em; line-height: .95; text-wrap: balance; }
h3 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; font-size: 22px; line-height: 1.25; }
h2 { font-size: clamp(38px, 4.4vw, 56px); }
.lede { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 58ch; margin: 32px 0 72px; }
.eyebrow { font: 500 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
p, .lede { max-width: 65ch; text-wrap: pretty; }
.wordmark { font-family: var(--font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

/* Buttons: pills. Primary = cobalt; on photo bands a blue-white pill with dark text. */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: var(--radius-pill); font: 500 16px/1 var(--font-sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .18s, border-color .18s, transform .18s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); } /* 5.6:1 at rest */
.btn-ghost { border-color: rgba(31,36,40,.5); color: var(--ink); background: transparent; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(.97); }
  .btn-primary:hover { background: var(--accent); border-color: var(--accent); }
  .btn-ghost:hover { background: rgba(31,36,40,.06); border-color: var(--ink); }
}

/* Nav: transparent over the hero, grey glass once scrolled. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 68px; color: var(--ink); border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 32px; }
.nav .wordmark { margin-right: auto; }
.nav nav { display: flex; gap: 26px; }
.nav nav a { font-size: 15px; font-weight: 500; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; position: relative; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav nav a:hover::after, .nav nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.nav.solid, .nav.open { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--line); }
.menu-btn { order: 1; display: none; width: 44px; height: 44px; border: 1px solid rgba(31,36,40,.5); border-radius: var(--radius-pill); background: transparent; cursor: pointer; place-items: center; }
.menu-btn i, .menu-btn i::before { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; transition: transform .25s var(--ease); }
.menu-btn i::before { content: ""; position: absolute; top: 5px; left: 0; }
.nav.open .menu-btn i { transform: translateY(2.5px) rotate(45deg); }
.nav.open .menu-btn i::before { transform: translateY(-5px) rotate(-90deg); top: 5px; }

/* Film grain on bw photos: fine fractal noise, soft-light, sits under the scrims so it never touches text. */
.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .95 0 0 0 0 .97 0 0 0 1.6 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Hero: bw pass photo, headline bottom-left. No solid background: the photo and its scrim are masked to
   transparent at the bottom so the canvas texture runs straight through (no seam). */
.hero { isolation: isolate; position: relative; height: 100dvh; min-height: 620px; max-height: 880px; display: flex; align-items: flex-end; overflow: hidden; color: var(--ink); }
.hero picture, .hero img.bgimg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero picture, .hero::before { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: contrast(1.05) brightness(.85); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(255,255,255,.85) 0, rgba(255,255,255,0) 150px), linear-gradient(to right, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 34%, rgba(255,255,255,.5) 62%, rgba(255,255,255,.22) 100%); }
.hero .wrap { position: relative; z-index: 3; width: 100%; padding-bottom: 96px; }
.hero h1 { font-size: clamp(44px, 6.2vw, 84px); max-width: 11ch; }
.hero .sub { font-size: 19px; line-height: 1.5; max-width: 34em; margin-top: 32px; color: rgba(31,36,40,.9); }
.hero .cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.js .hero h1, .js .hero h1 .w, .js .hero .sub, .js .hero .cta { opacity: 0; } /* h1 too: the plain headline must not paint before the split */
.hero.go h1 .w { display: inline-block; animation: rise .7s var(--ease) both; animation-delay: calc(.05s + var(--i, 0) * 70ms); }
.hero.go .sub { animation: rise .7s var(--ease) both; animation-delay: calc(.15s + var(--n, 6) * 70ms); }
.hero.go .cta { animation: rise .7s var(--ease) both; animation-delay: calc(.3s + var(--n, 6) * 70ms); }
.js .hero img { transform: scale(1.06); transition: transform 1.6s var(--ease); } /* starts zoomed, so no snap when .go lands */
.hero.go img { transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hero.go h1 { opacity: 1; }

.ph { position: relative; display: block; overflow: hidden; border-radius: var(--radius); }

/* Reveals + hairlines that draw in (one-shot) */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.in { opacity: 1; transform: none; }
.hl { position: relative; }
.hl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; }
.js .hl::before { transform: scaleX(0); transition: transform 1s var(--ease); }
.js .hl.in::before { transform: scaleX(1); }

/* Listen */
.call { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; padding: 48px 0; align-items: start; position: relative; }
.call::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; }
.js .call::before { transform: scaleX(0); transition: transform 1s var(--ease); }
.js .call.in::before { transform: scaleX(1); }
.call .meta { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
/* player.js ticket + bar, restyled to the site: a docket. Unspoken lines are muted (6.8:1), each one stamps in as it is said. */
.tt-ticket { margin: 0 0 22px; list-style: none; }
.tt-ticket li { font-size: 16px; line-height: 1.7; color: var(--muted); transition: color .35s var(--ease); }
.tt-ticket li.is-said { color: var(--ink); animation: stamp .35s cubic-bezier(.2,0,0,1) both; }
.tt-ticket .tt-qty { font-family: var(--font-mono); font-weight: 500; display: inline-block; min-width: 2.3ch; color: var(--muted); transition: color .35s var(--ease); }
.tt-ticket li.is-said .tt-qty { color: var(--accent-text); animation: tick .4s cubic-bezier(.2,0,0,1) both; }
.tt-ticket li.tt-head { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.4; padding: 8px 0; }
.tt-ticket li.tt-sent { margin-top: 4px; font-family: var(--font-mono); font-size: 14px; }
.tt-ticket li.tt-sent.is-said { color: var(--accent-text); }
@keyframes stamp { from { transform: translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes tick { from { transform: scale(.25); filter: blur(4px); } to { transform: none; filter: blur(0); } }
.tt-caption { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--ink); min-height: 2.9em; }
.tt-caption b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); padding-top: 3px; }
.tt-caption.swap { animation: fade .2s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: transparent; font-size: 14px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color .18s, color .18s; }
.chip .mono { color: var(--accent-text); }
.chip.on { border-color: var(--accent-text); color: var(--ink); }
@media (hover: hover) { .chip:hover { border-color: var(--accent-text); color: var(--ink); } }
.transcript { margin-top: 26px; }
.transcript summary { cursor: pointer; font-size: 14px; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; list-style: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.transcript summary::-webkit-details-marker { display: none; }
.transcript ol { margin-top: 10px; max-height: 320px; overflow-y: auto; }
.transcript li { display: grid; grid-template-columns: 3.4em 5.4em 1fr; gap: 8px; padding: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.transcript li b { font-weight: 500; font-size: 13px; color: var(--muted); }
.transcript li.on { color: var(--ink); }
.transcript li.on b { color: var(--accent-text); }
.transcript li button { background: none; border: 0; cursor: pointer; font-size: 13px; color: var(--muted); text-align: left; padding: 10px 0; min-height: 44px; }
.transcript .mono { color: var(--muted); font-size: 13px; }
.transcript li > :not(button) { padding-top: 10px; } /* the button carries the 44px tap target; labels line up with its first line */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.steps .ph { margin-top: 0; aspect-ratio: 4 / 3; }
.steps .ph img { width: 100%; height: 100%; object-fit: cover; }
.steps h3 { font-size: 24px; margin: 28px 0 10px; }
.steps p { color: var(--muted); font-size: 16px; line-height: 1.6; }
@media (min-width: 900px) { .steps h3 { min-height: 2.5em; } } /* text in all three columns starts level */
@media (min-width: 900px) and (max-width: 1039px) { .steps h3 { min-height: 3.75em; } } /* the third heading wraps to 3 lines here */

/* Kitchen: header, one near-black tray holding the dashboard capture, three points underneath */
.dash h2 { max-width: 12ch; }
.dash .lede { max-width: 52ch; margin: 28px 0 48px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.shot-card { padding: clamp(12px, 2.2vw, 32px); }
.shot { width: 100%; height: auto; border-radius: var(--radius-card); border: 1px solid var(--line); }
.shot-wrap { position: relative; container-type: inline-size; --u: calc(100cqw / 1180); } /* --u = one pixel of the 1180px-wide capture; no padding/border here or the drop drifts */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin-top: 40px; }
.points li { border-top: 1px solid var(--line); padding-top: 24px; }
.points h3 { font-size: 20px; margin-bottom: 8px; }
.points p { color: var(--muted); font-size: 16px; line-height: 1.6; }
/* Priya's ticket, rebuilt from the dashboard's own ticket styles at capture scale, lands in the empty slot and stays */
.drop { position: absolute; left: calc(105 * var(--u)); top: calc(604 * var(--u)); width: calc(498 * var(--u)); height: calc(456 * var(--u)); padding: calc(20 * var(--u)) 0 calc(28 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); border-bottom: 1px solid var(--line); color: var(--ink); line-height: 1.4; opacity: 0; transform: translateY(-40px); pointer-events: none; }
.drop .d-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(16 * var(--u)); }
.drop .d-head b { font-family: var(--font-display); font-weight: 500; font-size: calc(28 * var(--u)); line-height: 1.15; letter-spacing: -0.01em; }
.drop .d-head .mono { font-weight: 500; font-size: calc(28 * var(--u)); line-height: 1; font-variant-numeric: tabular-nums; }
.drop .d-sub { display: flex; align-items: center; flex-wrap: wrap; gap: calc(12 * var(--u)); font-family: var(--font-mono); font-size: calc(16 * var(--u)); color: var(--muted); }
.drop .d-sub i { font-style: normal; display: inline-flex; align-items: center; height: calc(26 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: calc(14 * var(--u)); font-family: var(--font-sans); font-size: calc(12 * var(--u)); font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; background: var(--accent-deep); color: var(--accent-ink); }
.drop ul { list-style: none; display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) 0; }
.drop li { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(12 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.35; }
.drop li .mono { font-weight: 500; min-width: 2.2ch; flex-shrink: 0; }
.drop li em { font-style: normal; font-size: calc(18 * var(--u)); color: var(--muted); }
.drop .d-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; height: calc(56 * var(--u)); border-radius: var(--radius-pill); background: var(--accent-deep); color: var(--accent-ink); font-size: calc(18 * var(--u)); font-weight: 600; }
.shot-wrap.in .drop { animation: drop .8s .5s var(--ease) both; }
.shot-wrap.in .d-btn { animation: ring 1.8s 1.4s ease-out 2; }
@keyframes drop { from { opacity: 0; transform: translateY(-40px); } 60% { opacity: 1; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(30,79,216,.5); } to { box-shadow: 0 0 0 calc(14 * var(--u)) rgba(30,79,216,0); } }

/* Questions: always-visible 2x3 grid, H2 on the left from 901px */
.qa { display: grid; gap: 28px; margin-top: 40px; }
.qa-item { border-top: 1px solid var(--line); padding-top: 24px; }
.qa-item h3 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink); margin-bottom: 10px; }
.qa-item p { font-size: 16px; line-height: 1.55; color: var(--muted); }
@media (min-width: 901px) {
  #questions .wrap { display: grid; grid-template-columns: 4fr 8fr; column-gap: 48px; align-items: start; }
  .qa { grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 0; }
}

/* Pricing: one strip, text left, button right */
.price-strip { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 40px 48px; margin-bottom: 24px; }
.price-strip .lede { max-width: 46ch; margin: 20px 0 0; }
.price-strip .btn { flex: none; }
@media (max-width: 639px) { .price-strip .lede { font-size: 16px; } }
@media (max-width: 900px) {
  .price-strip { flex-direction: column; align-items: stretch; gap: 28px; padding: 28px 24px; }
}

/* Contact / final: photo + scrim masked in and out, no solid band, so the texture runs through top and bottom */
.final { position: relative; overflow: hidden; padding: 150px 0; color: var(--ink); isolation: isolate; }
.final picture { position: absolute; inset: 0; }
.final picture { -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 24%, #000 80%, transparent 94%); mask-image: linear-gradient(to bottom, transparent 6%, #000 24%, #000 80%, transparent 94%); }
.final img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; filter: brightness(.8); }
.final::before { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent); content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,.84) 100%); }
.final .wrap { position: relative; z-index: 3; display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: end; }
.final h2 { font-size: clamp(40px, 4.2vw, 60px); }
.final .wrap p { font-size: 19px; color: rgba(31,36,40,.9); margin: 22px 0 0; max-width: 30em; }
.final .wrap .contact-line { margin-top: 8px; font-size: 16px; }
.final .contact-line a { text-underline-offset: 4px; min-height: 0; padding: 10px 0; display: inline-flex; align-items: center; }
form.book { display: grid; gap: 14px; }
form.book label { display: grid; gap: 6px; font-size: 14px; color: rgba(31,36,40,.82); }
form.book input { height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.92); color: var(--ink); font: 400 16px var(--font-sans); }
form.book input:focus-visible { outline: 2px solid var(--accent-text); border-color: transparent; }
form.book .btn { margin-top: 6px; width: 100%; }
form.book .opt { color: rgba(31,36,40,.62); font-weight: 400; }
form.book .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot: off-screen, bots still fill it */
form.book .form-note { font-size: 14px; color: rgba(31,36,40,.82); min-height: 1.5em; }
form.book .form-note a { text-underline-offset: 3px; }
form.book .thanks { font-size: 19px; line-height: 1.5; color: var(--ink); padding: 18px 0; border-top: 1px solid rgba(31,36,40,.35); }

/* Footer: brand + two link columns + legal row */
.footer { border-top: 1px solid var(--line); padding: 64px 0 24px; font-size: 14px; color: var(--muted); }
.foot-top { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 48px; }
@media (min-width: 641px) { .foot-top { grid-template-columns: 1fr auto auto; gap: 32px 72px; } }
.foot-brand p { margin-top: 4px; max-width: 28ch; }
.footer .wordmark { color: var(--ink); font-size: 20px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-h { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.foot-col > :not(.foot-h) { min-height: 44px; display: inline-flex; align-items: center; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 13px; }
.footer a:not(.wordmark) { color: var(--muted); text-decoration: none; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.footer a:not(.wordmark):hover, .footer a:not(.wordmark):focus-visible { text-decoration: underline; }
.footer a:hover { color: var(--ink); }
.footer .foot-legal span a { display: inline; min-height: 0; text-decoration: underline; text-decoration-color: rgba(92,102,112,.55); } /* in-sentence credit link: stays underlined so it reads as a link */
.footer .foot-legal span a:hover, .footer .foot-legal span a:focus-visible { text-decoration-color: currentColor; }
@media (min-width: 900px) { .foot-col > :not(.foot-h), .footer a:not(.wordmark) { min-height: 36px; } }
@media (max-width: 640px) { .foot-legal > span:nth-child(2) { order: 3; flex: 1 1 100%; } } /* credit gets its own line under (c) and Privacy */

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  section.band { padding: 48px 0; }
  .nav .wrap { gap: 12px; }
  .menu-btn { display: grid; }
  .nav nav { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; background: #FFFFFF; border-bottom: 1px solid var(--line); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .nav.open nav { visibility: visible; opacity: 1; transform: none; }
  .nav nav a { font-size: 18px; min-height: 52px; border-bottom: 1px solid var(--line); }
  .nav nav a::after { display: none; }
  .hero { min-height: 600px; }
  .hero img { object-position: 62% 40%; }
  .nav nav a:focus-visible { outline-offset: -3px; }
  .hero::before { background: linear-gradient(to bottom, rgba(255,255,255,.85) 0, rgba(255,255,255,0) 150px), linear-gradient(to top, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 38%, rgba(255,255,255,.5) 68%, rgba(255,255,255,.2) 100%); }
  .hero .wrap { padding-bottom: 48px; }
  .call { grid-template-columns: 1fr; gap: 0; } /* one column: player (with its ticket) sits above the chips */
  .call > div { display: contents; }
  .call h3 { order: 1; } .call .meta { order: 2; } .call .player { order: 3; margin-top: 22px; } .call .chips { order: 4; } .call .transcript { order: 5; }
  .points { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 48px; }
  .final { padding: 100px 0; }
  .final .wrap { grid-template-columns: 1fr; gap: 40px; }
  .final h2 { font-size: clamp(30px, 9vw, 40px); }
  .final::before { background: linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.92) 22%, rgba(255,255,255,.88) 100%); }
  .lede { margin-bottom: 56px; }
}
@media (min-width: 640px) and (max-width: 900px) {
  .steps li { display: grid; grid-template-columns: 5fr 7fr; column-gap: 32px; align-items: center; }
  .steps .ph { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; }
  .steps h3 { grid-column: 2; margin: 0 0 8px; align-self: end; }
  .steps p { grid-column: 2; align-self: start; }
}
/* the phone capture (390px wide) is only served <=700px (see the <source media> in #kitchen), so its drop geometry lives here, not at 900 */
@media (max-width: 700px) {
  .shot-wrap { --u: calc(100cqw / 390); } /* the phone capture is 390px wide */
  .drop { left: calc(16 * var(--u)); top: calc(590 * var(--u)); width: calc(358 * var(--u)); height: calc(338 * var(--u)); }
}
@media (max-width: 700px) { .nav .btn { border-color: transparent; padding: 0 12px; } .hero img { object-position: 50% 50%; } .hero .cta .btn { flex: 1 1 100%; } .transcript li { grid-template-columns: 2.8em 4.6em 1fr; gap: 6px; } .transcript li b { font-size: 12px; } }
/* The 3D phone plays both calls; this band is the no-GPU / reduced-motion fallback. */
html.p3d-on .players { display: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero h1, .js .hero h1 .w, .js .hero .sub, .js .hero .cta { opacity: 1; animation: none !important; }
  .js .hero img { transform: none; transition: none; }
  .ht::before, .drop, .tt-ticket li, .tt-ticket .tt-qty, .tt-caption, .chip { animation: none !important; transition: none !important; }
  .drop { opacity: 1; transform: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .js .hl::before, .js .call::before { transform: none; transition: none; }
}
.tt-player { font-family: var(--font-sans); }

/* r4: owner proof inside the hero; one grade for the three step photos */
.hero-proof { margin-top: 22px; font-size: 15px; color: rgba(31,36,40,.82); text-wrap: balance; }
.hero-proof strong { color: var(--ink); font-weight: 500; white-space: nowrap; }
.steps li:nth-child(1) .ph img { filter: brightness(.78) contrast(.95); }
.steps li:nth-child(2) .ph img { filter: none; }
.steps li:nth-child(3) .ph img { filter: brightness(.88); }
.js .hero .hero-proof { opacity: 0; }
.hero.go .hero-proof { animation: rise .7s var(--ease) both; animation-delay: calc(.45s + var(--n, 6) * 70ms); }

/* r5 fix round 2: no-GPU / reduced-motion fallback of the phone demo. Bigger phone, the ticket beside it fills from the call audio (site.js rpDraw),
   newest line in blue. Hidden in 3D mode, which has its own ticket + call buttons. */
.p3d-replay { order: 3; display: grid; justify-items: start; gap: 24px; }
html.p3d-on .p3d-replay { display: none; }
.p3d-replay .p3d-ticket { width: min(100%, 340px); }
.p3d-replay .tk-list { min-height: 5.4em; }
.p3d-replay .tk-list li { color: var(--muted); transition: color .35s var(--ease); }
.p3d-replay .tk-list li b { color: var(--muted); transition: color .35s var(--ease); }
.p3d-replay .tk-list li.is-said { color: var(--ink); }
.p3d-replay .tk-list li:not(.is-said) { visibility: hidden; }
.p3d-replay .tk-list li.is-said b, .p3d-replay .tk-list li.new, .p3d-replay .tk-list li.new b { color: var(--accent-text); }
.rp-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-pill { min-height: 44px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; font: 500 15px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; }
.rp-pill:hover { border-color: var(--accent-text); }
.rp-pill[aria-pressed="true"] { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
/* the poster is 68% phone and 32% transparent margin, so it is sized by --ph and the margin is pulled back: the phone itself ends up ~0.68 x --ph tall */
html:not(.p3d-on) .p3d-poster { --ph: min(860px, 92vh); height: var(--ph); width: calc(var(--ph) * .5455); max-width: none; max-height: none; margin: calc(var(--ph) * -.12) calc(var(--ph) * -.09); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(#000 82%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(#000 82%, transparent); mask-composite: intersect; } /* soft edges: the phone's blue floor glow runs to the image border */
@media (min-width: 821px) { html:not(.p3d-on) .p3d-sticky { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 40px; } }
@media (max-width: 820px) {
  html:not(.p3d-on) .p3d-poster { --ph: min(540px, 66vh); }
  .p3d-replay { justify-items: stretch; }
  .p3d-replay .p3d-ticket { max-height: none; width: 100%; }
  .p3d-replay .tk-list { grid-template-columns: 1fr; gap: 6px; }
  .p3d-replay .tk-list li { font-size: 17px; }
}
/* the newest line said on a player's ticket carries the blue, older lines settle to ink */
.tt-ticket li.is-said:not(:has(~ li.is-said)) { color: var(--accent-text); }

/* mobile x-ray polish layered over phone3d-b/section.css (that lane owns the file): chips wrap instead of ellipsis, heading clears the nav */
@media (max-width: 820px) {
  html .sq-m .sq-cap span { white-space: normal; overflow: visible; text-overflow: clip; }
  html.p3d-on .p3d-pin h2 { padding-top: 48px; }
}

/* Missed-call calculator: owner's own numbers, a card below the pricing strip */
.calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; padding: 32px 48px; }
.calc-head, .calc-out { grid-column: 1 / -1; }
.calc-head h3 { font-size: 22px; }
.calc-head p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.calc label { display: grid; gap: 8px; font-size: 14px; color: var(--muted); align-content: end; }
.calc input { height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: 500 17px var(--font-mono); -moz-appearance: textfield; }
.calc input::placeholder { color: var(--muted); opacity: 1; }
.calc input:focus-visible { outline: 2px solid var(--accent-text); border-color: transparent; }
.calc-out { font-size: 17px; color: var(--ink); min-height: 1.55em; margin: 0; }
.calc-out b { font: 600 clamp(28px, 3.4vw, 40px)/1.1 var(--font-display); color: var(--accent-text); letter-spacing: -0.02em; }
.calc-out:empty { display: none; }
.calc-out small { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; padding: 24px; } }

/* Kitchen tablet demo: replaces the screenshot inside the card */
.demo-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.demo-toggle { min-height: 44px; padding: 0 20px; border: 1px solid rgba(31,36,40,.3); border-radius: var(--radius-pill); background: transparent; font: 500 15px/1 var(--font-sans); cursor: pointer; transition: border-color .2s; }
.demo-toggle:hover, .demo-toggle[aria-expanded="true"] { border-color: var(--accent-text); }
.shot-wrap.demo-on picture, .shot-wrap.demo-on .drop { display: none; } /* ponytail: card shrinks to the mock, shift is user-triggered */
.tdemo { position: relative; z-index: 2; }
.dash .shot-card { background: none; border: 0; padding: 0; }
.tdemo[hidden] { display: none; }
.td-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.td-tag { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--radius-pill); }
.td-wait { display: flex; align-items: center; gap: 10px; }
.td-wait button { min-width: 64px; min-height: 44px; padding: 0 12px; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; font: 500 14px/1 var(--font-mono); }
.td-wait button:hover { border-color: var(--accent-text); }
.td-wait > span { font-size: 15px; color: var(--muted); min-width: 9ch; text-align: center; white-space: nowrap; }
.td-wait b { font-size: 26px; color: var(--ink); }
@media (max-width: 420px) { .td-wait { gap: 6px; } .td-wait button { min-width: 0; padding: 0 8px; font-size: 13px; } .td-wait > span { min-width: 0; } .td-wait b { font-size: 22px; } } /* fits 360px without the labels wrapping */
.td-hint { margin: 14px 0 16px; font-size: 14px; color: var(--muted); }
.td-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.td-list > li { display: flex; }
.td-ticket { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 18px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: opacity .2s, border-color .2s; }
.td-ticket:hover { border-color: var(--accent-text); }
.td-head { display: flex; justify-content: space-between; align-items: baseline; }
.td-head b { font: 500 24px/1.15 var(--font-display); }
.td-head .mono { color: var(--accent-text); font-size: 15px; }
.td-items { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.35; }
.td-items > span { display: grid; grid-template-columns: 3ch 1fr; column-gap: 8px; }
.td-items i { font-style: normal; }
.td-items em { font-style: normal; color: var(--muted); font-size: 14px; margin-left: 0; grid-column: 2; }
.td-state { margin-top: auto; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: 15px; font-weight: 500; color: var(--muted); }
.td-ticket[aria-pressed="true"] .td-head, .td-ticket[aria-pressed="true"] .td-items { opacity: .75; } /* dim the done ticket, not the Done pill (white text needs the full cobalt) */
.td-ticket[aria-pressed="true"] .td-items { text-decoration: line-through; }
.td-ticket[aria-pressed="true"] .td-state { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }