/* QMeet landing — tokens mirror qmeet-native/constants/Theme.ts and the canvas (page 10 · Web).
   Cream canvas, coral as a fill or Qupid's own text, glass only on what you touch. */

@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans_600SemiBold.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #FFFBF7; --bg-2: #FFF7F2; --card: #FFFFFF; --card-2: #FFF7F2;
  --text: #111827; --text-2: #374151; --text-3: #4B5563; --muted: #6B7280; --faint: #9CA3AF;
  --hair: rgba(17, 24, 39, 0.08); --hair-2: rgba(17, 24, 39, 0.06);
  --coral: #FF7F50; --coral-deep: #B95534; --coral-text: #A84A2B; --accent-display: #E85F33; --peach: #FFC3A6;
  --teal: #008080; --teal-deep: #0F766E;
  --link: #A84A2B; --qupid: #B95534;
  --cta: linear-gradient(180deg, #F26A3C 0%, #EA6338 55%, #E85F33 100%);
  --tint: rgba(255, 127, 80, 0.10); --tint-border: rgba(255, 127, 80, 0.22);
  --glass: rgba(255, 255, 255, 0.74); --glass-border: rgba(17, 24, 39, 0.06); --glass-shine: rgba(255, 255, 255, 0.75);
  --shadow-card: 0 2px 12px rgba(255, 127, 80, 0.08); --shadow-raised: 0 18px 40px rgba(17, 24, 39, 0.14);
  --shadow-button: 0 10px 26px rgba(255, 127, 80, 0.36);
  --glow: rgba(255, 127, 80, 0.30); --glow-2: rgba(0, 128, 128, 0.10);
  --receipt: #FFFFFF; --pill-text: #B95534;
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max: 1200px; --gutter: clamp(16px, 4vw, 120px);
  --stage-scale-w: 1; --stage-left-w: 527px; --stage-scale: var(--stage-scale-w); --stage-left: var(--stage-left-w); --copy-w: 620px;
  --copy-top: calc(20px * var(--stage-scale)); --mark-foot: 35px; --ph-s: 0.9; --ph-hero-s: 0.9;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111827; --bg-2: #0F1519; --card: #1F2937; --card-2: #243044;
  --text: #F9FAFB; --text-2: #E5E7EB; --text-3: #D1D5DB; --muted: #9CA3AF; --faint: #6B7280;
  --hair: rgba(255, 255, 255, 0.12); --hair-2: rgba(255, 255, 255, 0.08);
  --coral-deep: #FF7F50; --coral-text: #FFB38F; --accent-display: #FF7F50;
  --teal: #2DD4BF; --teal-deep: #5EEAD4;
  --link: #FFB38F; --qupid: #FF7F50;
  --tint: rgba(255, 127, 80, 0.14); --tint-border: rgba(255, 127, 80, 0.30);
  --glass: rgba(31, 41, 55, 0.80); --glass-border: rgba(255, 255, 255, 0.14); --glass-shine: rgba(255, 255, 255, 0.14);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-raised: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: 0 10px 26px rgba(255, 127, 80, 0.28);
  --glow: rgba(255, 127, 80, 0.22); --glow-2: rgba(0, 128, 128, 0.18);
  --receipt: #1F2937; --pill-text: #FFC3A6;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* The mark runs past the shell by design (into the gutter on desktop, past the phone on a small screen): the page clips it, never scrolls to it. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--card); color: var(--text); border-radius: 999px; box-shadow: var(--shadow-raised); }
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 34% at 76% 8%, var(--glow) 0%, transparent 70%), radial-gradient(40% 24% at 6% 30%, var(--glow-2) 0%, transparent 70%); }
.shell { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- type ---------- */
.display { margin: 0; font-size: 60px; line-height: 64px; font-weight: 700; letter-spacing: -1.8px; }
.display .accent { display: block; color: var(--accent-display); }
.title { margin: 0; font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -1.2px; }
.lead { margin: 0; font-size: 19px; line-height: 30px; color: var(--text-3); }
.caption { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.caption.strong { font-size: 11px; line-height: 14px; font-weight: 600; white-space: nowrap; }
.eyebrow { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.75px; text-transform: uppercase; }
.eyebrow.qupid { color: var(--coral-deep); }

/* ---------- header (glass: what you touch) ---------- */
.site-header { position: sticky; top: 0; z-index: 40; padding-block: 20px 0; }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 66px; padding: 0 10px 0 20px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-shine), 0 4px 14px rgba(17, 24, 39, 0.08); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header-bar { background: var(--card); } }
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand-lockup { display: block; width: auto; height: 36px; }
.brand-lockup-dark, .brand-glyph { display: none; }
html[data-theme="dark"] .brand-lockup-light { display: none; }
html[data-theme="dark"] .brand-lockup-dark { display: block; }
.header-nav { display: flex; gap: 28px; }
.header-nav a { color: var(--text); font-weight: 600; font-size: 15px; }
.controls { display: flex; align-items: center; gap: 8px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--tint); gap: 2px; }
.seg button { appearance: none; border: 0; background: transparent; cursor: pointer; min-width: 34px; height: 30px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.seg button svg { width: 15px; height: 15px; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12); }
.seg.theme button { width: 34px; padding: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px; border: 0; font-size: 18px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.btn-glyph { display: block; flex-shrink: 0; }
.btn-primary { color: #FFFFFF; background: var(--cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), var(--shadow-button); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 14px 30px rgba(255, 127, 80, 0.42); }
.btn-primary:active { transform: none; }
.btn-secondary { height: 44px; padding: 0 18px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-card); gap: 8px; }
.btn-secondary:hover { border-color: var(--coral); }
.btn-tertiary { height: 44px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--coral-text); background: transparent; gap: 8px; }
.btn-tertiary:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.btn-sm { height: 46px; padding: 0 20px; font-size: 15px; }
.btn-secondary.btn-sm, .btn-tertiary.btn-sm { height: 44px; font-size: 14px; }

