/* précis — shared styles.
   Type: Optima is the app's own face (Theme.serif) and ships with every
   version of macOS and iOS, so Apple visitors — the entire audience for this
   app — see the real thing with no webfont to download. Candara is the
   closest humanist flare available on Windows. URW Classico (the Optima
   clone) is AGPL, so it is not self-hosted here. Pastelyn *is* self-hosted
   (public/assets/fonts/Pastelyn.woff2) under the commercial licence covering
   this site. */

:root {
  --paper:      #ECDFBF;
  --card-top:   #F5EED8;
  --card-bottom:#EFE6CF;
  --card:       #F6EFDA;
  --charcoal:   #2C261D;
  --ink:        #4A4436;
  --faded-ink:  #6B6353;
  --meta:       #9A8F77;
  --meta-light: #B6A988;
  --teal:       #3F7A6D;
  --teal-dark:  #2F5C52;
  --teal-light: #8FB3A8;
  --teal-wash:  rgba(63,122,109,.10);
  --teal-border:rgba(63,122,109,.30);
  --red:        #B0543F;
  --hairline:   rgba(44,38,29,.14);
  --font:       Optima, Candara, "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Pastelyn is the app's hand-lettered display face, self-hosted below
     under a commercial licence. Bradley Hand and generic cursive stay in
     the stack as the fallback while the woff2 loads (font-display: swap). */
  --script:     Pastelyn, "Bradley Hand", cursive;
  /* EB Garamond is a Google-hosted face; loading it would need an external
     request this site's CSP does not allow (see render.yaml), so it is
     declared for parity with the source design and quietly falls back to
     Georgia everywhere it is actually rendered. */
  --serif:      "EB Garamond", Georgia, serif;
  --dark-1:     #17140F;
  --dark-2:     #211D18;
  --dark-3:     #2F2A22;
  --cream:      #F4ECD6;
}

