/* VOCEN / speaking as a specimen. Brand tokens live in vocen.css. */
.landing .nav { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
.landing .nav__in { height: 80px; }
.landing .nav__links { gap: 28px; }
.landing .nav__links .nav__cta { color: var(--on-ink); border-radius: 8px; }
.landing .brand__word { font-size: 19px; letter-spacing: .12em; }
.landing .btn { border-radius: 8px; }
.landing .band { padding-block: clamp(80px, 9vw, 120px); }
.landing .hero { padding-top: 32px; padding-bottom: 0; }
.landing .hero__grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.js-motion .landing .hero .rv { opacity: 1; transform: none; }
.landing .hero__copy { animation: speaking-entrance .6s var(--ease) both; }
.landing .specimen { animation: speaking-entrance .6s var(--ease) .1s both; }
@keyframes speaking-entrance { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero__eyebrow { display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; margin: 0; color: var(--tx-2); }
.hero__signal { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.landing .hero h1 { font-size: clamp(64px, 6.9vw, 88px); line-height: .98; letter-spacing: -.045em; font-weight: 400; margin-top: 24px; }
.landing .hero h1 em { color: var(--accent); white-space: nowrap; }
.landing .hero .deck { margin-top: 25px; max-width: 41ch; font-size: 17px; line-height: 1.6; }
.landing .hero__acts { margin-top: 26px; gap: 24px; align-items: center; }
.landing .hero__acts .btn { font-size: 14px; padding-inline: 20px; min-height: 52px; }
.hero__link { font-size: 14px; display: inline-flex; gap: 12px; align-items: center; padding-block: 14px; }
.hero__link span { font-size: 20px; transition: transform .2s var(--ease); }
.hero__link:hover span { transform: translate(3px,3px); }
.landing .hero__fine { font-size: 12px; margin-top: 16px; }
.hero__bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); margin-top: 32px; padding-block: 16px; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; color: var(--tx-3); }
.hero__bottom > span:first-child { color: var(--tx-1); }
.hero__bottom a span { margin-left: 12px; }
.hero__bottom a:hover { color: var(--accent); }
.specimen { min-width: 0; }
.specimen__caption { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: .075em; margin-bottom: 14px; color: var(--tx-2); }
.specimen__caption > span:last-child { font-family: var(--sans); font-size: 23px; line-height: 1; color: var(--accent); }
.specimen__body { background: var(--ink); border: 1px solid var(--ink); border-radius: 16px; overflow: hidden; color: var(--on-ink); }
.specimen__tabs { display: flex; border-bottom: 1px solid var(--line-ink); padding-inline: 22px; gap: 22px; }
.specimen__tabs button { padding: 18px 0 16px; min-height: 52px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--on-ink-2); font-size: 12px; cursor: pointer; transition: color .2s, border-color .2s; }
.specimen__tabs button:hover { color: var(--on-ink); }
.specimen__tabs button[aria-selected="true"] { color: var(--on-ink); border-bottom-color: var(--accent-ink); }
.specimen__tabs button:focus-visible { outline-color: var(--accent-ink); outline-offset: 4px; }
.specimen__prompt { padding: 20px 26px; }
.specimen__meta { display: flex; justify-content: space-between; color: var(--on-ink-2); font-family: var(--mono); font-size: 10px; letter-spacing: .07em; margin: 0; }
.specimen__meta span:last-child { font-size: 9px; border: 1px solid var(--track-ink); border-radius: 4px; padding: 2px 6px; }
.specimen__question { font-family: var(--serif); font-size: clamp(24px,2.3vw,29px); letter-spacing: -.02em; line-height: 1.15; margin: 20px 0 16px; min-height: 67px; max-width: 24ch; }
.specimen__voice { display: flex; height: 32px; gap: 5px; align-items: center; margin: 8px 0 20px; overflow: hidden; }
.specimen__voice span { background: var(--accent-ink); width: 3px; flex: 1; max-width: 4px; border-radius: 4px; height: 12%; }
.specimen__voice span:nth-child(5n+1) { height: 32%; }
.specimen__voice span:nth-child(7n+2) { height: 78%; }
.specimen__voice span:nth-child(3n+3) { height: 52%; }
.specimen__voice span:nth-child(11n+4) { height: 100%; }
.specimen__voice span:nth-child(n+26) { opacity: .45; }
.specimen__answer-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--on-ink-2); }
.specimen__answer p { color: var(--on-ink); font-size: 14px; line-height: 1.6; min-height: 48px; margin: 7px 0 0; max-width: 44ch; }
.specimen__focus { background: var(--paper); color: var(--tx-1); padding: 20px 26px; display: flex; gap: 16px; align-items: flex-start; }
.specimen__focus-icon { color: var(--accent); font-size: 28px; line-height: 1; }
.specimen__focus .label { color: var(--tx-3); font-size: 9px; letter-spacing: .1em; }
.specimen__focus h2 { font-size: 16px; font-weight: 500; letter-spacing: -.02em; margin-top: 8px; }
.specimen__focus p:last-child { font-size: 12px; margin: 7px 0 0; color: var(--tx-2); }
.specimen__retry { width: 100%; display: flex; justify-content: space-between; align-items: center; background: var(--paper-2); color: var(--tx-1); padding: 14px 26px; min-height: 48px; border: 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 12px; text-align: left; }
.specimen__retry:hover { background: var(--accent-soft); }
.specimen__retry > span:last-child { font-size: 22px; line-height: 1; color: var(--accent); }
.specimen__foot { margin: 12px 0 0; max-width: 55ch; color: var(--tx-3); font-size: 11px; line-height: 1.5; }
.specimen.is-clear .specimen__answer-label { color: var(--accent-ink); }
.specimen.is-clear .specimen__answer p { color: var(--accent-ink); }
.landing .reading { padding-block: 48px 64px; background: var(--paper-2); }
.landing .reading__label { font-size: 10px; color: var(--tx-1); }
.landing .reading__sub { font-size: 9px; }
.landing .readout { margin-top: 34px; }
.landing .readout__n { font-size: clamp(64px,7.2vw,94px); font-weight: 400; }
.landing .readout__n::after { display: none; }
.landing .readout__op { padding-top: 15px; }
.landing .outcome { margin-top: 30px; padding-top: 22px; }
.landing .outcome__k { font-size: 14px; max-width: 33ch; }
.landing .shead { grid-template-columns: 70px 1fr; }
.landing .shead__body { max-width: 850px; }
.landing .shead .deck { font-size: 17px; max-width: 50ch; }
.landing .step { min-width: 0; }
.landing .step h3 { font-size: 25px; }
.landing .step > p { min-height: 96px; font-size: 14px; max-width: 36ch; }
.landing .phone { max-width: 300px; margin: 30px auto 0; aspect-ratio: auto; padding: 7px; border: 1px solid var(--border); background: var(--paper-2); border-radius: 32px; }
.landing .phone__screen--shot { padding: 0; height: auto; border-radius: 26px; display: block; }
.landing .phone__shot { width: 100%; height: auto; object-fit: contain; }
.landing #score .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 90px; align-items: center; }
.landing #score .split > div { min-width: 0; }
.landing #score .lede { font-size: 16px; margin-top: 24px; max-width: 41ch; }
.score-specimen { margin-top: 30px; max-width: 420px; padding: 22px 26px; border-radius: 14px; }
.score-specimen::after { display: none; }
.score-specimen__row { display: flex; gap: 26px; align-items: center; }
.score-specimen .ring { width: 150px; flex-shrink: 0; margin: 18px 0 0; }
.score-specimen .ring__num { font-size: 49px; }
.score-specimen .ring__desc { font-size: 10px; margin-top: 5px; }
.score-specimen__context > p { font-family: var(--serif); font-size: 25px; line-height: 1.15; margin: 20px 0 15px; }
.score-specimen__context > span { display: block; font-family: var(--mono); font-size: 10px; color: var(--accent-ink); }
.score-specimen__context small { display: block; font-family: var(--mono); font-size: 9px; color: var(--on-ink-2); margin-top: 8px; }
.landing .dim { padding-block: 22px; }
.landing .dim__name { font-size: 16px; }
.landing .dim__d { font-size: 14px; }
.landing .progress-story .shead { border-top: 0; padding-top: 0; }
.landing .progress-story .shead__idx { color: var(--on-ink-2); }
.landing .progress-story .shead__body { max-width: 850px; }
.landing .wideshot { margin-top: 44px; }
.landing .wideshot img { border-radius: 6px; width: 100%; object-fit: cover; }
.landing .wideshot figcaption { color: var(--on-ink-2); font-size: 13px; }
.landing .scene__n { font-size: 55px; }
.landing .scene__d { font-size: 14px; }
.landing .trace { margin-top: 35px; }
.voice-statement .label { color: var(--tx-2); }
.voice-statement h2 { font-size: clamp(60px,8.8vw,116px); line-height: 1; letter-spacing: -.04em; margin-top: 32px; font-weight: 400; }
.voice-statement h2 em { color: var(--accent); }
.voice-statement__bottom { display: flex; gap: 28px; align-items: flex-start; justify-content: flex-end; margin-top: 34px; }
.voice-statement__bottom > span { font-size: 48px; color: var(--accent); line-height: 1; }
.voice-statement__bottom p { font-size: 17px; line-height: 1.6; max-width: 44ch; margin: 0; color: var(--tx-2); }
.landing #inside { background: var(--paper-2); }
.landing .depths { margin-top: 45px; }
.landing .depth__time { color: var(--accent); }
.landing .fgrid { margin-top: 48px; }
.landing .feat p { font-size: 14px; }
.landing #pricing { background: var(--paper); }
.landing .plans { border-top: 0; gap: 24px; }
.landing .plan { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--border); border-radius: 16px; }
.landing .plan + .plan { padding: 32px; border-left: 1px solid var(--border); }
.landing .plan--pro { background: var(--accent-soft); border-color: #bfd6ce; }
.landing .plan__p { font-size: 56px; }
.landing .plan ul { flex: 1; }
.landing .plan__terms { min-height: 48px; }
.landing .plan:first-child .btn { margin-top: 28px; }
.landing .cta .appicon { width: 58px; height: 58px; }
.landing .cta .d-lg { font-size: clamp(42px,4.5vw,62px); }
.landing .cta__grid { grid-template-columns: 1.5fr 1fr; gap: 56px; }
.landing .cta__grid > div:last-child { flex-direction: column; align-items: flex-start; }
.landing .cta .btn { min-width: 255px; }
.landing .foot__word { font-weight: 500; font-size: clamp(90px,21vw,280px); letter-spacing: -.065em; line-height: 1; padding-top: 46px; }

@media (min-width: 1440px) {
  .landing .hero { padding-top: 66px; }
  .landing .hero__bottom { margin-top: 66px; }
}
@media (max-width: 1100px) {
  .landing .hero__grid { gap: 32px; }
  .landing .hero h1 { font-size: clamp(64px,7.4vw,82px); }
  .landing .hero .deck { font-size: 15px; }
  .landing .hero__acts { gap: 12px; }
  .specimen__tabs { gap: 16px; padding-inline: 20px; }
  .specimen__prompt { padding-inline: 22px; }
  .specimen__question { font-size: 27px; }
  .landing #score .split { gap: 40px; }
  .hero__bottom > span:nth-child(2) { display: none; }
}
@media (max-width: 900px) {
  .landing .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .landing .hero { padding-top: 40px; }
  .landing .hero h1 { font-size: clamp(68px,10vw,90px); }
  .landing .hero .deck { font-size: 17px; max-width: 48ch; }
  .specimen { max-width: 560px; width: 100%; margin-left: auto; }
  .specimen__question { max-width: 28ch; }
  .landing #score .split { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .score-specimen { max-width: 480px; }
  .landing .cta__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .landing .shead { grid-template-columns: 1fr; }
  .landing .step > p { min-height: 0; max-width: 44ch; }
  .landing .phones { gap: 44px; }
  .landing .phone { max-width: 300px; }
  .landing .reading .outcome { grid-template-columns: 1fr; }
  .landing .outcome__k { max-width: 48ch; }
  .landing .plan:first-child .btn { margin-top: 24px; }
  .landing .plan ul { min-height: 0; }
  .landing .scene__i { padding-block: 24px; }
  .landing .scene__i + .scene__i { padding-left: 0; }
  .voice-statement__bottom { justify-content: flex-start; gap: 18px; }
  .voice-statement__bottom p { font-size: 16px; }
  .landing .hero__fine { flex-direction: row; gap: 8px; }
  .landing .hero__fine .dot { display: block; }
}
@media (max-width: 520px) {
  .landing .shell { padding-inline: 24px; }
  .landing .nav__in { height: 68px; }
  .landing .nav__burger { width: 44px; height: 44px; }
  .landing .hero { padding-top: 34px; }
  .hero__eyebrow { font-size: 9px; letter-spacing: .02em; }
  .landing .hero h1 { font-size: clamp(53px,13.3vw,68px); margin-top: 24px; }
  .landing .hero .deck { font-size: 15px; max-width: 38ch; margin-top: 23px; }
  .landing .hero__acts { gap: 18px; flex-wrap: nowrap; }
  .landing .hero__acts .btn { width: auto; min-width: 0; font-size: 12px; padding-inline: 13px; gap: 8px; }
  .hero__link { font-size: 12px; white-space: nowrap; gap: 7px; }
  .hero__link span { font-size: 18px; }
  .landing .hero__fine { font-size: 10px; gap: 8px; }
  .hero__bottom { margin-top: 32px; font-size: 8px; gap: 10px; }
  .specimen__caption { font-size: 9px; letter-spacing: .03em; }
  .specimen__tabs { gap: 18px; padding-inline: 18px; }
  .specimen__tabs button { font-size: 11px; }
  .specimen__prompt { padding: 22px 20px; }
  .specimen__question { font-size: 27px; }
  .specimen__answer p { font-size: 13px; min-height: 64px; }
  .specimen__focus { padding: 22px 20px; gap: 12px; }
  .specimen__focus h2 { font-size: 14px; }
  .specimen__retry { padding-inline: 20px; }
  .specimen__foot { font-size: 10px; }
  .landing .reading { padding-block: 36px 44px; }
  .landing .reading__head { gap: 10px; flex-wrap: wrap; }
  .landing .reading__label { font-size: 9px; }
  .landing .reading__sub { font-size: 8px; letter-spacing: .04em; }
  .landing .readout { gap: 12px; }
  .landing .readout__n { font-size: 52px; }
  .landing .readout__op { font-size: 22px; }
  .landing .readout__k { font-size: 14px; }
  .landing .outcome__n { font-size: 9px; }
  .landing .band { padding-block: 72px; }
  .landing .band.reading { padding-block: 36px 44px; }
  .landing .d-lg { font-size: 43px; }
  .score-specimen { padding: 20px; }
  .score-specimen__row { gap: 20px; }
  .score-specimen .ring { width: 135px; }
  .score-specimen__context > p { font-size: 24px; }
  .voice-statement h2 { font-size: clamp(52px,13vw,68px); }
  .voice-statement__bottom > span { font-size: 34px; }
  .landing .plan, .landing .plan + .plan { padding: 26px 22px; }
  .landing .plan__p { font-size: 47px; }
  .landing .wideshot img { min-height: 190px; }
  .landing .foot__word { font-size: 23vw; }
}
@media (max-width: 360px) {
  .landing .hero h1 { font-size: 48px; }
  .landing .hero__acts { flex-wrap: wrap; gap: 8px; }
  .landing .hero__acts .btn { width: 100%; }
  .specimen__tabs { gap: 12px; }
  .specimen__tabs button { font-size: 10px; }
  .score-specimen__row { gap: 12px; }
  .score-specimen { padding-inline: 16px; }
  .score-specimen .ring { width: 100px; }
  .score-specimen__context > p { font-size: 18px; }
}