/* OWN — site v2 · sections, in page order */

/* ============ HERO ============ */
main > .home-intro { width: 100%; padding: 48px 24px var(--section-padding); text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; margin-top: 9svh; }
.hero-copy h1 {
  font-size: min(74px, 8.4vw); line-height: 1.02; letter-spacing: -.038em;
  white-space: nowrap; color: #0f1716;
}
.hero-copy h1 em { color: var(--ocean); }
.hero-copy p { max-width: 760px; margin-top: 22px; font-size: 17.5px; line-height: 1.55; color: #5a6461; text-wrap: balance; }
.hero-actions { justify-content: center; flex-wrap: nowrap; width: max-content; margin: 28px auto 0; }
/* the demo runs the page column's width (1280px), or 68% of a screen wide
   enough that 1280px would leave it looking small (over ~1880px, where a
   laptop's demo already fills about two-thirds), but never so wide that the
   app window and its tabs can't be seen together under the sticky header: the
   app is 1440x900, so the window is width/1.6 tall, and 184px is the header
   (88) + window border (2) + tabs (30 + 48) + a 16px margin. When that makes
   the window narrower than the tab row (832px), the row keeps its one line by
   reaching past the window's edges. Phones get the compact frame, which is a
   different shape, so they keep the plain width. */
.hero-showcase { width: min(100%, 1280px); margin: 44px auto 0; }
@media (min-width: 761px) {
  .hero-showcase { width: min(100%, max(1280px, 68vw), max(640px, (100svh - 184px) * 1.6)); }
  .hero-showcase .hero-tabs { margin-inline: min(0px, (100% - min(832px, 100vw - 32px)) / 2); }
}
.hero-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 30px 0 0; padding: 0; list-style: none; }
/* which page the hero demo is showing; choosing one stops the film there */
.hero-tabs button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 11px 18px;
  border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: #5f6966; font-size: 14px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.hero-tabs button .icon { font-size: 18px; }
