:root {
  --red: #8d011c;
  --red-dark: #670017;
  --cream: #fffbef;
  --paper: #f8f2e7;
  --ink: #171313;
  --gold: #c98755;
  --sage: #0b584d;
  --line: rgba(141, 1, 28, 0.24);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", Arial, sans-serif;
  --mono: "Geist Mono", monospace;
  --script: "Mr Dafoe", cursive;
  --things: "Things", "Instrument Serif", Georgia, serif;
  --motive: "Motive", "Geist Mono", monospace;
  --yeseva: "Yeseva One", "Instrument Serif", Georgia, serif;
  --ms-madi: "Ms Madi", "Mr Dafoe", cursive;
}

@font-face { font-family: "Things"; src: url("../Font/things-font-1787524003-0/things_fontloted2d.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Instrument Serif"; src: url("../Font/Instrument_Serif/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../Font/Geist/Geist-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Motive"; src: url("../Font/motive-font-family/motive-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Motive"; src: url("../Font/motive-font-family/motive-semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Motive"; src: url("../Font/motive-font-family/motive-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Yeseva One"; src: url("../Font/Yeseva_One/YesevaOne-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../Font/Geist_Mono/GeistMono-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Ms Madi"; src: url("../Font/Ms_Madi/MsMadi-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--red); font-family: var(--sans); }
/* height:auto matters: the logo carries width="227" height="256" attributes, so
   without it a CSS width alone leaves the attribute governing height and the
   mark renders stretched. Tailwind's preflight used to supply this reset via
   the CDN script; that script has been removed, so the reset lives here now.
   Later rules that set an explicit height (.hero-cta-img, .dial-control img,
   .dossier > img and so on) are class selectors and still win over this. */
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }

.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .75rem 1rem; background: var(--cream); color: var(--red); border: 1px solid var(--red); }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.chapter { position: relative; overflow: hidden; }

/* Hero */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background: var(--red); color: var(--cream); isolation: isolate; }
.hero-glow { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; mix-blend-mode: screen; filter: blur(3px); }
.hero-glow-mobile { display: none; }
.hero-header { position: relative; width: 100%; display: flex; justify-content: center; padding: 2.25rem 1.5rem 0; }
/* app.frinq.in's fq mark with its tile background removed, so it reads as the
   glyph on the hero red rather than a darker square patched onto it. Already
   white in the asset, so no brightness/invert filter — that existed to whiten
   the dark script wordmark this replaces. The glyph is 227x256, and the width
   is set so its height matches the wordmark's 49px. */
.brand-mark { width: 2.7rem; height: auto; }
/* Floor raised from 6.5rem: the button is a fixed 384:124 image, so its width
   sets its height, and 6.5rem made it 34px tall — under a finger — on every
   viewport between 769px and about 1240px. 8.6rem is the width at which it
   clears 44px. */
.hero-cta { position: absolute; right: 1.5rem; top: 2.25rem; display: block; width: clamp(8.6rem, 11vw, 9.2rem); aspect-ratio: 384 / 124; transition: transform .2s ease; }
.hero-cta-mobile { display: none; }
.hero-cta:hover { transform: translateY(-2px); }
.hero-cta-img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .25s ease; }
.hero-cta-img-hover { opacity: 0; }
.hero-cta:hover .hero-cta-img-base { opacity: 0; }
.hero-cta:hover .hero-cta-img-hover { opacity: 1; }
.hero-cta-desktop .hero-cta-img { display: none; }
.hero-cta-desktop::after { content: "Register Now"; display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid var(--cream); border-radius: 999px; background: transparent; color: var(--cream); font: .864rem var(--motive); letter-spacing: .02em; transition: background-color .08s linear, color .08s linear, border-color .08s linear; }
.hero-cta-desktop:hover::after { background: var(--cream); color: var(--red); }
.hero-cta-mobile .hero-cta-img { display: none; }
.hero-cta-mobile::after { content: "Register Now"; display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid var(--cream); border-radius: 999px; background: transparent; color: var(--cream); font: .864rem var(--motive); letter-spacing: .02em; transition: background-color .08s linear, color .08s linear, border-color .08s linear; }
.hero-cta-mobile:hover::after { background: var(--cream); color: var(--red); }
.hero-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: min(72vh, 46rem); padding: 5rem 1rem 3rem; }
.hero h1 { position: relative; z-index: 2; max-width: 42rem; margin: 0; text-align: center; font: 400 clamp(2.04rem, 4.08vw, 4.42rem)/.98 var(--things); letter-spacing: -.035em; transform: translateY(-4vh); }
.hero h1 em { font-style: normal; }
.hero-hand { position: absolute; z-index: 1; width: clamp(18.75rem, 36.44vw, 38.33rem); pointer-events: none; }
.hero-hand img { width: 100%; height: auto; }
.hero-hand-left { left: -4%; top: 49%; transform: translateY(-62%); }
.hero-hand-right { right: -4%; top: 53%; transform: translateY(-52%); }
.hero-hand-left img { animation: hand-bob-left 12s linear infinite; }
.hero-hand-right img { animation: hand-bob-right 12s linear infinite; }
@keyframes hand-bob-left { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-7.4%); } 75% { transform: translateY(7.4%); } }
@keyframes hand-bob-right { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(7.4%); } 75% { transform: translateY(-7.4%); } }
@keyframes hand-bob-mobile { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-2%); } 75% { transform: translateY(2%); } }
.ticker { width: 100%; border-top: 1px solid rgba(255, 251, 239, .25); background: rgba(255, 251, 239, .08); overflow: hidden; padding: .75rem 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 30s linear infinite; color: white; font: normal .78rem var(--motive); white-space: nowrap; }
.ticker-group { display: flex; flex: none; gap: 3.5rem; padding-left: 1.75rem; padding-right: 1.75rem; }
.ticker-track span { flex: none; }
.ticker-track b { font-weight: 700; }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (min-width: 769px) {
  .hero-header { z-index: 1000; }
  .hero-cta-desktop { position: fixed; z-index: 1000; aspect-ratio: 384 / 117.8; }
  .hero-cta-desktop.is-hidden { opacity: 0; pointer-events: none; }
  .hero-cta-desktop.is-on-light::after { border-color: var(--red); color: var(--red); }
  .hero-cta-desktop.is-on-light:hover::after { background: var(--red); color: var(--cream); }
  .hero-header { opacity: 0; animation: hero-fade-in .8s ease-out .1s both; }
  .hero h1 { animation: hero-text-enter 1s cubic-bezier(.19, 1, .22, 1) .35s both; }
  .hero-hand-left { animation: hero-hand-enter-left 1.3s cubic-bezier(.19, 1, .22, 1) .5s both; }
  .hero-hand-right { animation: hero-hand-enter-right 1.3s cubic-bezier(.19, 1, .22, 1) .5s both; }
  .ticker { opacity: 0; animation: hero-fade-in .8s ease-out 1.4s both; }
  .ticker-track { animation-duration: 192s; }
  @keyframes hero-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes hero-text-enter { from { opacity: 0; transform: translateY(calc(-4vh + 2rem)); } to { opacity: 1; transform: translateY(-4vh); } }
  @keyframes hero-hand-enter-left { from { opacity: 0; transform: translateY(-62%) translateX(-8vw); } to { opacity: 1; transform: translateY(-62%) translateX(0); } }
  @keyframes hero-hand-enter-right { from { opacity: 0; transform: translateY(-52%) translateX(8vw); } to { opacity: 1; transform: translateY(-52%) translateX(0); } }
}