@font-face {
  font-family: "Pastelyn";
  src: url("/assets/fonts/Pastelyn.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  /* Not background-attachment: fixed — Safari on iOS repaints it badly while
     scrolling. Letting the gradient span the document is smoother and looks
     the same on a page this short. */
  background-image: radial-gradient(135% 90% at 22% 4%, #F5EED9 0%, #ECE0C1 55%, #E3D5B1 100%);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 88px; }

/* ── masthead ─────────────────────────────────────────────────────── */

.masthead {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 26px; margin-bottom: 30px;
  border-bottom: 1px solid var(--hairline);
}
.masthead img { width: 46px; height: 46px; border-radius: 10px; display: block; }
.masthead a { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.wordmark { font-size: 25px; font-weight: 600; color: var(--charcoal); letter-spacing: -.01em; }
.masthead nav { margin-left: auto; display: flex; gap: 20px; font-size: 15px; }
.masthead nav a { color: var(--teal); text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; }
.masthead nav a[aria-current="page"] { color: var(--meta); }

/* ── type ─────────────────────────────────────────────────────────── */

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 8px;
}
h1 { font-size: 38px; line-height: 1.12; color: var(--charcoal); margin: 0 0 8px; font-weight: 600; }
h2 { font-size: 22px; color: var(--charcoal); margin: 40px 0 12px; font-weight: 600; }
h3 { font-size: 16px; color: var(--charcoal); margin: 26px 0 6px; font-weight: 600; }
p  { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin: 0 0 8px; }
strong { color: var(--charcoal); font-weight: 600; }
a { color: var(--teal); }
.date { font-size: 14px; color: var(--meta); margin: 0 0 6px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--faded-ink); }

/* Hand-drawn rule, echoing SquiggleUnderline in the app. */
.squiggle { display: block; margin: 20px 0 32px; }

/* ── surfaces ─────────────────────────────────────────────────────── */

.card {
  background: linear-gradient(var(--card-top), var(--card-bottom));
  border: 1px solid var(--hairline);
  border-radius: 15px;
  padding: 20px 22px;
  box-shadow: 0 8px 20px rgba(44,38,29,.14);
  margin: 22px 0;
}
.card > :last-child { margin-bottom: 0; }
.card .q { color: var(--charcoal); font-weight: 600; margin: 0 0 8px; font-size: 17px; }
.card.accent { background: var(--teal-wash); border-color: var(--teal-border); box-shadow: none; }

table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { color: var(--charcoal); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

.btn {
  display: inline-block; padding: 13px 24px; border-radius: 13px;
  background: var(--teal); color: var(--card); text-decoration: none;
  font-size: 17px; font-weight: 600;
  box-shadow: 0 10px 26px rgba(47,92,82,.4);
}
.btn:hover { background: var(--teal-dark); }

.note {
  background: var(--teal-wash); border: 1px solid var(--teal-border);
  border-radius: 12px; padding: 14px 16px; margin: 22px 0; font-size: 15px;
}
.note > :last-child { margin-bottom: 0; }

footer {
  margin-top: 56px; padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 14px; color: var(--meta);
}
footer a { color: var(--meta); }

@media (max-width: 560px) {
  .wrap { padding: 36px 20px 64px; }
  h1 { font-size: 31px; }
  .masthead { flex-wrap: wrap; gap: 12px; }
  .masthead nav { width: 100%; margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Landing page — everything below is scoped to the marketing home
   page (public/index.html). Inner pages keep the plain .wrap/.masthead
   layout above untouched.
   ═══════════════════════════════════════════════════════════════════ */

body.landing { background-image: radial-gradient(135% 60% at 22% 0%, #F5EED9 0%, #ECE0C1 45%, #E3D5B1 100%); }

.lp-section { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* ── motion ────────────────────────────────────────────────────────── */

@keyframes lp-wave    { from { transform: scaleY(1); } to { transform: scaleY(.22); } }
@keyframes lp-breathe  { from { opacity: .35; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes lp-float    { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes lp-draw     { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes lp-caret    { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  body.landing * { animation: none !important; }
}

/* ── waveform logo mark, shared by header and footer ─────────────── */

.wave-mark { display: inline-flex; align-items: center; gap: 1.6px; height: 26px; }
.wave-mark span { width: 2.2px; border-radius: 2px; background: var(--charcoal); display: block; }
.wave-mark span:nth-child(5) { background: var(--teal); }
.wave-mark span:nth-child(1),.wave-mark span:nth-child(9) { height: 25%; }
.wave-mark span:nth-child(2),.wave-mark span:nth-child(8) { height: 41.5%; }
.wave-mark span:nth-child(3),.wave-mark span:nth-child(7) { height: 64%; }
.wave-mark span:nth-child(4),.wave-mark span:nth-child(6) { height: 86%; }
.wave-mark span:nth-child(5) { height: 100%; }
.wave-mark--cream span { background: var(--cream); }
.wave-mark--cream span:nth-child(5) { background: var(--teal); }
.wave-mark--lg { height: 64px; gap: 4px; }
.wave-mark--lg span { width: 5px; border-radius: 4px; }

.lp-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--charcoal); }
.lp-logo .wordmark-script { font-family: var(--script); font-size: 30px; color: var(--charcoal); }

/* ── header ────────────────────────────────────────────────────────── */

.lp-nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: rgba(240,231,206,.82);
  border-bottom: 1px solid var(--hairline);
}
.lp-nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; gap: 28px;
}
.lp-links { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 15px; }
.lp-links a { color: var(--ink); text-decoration: none; }
.lp-links a:hover { color: var(--teal); }
.btn-cta {
  display: inline-flex; align-items: center; background: var(--teal); color: var(--cream);
  font-weight: 700; font-size: 15px; padding: 10px 20px; border-radius: 12px;
  text-decoration: none; box-shadow: 0 6px 14px rgba(47,92,82,.35);
}
.btn-cta:hover { background: var(--teal-dark); }

@media (max-width: 780px) {
  .lp-links { display: none; }
  .lp-nav-inner { gap: 14px; }
}

/* ── type helpers ──────────────────────────────────────────────────── */

.script { font-family: var(--script); font-weight: 400; color: var(--charcoal); margin: 0; }
.script--cream { color: var(--cream); }
h1.script { font-size: 72px; line-height: .98; letter-spacing: -.5px; margin-top: 14px; }
h2.script { font-size: 46px; line-height: 1.05; margin: 12px 0 0; }
.section-eyebrow {
  font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin: 0;
}
.section-eyebrow--dark { color: var(--teal-light); }
.lede-serif { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink); max-width: 30em; margin: 22px 0 0; }
.lede-serif--dark { color: var(--meta-light); }
.squiggle-lg { display: block; margin: 16px 0 0; overflow: visible; }
.squiggle-lg path { stroke-dasharray: 240; animation: lp-draw 1.1s ease-out .3s both; }
.dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none;
  display: inline-block;
  animation: lp-breathe 1.4s cubic-bezier(.42,0,.58,1) infinite alternate;
}

/* ── hero ──────────────────────────────────────────────────────────── */

.hero {
  max-width: 1160px; margin: 0 auto; padding: 72px 32px 96px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; }
.btn-store {
  display: inline-flex; align-items: center; padding: 13px 26px; border-radius: 14px;
  text-decoration: none; box-shadow: 0 10px 16px rgba(44,38,29,.28);
}
.btn-store span { display: block; }
.btn-store .btn-store-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.btn-store .btn-store-name { font-size: 19px; font-weight: 700; line-height: 1.1; }
.btn-store--dark { background: var(--charcoal); color: var(--cream); }
.btn-store--teal { background: var(--teal); color: var(--cream); box-shadow: 0 10px 16px rgba(47,92,82,.5); }
.btn-store--teal:hover { background: var(--teal-dark); }
.link-underline { font-size: 15px; color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 13px; color: var(--faded-ink); }

/* ── phone mockup ──────────────────────────────────────────────────── */

.hero-phone { display: flex; justify-content: center; }
.phone-frame {
  position: relative; width: 300px; padding: 12px; border-radius: 46px;
  background: linear-gradient(160deg, #3A352A, #2C261D 55%, #211D18);
  box-shadow: 0 34px 60px rgba(44,38,29,.34), inset 0 4px 0 rgba(255,255,255,.06);
  animation: lp-float 5.5s cubic-bezier(.42,0,.58,1) infinite alternate;
}
.phone-screen {
  position: relative; border-radius: 36px; overflow: hidden; height: 610px;
  background-image: radial-gradient(360px at 22% 6%, var(--card-top) 0%, var(--paper) 60%, #E3D5B1 100%);
  display: flex; flex-direction: column;
}
.phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px; border-radius: 12px; background: var(--dark-2);
}
.phone-head { position: relative; padding: 46px 18px 0; display: flex; align-items: flex-start; gap: 10px; }
.phone-head-titles { flex: 1; }
.phone-eyebrow { font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0; }
.phone-title { font-family: var(--script); font-size: 28px; line-height: 1.05; color: var(--charcoal); margin: 2px 0 0; }
.phone-chevron {
  width: 30px; height: 30px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--hairline); box-shadow: 0 4px 6px rgba(44,38,29,.3);
  display: grid; place-items: center; font-size: 14px; color: var(--charcoal); flex: none;
}
.phone-rec-card {
  margin: 14px 16px 0; padding: 13px; border-radius: 14px;
  background: linear-gradient(var(--card-top), var(--card-bottom));
  border: 1px solid var(--hairline); box-shadow: 0 8px 10px rgba(44,38,29,.18);
}
.phone-rec-row { display: flex; align-items: center; gap: 8px; }
.phone-rec-row .rec-label { font-weight: 700; font-size: 12px; color: var(--red); }
.phone-rec-row .rec-time { margin-left: auto; font-size: 13px; color: var(--faded-ink); font-variant-numeric: tabular-nums; }
.phone-wave { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-top: 12px; }
.phone-wave span {
  width: 4px; border-radius: 2px; background: var(--teal); display: block;
  transform-origin: center bottom;
  animation-name: lp-wave; animation-timing-function: cubic-bezier(.42,0,.58,1);
  animation-iteration-count: infinite; animation-direction: alternate;
}
.phone-wave span:nth-child(1)  { animation-duration: .9s;   animation-delay: 0s; }
.phone-wave span:nth-child(2)  { animation-duration: 1.2s;  animation-delay: .18s; }
.phone-wave span:nth-child(3)  { animation-duration: .8s;   animation-delay: .32s; }
.phone-wave span:nth-child(4)  { animation-duration: 1.35s; animation-delay: .07s; }
.phone-wave span:nth-child(5)  { animation-duration: 1.05s; animation-delay: .24s; }
.phone-wave span:nth-child(6)  { animation-duration: .95s;  animation-delay: .41s; }
.phone-wave span:nth-child(7)  { animation-duration: 1.25s; animation-delay: .12s; }
.phone-wave span:nth-child(8)  { animation-duration: .85s;  animation-delay: .29s; }
.phone-wave span:nth-child(9)  { animation-duration: 1.15s; animation-delay: .05s; }
.phone-wave span:nth-child(10) { animation-duration: 1s;    animation-delay: .36s; }
.phone-wave span:nth-child(11) { animation-duration: 1.3s;  animation-delay: .2s; }
.phone-wave span:nth-child(12) { animation-duration: .9s;   animation-delay: .44s; }
.phone-rec-actions { display: flex; gap: 8px; margin-top: 13px; }
.phone-btn { flex: 1; text-align: center; padding: 9px 0; border-radius: 11px; font-weight: 700; font-size: 13px; }
.phone-btn--pause { background: var(--card); border: 1px solid var(--hairline); color: var(--charcoal); }
.phone-btn--stop { background: var(--red); color: var(--cream); }
.phone-transcript { position: relative; margin: 16px 16px 0; flex: 1; overflow: hidden; }
.transcript-line { display: grid; gap: 4px; margin-top: 12px; }
.transcript-line:first-of-type { margin-top: 10px; }
.transcript-meta { display: flex; align-items: center; gap: 7px; margin: 0; }
.speaker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.transcript-meta .speaker { font-weight: 700; font-size: 11px; }
.transcript-meta .speaker.teal { color: var(--teal); }
.transcript-meta .speaker.amber { color: #A5794A; }
.transcript-meta .time { font-size: 11px; color: var(--meta); }
.transcript-text { font-size: 13px; line-height: 1.5; color: var(--ink); margin: 0; }
.transcript-caret {
  display: inline-block; width: 1.5px; height: 13px; vertical-align: -2px; margin-left: 2px;
  background: var(--ink); animation: lp-caret 1s step-end infinite;
}

/* ── feature grid ──────────────────────────────────────────────────── */

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.feature-card .feature-icon {
  display: grid; place-items: center; color: var(--teal); margin-bottom: 12px;
}
.feature-card .feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { margin: 0 0 8px; font-size: 19px; }
.feature-card p { color: var(--faded-ink); font-size: 15px; margin: 0; }

/* ── two-column sections (interview mode / promise) ───────────────── */

.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; margin-top: 36px; }
.two-col .lede-serif.small { font-size: 18px; }
.feature-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; }
.feature-list .feature-list-icon {
  width: 20px; height: 20px; flex: none; color: var(--teal); margin-top: 2px;
}
.feature-list strong { display: block; color: var(--charcoal); }
.feature-list p, .feature-list div { margin: 0; font-size: 16px; color: var(--ink); }

.report-stack { display: grid; gap: 16px; }
.report-card { margin: 0; }
.report-tag {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin: 0 0 14px;
}
.report-label { font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin: 0 0 8px; }
.report-label + .report-label { margin-top: 18px; }
.plain-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink); }
.ask-quote {
  margin: 0 0 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--hairline);
  font-size: 15px; color: var(--charcoal); font-style: normal;
}
.ask-quote:last-child { margin-bottom: 0; }
.report-summary { font-size: 15px; color: var(--faded-ink); margin: 0 0 16px; }
.req-item { display: flex; gap: 10px; margin-top: 14px; }
.req-item:first-of-type { margin-top: 0; }
.req-icon {
  width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 2px;
  display: grid; place-items: center; font-size: 11px; line-height: 1;
  background: var(--teal); color: var(--cream);
}
.req-icon--open { background: transparent; border: 1.5px dashed var(--meta-light); }
.req-title { font-weight: 700; font-size: 15px; color: var(--charcoal); margin: 0; }
.req-title--muted { color: var(--meta); }
.req-quote { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--faded-ink); margin: 2px 0 0; }
.req-note { font-size: 14px; color: var(--faded-ink); margin: 2px 0 0; }

/* ── dark sections (promise / CTA) ─────────────────────────────────── */

.dark-section {
  background-color: var(--dark-1);
  background-image: radial-gradient(1100px at 50% -10%, var(--dark-3) 0%, var(--dark-2) 45%, var(--dark-1) 100%);
}
.dark-section .lp-section { padding-top: 96px; padding-bottom: 96px; }
.promise-grid { display: grid; gap: 14px; }
.card-dark {
  padding: 20px; border-radius: 15px; background: rgba(244,236,214,.05); border: 1px solid rgba(244,236,214,.12);
}
.promise-title { font-weight: 700; font-size: 17px; color: var(--cream); margin: 0; }
.promise-text { font-size: 15px; line-height: 1.5; color: var(--meta); margin: 6px 0 0; }

.cta-panel {
  border-radius: 24px; text-align: center; padding: 64px 48px;
  max-width: 1160px; margin: 96px auto 0;
}
@media (max-width: 780px) { .cta-panel { padding: 48px 28px; } }
.cta-panel h2.script { margin-top: 26px; }
.cta-panel .btn-store { margin-top: 34px; }
.cta-note { font-size: 14px; color: var(--meta); margin: 18px 0 0; }

/* ── how it works ──────────────────────────────────────────────────── */

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 40px; }
.step-num { font-family: var(--script); font-size: 40px; color: var(--teal); margin: 0; opacity: .55; }
.step h3 { font-size: 17px; margin: 4px 0 6px; }
.step p { font-size: 15px; color: var(--faded-ink); margin: 0; }