.hero-tabs button:hover { background: #f0f3f1; }
.hero-tabs button[aria-current] { background: #e8f0ed; border-color: #dbe5e1; color: var(--ocean); box-shadow: inset 0 1px 0 #fff; }
.hero-note { margin-top: 14px; font-size: 12px; color: var(--muted-2); }

/* ============ STATEMENT ============ */
main > .reply-statement {
  display: grid; place-items: center;
  width: 100%; min-height: 80svh; margin-top: 0;
  padding: 96px 24px;
  text-align: center;
}
.statement-card {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  width: 100%; max-width: 1280px; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 28px;
  background: linear-gradient(180deg, #17474b 0%, #2e6a69 38%, #6ea7a0 78%, #a9cfc6 100%);
  container-type: inline-size;
  transform: scale(var(--statement-scale, .8));
  will-change: transform;
}
.braid { position: absolute; inset: 0; width: 100%; height: 100%; }
.statement-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgb(4 22 24 / .04), rgb(4 22 24 / .22));
  pointer-events: none;
}
.statement-copy { position: relative; z-index: 2; padding: 0 6cqw; }
.reply-statement h2 {
  display: grid; justify-items: center;
  font-size: clamp(14px, 4.6cqw, 62px); line-height: 1.24; letter-spacing: -.02em;
  color: #fbfbf8;
  text-shadow: 0 2px 18px rgb(4 22 24 / .28);
  opacity: var(--statement-opacity, 1);
  transition: opacity .3s;
}
.statement-line { position: relative; white-space: nowrap; }
.statement-typed { position: absolute; inset: 0 auto auto 0; white-space: pre; }
.statement-line.has-typed .statement-text { opacity: 0; }
.statement-typed.is-typing::after {
  content: ''; position: absolute; top: .18em; left: calc(100% + .06em);
  width: 2px; height: .9em; background: currentColor;
}

/* ============ HOW IT WORKS ============ */
.quick-steps {
  --qe: linear(0, .3 10%, .7 90%, 1);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px;
}
.quick-steps > li { display: grid; grid-template-rows: subgrid; grid-row: span 3; text-align: center; }
.quick-steps h3 { margin: 26px 0 8px; font-size: 26px; line-height: 1.15; }
.quick-steps p { max-width: 340px; margin-inline: auto; font-size: 16px; line-height: 1.55; }
.quick-visual {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  height: 360px; padding: 28px;
  border-radius: 20px; background: var(--ivory);
  text-align: left;
}
.quick-visual * { animation-play-state: paused; }
.quick-visual.is-playing * { animation-play-state: running; }
.q-pointer { position: absolute; width: 25px; height: 32px; filter: drop-shadow(0 3px 4px #0003); z-index: 4; opacity: 0; }

/* 1 · connect */
  0%, 12% { opacity: 0; transform: translate(80px, 120px); }
  16% { opacity: 1; transform: translate(70px, 100px); }
  30%, 33% { opacity: 1; transform: translate(0, 0) scale(1); }
  36% { transform: translate(0, 0) scale(.84); }
  40% { opacity: 1; transform: translate(0, 0) scale(1); }
  56%, 100% { opacity: 0; transform: translate(14px, 28px); }

/* 2 · upload */
  0% { opacity: 0; transform: translate(-120%, -210%) rotate(-10deg) scale(.9); }
  8% { opacity: 1; transform: translate(-110%, -190%) rotate(-8deg) scale(1); }
  28% { opacity: 1; transform: translate(-50%, -78%) rotate(0) scale(1.02); }
  32%, 94% { opacity: 1; transform: translate(-50%, -70%) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(.96); }

/* 3 · ask */
  0%, 10% { opacity: 0; transform: translate(-60px, 50px); }
  14% { opacity: 1; transform: translate(-50px, 40px); }
  26%, 29% { opacity: 1; transform: translate(0, 0) scale(1); }
  32% { transform: translate(0, 0) scale(.84); }
  35% { opacity: 1; transform: translate(0, 0) scale(1); }
  48%, 100% { opacity: 0; transform: translate(18px, 26px); }

/* ============ CONTEXT STORY ============ */
.context-story { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.3fr); gap: 80px; align-items: start; }
.story-overview { position: sticky; top: 104px; padding-top: 38px; }
.story-chapters { display: grid; gap: clamp(104px, 16svh, 176px); }
.context-story:not(.is-sticky-story) .story-overview { display: none; }
.context-story:not(.is-sticky-story) { display: block; }
.context-story:not(.is-sticky-story) .story-chapter { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.3fr); gap: 80px; align-items: center; }
.context-story:not(.is-sticky-story) .chapter-copy { grid-row: 1; grid-column: 1; }
.story-copy-stack { display: grid; gap: 32px; }
.chapter-copy h3 { display: flex; align-items: flex-start; gap: 14px; font-size: 34px; line-height: 1.12; transition: color .28s ease-out; }
.story-icon { width: 40px; height: 40px; margin-top: -1px; color: #2a302e; stroke-width: 1.3; }
.chapter-description {
  display: grid; grid-template-rows: 1fr;
  margin-top: 14px; margin-left: 54px;
  transition: grid-template-rows .38s var(--expo), margin-top .38s var(--expo), opacity .24s ease-out;
}
.chapter-description > p { min-height: 0; overflow: hidden; font-size: 17px; line-height: 1.6; }
.is-sticky-story .chapter-copy:not(.is-active) .chapter-description { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
.is-sticky-story .chapter-copy:not(.is-active) > h3 { color: #8a9290; }
.is-sticky-story .chapter-copy { cursor: pointer; }

.story-art { display: flex; flex-direction: column; gap: 24px; padding: 38px; border-radius: 28px; background: var(--gradient-light); }
/* 1 · accounts (oversized, cropped) */
.accounts-art { position: relative; aspect-ratio: 1.6; min-height: 340px; padding: 0; overflow: hidden; container-type: inline-size; }

/* 2 · statements (sequenced) */
.statement-art { gap: 18px; background: linear-gradient(125deg, #cfe1dc, #e6e9e4 55%, #e3e6d6); min-height: 400px; justify-content: center; }
.story-step { opacity: 0; }
.statement-art.is-playing .sa-drop { animation: step-a 8s var(--expo) infinite; }
.statement-art.is-playing .sa-read { animation: step-b 8s var(--expo) infinite; }
@keyframes step-a { 0% { opacity: 0; transform: translateY(12px); } 4%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes step-b { 0%, 24% { opacity: 0; transform: translateY(12px); } 29%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* 3 · categories */
.why-art { gap: 34px; min-height: 400px; justify-content: center; background: linear-gradient(125deg, #d3e3df, #e9e9e6 55%, #e1e7dc); }

/* ============ HEALTH STAGE ============ */
.section-heading.compact { margin-bottom: 64px; }
.voice-single { position: relative; padding: 26px 220px 24px 200px; }
.voice-workspace {
  position: relative; height: 620px;
  border: 1px solid #e1e4e1; border-radius: 18px;
  background: #f7f7f5; overflow: hidden;
  box-shadow: 0 4px 8px #20232c04, 0 20px 50px -24px #20232c35;
}

.voice-connections { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.voice-connections path { fill: none; stroke: #8d9b97; stroke-width: 1.3; stroke-dasharray: 3 5; opacity: .75; }
.voice-workspace[data-focus=main] .voice-connections path { animation: voice-flow 1.8s linear infinite; }
@keyframes voice-flow { to { stroke-dashoffset: -32; } }
.voice-note { position: absolute; width: 180px; }
.voice-note h3 { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.voice-note p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: #6c7572; }
.voice-note::after { content: ''; position: absolute; top: 14px; height: 1px; background: #bfc6c3; }
.note-questions { right: 0; top: 150px; }
.note-questions::after { right: calc(100% + 8px); width: 26px; }
.note-rating { right: 0; bottom: 60px; }
.note-rating::after { right: calc(100% + 8px); width: 26px; }
.note-ai { left: 0; top: 400px; width: 168px; }
.note-ai::after { left: calc(100% + 6px); width: 18px; }

/* ============ FOLLOW-UP SPREADS ============ */
.benefit-spread { padding: 0 0 var(--section-space); }
.benefit-spread:last-child { padding-bottom: 0; }
.section-heading.spread { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; max-width: none; margin: 0 0 48px; text-align: left; }
.section-heading.spread h3 { max-width: 620px; font-size: 36px; line-height: 1.1; letter-spacing: -.03em; }
.section-heading.spread p { max-width: 500px; margin: 0; font-size: 17px; text-wrap: pretty; }
.benefit-artwork { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.benefit-panel { display: flex; align-items: center; justify-content: center; min-height: 520px; padding: 40px; border-radius: 12px; overflow: hidden; }
.benefit-panel.grain::before { opacity: .2; }

.budget-main { background: radial-gradient(ellipse at 0 100%, #5f8b80, transparent 60%), radial-gradient(ellipse at 100% 100%, #9fb6bf, transparent 60%), linear-gradient(130deg, #d6c9a0, #e7e1cf 55%, #ece7db); }


.review-detail { flex-direction: column; align-items: stretch; justify-content: center; gap: 36px; padding: 40px 32px; background: linear-gradient(130deg, #e8dfc6, #e3d8b8 70%, #d7d6c0); }
.snip { max-width: 300px; }
.snip-who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #4b5552; }
.snip-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fbfbf9; color: var(--ocean); font-weight: 700; box-shadow: 0 2px 6px #0000001a; }
.snip p { margin-top: 10px; font-size: 19px; line-height: 1.45; color: #2e3533; letter-spacing: -.01em; }
.snip mark { background: #faf6d8; }

.review-main { background: radial-gradient(ellipse at 90% 0%, #e4dcc1, transparent 65%), radial-gradient(ellipse at 0% 100%, #4f8c86, transparent 70%), linear-gradient(125deg, #a4b9af, #c8d4c7 60%, #95babc); }
.budget-detail { flex-direction: column; align-items: stretch; justify-content: center; background: linear-gradient(135deg, #93c3ba, #6fa8a0 70%, #9fc4b6); }

/* ============ AVAILABILITY ============ */
.availability-section { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.availability-copy { text-align: center; }
.availability-copy .section-heading { margin-bottom: 28px; }
.availability-copy .section-heading h2 { line-height: 1.06; }
.availability-copy .section-heading p { max-width: 420px; }
.availability-copy .button { padding-inline: 24px; }
.fineprint { margin-top: 16px; font-size: 12px; color: var(--muted-2); }
.availability-rails { display: grid; gap: 4px; min-width: 0; }
.availability-marquee {
  display: flex; align-items: center; height: 108px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.availability-track { display: flex; width: max-content; animation: across 40s linear infinite; animation-play-state: paused; }
.availability-banks .availability-track { animation-duration: 80s; }
.availability-types .availability-track { animation-direction: reverse; }
.is-marquee-active .availability-track { animation-play-state: running; }
.availability-set { display: flex; gap: 14px; padding-right: 14px; }
.availability-set li {
  display: grid; place-items: center;
  height: 72px; padding: 0 22px;
  border: 1px solid #e6e9e5; border-radius: 18px; background: #f4f5f1;
  color: #3d4a46; font-family: var(--serif); font-size: 21px; letter-spacing: -.02em; white-space: nowrap;
}
.availability-banks li { width: 96px; padding: 0; background: #fff; }
.availability-banks img { width: 54px; height: 34px; object-fit: contain; }
@keyframes across { to { transform: translateX(calc(-100% / 3)); } }

/* ============ PRIVACY ============ */
.support-story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 80px; align-items: center; }
.privacy-art { display: flex; align-items: center; justify-content: center; min-height: 400px; }
.vault-art { width: 100%; max-width: 560px; height: auto; }
.support-copy h2 { font-size: var(--heading-size); line-height: 1.04; letter-spacing: -.035em; }
.support-copy p { max-width: 480px; margin-top: 24px; font-size: 18px; line-height: 1.6; }
.support-copy .actions { margin-top: 28px; }
.support-copy .button { padding-inline: 27px; }

/* ============ MOMENTS ============ */
main > .testimonials-section { padding-block: 0; margin-top: var(--section-space); }
.testimonials-section .section-heading { margin-bottom: clamp(36px, 5vw, 64px); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; max-width: 1120px; margin-inline: auto; }
.testimonial-card {
  padding: 24px;
  border: 1px solid #e1e5e2; border-radius: 18px;
  background: linear-gradient(150deg, #fff, #fafbf9);
  box-shadow: 0 3px 7px #20232c04, 0 14px 30px -22px #20232c30;
  transition: border-color .18s, box-shadow .18s;
}
.testimonial-card:hover { border-color: #b8c6c1; box-shadow: 0 4px 9px #20232c08, 0 18px 34px -20px #20232c38; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.m-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #eef3f1; font-size: 20px; box-shadow: inset 0 0 0 1px #e2e9e6; }
.testimonial-author b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.testimonial-author small { font-size: 13px; color: var(--muted-2); }
.testimonial-card blockquote { margin: 18px 0 0; }
.testimonial-card .q { font-family: var(--serif); font-size: 21px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.testimonial-card blockquote p + p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: #4c5653; }

/* ============ PRICING ============ */
main > #pricing { padding-top: calc(var(--section-space) * 2); }
.pricing-copy { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto auto; column-gap: 80px; }
.pricing-copy .section-heading { display: contents; text-align: left; }
.pricing-copy h2 { grid-row: 1 / 3; font-size: var(--heading-size); line-height: 1.04; letter-spacing: -.035em; }
.pricing-copy .section-heading p { grid-column: 2; max-width: 500px; margin: 6px 0 0; }
.pricing-cta { grid-column: 2; justify-self: start; margin-top: 28px; }
.plan-slideshow { margin-top: 40px; }
.plan-posters { position: relative; height: 380px; }
.plan-poster {
  position: absolute; left: 50%; top: 50%;
  width: min(572px, 44%);
  transform: translate(-50%, -50%);
  transition: transform .7s var(--expo), opacity .4s ease-out;
}
.plan-poster[data-pos=center] { transform: translate(-50%, -50%); z-index: 3; }
.plan-poster[data-pos=left] { transform: translate(-133%, -50%) scale(.62) rotate(-2deg); z-index: 2; }
.plan-poster[data-pos=right] { transform: translate(33%, -50%) scale(.62) rotate(2deg); z-index: 2; }
.plan-select { position: absolute; inset: 0; z-index: 4; border: 0; background: transparent; border-radius: 28px; }
.plan-poster[data-pos=center] .plan-select { pointer-events: none; }
.plan-card {
  display: flex; flex-direction: column; gap: 10px;
  height: 350px; padding: 24px 28px;
  border-radius: 28px; background: var(--gradient-light);
  text-align: center;
  box-shadow: inset 0 1px 0 #ffffffb3, 0 20px 40px -26px #0e3a3e66;
}
.plan-card.grain::before { opacity: .15; }
.plan-poster[data-plan=solo] .plan-card { background: var(--gradient-cool); }
.plan-poster[data-plan=beta] .plan-card { background: linear-gradient(130deg, #e7dcc0, #efe9da 55%, #d9e3dc); }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; text-align: left; }
.plan-head h3 { font-size: 30px; letter-spacing: -.03em; }
.plan-price { display: grid; justify-items: end; }
.plan-price strong { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.plan-price span { margin-top: 4px; font-size: 12px; color: #4a5a58; }
.plan-line { font-size: 16px; color: #45524f; }
.plan-line b { color: var(--ink); font-weight: 600; }
.plan-art { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; padding: 4px 10px; }
.trial-art { display: grid; grid-template-columns: repeat(7, 34px); gap: 6px; }
.trial-art i { width: 34px; height: 34px; border-radius: 9px; background: #ffffffb3; box-shadow: 0 2px 4px #1d252414, inset 0 0 0 1px #ffffffe6; }
.trial-art i:nth-child(-n+5) { background: var(--ocean); box-shadow: 0 2px 4px #0e3a3e40; }
.trial-art i:nth-child(odd) { transform: rotate(-2deg); } .trial-art i:nth-child(3n) { transform: translateY(2px) rotate(3deg); }
.solo-art span, .lib-art span {
  padding: 6px 11px; border-radius: 9px;
  background: #ffffffc4; border: 1px solid #ffffffe6;
  font-size: 12.5px; color: #2f3a37;
  box-shadow: 0 2px 4px #1d252414;
}
.solo-art span:nth-child(odd), .lib-art span:nth-child(odd) { transform: rotate(-1.5deg); }
.solo-art span:nth-child(3n), .lib-art span:nth-child(3n) { transform: translateY(2px) rotate(2deg); }
.solo-art span:nth-child(8) { background: var(--ocean); color: #eef7f5; border-color: var(--ocean); }
.plan-foot { font-size: 15px; color: #45524f; }
.plan-foot b { font-family: var(--serif); font-weight: 400; font-size: 23px; color: var(--ink); }
.plan-note { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--muted-2); }

/* ============ FAQ ============ */


/* ============ FINALE ============ */


/* ============ RESPONSIVE ============ */
@media (max-width: 1199px) {
  .context-story, .context-story:not(.is-sticky-story) .story-chapter { gap: 48px; }
  .chapter-copy h3 { font-size: 28px; }
  .story-icon { width: 34px; height: 34px; }
  .chapter-description { margin-left: 48px; }
  .story-art { padding: 28px; }
  .quick-visual { height: 330px; padding: 20px; }
  .quick-steps h3 { font-size: 23px; }
  .voice-single { padding: 0 0 190px; }
  .voice-note { top: auto !important; bottom: 0 !important; width: 28%; }
  .note-ai { left: 0; } .note-questions { left: 36%; right: auto; } .note-rating { right: 0; }
  .voice-note::after { top: -22px; left: 0 !important; right: auto !important; width: 1px; height: 16px; }
  .section-heading.spread { grid-template-columns: 1.1fr 1fr; gap: 40px; }
  .benefit-panel { min-height: 480px; padding: 26px; }
  .availability-section { gap: 32px; }
  .availability-set li { height: 66px; font-size: 19px; }
}
@media (max-width: 1000px) {
  .availability-section { grid-template-columns: 1fr; }
  .availability-copy { max-width: 520px; margin-inline: auto; }
  .benefit-artwork { grid-template-columns: 1.4fr 1fr; }
}
@media (max-width: 900px) {
  .voice-workspace { height: 760px; }
  .voice-connections { display: none; }
}
@media (max-width: 800px) {
  .hero-copy h1 { white-space: normal; }
  .quick-steps { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: 56px; }
  .quick-steps > li { grid-row: auto; display: block; }
  .quick-visual { height: 340px; }
  .context-story:not(.is-sticky-story) .story-chapter { grid-template-columns: 1fr; gap: 28px; }
  .context-story:not(.is-sticky-story) .chapter-copy { grid-row: 2; }
  .story-chapters { gap: 88px; }
  .voice-single { padding: 0; }
  .voice-note { position: static; width: auto; margin-top: 24px; padding-left: 16px; border-left: 1px solid #c9d0cd; }
  .voice-note::after { display: none; }
  .voice-workspace { height: 820px; }
  .section-heading.spread { grid-template-columns: 1fr; gap: 20px; }
  .benefit-artwork { grid-template-columns: 1fr; }
  .benefit-panel { min-height: 0; }
  .support-story { grid-template-columns: 1fr; gap: 30px; }
  .support-copy { grid-row: 1; }
  .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-copy { display: block; }
  .pricing-copy .section-heading p { margin-top: 20px; }
  .pricing-cta { margin-top: 24px; }
  .plan-poster { width: min(520px, 70%); }
}
@media (max-width: 600px) {
  main > .home-intro { padding: 28px 16px var(--section-padding); }
  .hero-copy { margin-top: 5svh; }
  .hero-copy h1 { font-size: min(40px, 10.4vw); line-height: 1.06; }
  .hero-copy h1 br { display: none; }
  .hero-copy p { max-width: 380px; font-size: 15.5px; }
  .hero-actions { flex-direction: column; width: min(280px, 100%); }
  .hero-actions .button { min-height: 48px; font-size: 14px; }
  .hero-showcase { margin-top: 32px; }
  .hero-tabs { gap: 2px; }
  .hero-tabs button { padding: 10px 12px; font-size: 13px; }
  .statement-card { border-radius: 18px; aspect-ratio: 4 / 3.4; }
  .reply-statement h2 { font-size: clamp(15px, 6.4cqw, 30px); }
  .statement-line { white-space: normal; }
  .statement-typed { right: 0; white-space: pre-wrap; text-align: center; }
  .statement-typed.is-typing::after { display: none; }
  .quick-visual { height: 320px; }
  .chapter-copy h3 { font-size: 25px; }
  .story-icon { width: 30px; height: 30px; }
  .chapter-description { margin-left: 44px; }
  .story-art { padding: 22px 16px; border-radius: 22px; }
  .accounts-art { aspect-ratio: 1.05; min-height: 300px; padding: 0; }
  .section-heading.spread h3 { font-size: clamp(26px, 7vw, 30px); }
  .section-heading.spread p { font-size: 16px; }
  .budget-main { padding: 14px; }
  .availability-marquee { height: 84px; }
  .availability-set li { height: 58px; padding: 0 16px; border-radius: 14px; font-size: 17px; }
  .availability-banks li { width: 80px; }
  .availability-banks img { width: 46px; height: 28px; }
  /* one swipeable row instead of seven stacked cards; the next card peeks in */
  .testimonial-grid {
    display: flex; gap: 12px;
    margin-inline: -16px; padding: 4px 16px 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .testimonial-grid::-webkit-scrollbar { display: none; }
  .testimonial-card { flex: 0 0 84%; padding: 22px; scroll-snap-align: start; }
  main > .reply-statement { min-height: 0; padding: 40px 16px; }
  .plan-posters { height: 344px; overflow: hidden; }
  .plan-poster { width: 84%; }
  .plan-card { height: 320px; padding: 18px; border-radius: 22px; }
  .plan-head h3 { font-size: 24px; }
  .plan-price strong { font-size: 32px; }
  .trial-art { grid-template-columns: repeat(7, 26px); }
  .trial-art i { width: 26px; height: 26px; }
  .solo-art span, .lib-art span { font-size: 11px; padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .statement-card { transform: none; }
  .availability-track { animation: none; }
  .quick-visual * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .q-pointer { display: none; }
  .story-step { opacity: 1; }
}

/* ============ PHONES: A SIMPLER PAGE ============
   On a computer the page shows the app throughout and explains each part. On
   a phone it shows the app once (the hero) and says each idea once, briefly:
   repeated sections, second paragraphs and most demos are hidden here, never
   removed, so the computer page is untouched. No copy is rewritten; the
   privacy points are the claims register's own wording. */
.trust-list, .phone-shot { display: none; }
@media (max-width: 600px) {
  .hero-tabs { display: none; }
  .hero-note { margin-top: 16px; }

  /* the teal card repeats the hero's sentence; the product story repeats
     how-it-works */
  main > .reply-statement, main > #product { display: none; }

  /* how it works: a numbered list, number beside each step */
  #how-it-works .section-heading p { display: none; }
  .quick-visual { display: none; }
  .quick-steps { gap: 0; counter-reset: step; max-width: none; }
  .quick-steps > li {
    counter-increment: step;
    display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px;
    padding: 18px 0; border-top: 1px solid #0e14131a; text-align: left;
  }
  .quick-steps > li:last-child { border-bottom: 1px solid #0e14131a; }
  .quick-steps > li::before {
    content: counter(step); grid-row: 1 / span 2;
    display: grid; place-items: center; width: 36px; height: 36px;
    border-radius: 50%; background: #e8f0ed; color: var(--ocean);
    font-family: var(--serif); font-size: 18px;
  }
  .quick-steps h3 { grid-column: 2; grid-row: 1; margin: 4px 0 4px; font-size: 21px; }
  .quick-steps p { grid-column: 2; grid-row: 2; margin: 0; max-width: none; font-size: 15px; line-height: 1.5; }

  /* Health: the rating, then three one-line points */
  .voice-note { margin-top: 0; padding: 14px 0 14px 16px; }
  .voice-note + .voice-note { margin-top: 0; }
  .voice-note p { display: none; }
  .voice-note h3 { font-size: 19px; }

  /* Budget: what it does in one line each; review shown by its two notes */
  #budget > .section-heading { display: none; }
  .benefit-artwork .budget-main, .benefit-artwork .budget-detail { display: none; }
  /* the review spread says less than the rest of the page; phones skip it */
  .benefit-spread[aria-labelledby=review-h] { display: none; }
  .benefit-spread { padding-bottom: 0; }
  .benefit-artwork { gap: 0; }
  .benefit-spread { padding-bottom: 40px; }
  .benefit-spread .section-heading { margin-bottom: 20px; }

  /* banks: one rail of logos; the waitlist button waits for pricing */
  .availability-types { display: none; }
  .availability-copy > .button { display: none; }

  /* every section centred, the way the hero and headings already are */
  .benefit-spread .section-heading.spread, .support-copy { text-align: center; }
  .support-copy .actions { justify-content: center; }

  /* privacy: five short points instead of the paragraph */
  .privacy-art { display: none; }
  .support-copy > p { display: none; }
  .trust-list { display: grid; gap: 12px; width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 0; list-style: none; text-align: left; }
  .trust-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink); }
  .trust-list .icon { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #e8f0ed; color: var(--ocean); }

  /* stills from the app, each under the line it backs up: a soft panel
     with the app's card whole inside it, never cut off */
  .phone-shot { display: block; margin: 28px 0 0; padding: 14px; border-radius: 24px; overflow: hidden; }
  .phone-shot.grain::before { opacity: .18; }
  .shot-window { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -22px #0e3a3e59; }
  .phone-shot .plat { background: transparent; }
  .phone-shot .ah, .phone-shot .obe { padding: 0; }
  .phone-shot .mn { padding: 0 !important; }
  .phone-shot .dvx-read { margin: 0; border: 0; }

  /* how it works: one still under each step, full width */
  .quick-steps .step-shot { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; border-radius: 20px; background: linear-gradient(125deg, #cfe1dc, #e6e9e4 55%, #e3e6d6); }
  .step-shot .shot-window { border-radius: 14px; }
  /* 1 · the accounts list: its first group, whole; no search or buttons */
  .shot-accounts .ah-tools, .shot-accounts .ah-g ~ .ah-g { display: none; }
  .shot-accounts .ah-card { margin: 0; border: 0; box-shadow: none; }
  /* 2 · what OWN read: the receipt alone, without its page's card around it */
  .shot-read .dvx-card { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
  /* 3 · Atlas: the whole exchange, composer included */
  .shot-ask .plat-fit { width: auto; }
  .shot-ask .ar { margin: 0; height: auto; border: 0; }
  .shot-ask [data-step="wait"] { display: none; }

  /* Health: the dashboard's Financial Health card stands in for the stage */
  .voice-single .voice-workspace { display: none; }
  .shot-health { margin: 0 0 8px; background: linear-gradient(125deg, #e6e2d4, #efece4 55%, #e3e6dc); }
  .shot-health .sbd-page, .shot-health .sbd-row { display: block; padding: 0; margin: 0; gap: 0; }
  .shot-health .sbd-card { margin: 0; border: 0; box-shadow: none; }

  /* budget: the summary card whole; the toolbar and groups below it hidden */
  .shot-budget { margin-top: 4px; background: radial-gradient(ellipse at 0 100%, #5f8b80, transparent 60%), radial-gradient(ellipse at 100% 100%, #9fb6bf, transparent 60%), linear-gradient(130deg, #d6c9a0, #e7e1cf 55%, #ece7db); }
  .shot-budget .obe-pace ~ * { display: none; }
  .shot-budget .obe-pace { margin: 0; border: 0; box-shadow: none; }

  /* pricing: centred copy, the Solo card alone and still (site.js stops
     the carousel here), then the button and the tax note */
  main > #pricing { display: flex; flex-direction: column; align-items: center; padding-top: var(--section-padding); text-align: center; }
  #pricing .pricing-copy, #pricing .plan-slideshow { display: contents; }
  #pricing .section-heading { display: block; order: 1; margin: 0; text-align: center; }
  #pricing .section-heading p { max-width: 330px; margin: 16px auto 0; }
  #pricing .plan-posters { order: 2; width: 100%; height: auto; margin-top: 28px; overflow: visible; }
  .plan-poster { position: static; width: auto; transform: none !important; }
  .plan-poster:not([data-plan=solo]), .plan-select { display: none; }
  .plan-card { height: auto; gap: 16px; padding: 24px 22px 26px; }
  .plan-head h3 { font-size: 26px; }
  .plan-art { padding: 2px 0; gap: 8px; }
  .solo-art span { transform: none !important; padding: 6px 10px; font-size: 12.5px; }
  .plan-foot { font-size: 14px; line-height: 1.4; }
  .plan-foot b { font: inherit; font-weight: 600; color: var(--ink); }
  /* the page's last call to action is the primary button, as in the hero */
  #pricing .pricing-cta { order: 3; min-width: 240px; min-height: 48px; margin-top: 24px; background: var(--ocean); color: #f4f4f1; box-shadow: 0 1px 2px #0e3a3e30, 0 6px 14px -8px #0e3a3e99, inset 0 1px 0 #ffffff26; }
  #pricing .plan-note { order: 4; margin-top: 16px; }

  /* everyday moments: the question and where it's answered, nothing more */
  .testimonial-card blockquote p + p { display: none; }
  .testimonial-card .q { font-size: 20px; }
}