/* Conversation */
.conversation { min-height: 100svh; background-color: var(--cream); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200.55%200%200%200%200%200.45%200%200%200%200%200.3%200%200%200%200%200.2%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 120px 120px; }
.conversation-inner { position: relative; min-height: 100svh; width: min(100%, 90rem); margin: 0 auto; padding: 5rem 2rem; display: grid; place-items: center; }
.conversation h2 { position: relative; z-index: 3; margin: 0; text-align: center; font: 400 clamp(1.72rem, 3.44vw, 3.6rem)/1.05 var(--yeseva); letter-spacing: -.02em; }
.conv-orbit { position: absolute; }
.cp-item { display: none; }
.conv-orbit-note-a { top: 14%; left: 5%; }
.conv-orbit-quote-1 { top: 20%; right: 6%; }
.conv-orbit-chat { top: 43%; left: 4%; }
.conv-orbit-cafe { top: 38%; right: 9%; }
.conv-orbit-quote-2 { bottom: 17%; left: 10%; }
.conv-orbit-profile { right: 5%; bottom: 10%; }
.conversation-note { display: flex; align-items: center; gap: 1rem; font: .78rem/1.2 var(--motive); }
.conversation-note img { width: clamp(6.5rem, 9vw, 8.5rem); }
.conversation-note.profile img { width: clamp(6rem, 8.4vw, 8rem); border-radius: 1.15rem; box-shadow: 0 .8rem 2rem rgba(57, 0, 8, .16); transform: rotate(2deg); }
/* Floor raised from .68rem: between 810px and 1180px wide the .95vw term is
   below the floor, so these quotes rendered at 10.9px — under the 12px anyone
   can comfortably read. */
.conversation-quote { max-width: clamp(11rem, 16vw, 15rem); font: clamp(.78rem, .95vw, .82rem)/1.4 var(--motive); }
.quote-one { text-align: right; }
.conversation-image { width: clamp(7rem, 10vw, 9.5rem); border-radius: 1.2rem; box-shadow: 0 1rem 2rem rgba(57, 0, 8, .16); }
.conversation-image.cafe { width: clamp(6.3rem, 9vw, 8.5rem); }
.conv-orbit-note-a { animation: drift-note-a 13s ease-in-out infinite; }
.conv-orbit-quote-1 { animation: drift-quote-1 15s ease-in-out infinite; }
.conv-orbit-chat { animation: drift-chat 12s ease-in-out infinite; }
.conv-orbit-cafe { animation: drift-cafe 19s ease-in-out infinite; }
.conv-orbit-quote-2 { animation: drift-quote-2 14.5s ease-in-out infinite; }
.conv-orbit-profile { animation: drift-profile 17.5s ease-in-out infinite; }
/* each element loops a closed curved path (never a straight line back) sized to the user's brief: ~20% travel one way, ~10% the return leg */
@keyframes drift-note-a {
  0%, 100% { transform: translate(0%, 0%) rotate(2deg); }
  30% { transform: translate(14%, -3%) rotate(1deg); }
  55% { transform: translate(20%, 4%) rotate(-1deg); }
  80% { transform: translate(9%, 10%) rotate(1deg); }
}
@keyframes drift-quote-1 {
  0%, 100% { transform: translate(0%, 0%); }
  30% { transform: translate(-14%, -3%); }
  55% { transform: translate(-20%, 4%); }
  80% { transform: translate(-9%, 10%); }
}
@keyframes drift-chat {
  0%, 100% { transform: translate(0%, 0%) rotate(-3deg); }
  30% { transform: translate(14%, 2%) rotate(-2deg); }
  55% { transform: translate(20%, -5%) rotate(-4deg); }
  80% { transform: translate(9%, -9%) rotate(-2deg); }
}
@keyframes drift-cafe {
  0%, 100% { transform: translate(0%, 0%) rotate(3deg); }
  30% { transform: translate(-14%, 2%) rotate(4deg); }
  55% { transform: translate(-20%, -5%) rotate(2deg); }
  80% { transform: translate(-9%, -9%) rotate(4deg); }
}
@keyframes drift-quote-2 {
  0%, 100% { transform: translate(0%, 0%); }
  30% { transform: translate(14%, -2%); }
  55% { transform: translate(20%, -8%); }
  80% { transform: translate(9%, -9%); }
}
@keyframes drift-profile {
  0%, 100% { transform: translate(0%, 0%); }
  30% { transform: translate(-14%, -2%); }
  55% { transform: translate(-20%, -8%); }
  80% { transform: translate(-9%, -9%); }
}
/* secondary layer: small, fast, independent wobble per element so the orbit doesn't read as one connected system */
.jitter-note-a { animation: jitter-note-a 4s ease-in-out infinite; }
.jitter-quote-1 { animation: jitter-quote-1 5.2s ease-in-out infinite; }
.jitter-chat { animation: jitter-chat 4.6s ease-in-out infinite; }
.jitter-cafe { animation: jitter-cafe 5.8s ease-in-out infinite; }
.jitter-quote-2 { animation: jitter-quote-2 4.3s ease-in-out infinite; }
.jitter-profile { animation: jitter-profile 5s ease-in-out infinite; }
@keyframes jitter-note-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3%, -4%); } }
@keyframes jitter-quote-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, 4%); } }
@keyframes jitter-chat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3%, 3%); } }
@keyframes jitter-cafe { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -4%); } }
@keyframes jitter-quote-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3%, 3%); } }
@keyframes jitter-profile { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -3%); } }
.conversation-mobile-list { display: none; }

