* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: #fff; color: var(--color-ink); font-family: var(--font-family); font-size: 16px; line-height: 1.5; font-synthesis: none; }
h1,h2,h3,p,figure,blockquote { margin: 0; }
h1,h2,h3 { font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; }
button,summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button,a,summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 5px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.site-shell { width: min(var(--page-width), calc(100% - 80px)); margin-inline: auto; }
.content-container { width: min(var(--content-width), calc(100% - 2 * var(--panel-padding))); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 12px 20px; background: #fff; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { min-height: 120px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.site-header__left { display: flex; gap: 60px; align-items: center; }
.site-header nav { display: flex; gap: 32px; align-items: center; font-weight: 500; }
.site-header nav a { display: flex; align-items: center; white-space: nowrap; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-header__actions { display: flex; gap: 12px; }
.button { min-height: 60px; padding: 10px 32px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 100px; background: var(--color-cyan); color: #fff; font-size: 18px; line-height: 28px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: filter 150ms; }
.button:hover { filter: brightness(.94); }
.button--small { min-height: 48px; padding-inline: 24px; font-size: 16px; line-height: 24px; }
.button--dark { background: var(--color-ink); }
.button--phone { background: #fff; color: var(--color-ink); border: 1px solid var(--color-line); }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--color-muted); }
.eyebrow::before { content: ''; width: 15px; height: 6px; flex-shrink: 0; border-radius: 100px; background: var(--color-orange); }
.eyebrow--pill { display: inline-flex; min-height: 30px; padding: 0 16px; border: 1px solid var(--color-line); border-radius: 1000px; background: #fff; font-weight: 600; }
.decoration { position: absolute; max-width: none; object-fit: cover; pointer-events: none; user-select: none; }
.hero { position: relative; isolation: isolate; min-height: 900px; overflow: hidden; border-radius: var(--radius-panel); background: var(--color-surface); padding: 86px 24px 80px; display: flex; flex-direction: column; align-items: center; }
.hero__background { z-index: -1; left: calc(50% - 853px); top: 310px; width: 1705px; height: 1136px; opacity: .8; filter: blur(40px); }
.hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.hero h1 { margin-top: 24px; font-size: clamp(48px, 3.75vw, 72px); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.hero h1 > span { display: flex; align-items: center; justify-content: center; }
.hero__headline-row { gap: 16px; white-space: nowrap; }
.hero__description { max-width: 1100px; margin-top: 24px; font-size: 20px; line-height: 30px; color: var(--color-muted); }
.hero__content > .button { margin-top: 40px; }
.wave { display: inline-block; position: relative; flex: 0 0 auto; vertical-align: middle; }
.wave--title { width: 157px; height: 46px; }
.wave--card { width: 119px; height: 30.039px; }
.wave__bar { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 2px; background: var(--color-orange); }
.voice-card { width: 483px; margin-top: 66px; transform: translateX(-.5px); border-radius: var(--radius-panel); background: rgb(255 255 255 / .5); box-shadow: 0 16px 32px rgb(0 0 0 / .12); padding: 32px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.voice-card__top { display: flex; align-items: center; justify-content: space-between; }
/* Figma OUTSIDE strokes leave the image/control dimensions unchanged. */
.record-control { width: 48px; height: 48px; border: 0; box-shadow: 0 0 0 4px rgb(0 0 0 / .05); border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; }
.record-control span { width: 20px; height: 20px; border-radius: 4px; background: #e1422a; }
.record-control[aria-pressed="true"] span { border-radius: 50%; }
.voice-card__avatar { position: relative; display: block; width: 48px; height: 48px; overflow: hidden; box-shadow: 0 0 0 2px rgb(0 0 0 / .08); border-radius: 50%; background: #fff; }
.voice-card__avatar img { position: absolute; left: -30px; top: 0; width: 104px; height: 67px; object-fit: cover; }
.voice-card__messages { display: grid; align-items: center; margin-top: 48px; font-size: 20px; line-height: 30px; font-weight: 600; text-align: center; }
.voice-card__message { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 350ms ease, transform 350ms ease, visibility 0s linear 350ms; }
.voice-card__message.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.voice-card__message span { display: block; }
.voice-card__message span:nth-child(1) { color: #a4a7ae; }
.voice-card__message span:nth-child(2) { color: #717680; }
.benefits { padding-block: 60px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.benefit { display: flex; flex-direction: column; gap: 16px; }
.benefit h2,.step-card h3,.audience-card h3 { font-size: 20px; line-height: 30px; }
.benefit p,.step-card p,.audience-card p { margin-top: 8px; color: var(--color-muted); font-size: 16px; line-height: 24px; }
.how-it-works { display: flex; flex-direction: column; align-items: center; }
.section-divider { width: 100%; overflow: hidden; height: 1px; }
.story { margin-top: 99px; font-size: clamp(32px, 2.5vw, 48px); line-height: 60px; letter-spacing: -.02em; color: var(--color-muted); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.story__line { display: flex; justify-content: center; align-items: center; }
.story__line img { flex: 0 0 auto; }
.ink { color: var(--color-ink); }
.record-badge { margin-left: 8px; height: 60px; padding-inline: 16px; border-radius: 100px; background: var(--color-peach); display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); }
.steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 60px; }
.step-card { position: relative; border: 1px solid var(--color-line); border-radius: var(--radius-panel); overflow: hidden; display: flex; flex-direction: column; min-height: 790px; background: #fff; }
.step-card__label { position: absolute; top: 39px; left: 39px; z-index: 1; background: var(--color-peach); border-radius: 100px; padding: 2px 16px; font-size: 14px; line-height: 20px; font-weight: 600; color: #9a5200; }
.step-card__visual { height: 598px; flex-shrink: 0; position: relative; }
.step-phone { position: absolute; left: 50%; transform: translateX(-50%); object-fit: cover; }
.step-phone--one { top: 81px; left: calc(50% + .434px); width: 298.868px; height: 528px; }
.step-phone--two { top: 103px; left: calc(50% + .5px); width: 223px; height: 484px; box-shadow: 0 0 0 6px var(--color-ink); border-radius: 24px; }
.step-phone--three { top: 95px; width: 230px; height: 498px; box-shadow: 0 0 0 6px var(--color-ink); border-radius: 24px; }
.step-card__copy { margin-top: auto; padding: 40px 39px 39px; }
.security-note { display: flex; align-items: center; gap: 8px; padding: 12px 24px; margin-top: 80px; color: #414651; background: rgb(67 170 26 / .07); border-radius: 8px; font-size: 16px; line-height: 24px; }
.security-note strong { font-weight: 600; }
.banner { position: relative; isolation: isolate; overflow: hidden; background: var(--color-blue-light); border-radius: var(--radius-panel); padding: 100px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 50px; }
.banner__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.banner__copy > p { color: var(--color-muted); font-size: 20px; line-height: 30px; }
.banner__fade { position: absolute; inset: 0 auto 0 0; width: 61%; background: linear-gradient(90deg,#edfafc,transparent); z-index: -1; pointer-events: none; }
.price-banner { margin-top: 100px; }
.price-banner__background { z-index: -2; left: calc(50% - 922px); top: -525px; width: 1850px; height: 1395px; opacity: .6; mix-blend-mode: darken; filter: blur(30px); }
.price-banner__avatar { display: block; position: relative; width: 82px; height: 82px; box-shadow: 0 0 0 4px rgb(0 0 0 / .08); border-radius: 24px; overflow: hidden; background: #fff; }
.price-banner__avatar img { position: absolute; top: 0; left: -52px; width: 164px; height: 109px; object-fit: cover; }
.price-banner h2 { display: flex; align-items: center; gap: 8px; font-size: 48px; line-height: 60px; letter-spacing: -.02em; }
.price { display: inline-flex; align-items: baseline; background: #b9eaf2; padding-inline: 16px; border-radius: 100px; color: #0b6f7f; white-space: nowrap; }
.price > span { font-size: 30px; line-height: 38px; font-weight: 600; letter-spacing: 0; }
.section-stack { margin-top: 40px; display: flex; flex-direction: column; gap: 40px; }
.panel { padding: 100px var(--panel-padding); border-radius: var(--radius-panel); }
.two-column { display: grid; grid-template-columns: minmax(0,574fr) minmax(0,616fr); gap: 68px; border: 1px solid var(--color-line); }
.section-heading { display: flex; flex-direction: column; gap: 24px; }
.section-heading h2 { font-size: clamp(32px,2.5vw,48px); line-height: 1.25; letter-spacing: -.02em; }
.section-heading > p:not(.eyebrow) { font-size: 20px; line-height: 30px; color: var(--color-muted); }
.feature-section__copy { display: flex; flex-direction: column; gap: 60px; }
.feature-list { width: min(553px,100%); display: flex; flex-direction: column; gap: 12px; }
.feature-row { display: flex; align-items: center; gap: 16px; padding: 16px; min-height: 66px; border-radius: var(--radius-item); background: var(--color-soft); }
.feature-row > img,.feature-detail summary > img { flex: 0 0 auto; }
.feature-list h3 { font-size: 20px; line-height: 30px; }
.feature-section { transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.feature-detail { border-radius: var(--radius-item); background: #fff6ec; padding: 24px 16px; transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.feature-detail:not([open]) { background: var(--color-soft); padding-block: 16px; }
.feature-detail summary { position: relative; padding-left: 48px; min-height: 30px; }
.feature-detail summary > img { position: absolute; top: 0; left: 0; }
.feature-detail > p { margin-top: 8px; margin-left: 48px; font-size: 16px; line-height: 24px; color: var(--color-muted); }
@media (hover: hover) and (pointer: fine) {
  .feature-section:hover { border-color: rgb(255 136 0 / 24%); box-shadow: 0 16px 40px rgb(24 29 39 / 6%); transform: translateY(-2px); }
  .feature-detail:hover { box-shadow: 0 8px 20px rgb(24 29 39 / 6%); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-section,.feature-detail { transition: none; }
}
.icon-slot { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; }
.feature-visual { position: relative; aspect-ratio: 1; border-radius: var(--radius-panel); background: var(--color-peach); overflow: hidden; }
.feature-visual__background { width: 856px; height: 482px; top: 241px; left: -105px; filter: blur(20px); mix-blend-mode: multiply; }
.feature-visual__phone { position: absolute; height: 94.1558%; width: 54.7078%; top: 2.922%; left: 50%; transform: translateX(-50%); object-fit: cover; }
.audience-section { background: linear-gradient(131.088deg,#f5f5f5 7.668%,rgb(245 245 245 / .5) 100%); }
.audience-section__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.text-link { display: flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; }
.audience-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 26px; }
.audience-card { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: #fff; }
.audience-card__image { height: 300px; position: relative; overflow: hidden; background: var(--color-ink); }
.audience-photo { position: absolute; object-fit: cover; max-width: none; }
.audience-photo--one { width: 100.813%; height: auto; left: -.163%; top: -42px; }
.audience-photo--two { width: 101.789%; height: auto; left: -.976%; top: -59px; }
.audience-photo--three { width: 100%; height: auto; left: 0; top: -46px; }
.audience-photo--four { width: 100.813%; height: auto; left: 0; top: -48px; }
.audience-card__copy { padding: 40px; min-height: 190px; }
.about-section { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
.about-section__background { z-index: -1; width: 1705px; height: 1136px; top: 179px; left: 660px; opacity: .8; filter: blur(50px); }
.about-section__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.about-section__intro { display: flex; flex-direction: column; gap: 48px; }
.about-section__description { display: flex; flex-direction: column; gap: 16px; color: var(--color-muted); font-size: 20px; line-height: 30px; }
.about-section__description .lead { font-size: 24px; line-height: 32px; font-weight: 500; }
.partners > p { margin-bottom: 16px; color: var(--color-muted); font-weight: 600; }
.partners ul { display: flex; gap: 16px; }
.partners li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--color-line); border-radius: 12px; background: #fff; }
.about-photo { position: relative; aspect-ratio: 1; border-radius: var(--radius-panel); overflow: hidden; background: var(--color-peach); }
.about-photo img { position: absolute; width: 152.435%; height: 100%; left: -15.584%; top: 0; object-fit: cover; }
.faq-section .faq-section__intro { font-size: 18px; line-height: 28px; }
.faq-row,.faq-detail { padding-block: 40px; border-bottom: 1px solid var(--color-line); }
.faq-row,.faq-detail summary { display: flex; gap: 8px; align-items: center; }
.faq-list h3 { font-size: 20px; line-height: 30px; flex: 1; }
.faq-list img { flex: 0 0 auto; }
.faq-detail summary { align-items: flex-start; }
.faq-detail p { margin-top: 8px; padding-right: 32px; color: var(--color-muted); font-size: 16px; line-height: 24px; }
.closing-banner { min-height: 500px; }
.closing-banner__background { z-index: -1; width: 2366px; height: 1784px; left: calc(50% - 931px); top: -747px; transform: scaleX(-1); opacity: .6; filter: blur(30px); mix-blend-mode: darken; }
.closing-banner .banner__fade { z-index: -2; bottom: auto; width: calc(100% * 1011 / 1660); height: 464px; }
.closing-banner h2 { font-weight: 600; font-size: clamp(40px,3.125vw,60px); line-height: 1.2; letter-spacing: -.02em; }
.site-footer { width: min(1258px, calc(100% - 2 * var(--panel-padding))); display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 120px; font-weight: 500; }
.site-footer__brand { display: flex; align-items: center; gap: 60px; }
.site-footer__brand p { color: var(--color-muted); }
.site-footer__legal { display: flex; gap: 16px; text-decoration: underline; }
html.motion-paused .wave__bar { animation-play-state: paused; }
@media (max-width: 1550px) {
  .site-header__left { gap: 30px; }
  .site-header nav { gap: 20px; }
  .two-column { gap: 36px; }
  .story { font-size: 36px; line-height: 52px; }
  .story__line > img { width: 52px; height: 52px; }
  .price-banner h2 { font-size: 40px; }
  .partners li { gap: 8px; padding: 8px; font-size: 14px; }
  .partners li img { max-width: 48px; height: auto; }
  .site-footer__brand { gap: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .voice-card__message { transition: none; transform: none; }
}