/* Shared interaction styles; desktop appearance remains the reference. */
[hidden] { display: none !important; }
.menu-toggle,.mobile-menu-actions,.story-variant--mobile,.wave--mobile,.feature-icon--mobile,.mobile-line-break { display: none; }
.story-variant--desktop { display: flex; flex-direction: column; gap: 4px; }
.feature-detail { min-height: 66px; }
.feature-detail summary > .feature-icon { position: absolute; top: 0; left: 0; width: 32px; height: 32px; display: grid; place-items: center; }
.feature-detail summary { cursor: pointer; }
.feature-detail:not([open]) summary > .feature-icon { top: 50%; transform: translateY(-50%); }
.feature-detail summary h3 { overflow-wrap: break-word; }
.feature-icon { color: var(--color-orange); }
.feature-detail:not([open]) .feature-icon { color: #9ca3af; }
.feature-icon > span { width: var(--icon-width); height: var(--icon-height); background-color: currentColor; mask: var(--icon-image) center / contain no-repeat; }
.feature-icon > .feature-icon--mobile { display: none; }
.faq-detail[open] summary > img { transform: rotate(180deg); }
.audience-photo--one { min-height: calc(100% + 42px); }
.audience-photo--two { min-height: calc(100% + 59px); }
.audience-photo--three { min-height: calc(100% + 46px); }
.audience-photo--four { min-height: calc(100% + 48px); }

/* Tablet adaptation: Figma supplies desktop 1920 and mobile 402 only. */
@media (max-width: 1199px) {
  :root { --panel-padding: 48px; }
  .site-shell { width: calc(100% - 48px); }
  .site-header { position: relative; min-height: 96px; flex-wrap: wrap; }
  .site-header__left { flex-wrap: wrap; flex: 1; }
  .site-header__actions { display: none; }
  .menu-toggle { width: 48px; height: 48px; padding: 10px; border: 0; border-radius: 50%; background: var(--color-ink); display: grid; place-items: center; cursor: pointer; }
  .js .site-header nav { display: none; position: absolute; z-index: 5; top: calc(100% - 8px); left: 0; right: 0; padding: 24px; flex-direction: column; align-items: stretch; gap: 20px; border: 1px solid var(--color-line); border-radius: 16px; background: #fff; box-shadow: 0 16px 32px rgb(0 0 0 / .12); }
  .js .site-header.is-menu-open nav { display: flex; }
  .js .mobile-menu-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero h1 { font-size: 48px; }
  .hero__headline-row { white-space: normal; flex-wrap: wrap; gap: 8px; }
  .story { font-size: 30px; line-height: 40px; }
  .story__line { flex-wrap: wrap; }
  .story__line > img { width: 40px; height: 40px; }
  .record-badge { height: 40px; }
  .price-banner h2 { flex-wrap: wrap; justify-content: center; font-size: 36px; }
  .partners ul { flex-wrap: wrap; }
  .site-footer { width: calc(100% - 2 * var(--panel-padding)); flex-wrap: wrap; padding-block: 24px; }
  .site-footer__brand { flex-wrap: wrap; gap: 16px; }
}
@media (min-width: 768px) and (max-width: 1000px) {
  :root { --panel-padding: 32px; }
  .steps { grid-template-columns: 1fr; max-width: 580px; }
  .step-card { min-height: 740px; }
  .two-column { grid-template-columns: 1fr; gap: 32px; }
  .feature-section { grid-template-areas: 'heading' 'visual' 'list'; }
  .feature-section__copy { display: contents; }
  .feature-section .section-heading { grid-area: heading; }
  .feature-visual { grid-area: visual; width: min(100%, 616px); justify-self: center; }
  .feature-list { grid-area: list; width: 100%; }
  .about-photo { width: min(100%, 616px); justify-self: center; }
  .about-section__copy { gap: 32px; }
  .about-section__background { left: 0; top: auto; bottom: -250px; }
}

/* Mobile layout from Figma Dev Mode 144:932, 402 × 9297. */
@media (max-width: 767px) {
  :root { --panel-padding: 16px; }
  body { padding-block: 2px; }
  .site-shell { width: 100%; }
  .content-container { width: calc(100% - 32px); }
  .site-header { padding: 24px 16px; min-height: 96px; }
  .site-header__left { gap: 16px; }
  .site-header nav { flex-wrap: wrap; }
  .js .site-header nav { left: 16px; right: 16px; }
  .button { min-height: 52px; max-width: 100%; }
  .button--small { min-height: 48px; }
  .hero { min-height: 0; padding: 32px 18px; border-radius: 0; }
  .hero__content { max-width: 365px; }
  .eyebrow--pill { font-size: 14px; line-height: 20px; }
  .hero h1 { margin-top: 8px; font-size: 36px; line-height: 44px; }
  .hero h1 > span,.hero__opening,.hero__subject { display: block; }
  .hero h1 .hero__headline-row { display: contents; }
  .wave--title,.wave--desktop,.desktop-break { display: none; }
  .wave--mobile { display: inline-block; }
  .hero__description { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .hero__content > .button { margin-top: 48px; }
  .hero__background { width: 522px; height: 348px; left: -16px; top: auto; bottom: -141px; }
  .voice-card { width: calc(100% + 13px); max-width: 379px; margin-top: 48px; transform: none; padding: 24px; }
  .voice-card blockquote { font-size: 18px; line-height: 28px; }
  .benefits { width: 100%; grid-template-columns: 1fr; gap: 32px; padding: 32px 16px; border-bottom: 1px solid var(--color-line); }
  .how-it-works { padding: 40px 16px; gap: 40px; }
  .section-divider,.story-variant--desktop { display: none; }
  .story { width: calc(100% + 16px); margin: 0; font-size: 20px; line-height: 30px; letter-spacing: 0; }
  .story-variant--mobile { display: flex; flex-direction: column; width: 100%; }
  .story__line { display: flex; flex-wrap: wrap; align-items: center; }
  .story__line:first-child { display: block; width: calc(100% - 16px); align-self: center; }
  .story__line > img { width: 30px; height: 30px; }
  .record-badge { height: 30px; padding-inline: 12px; margin-left: 4px; }
  .steps { width: 100%; margin: 0; grid-template-columns: 1fr; gap: 16px; }
  .step-card { min-height: 500px; }
  .step-card__label { top: 15px; left: 15px; }
  .step-card__visual { height: 340px; }
  .step-phone--one { width: 163px; height: 288px; top: 54px; left: calc(50% + .5px); }
  .step-phone--two,.step-phone--three { width: 115px; height: 249px; left: calc(50% - .5px); border-radius: 16px; box-shadow: 0 0 0 3px var(--color-ink); }
  .step-phone--two { top: 74px; }
  .step-phone--three { top: 66px; }
  .step-card__copy { padding: 24px 23px 23px; }
  .security-note { margin: 0; width: 100%; gap: 24px; }
  .security-note > img { flex-shrink: 0; }
  .banner { border-radius: 0; gap: 48px; padding: 60px 16px; }
  .price-banner { margin-top: 0; padding-inline: 38px; }
  .price-banner .banner__copy { width: 100%; max-width: 325px; }
  .price-banner__avatar { width: 60px; height: 60px; }
  .price-banner__avatar img { width: 120px; height: 80px; left: -37px; }
  .price-banner h2 { flex-direction: column; flex-wrap: nowrap; gap: 8px; font-size: 24px; line-height: 32px; letter-spacing: 0; }
  .price > span { font-size: 24px; line-height: 32px; font-weight: 500; }
  .banner__copy > p { font-size: 16px; line-height: 24px; }
  .banner__fade { display: none; }
  .price-banner__background,.closing-banner__background { width: 852px; height: 643px; left: calc(50% - 536px); transform: none; }
  .price-banner__background { top: calc(50% - 325px); }
  .closing-banner__background { top: calc(50% - 345px); }
  .section-stack { margin: 0; gap: 0; }
  .panel { border: 0; border-radius: 0; padding: 40px 16px; }
  .two-column { grid-template-columns: 1fr; gap: 32px; }
  .section-heading { gap: 16px; }
  .section-heading h2 { font-size: 30px; line-height: 38px; letter-spacing: 0; }
  .section-heading > p:not(.eyebrow) { font-size: 16px; line-height: 24px; }
  .feature-section { grid-template-areas: 'heading' 'visual' 'list'; gap: 16px; }
  .feature-section__copy { display: contents; }
  .feature-section .section-heading { grid-area: heading; margin-bottom: 16px; }
  .feature-visual { grid-area: visual; }
  .feature-visual__phone { width: 51.351351%; height: 88.648649%; top: 50%; transform: translate(-50%,-50%); }
  .feature-list { grid-area: list; width: 100%; }
  .feature-detail,.feature-detail:not([open]) { padding: 12px 16px; min-height: 52px; }
  .feature-detail summary { padding-left: 40px; min-height: 28px; }
  .feature-detail summary > .feature-icon { width: 24px; height: 24px; }
  .feature-icon > .feature-icon--desktop { display: none; }
  .feature-icon > .feature-icon--mobile { display: block; }
  .feature-list h3 { font-size: 18px; line-height: 28px; }
  .feature-detail > p { margin-left: 40px; font-size: 14px; line-height: 20px; }
  .audience-section { background: var(--color-soft); }
  .audience-section__heading { flex-direction: column; gap: 16px; align-items: flex-start; }
  .audience-grid { margin-top: 32px; grid-template-columns: 1fr; gap: 16px; }
  .audience-card__image { height: 200px; }
  .audience-card__copy { padding: 24px; min-height: 0; }
  .audience-card:nth-child(-n+2) p { font-size: 14px; line-height: 20px; }
  .audience-photo--one { width: 100.815217%; left: -.271739%; top: -12px; }
  .audience-photo--two { width: 103.804348%; left: -1.630435%; top: -38px; }
  .audience-photo--three { width: 101.902174%; left: -.543478%; top: -38px; }
  .audience-photo--four { width: 102.717391%; left: -2.173913%; top: -17px; }
  .audience-photo--one { min-height: calc(100% + 12px); }
  .audience-photo--two,.audience-photo--three { min-height: calc(100% + 38px); }
  .audience-photo--four { min-height: calc(100% + 17px); }
  .about-section__copy,.about-section__intro { gap: 32px; }
  .about-section__description { font-size: 20px; line-height: 30px; }
  .partners ul { gap: 8px; flex-wrap: wrap; }
  .partners li { gap: 12px; padding: 12px; font-size: 14px; line-height: 20px; }
  .partners li:first-child img { width: 42px; height: 42px; }
  .partners li:last-child img { width: 46px; height: 42px; }
  .about-photo img { width: 154.594595%; height: 101.351351%; left: -15.135135%; }
  .about-section__background { width: 669px; height: 446px; top: 785px; left: calc(50% - 334.5px); }
  .faq-section .section-heading { gap: 16px; }
  .faq-section .section-heading > .faq-section__intro { font-size: 18px; line-height: 28px; margin-top: 16px; }
  .faq-section__intro .desktop-break { display: none; }
  .faq-detail { padding-block: 24px; }
  .faq-detail:not([open]) summary { align-items: center; }
  .faq-list h3 { font-size: 18px; line-height: 28px; }
  .closing-banner { min-height: 0; }
  .closing-banner h2 { font-size: 24px; line-height: 32px; letter-spacing: 0; }
  .mobile-line-break { display: inline; }
  .site-footer { width: 100%; min-height: 0; padding: 32px 16px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer__brand { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer__brand p { font-size: 16px; line-height: 24px; }
  .site-footer__legal { flex-wrap: wrap; }
}
@media (max-width: 374px) {
  .hero h1 { font-size: 32px; line-height: 40px; }
  .eyebrow--pill { padding-inline: 10px; gap: 6px; font-size: 12px; }
  .story { font-size: 18px; }
  .price-banner { padding-inline: 16px; }
  .mobile-menu-actions .button { padding-inline: 16px; }
}