/* Phone story */
.phone-story { background: white; overflow: visible; }
.phone-runway { height: 640vh; }
.phone-sticky { position: sticky; top: 0; min-height: 100svh; display: grid; place-items: center; padding: 4rem 4vw; }
.phone-stage { --phone-drop: 34vh; position: relative; width: min(100%, 74rem); height: min(76vh, 52rem); }
.phone-visual { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(11rem, 17vw, 17rem); transform: translate(-50%, calc(-50% + var(--phone-drop) - 5vh)); filter: drop-shadow(0 1.5rem 1.4rem rgba(29, 0, 4, .22)); transition: transform .15s linear, width .35s ease; }
.phone-label, .phone-callout, .phone-critique, .phone-what { position: absolute; z-index: 3; color: #8D011C; }
.phone-label { top: 4%; left: 7%; display: flex; align-items: center; gap: 1.5rem; font: 400 clamp(1.2rem, 2vw, 2rem) var(--ms-madi); }
.phone-arrow { width: clamp(3.5rem, 6vw, 6.5rem); height: auto; flex: none; }
.phone-callout { display: flex; align-items: center; gap: .75rem; font: 400 clamp(1rem, 1.7vw, 1.55rem) var(--serif); }
.callout-photos { top: 36%; left: 13%; }
.callout-swipe { top: 39%; right: 10%; }
.callout-age { top: 61%; left: 16%; }
.callout-age .phone-arrow { transform: rotate(180deg); }
.phone-critique { left: 9%; bottom: 27%; width: 17rem; font: 400 clamp(1.037rem, 1.555vw, 1.65rem)/1.02 var(--sans); font-style: normal; text-align: left; letter-spacing: -.045em; }
.phone-what-heading, .phone-what-list, .phone-what-ending { position: absolute; z-index: 3; right: 2%; width: min(25rem, 35%); color: #8D011C; }
.phone-what-heading { bottom: 34%; }
.phone-what-heading h2 { margin: 0; font: 400 clamp(1.1845rem, 1.957vw, 1.854rem)/1 var(--yeseva); letter-spacing: -.05em; }
.phone-what-list { bottom: 10%; display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; font: .72rem/1.3 var(--sans); }
.phone-what-list li { display: flex; align-items: center; gap: .55rem; }
.phone-what-list li img { width: 1.80336rem; height: 1.80336rem; object-fit: contain; flex: none; }
.phone-what-ending { position: absolute; inset: 0; width: auto; pointer-events: none; }
.phone-what-ending span { position: absolute; color: #8D011C; font: 400 clamp(1rem, 2vw, 2rem) var(--ms-madi); white-space: nowrap; }
.phone-what-ending span:first-child { right: 6%; bottom: 7%; transform: rotate(7deg); }
.phone-what-ending span:last-child { top: 9%; left: 7%; transform: rotate(-8deg); }
.mobile-break { display: none; }
.phone-heading-break { display: none; }
body.js-ready .phone-line { opacity: 0; transform: translateY(1rem); transition: opacity .45s ease, transform .45s ease; }
body.js-ready .phone-line.is-visible { opacity: 1; transform: translateY(0); }
.phone-sr-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@media (min-width: 769px) {
  .phone-story { padding-bottom: 18vh; }
  .phone-visual { left: 53%; width: clamp(12.02rem, 18.58vw, 18.58rem); transform: translate(-50%, calc(-50% + var(--phone-drop) + 16vh)); }
  .phone-label { top: 6%; display: block; font-size: clamp(1.296rem, 2.16vw, 2.16rem); }
  .phone-label .phone-arrow { margin-top: calc(.35rem - 1vh + 1.2px); margin-left: 103%; transform: none; }
  .phone-label .phone-arrow { width: clamp(3.78rem, 6.48vw, 7.02rem); }
  .callout-photos { top: 43%; left: 15%; }
  .callout-photos .phone-arrow { width: clamp(5rem, 9vw, 10rem); }
  .callout-swipe { top: 56%; }
  .callout-age { top: 89%; left: 22%; }
  .phone-critique { width: clamp(15rem, 24vw, 20rem); }
  .phone-what-heading { right: 5%; bottom: 50%; }
  .phone-what-list { right: 5%; bottom: 15%; gap: .3rem; font-size: .885768rem; }
  .phone-what-list li img { width: 2.70504rem; height: 2.70504rem; }
  .phone-what-ending span:first-child { right: 22%; bottom: -36%; transform: none; }
  .phone-what-ending span:last-child { top: -8%; left: 38%; }
  .phone-stage.is-ended .phone-visual { width: clamp(11.06rem, 17.1vw, 17.1rem); }
  body.js-ready .phone-line.is-visible:not(.phone-label) { transform: translate(-1%, -3vh); }
}

/* Screens shorter than the 720px reference viewport sit the phone too low - nudge it up as height shrinks */
@media (min-width: 769px) and (max-height: 648px) {
  .phone-visual { transform: translate(-50%, calc(-50% + var(--phone-drop) + 11vh)); }
}

@media (min-width: 769px) and (max-height: 576px) {
  .phone-visual { transform: translate(-50%, calc(-50% + var(--phone-drop) + 6vh)); }
}

/* Frames (page 4) — one flat asset for the whole collage, text laid over it. Fully static. */
.frames { min-height: 100svh; position: relative; overflow: hidden; background: #550d0d; }
.frames-bg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.frames-copy { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; text-align: center; }
.frames-copy h2 { max-width: 56rem; margin: 0; font: 400 clamp(1.53rem, 2.88vw, 2.88rem)/1.18 var(--yeseva); letter-spacing: -.01em; color: var(--cream); }
.frames-accent { color: #e2607d; }
.frames-quote { position: absolute; z-index: 5; top: 63%; left: 54%; width: clamp(16rem, 36vw, 28rem); margin: 0; text-align: center; transform: rotate(-7deg); font: 400 clamp(1.03rem, 1.47vw, 1.27rem)/1.5 var(--ms-madi); color: rgba(255, 251, 239, .8); }

/* Phone-only sprite crops from the same collage asset (see @media block below for placement/crop coords) */
.frames-mobile-bg-img { display: none; }

/* Profile card */
.profile-card { min-height: 90svh; display: grid; grid-template-columns: 1.4fr 1fr; background: var(--cream); }
.profile-card-copy { display: flex; justify-content: center; flex-direction: column; padding: 9vw; color: var(--red); }
.profile-card-copy h2 { max-width: 46rem; margin: 0 0 2rem; font: 400 clamp(1.9rem, 2.9vw, 3.3rem)/1.1 var(--yeseva); letter-spacing: -.01em; }
.profile-card-copy p { max-width: 33rem; margin: 0; font: 1.15rem/1.4 var(--motive); letter-spacing: -.02em; text-align: justify; }
.profile-card-art { position: relative; min-height: 90svh; display: grid; place-items: center; overflow: hidden; background: var(--red); }
.profile-pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; mix-blend-mode: screen; }
.profile-seal { position: absolute; z-index: 2; top: 15%; right: 4%; width: min(21.4vw, 16.6rem); }
.profile-envelope { position: relative; z-index: 3; width: min(46vw, 31.5rem); transform: translateX(8%) rotate(-7deg); filter: drop-shadow(0 1.8rem 1.5rem rgba(0, 0, 0, .28)); }
.profile-note-card { position: absolute; z-index: 4; top: 46%; left: 54%; width: min(27.9vw, 18.8rem); transform: translate(-50%, -50%) rotate(-4deg); filter: drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .32)); }

@media (min-width: 769px) {
  .profile-card { background: var(--cream) url("../Assets/Frame 450 (4).webp") center center / cover no-repeat; }
  .profile-card-copy { position: relative; z-index: 1; }
  .profile-card-copy h2 { font-size: clamp(2.5rem, 3.07vw, 3.5rem); }
  .profile-card-copy p { color: #000; text-align: justify; text-align-last: left; }
  .profile-card-copy p { font-size: 1.217rem; }
  .profile-card-art { z-index: 2; overflow: visible; background: transparent; }
  .profile-pattern, .profile-seal { display: none; }
  .profile-envelope { width: min(59.25vw, 39.5rem); transform: translate(3%, -4%) rotate(-7deg); }
}

/* Dialer */
.dialer { min-height: 100svh; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: start; gap: 5vw; padding: 3vw 13vw 5vw; background: var(--red); color: var(--cream); }
.dialer-tagline { grid-column: 1 / -1; display: block; margin: 0 0 .23rem; font: 400 1.43rem var(--ms-madi); color: rgba(255, 251, 239, .55); transform: translate(-5%, calc(130% + 20px)) rotate(-30deg); transform-origin: left center; }
.dialer h2 { grid-column: 1 / -1; max-width: 52rem; margin: 0 0 4rem; font: 400 clamp(2.3rem, 2.75vw, 3.21rem)/1.2 var(--yeseva); letter-spacing: -.01em; transform: translateY(2svh) translateX(3%); }
.dialer-title-mobile { display: none; }
.dialer-not { text-align: center; transform: translateY(calc(-25% - 20px)); }
.dialer-not p, .dialer-instead { margin: 0 0 2rem; font: italic 400 1.5rem var(--sans); }
.dialer-not ul { padding: 0; margin: 0; list-style: none; text-align: center; font: 1.5rem/2.5 var(--motive); transform: translateY(10%); }
.dialer-not li { width: max-content; margin: 0 auto; color: rgba(255, 251, 239, .95); }
.dialer-not li > span { text-decoration: line-through; text-decoration-thickness: 1px; }
.dialer-not li:not(:last-child)::after { content: "."; display: block; text-decoration: none; }
.dialer-divider { width: 1px; height: 60%; background: rgba(255, 251, 239, .4); }
.dialer-control-wrap { display: flex; flex-direction: column; align-items: center; }
.dialer-instead { align-self: center; margin: 0 0 1.2rem; }
.dial-control { position: relative; width: min(19.8vw, 17.93rem); aspect-ratio: 1; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: grab; touch-action: none; user-select: none; }
.dial-control:active { cursor: grabbing; }
.dial-control img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.dial-answer { position: absolute; z-index: 2; inset: 25%; display: grid; place-items: center; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1px rgba(23, 19, 19, .18); text-align: center; color: var(--ink); font: 700 clamp(.54rem, .886vw, .963rem)/1.05 var(--sans); letter-spacing: -.03em; padding: 0 8%; }
.dialer-help { grid-column: 1 / -1; margin: 2.5rem 0 0; text-align: center; white-space: nowrap; font: .8075rem/1.3 var(--motive); color: rgba(255, 251, 239, .78); transform: translateY(calc(-10% - 20px)); }
@keyframes dialer-entry-shake-mobile { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(.45rem); } 55% { transform: translateY(-.28rem); } 78% { transform: translateY(.12rem); } }
.dialer.is-entering .dial-control { animation: dialer-entry-shake-mobile .7s cubic-bezier(.2, .8, .2, 1) both; }

@media (min-width: 769px) {
  .dialer-tagline { transform: translate(-5%, calc(150% + 20px)) rotate(-10deg); }
  .dialer h2 { transform: translateY(2svh) translateX(-2%); }
  .dialer-not { transform: translateY(calc(-15% + 2rem)); }
  .dial-control { transform: translateY(10%); }
  @keyframes dialer-entry-shake-desktop { 0%, 100% { transform: translateY(10%); } 25% { transform: translateY(calc(10% + .45rem)); } 55% { transform: translateY(calc(10% - .28rem)); } 78% { transform: translateY(calc(10% + .12rem)); } }
  .dialer.is-entering .dial-control { animation-name: dialer-entry-shake-desktop; }
  .dial-control { width: min(24vw, 22rem); }
  .dial-answer { font-size: clamp(.77rem, 1.265vw, 1.375rem); }
  .dial-control::before { content: ""; position: absolute; z-index: 3; top: 50%; right: calc(100% + 1.5vw); width: 4vw; height: 1px; background: rgba(255, 251, 239, .8); }
}

/* How it works */
.how-it-works { padding: 3vw 11vw 5rem; background: var(--cream); color: var(--red); }
.how-topline { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 16rem; border-bottom: 1px solid #000; }
.how-topline h2 { margin: 0 0 6rem; font: 400 clamp(2.367rem, 4.185vw, 4.725rem) var(--yeseva); letter-spacing: -.02em; }
.how-topline img { position: absolute; right: 4%; bottom: 0; width: clamp(13rem, 20vw, 22rem); transform: translateY(34%); }
.how-row { display: grid; grid-template-columns: minmax(12rem, .62fr) 1.7fr; align-items: start; gap: 4vw; padding: 3.2rem 0 3.2rem 5%; border-bottom: 1px solid #000; }
.how-row > p { margin: 0; color: rgba(23, 19, 19, .53); font: .9rem var(--mono); }
.how-row h3 { margin: 0 0 1rem; font: 400 clamp(1rem, 1.5vw, 1.75rem) var(--motive); letter-spacing: -.02em; }
.how-row span { display: block; max-width: 55rem; margin-right: 5%; font: 1.035rem/1.3 var(--motive); letter-spacing: -.01em; }

/* Dossier */
.dossier { min-height: 100svh; display: grid; place-items: center; background: var(--red-dark); }
.dossier > img { width: 100%; height: 100%; object-fit: cover; }
.dossier-caption { position: absolute; right: 5vw; bottom: 3rem; padding: .7rem 1rem; border: 1px solid rgba(255, 251, 239, .55); color: var(--cream); font: .78rem var(--mono); }

/* Waitlist */
.waitlist { min-height: 80svh; display: grid; place-items: center; padding: 6rem 1.5rem; background: white; }
.waitlist-card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 42rem); padding: 4.5rem 2rem 3rem; border: 1px solid rgba(141, 1, 28, .45); border-radius: 1rem; background: var(--cream); text-align: center; }
.waitlist-kicker { margin: 0 0 1rem; font: .828rem var(--motive); color: #550d0d; }
.waitlist h2 { margin: 0 0 2.2rem; font: 400 clamp(1.94rem, 3.45vw, 3.59rem)/.9 var(--yeseva); letter-spacing: -.02em; color: #550d0d; }
.waitlist-accent { color: var(--red); }
.waitlist form { display: flex; align-items: center; gap: .5rem; width: min(100%, 28rem); margin: 0 auto; padding: .35rem .35rem .35rem 1rem; border: 1px solid rgba(141, 1, 28, .35); border-radius: 999px; background: var(--cream); }
/* align-self + min-height so the field fills the pill it sits in. Without them
   the input's own box was only 15px tall on every viewport 810px and wider:
   the pill looked right, but the tappable area was a thin band inside it, and a
   tap anywhere else in the pill did not focus the field. .8rem so what you type
   is not under 12px. Neither change alters how the pill looks. */
.waitlist input { min-width: 0; flex: 1; align-self: stretch; min-height: 2.75rem; border: 0; outline: 0; background: transparent; color: var(--red); font: .8rem var(--mono); }
.waitlist input::placeholder { color: rgba(141, 1, 28, .46); font-family: var(--motive); }
.waitlist-submit { position: relative; top: 2px; display: grid; place-items: center; width: 14.72rem; height: 2.97rem; margin: 0 auto; padding: 0; border: 0; border-radius: 999px; background: var(--red); color: white; font: .864rem var(--motive); text-decoration: none; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.waitlist-submit:hover { background: white; color: var(--red); }
.waitlist-submit:active { transform: translateY(1px); }
.waitlist-submit-img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s ease; }
.waitlist-submit-img-press { opacity: 0; }
.waitlist-submit:active .waitlist-submit-img-base { opacity: 0; }
.waitlist-submit:active .waitlist-submit-img-press { opacity: 1; }
.form-status { min-height: 1.2rem; margin: 1rem 0 0; font: .75rem var(--mono); }
.form-status.is-error { color: var(--red-dark); }
.form-status.is-success { color: var(--sage); }
.waitlist-footnote { margin: 2.5rem 0 0; font: .77rem var(--motive); color: #000; }
.site-footer { padding: 4rem 1.5rem; background: var(--red); color: var(--cream); text-align: center; }
.footer-mark { width: 2.55rem; margin: 0 auto 1.5rem; }
.site-footer p { margin: 0 0 2rem; font: 1rem var(--sans); }
.site-footer small { color: rgba(255, 251, 239, .6); font: .7rem var(--mono); }
body.js-ready .reveal-target { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s ease, transform .7s ease; }
body.js-ready .reveal-target.is-in-view { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
  .mobile-break { display: block; }
  .hero-glow { display: none; }
  .hero-glow-mobile { display: block; position: absolute; z-index: -1; opacity: .8; mix-blend-mode: screen; filter: blur(2px); pointer-events: none; }
  .hero-glow-mobile-1 { left: -15%; bottom: -12%; width: 82vw; }
  .hero-glow-mobile-2 { top: -5%; right: -10%; bottom: auto; width: 55vw; }
  .hero-header { justify-content: flex-start; padding: 1.5rem 1.5rem 0; }
  .brand-mark { width: clamp(2.3rem, 7vw, 2.8rem); transform: translate(2vw, 2vh); }
  .hero-cta-desktop { display: none; }
  /* Floor 8.6rem, not 6.695rem: at 320px wide the 41.2vw term put this at
     132x43 — one pixel under a comfortable tap target. 8.6rem is where the
     384:124 image clears 44px. */
  .hero-cta-mobile { display: block; position: absolute; top: calc(1.5rem + 21vh); left: 50%; right: auto; z-index: 20; margin: 0; width: clamp(8.6rem, 41.2vw, 10.815rem); transform: translateX(-50%); }
  .hero-cta-mobile:hover { transform: translateX(-50%) translateY(-2px); }
  .hero-stage { z-index: 2; min-height: 60svh; padding: 2.25rem 1rem 0; display: flex; flex-direction: column; align-items: center; }
  .hero h1 { font-size: clamp(1.925rem, 9.9vw, 3.52rem); transform: translateY(0vh); margin-top: .5rem; }
  .hero h1 em:first-of-type { margin-left: .12em; }
  .hero h1 em { font-style: italic; }
  .hero h1 em.no-italic { font-style: normal; }
  .hero-hand-left { width: clamp(11.664rem, 75.4034vw, 23.3852rem); position: absolute; left: -19%; top: auto; bottom: calc(-8% - 11vh); transform: rotate(-23deg); }
  .hero-hand-right { width: clamp(13.4796rem, 86.7638vw, 26.9085rem); position: absolute; right: -24%; top: auto; bottom: calc(21% - 11vh); transform: rotate(-15deg); }
  .hero-hand-left, .hero-hand-right { z-index: 3; }
  .ticker { display: block; position: relative; z-index: 1; flex: none; padding: .6rem 0; }
  .hero-hand-left img, .hero-hand-right img { animation: hand-bob-mobile 12s linear infinite; }
  .ticker-track { animation-duration: 52.8s; }
  .conversation { min-height: auto; }
  .conversation-inner { min-height: auto; padding: 4rem 1.5rem; display: flex; flex-direction: column; align-items: stretch; gap: 2.75rem; }
  .conv-orbit, .conversation-mobile-list { display: none; }
  .conversation h2 { order: 3; margin: 0; text-align: center; font-size: clamp(1.9rem, 9vw, 2.8rem); }
  @keyframes cp-text-drift-a { 0% { transform: translate(0, 0) rotate(0deg); } 22% { transform: translate(5.07vw, -1vh) rotate(2.4deg); } 48% { transform: translate(-4.29vw, .8vh) rotate(-1.8deg); } 74% { transform: translate(4.88vw, -1.2vh) rotate(2deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
  @keyframes cp-text-drift-b { 0% { transform: translate(0, 0) rotate(0deg); } 28% { transform: translate(-5.27vw, .9vh) rotate(-2.2deg); } 54% { transform: translate(4.68vw, -.8vh) rotate(1.9deg); } 80% { transform: translate(-4.49vw, 1vh) rotate(-1.6deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
  @keyframes cp-text-drift-c { 0% { transform: translate(0, 0) rotate(0deg); } 24% { transform: translate(4.88vw, 1vh) rotate(-2deg); } 50% { transform: translate(-5.07vw, -.8vh) rotate(2.2deg); } 76% { transform: translate(4.6vw, .9vh) rotate(-1.4deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
  @keyframes cp-text-drift-d { 0% { transform: translate(0, 0) rotate(0deg); } 32% { transform: translate(-4.68vw, -1vh) rotate(1.8deg); } 58% { transform: translate(5.15vw, .7vh) rotate(-2.2deg); } 84% { transform: translate(-4.52vw, -.6vh) rotate(1.4deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
  @keyframes cp-img-drift-a { 0% { transform: translate(0, 0) rotate(0deg); } 30% { transform: translate(-4.2vw, .6vh) rotate(-1.6deg); } 60% { transform: translate(3.8vw, -.5vh) rotate(1.2deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
  @keyframes cp-img-drift-b { 0% { transform: translate(0, 0) rotate(0deg); } 35% { transform: translate(4vw, -.6vh) rotate(1.4deg); } 65% { transform: translate(-3.6vw, .5vh) rotate(-1deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
  @keyframes cp-img-drift-c { 0% { transform: translate(0, 0) rotate(0deg); } 40% { transform: translate(-3.8vw, -.5vh) rotate(1.5deg); } 70% { transform: translate(4.2vw, .6vh) rotate(-1.3deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
  @keyframes cp-img-drift-d { 0% { transform: translate(0, 0) rotate(0deg); } 26% { transform: translate(3.6vw, .6vh) rotate(-1.4deg); } 62% { transform: translate(-4.4vw, -.5vh) rotate(1.6deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
  .cp-item { display: flex; flex-direction: column; gap: 1.75rem; }
  .cp-pair-a { order: 1; align-items: flex-end; text-align: right; }
  .cp-pair-b { order: 2; align-items: flex-start; text-align: left; }
  .cp-pair-c { order: 4; align-items: flex-start; text-align: left; }
  .cp-pair-d { order: 5; align-items: flex-end; text-align: right; }
  .cp-item img { width: 6.075rem; }
  .cp-pair-a img, .cp-pair-c img { border-radius: 1rem; box-shadow: 0 1rem 2rem rgba(57, 0, 8, .16); }
  .cp-pair-a img { animation: cp-img-drift-a 9.2s ease-in-out infinite; }
  .cp-pair-b img { animation: cp-img-drift-b 10.6s ease-in-out infinite; }
  .cp-pair-c img { animation: cp-img-drift-c 8.7s ease-in-out infinite; }
  .cp-pair-d img { animation: cp-img-drift-d 11.3s ease-in-out infinite; }
  .cp-quote { margin: 0; max-width: 15rem; font-family: var(--ms-madi); font-size: 1.444rem; line-height: 1.2; color: var(--red); }
  .cp-pair-a .cp-quote { animation: cp-text-drift-a 18.88s ease-in-out infinite; }
  .cp-pair-b .cp-quote { animation: cp-text-drift-b 21.44s ease-in-out infinite; }
  .cp-pair-c .cp-quote { animation: cp-text-drift-c 17.44s ease-in-out infinite; }
  .cp-pair-d .cp-quote { animation: cp-text-drift-d 22.72s ease-in-out infinite; }
  .phone-runway { height: 1200vh; }
  .phone-sticky { padding: 0 1rem 1rem; }
  .phone-stage { height: 100svh; }
  .phone-visual { top: 43svh; left: 50%; width: min(45vw, 11.5rem); transform: translate(-50%, calc(var(--phone-drop) - 23.1979vh)); }
  .phone-label { top: calc(10px + 1vh); left: 2%; font-size: clamp(1.368rem, 6.48vw, 1.872rem); }
  .phone-label .phone-arrow { position: absolute; top: 148%; left: 39.56%; width: 5.67rem; transform: rotate(40deg); }
  .callout-photos { top: 26%; left: 2%; width: min(39%, 8rem); max-width: none; font-size: clamp(.85rem, 3.6vw, 1.05rem); }
  .callout-photos .phone-arrow { width: 2.16rem; }
  .callout-swipe { top: 37%; right: -2.2%; width: min(39%, 8rem); max-width: none; text-align: right; font-size: clamp(.85rem, 3.6vw, 1.05rem); }
  .callout-photos span, .callout-swipe span, .callout-age span { display: inline-block; }
  .callout-swipe .phone-arrow { width: 2.4rem; }
  .callout-age { top: 44%; left: 4%; width: min(39%, 8rem); font-size: clamp(.85rem, 3.6vw, 1.05rem); }
  .callout-age .phone-arrow { width: 3rem; }
  .callout-photos, .callout-swipe, .callout-age { gap: .25rem; }
  .phone-critique { display: none; }
  .phone-heading-break { display: block; }
  .phone-what-heading, .phone-what-list { position: absolute; left: 3%; right: auto; width: calc(100% - 2rem); text-align: left; }
  .phone-what-heading { top: 69%; bottom: auto; }
  .phone-what-heading h2 { font-size: clamp(1.135575rem, 6.328938vw, 1.589805rem); line-height: 1; }
  .phone-what-list { top: calc(69% + 4.41rem + 15px); bottom: auto; justify-items: start; font-size: clamp(.8019648rem, 4.009824vw, .96222776rem); }
  .phone-what-list li { text-align: left; }
  .phone-what-list li img { width: 1.75032rem; height: 1.75032rem; }
  .phone-what-heading.phone-line, .phone-what-list .phone-line { opacity: 0; transform: translateY(1.4rem); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
  .phone-what-heading.phone-line.is-visible, .phone-what-list .phone-line.is-visible { opacity: 1; transform: translateY(0); }
  .phone-what-ending { display: none; }
  .frames { min-height: auto; height: auto; padding: 0; position: relative; background: #550d0d; }
  .frames-bg { display: none; }
  .frames-copy { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 1.5rem; }
  .frames-copy h2 { max-width: 18rem; font-size: clamp(1.323rem, 6.94575vw, 1.929375rem); text-align: center; }
  .frames-accent { color: #cb5671; }
  .frames-quote { display: none; }
  .frames-mobile-bg-img { display: block; width: 100%; height: auto; content: url("../Assetphone/iPhone 16 & 17 Pro - 5.webp"); }
  .profile-card { position: relative; display: block; min-height: 0; aspect-ratio: 804 / 1748; background: var(--cream) url("../Assetphone/iPhone 16 & 17 Pro - 6.webp") center top / 100% 100% no-repeat; }
  .profile-card-copy { position: absolute; z-index: 1; inset: 0 0 auto; min-height: 0; height: 49%; padding: 0 7%; justify-content: center; text-align: left; }
  .profile-card-copy h2 { max-width: 100%; margin-bottom: calc(1rem + 10px); font-size: clamp(1.7753rem, 8.5701vw, 2.6935rem); color: #550d0d; }
  .profile-card-copy p { max-width: 20rem; margin: 0; font-size: clamp(1.0137rem, 4.3647vw, 1.2671rem); text-align: left; color: #000; }
  .desktop-break { display: none; }
  .script-fade { margin-bottom: 4rem; }
  .profile-card-art { display: none; }
  .dialer { grid-template-columns: 1fr; gap: 1.55rem; min-height: auto; padding: 4.2rem max(1.5rem, 7vw) 4rem; }
  .dialer-tagline { margin: 0 0 .9rem; color: rgba(255, 251, 239, .82); font-size: clamp(1.45rem, 7vw, 2rem); text-align: left; transform: rotate(-5deg); transform-origin: left center; }
  .dialer h2 { width: 100%; margin: 0 auto 7.3rem 0; font-size: clamp(1.932rem, 9.384vw, 2.346rem); line-height: 1.08; text-align: left; transform: none; }
  .dialer-title-desktop { display: none; }
  .dialer-title-mobile, .dialer-title-mobile > span { display: block; }
  .dialer-title-mobile > span { white-space: nowrap; }
  .dialer-not { order: 1; }
  .dialer-not p { font-size: clamp(1.35rem, 6.4vw, 1.65rem); margin-bottom: 2rem; }
  .dialer-instead { font-size: clamp(1.485rem, 7.04vw, 1.815rem); }
  .dialer-not ul { display: flex; flex-direction: column; gap: .35rem; font-size: clamp(1.15rem, 5.6vw, 1.45rem); line-height: 1.35; transform: none; }
  .dialer-not li:not(:last-child)::after { display: block; margin: .15rem 0; line-height: 1; }
  .dialer-divider { order: 2; display: block; width: 100%; height: 1px !important; margin: .35rem 0 .4rem !important; background: rgba(255, 251, 239, .75); transform: translateY(-10px); }
  .dialer-control-wrap { order: 3; }
  .dialer-instead { align-self: center; margin: 0 0 1.15rem; }
  .dial-control { width: min(75vw, 19rem); max-width: 100%; margin-top: 5vh; margin-bottom: 10px; }
  .dial-answer { font-size: clamp(.78408rem, 1.286472vw, 1.397276rem); }
  .dialer-help { display: none; }
  .how-it-works { overflow: visible; padding: 3rem 1.25rem 4rem; background: white; color: var(--red); }
  .how-topline { min-height: 0; justify-content: center; align-items: center; padding-bottom: 4.275rem; border-bottom: 0; }
  .how-topline h2 { margin: 0; font-size: clamp(1.9rem, 8.4vw, 2.2rem); white-space: nowrap; }
  .how-topline img { display: none; }
  .how-row { grid-template-columns: 1fr; gap: 1.7rem; padding: 0 0 4rem; border-bottom: 0; }
  .how-row:last-child { padding-bottom: 0; }
  .how-row > p { color: rgba(23, 19, 19, .58); font-size: 1rem; }
  .how-row h3 { margin-bottom: 1.25rem; color: var(--red); font-size: clamp(1.944rem, 9.18vw, 2.376rem); font-weight: 400; line-height: 1.05; }
  .how-row span { margin-right: 0; color: var(--red); font-size: clamp(.95rem, 3.8vw, 1.05rem); line-height: 1.28; }
  .dossier { min-height: 0; display: block; background: none; overflow: visible; }
  .dossier > h2 { display: none; }
  .dossier > img { display: block; width: 100%; height: auto; object-fit: initial; content: url("../Assetphone/iPhone 16 & 17 Pro - 9.webp"); }
  .dossier-caption { display: none; }
  .waitlist { min-height: 72svh; padding: 2rem 1.25rem; background: white; }
  .waitlist-card { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 4rem 1rem 3.5rem; border-color: var(--red); border-radius: 1.5rem; }
  .waitlist-kicker { margin-bottom: 1.25rem; font-size: .78rem; }
  .waitlist h2 { margin-bottom: 2rem; font-size: clamp(1.85rem, 8.8vw, 2.75rem); line-height: .94; }
  .waitlist-submit { top: auto; width: min(100%, 14.72rem); max-width: 100%; min-width: 0; height: 2.9rem; min-height: 2.9rem; box-sizing: border-box; padding: .7rem .85rem; background: var(--red); color: white; font: .792rem/1 var(--motive); white-space: nowrap; }
  /* .62rem was 9.9px — this is where the form's validation error and its
     confirmation appear, so it is the last text on the page that should be
     hard to read. */
  .form-status { width: 100%; max-width: 100%; min-height: 0; margin-top: .65rem; padding: 0 .25rem; font-size: .8rem; line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; }
  .waitlist-footnote { margin-top: 2rem; font-size: clamp(.78rem, 3.2vw, .9rem); }
  .site-footer { padding: 1.75rem 1.5rem; }
  .footer-mark { width: 2.1rem; margin: 0 auto .75rem; }
  .site-footer small { font-size: .78rem; }
}

@media (max-width: 768px) and (max-height: 599px) {
  .hero-stage { min-height: max(60svh, 38rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .phone-visual { transform: translate(-50%, -50%); }
}