/* ---------- hero: the phone stands in the mark ---------- */
/* The stage is an 860×1136 box scaled as one piece (--stage-scale): by width at the breakpoints below, and by height so the
   whole hero — copy, phone in the mark, premise — fits the first screen: (100vh − 146px: the hero's top plus a breath) / 1136, never under
   0.72 (the ≤1199px size — the phone stays legible). tan(atan2()) divides two lengths into a number; a browser without it
   keeps the width-only scale. As the stage shrinks it keeps the phone's left edge in place (283px in on the stage), so the
   copy-to-phone gap holds and only the mark's bleed past the right edge gives.
   The text column shares the visual's edges: the hero is a one-column grid — the copy, a gap, the premise, a foot — at
   least the stage's height. The copy starts where the phone starts (20px into the stage, scaled) and the premise ends a
   step above the mark's foot, just over its caption (35px above the stage's foot, scaled; under 1200px the mark sits
   higher, so the foot is 0 and the premise ends at the stage's foot). The gap between the two beats takes the rest, never
   under 100px; when the column is taller
   than the stage the hero grows — the premise never collides with the copy or spills over the thesis. */
@supports (opacity: tan(atan2(1px, 1px))) {
  :root { --stage-scale: min(var(--stage-scale-w), clamp(0.72, tan(atan2(100vh - 146px, 1136px)), 1)); --stage-left: calc(var(--stage-left-w) + 283px * (var(--stage-scale-w) - var(--stage-scale))); }
}
.hero { position: relative; margin-top: 44px; padding-top: var(--copy-top); min-height: calc(1136px * var(--stage-scale)); display: grid; grid-template-columns: var(--copy-w); grid-template-rows: auto minmax(100px, 1fr) auto calc(var(--mark-foot) * var(--stage-scale)); }
.hero-copy { grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; z-index: 3; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--tint-border); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; color: var(--pill-text); box-shadow: var(--shadow-card); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--tint); }
.hero-sub { margin: 0; max-width: 540px; font-size: 19px; line-height: 29px; color: var(--text-3); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.hero-note { max-width: 32rem; }

.hero-stage { position: absolute; left: var(--stage-left); top: 0; width: 860px; height: 1136px; transform: scale(var(--stage-scale)); transform-origin: 0 0; }
.stage { position: absolute; inset: 0; }
.mark { position: absolute; left: 0; top: 261px; width: 860px; height: 860px; pointer-events: none; }
.mark-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.mark-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage[data-3d="on"] .mark-canvas { display: block; }
.stage[data-3d="on"] .mark-img { display: none; }
.mark-near { z-index: 4; }
.mark-far { z-index: 1; }
/* the lit crossing under the phone's foot (476, 999 on the 860 stage) breathes; the rendered frames stay still */
.mark-bloom { position: absolute; left: 346px; top: 869px; width: 260px; height: 260px; border-radius: 50%; z-index: 5; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 244, 230, 0.45) 0%, rgba(255, 205, 170, 0.22) 32%, rgba(255, 160, 120, 0) 70%); mix-blend-mode: screen; animation: bloom 6s ease-in-out infinite; }
html[data-theme="dark"] .mark-bloom { background: radial-gradient(50% 50% at 50% 50%, rgba(255, 236, 214, 0.34) 0%, rgba(255, 190, 150, 0.16) 32%, rgba(255, 160, 120, 0) 70%); }
@keyframes bloom { 0%, 100% { opacity: 0.45; transform: scale(0.96); } 50% { opacity: 0.95; transform: scale(1.04); } }
.contact-shadow { position: absolute; left: 283px; top: 890px; width: 420px; height: 70px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 127, 80, 0.30), rgba(255, 127, 80, 0) 70%); filter: blur(10px); z-index: 0; }
.ph-stage { position: absolute; left: 283px; top: 20px; z-index: 3; }
/* the hero phone's drop shadow lives on its own copy of the frame *under* the far canvas: the mark behind the
   phone and the arcs over it then shade alike, and nothing marks where an arc changes canvas */