.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.platform-card h3.script { font-size: 34px; margin-top: 4px; }
.platform-card p { font-size: 16px; color: var(--faded-ink); margin: 12px 0 0; }
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pill {
  font-size: 13px; color: var(--teal); background: var(--teal-wash); border: 1px solid var(--teal-border);
  padding: 6px 12px; border-radius: 999px;
}
.fine-print { font-size: 15px; color: var(--faded-ink); margin: 20px 0 0; }

/* ── footer ────────────────────────────────────────────────────────── */

.lp-footer { margin-top: 56px; padding: 48px 0 40px; border-top: 1px solid var(--hairline); }
.lp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-top: 0; }
.lp-footer .wordmark-script { font-size: 22px; }
.footer-tag { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--faded-ink); margin: 10px 0 0; }
.footer-col-label {
  font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--meta); margin: 0 0 12px;
}
.lp-footer-grid a { display: block; color: var(--teal); font-size: 15px; text-decoration: none; margin-bottom: 8px; }
.lp-footer-grid a:hover { text-decoration: underline; }
.footer-copy { font-size: 13px; color: var(--faded-ink); margin: 36px 0 0; }

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 48px 24px 64px; }
  .hero-phone { order: -1; }
  .two-col { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .platform-grid { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: 1fr 1fr; }
  h1.script { font-size: 54px; }
  h2.script { font-size: 34px; }
}

@media (max-width: 560px) {
  .lp-section { padding: 0 20px; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: 1fr; gap: 26px; }
  h1.script { font-size: 42px; }
  h2.script { font-size: 28px; }
  .phone-frame { width: 100%; max-width: 300px; }
  .cta-panel { padding: 40px 22px; }
}