.ph-stage-shadow { z-index: 0; }
.ph-shadow { position: absolute; inset: 0; border-radius: 78px; box-shadow: 0 60px 90px rgba(17, 24, 39, 0.30), 0 20px 40px rgba(17, 24, 39, 0.18); }
.ph-hero .ph-body { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 -2px 6px rgba(0, 0, 0, 0.35); }
.stage-foot { position: absolute; left: 153px; top: 1104px; width: 600px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* the stage's captions never read under 11px / 9px on screen: as the stage scales down they grow in stage pixels */
@media (min-width: 1024px) {
  .stage-foot .caption { font-size: max(13px, 11px / var(--stage-scale)); line-height: max(18px, 15px / var(--stage-scale)); }
  .stage-foot .caption.strong { font-size: max(11px, 9px / var(--stage-scale)); line-height: max(14px, 12px / var(--stage-scale)); }
}

/* ---------- the iPhone 17 Pro Max frame (468×984 native, the screen 440×956 inset 14) ---------- */
.ph-wrap { position: relative; width: calc(468px * var(--ph-s)); height: calc(984px * var(--ph-s)); flex-shrink: 0; }
.ph-float { position: absolute; inset: 0; }
.ph-hero .ph-float { animation: float 9s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ph-rot { position: absolute; inset: 0; }
/* the phone is drawn flat, in one layer: its 3D turn and depth stacking never had a projection to show (the wrap is
   flat), and every 3D layer inside a scaled, floating phone met the next one along a device-pixel seam on some GPUs */
.ph-scale { position: absolute; left: 0; top: 0; width: 468px; height: 984px; transform: scale(var(--ph-s)); transform-origin: 0 0; }
.ph-hero { width: calc(468px * var(--ph-hero-s)); height: calc(984px * var(--ph-hero-s)); }
.ph-hero .ph-scale { transform: scale(var(--ph-hero-s)); }
.ph-body { position: absolute; inset: 0; border-radius: 78px; background: linear-gradient(155deg, #3A4661 0%, #232C42 45%, #151B2B 100%); box-shadow: 0 60px 90px rgba(17, 24, 39, 0.30), 0 20px 40px rgba(17, 24, 39, 0.18), inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 -2px 6px rgba(0, 0, 0, 0.35); z-index: 1; }
.ph-glass { position: absolute; inset: 6px; border-radius: 72px; background: #05070B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); z-index: 2; }
.ph-screen { position: absolute; left: 14px; top: 14px; width: 440px; height: 956px; border-radius: 62px; overflow: hidden; background: #FFFBF7; z-index: 3; }
.ph-island { position: absolute; left: 171px; top: 25px; width: 126px; height: 37px; border-radius: 20px; background: #050608; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); z-index: 4; }
.ph-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #46536F, #1B2233); z-index: 0; }
.ph-btn-1 { left: -3px; top: 190px; height: 30px; } .ph-btn-2 { left: -3px; top: 250px; height: 62px; } .ph-btn-3 { left: -3px; top: 326px; height: 62px; }
.ph-btn-4 { right: -3px; top: 274px; height: 100px; } .ph-btn-5 { right: -3px; top: 494px; height: 60px; }
.ph-lift { position: absolute; left: 0; top: 0; width: 0; z-index: 6; visibility: hidden; }
.ph-lift.is-on { visibility: visible; }
/* the lifted copy carries its own box-shadow and no backdrop blur: a filter or a backdrop-filter on a layer inside the
   3D phone makes the GPU render it through an intermediate surface whose device-aligned edge showed as a light
   hairline across the phone on some machines (seen 63px above the card: the drop-shadow's 3σ − 26px outset) */
.ph-lift > * { margin: 0 !important; box-shadow: 0 26px 30px rgba(17, 24, 39, 0.34) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* and no backdrop blur anywhere inside the phones: each backdrop-filter in the screens (glass bars, docks, sheets,
   cards) is rendered through an intermediate GPU surface whose device-aligned edges showed as dark hairlines across
   the screen on the same machines — one at the header bar's top, one 84px under it (its 28px blur's 3σ outset).
   The glass keeps its tint; behind the bars there is only the faded top of a photo or the screen's own background,
   so nothing needed blurring. */
.ph-screen .scr * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.is-lifted { visibility: hidden !important; }
.lift-card { padding: 14px 16px 15px; border-radius: 18px; background: #FFFFFF; border: 1px solid rgba(255, 127, 80, 0.18); box-shadow: 0 2px 12px rgba(255, 127, 80, 0.08); display: flex; flex-direction: column; gap: 6px; color: #1F2937; }
.lift-token { display: flex; align-items: center; gap: 6px; color: #A84A2B; font-size: 13px; line-height: 16px; font-weight: 600; }
.lift-reason { font-size: 15px; line-height: 22px; }
.scr { position: relative; }

/* ---------- premise · thesis ---------- */
/* the premise is the hero's second beat: the third row of the hero's grid (see .hero), in the lower-left, left-aligned like
   the copy above it and ending where the mark ends — the bond line beside the two orbits meeting. */
.premise { grid-row: 3; z-index: 3; max-width: 540px; padding: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; }
.premise-line { margin: 0; font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -0.5px; }
.premise-follow { margin: 0; max-width: 460px; font-size: 17px; line-height: 26px; color: var(--text-3); }
.thesis { padding: 72px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 530px; gap: 90px; align-items: center; }
.thesis-copy { display: flex; flex-direction: column; gap: 20px; }
.thesis-copy .lead { max-width: 560px; }
.rings { display: flex; flex-direction: column; gap: 4px; width: 530px; }
.rings-arc { display: block; overflow: visible; }
.rings-path { stroke: var(--teal-deep); stroke-opacity: 0.55; }
.rings-dot { fill: var(--coral-deep); stroke: var(--bg); stroke-width: 3; }
.rings-labels { display: flex; justify-content: space-between; gap: 12px; }
.rings-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 122px; font-size: 14.5px; line-height: 19px; font-weight: 600; }
.rings-glyph { color: var(--coral-deep); display: block; }
.rings-glyph svg { display: block; }

/* ---------- how: four beats ---------- */
.how-head { padding: 60px 0 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.how-lead { margin: 0 0 6px; max-width: 360px; font-size: 15px; line-height: 22px; color: var(--muted); text-align: right; }
.beat { padding-top: 54px; display: flex; align-items: center; gap: 0; }
.beat-phone { position: relative; flex-shrink: 0; }
.beat-left .beat-phone { margin-right: 90px; }
.beat-right { flex-direction: row-reverse; }
.beat-right .beat-copy { margin-right: auto; }
.beat-copy { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.beat-title { margin: 0; font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -1px; }
.beat-body { margin: 0; font-size: 17px; line-height: 27px; color: var(--text-3); }
.beat-aside { margin: 4px 0 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--coral-text); }

/* ---------- keeps: the memory receipt ---------- */
.keeps { padding: 90px 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 100px; align-items: start; }
.keeps-copy { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; }
.keeps-copy .lead { max-width: 420px; font-size: 18px; line-height: 28px; }
.receipt { position: relative; border-radius: 26px; background: var(--receipt); box-shadow: var(--shadow-raised); border: 1px solid var(--hair-2); padding: 28px 30px 26px; display: flex; flex-direction: column; gap: 22px; overflow: hidden; }
.receipt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--peach), var(--coral), #B95534); }
.receipt-head { display: flex; align-items: center; gap: 12px; }
.receipt-who { display: flex; flex-direction: column; }
.receipt-title { font-size: 16px; line-height: 21px; font-weight: 600; }
.receipt-label { font-size: 13px; line-height: 18px; font-weight: 700; padding-bottom: 8px; }
.receipt-uses .receipt-label, .receipt-uses .receipt-glyph { color: var(--coral-deep); }
.receipt-never .receipt-label, .receipt-never .receipt-glyph { color: var(--teal-deep); }
.receipt-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px dashed var(--hair); font-size: 16px; line-height: 24px; }
.receipt-glyph { flex-shrink: 0; margin-top: 2px; }
.receipt-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--coral-text); }

/* Qupid's avatar ring: gradient ring, paper disc, white disc, the mark */
.qa { display: inline-block; flex-shrink: 0; }
.qa-ring { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(180deg, #FFC3A6, #FF7F50); }
.qa-paper { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); }
.qa-disc { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFFFFF; }
.qa-40 .qa-ring { width: 40px; height: 40px; } .qa-40 .qa-paper { width: 34px; height: 34px; } .qa-40 .qa-disc { width: 31px; height: 31px; } .qa-40 img { width: 24px; height: 24px; }
.qa-48 .qa-ring { width: 48px; height: 48px; } .qa-48 .qa-paper { width: 42px; height: 42px; } .qa-48 .qa-disc { width: 39px; height: 39px; } .qa-48 img { width: 29px; height: 29px; }

/* ---------- closing: three things · invitation · sign-off ---------- */
.closing { padding: 80px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 100px; align-items: start; }
.closing-copy { display: flex; flex-direction: column; gap: 22px; }
.three { display: flex; flex-direction: column; gap: 22px; }
.three-row { display: flex; align-items: flex-start; gap: 14px; font-size: 19px; line-height: 29px; }
.three-glyph { flex-shrink: 0; margin-top: 3px; color: var(--coral-deep); }
.signoff { display: flex; align-items: center; gap: 16px; padding-top: 10px; }
.signoff-text { display: flex; flex-direction: column; gap: 4px; }
.signoff-line { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.4px; }
.signoff-by { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--coral-deep); }
.invite-card { border-radius: 26px; background: var(--card); border: 1px solid var(--hair-2); box-shadow: var(--shadow-raised); padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 120px; }
.invite-card:focus { outline: none; }
.invite-card:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.invite-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; }
.invite-help { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-3); }
.invite-address { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--hair); }
.invite-address .caption { font-size: 12px; line-height: 16px; }
.invite-address input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; font-size: 16px; padding: 0; outline: none; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.invite-status { min-height: 18px; }

/* ---------- footer ---------- */
.site-footer { margin-top: 80px; padding: 24px 4px 40px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; font-size: 13px; line-height: 18px; color: var(--muted); }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer .links a { color: var(--muted); font-weight: 600; }
.site-footer .tagline { color: var(--faint); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ph-hero .ph-float, .mark-bloom { animation: none !important; }
  .btn { transition: none; }
}

/* ---------- responsive: the stage scales, the phones follow ---------- */
@media (max-width: 1439px) { :root { --stage-scale-w: 0.86; --stage-left-w: 470px; --copy-w: 560px; } .display { font-size: 54px; line-height: 58px; } .premise { max-width: 500px; } }
@media (max-width: 1199px) { :root { --stage-scale-w: 0.72; --stage-left-w: 420px; --copy-w: 480px; --mark-foot: 0px; --ph-s: 0.8; --ph-hero-s: 0.8; } .mark { top: 161px; } .mark-bloom { top: 769px; } .premise { max-width: 560px; } .thesis { padding-top: 48px; } .display { font-size: 48px; line-height: 52px; letter-spacing: -1.4px; } .beat-left .beat-phone { margin-right: 56px; } .thesis { gap: 56px; } .keeps, .closing { gap: 56px; grid-template-columns: minmax(0, 1fr) 520px; } .header-nav { gap: 20px; } }
/* 1080p at 100% is ~930–970px tall: with 24px above the hero instead of 44px the whole stage clears the fold */
@media (min-width: 1024px) and (max-height: 950px) { .hero { margin-top: 24px; } }
@media (max-width: 1023px) {
  :root { --ph-s: 0.66; --ph-hero-s: 0.54; }
  .site-header { padding-block: 14px 0; }
  .header-bar { height: 56px; padding: 0 8px 0 14px; }
  .header-nav, .header-cta { display: none; }
  .hero { min-height: 0; padding-top: 0; margin-top: 82px; display: flex; flex-direction: column; gap: 0; }
  .hero-copy { gap: 16px; padding: 0 4px; }
  .display { font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
  .hero-sub { font-size: 17px; line-height: 26px; }
  .hero-actions { flex-direction: column; align-items: stretch; align-self: stretch; gap: 10px; margin-top: 0; }
  .hero-actions .btn-primary { width: 100%; }
  .hero-actions .btn-tertiary { align-self: center; }
  .hero-note { font-size: 12.5px; line-height: 17px; }
  /* the hero in the desktop's proportions: the mark 1.82× the phone's width, its foot at 0.75 of the mark's
     height, the phone 0.27 of the mark in from its left — so the same two near arcs clear the phone; at
     375px the mark's outer edges just reach the viewport */
  .hero-stage { position: relative; left: auto; top: auto; width: 100%; max-width: 408px; height: auto; transform: none; margin: 28px auto 0; align-self: center; --ph-w: calc(468px * var(--ph-hero-s)); --ph-h: calc(984px * var(--ph-hero-s)); --mk: calc(var(--ph-w) * 1.82); --mk-l: calc(50% - var(--ph-w) / 2 - var(--mk) * 0.27); --mk-t: calc(20px + var(--ph-h) - var(--mk) * 0.75); }
  .stage { position: relative; inset: auto; width: 100%; height: calc(var(--mk-t) + var(--mk) + 8px); }
  .ph-stage { left: calc(50% - var(--ph-w) / 2); top: 20px; }
  .mark { left: var(--mk-l); top: var(--mk-t); width: var(--mk); height: var(--mk); }
  .contact-shadow { left: calc(50% - var(--ph-w) / 2); top: calc(20px + var(--ph-h) - 18px * var(--ph-hero-s)); width: var(--ph-w); height: calc(78px * var(--ph-hero-s)); }
  .mark-bloom { left: calc(var(--mk-l) + var(--mk) * 0.402); top: calc(var(--mk-t) + var(--mk) * 0.707); width: calc(var(--mk) * 0.302); height: calc(var(--mk) * 0.302); }
  .stage-foot { position: static; width: auto; margin-top: 4px; }
  /* under 1024px the premise is exactly what it was before it became the hero's second beat: full width, the line up to
     900px and the follow line up to 640px, after the stage in flow */
  .premise { padding: 44px 4px 0; max-width: none; align-items: flex-start; text-align: left; gap: 12px; }
  .premise-line { max-width: 900px; font-size: 24px; line-height: 32px; letter-spacing: -0.4px; }
  .premise-follow { max-width: 640px; font-size: 17px; line-height: 26px; }
  .thesis { padding: 56px 4px 8px; display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .title { font-size: 32px; line-height: 36px; letter-spacing: -0.8px; }
  .thesis-copy .lead, .keeps-copy .lead { font-size: 17px; line-height: 27px; }
  .rings { width: auto; gap: 14px; }
  .rings-arc { display: none; }
  .rings-labels { flex-direction: column; gap: 14px; }
  .rings-item { flex-direction: row; align-items: center; gap: 14px; width: auto; font-size: 17px; line-height: 24px; }
  .rings-glyph { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--tint-border); background: var(--card); display: flex; align-items: center; justify-content: center; }
  .how-head { padding: 56px 4px 0; flex-direction: column; align-items: flex-start; gap: 10px; }
  .how-lead { text-align: left; max-width: none; margin: 0; }
  .beat, .beat-right { padding-top: 36px; flex-direction: column; align-items: center; gap: 22px; }
  .beat-left .beat-phone { margin-right: 0; }

  .beat-copy { max-width: none; align-self: stretch; padding: 0 4px; gap: 10px; }
  .beat-title { font-size: 28px; line-height: 33px; letter-spacing: -0.6px; }
  .beat-body { font-size: 16px; line-height: 25px; }
  .beat-aside { font-size: 14px; line-height: 20px; margin-top: 2px; }
  .keeps { padding: 64px 0 0; display: flex; flex-direction: column; gap: 18px; }
  .keeps-copy { padding: 0 4px; gap: 10px; }
  .receipt { padding: 22px 20px 20px; }
  .closing { padding: 64px 0 0; display: flex; flex-direction: column; gap: 22px; }
  .closing-copy { padding: 0 4px; gap: 16px; }
  .three { gap: 16px; }
  .three-row { font-size: 17px; line-height: 26px; }
  .signoff { padding: 8px 0 0; }
  .signoff-line { font-size: 20px; line-height: 25px; }
  .invite-card { padding: 22px; }
  .invite-actions .btn { width: 100%; }
  .site-footer { margin-top: 56px; }
}
@media (max-width: 359px) { .brand-lockup, html[data-theme="dark"] .brand-lockup-dark { display: none; } .brand-glyph { display: block; width: 30px; height: 30px; } }

/* ---------- look closer: the hero phone, larger, on small screens ---------- */
.ph-tap, .peek-pill { display: none; }
.peek { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 72px 16px 24px; overflow: auto; background: rgba(17, 24, 39, 0.66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: peek-in 180ms ease-out; }
.peek[hidden] { display: none; }
.peek-close { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 251, 247, 0.94); color: #111827; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.24); }
.peek-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.peek-body .ph-float { animation: none; }
.peek-note { color: rgba(255, 251, 247, 0.78); }
html.peek-open { overflow: hidden; }
@keyframes peek-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023px) {
  .ph-tap { display: block; position: absolute; z-index: 6; left: calc(50% - var(--ph-w) / 2); top: 20px; width: var(--ph-w); height: var(--ph-h); margin: 0; padding: 0; border: 0; border-radius: calc(78px * var(--ph-hero-s)); background: transparent; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
  .ph-tap:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
  .peek-pill { display: flex; width: max-content; margin: 14px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .peek { animation: none; } }