/* Option E's layer (Voice First), then Option F's (Hi-Vis colours, G's type). Combined so the page loads one file. */
/* Option E: Voice First. Dark first, sound first. Transcripts and waveforms carry the brand. */
.btn { font-weight: 600; }
.badge { border-radius: 99px; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 0.8125rem; padding-inline: 0.55em 0.7em; }
.call-card, .plan-card { background: var(--surface); border-radius: var(--radius-l); }

.player--hero { width: 100%; padding: var(--space-s); background: var(--surface); border-radius: var(--radius-l); color: var(--primary); }
.player--hero .player__play { width: 4.5rem; height: 4.5rem; }
.player--hero .player__title { color: var(--ink); }
.hero__transcript { justify-items: stretch; align-content: start; padding: var(--space-m); background: var(--surface); border-radius: var(--radius-l); }
.convo__line--kumara .convo__who::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--primary); margin-right: 0.45em; }
.convo__line--kumara .convo__said { font-size: var(--step-1); line-height: 1.4; }
.convo__line:not(.convo__line--kumara) { justify-self: end; text-align: right; }
.convo__line:not(.convo__line--kumara) .convo__said { color: var(--muted); }
/* The call plays out line by line once; reduced motion shows the whole transcript at once. */
@media (prefers-reduced-motion: no-preference) {
  .convo--live .convo__line { animation: rise var(--dur-slow) var(--ease) both; }
  .convo--live .convo__line:nth-child(2) { animation-delay: 900ms; } .convo--live .convo__line:nth-child(3) { animation-delay: 1800ms; }
}
.note__icon--k { --note-icon: #5ef0c0; --note-icon-ink: #06070a; }

/* ---------- Pages: dark first, sound first ---------- */
.site-header { box-shadow: 0 1px 0 var(--border); }
.nav a, .nav-signin { font-weight: 500; }
.menu__toggle { border-width: 1.5px; border-color: var(--border); }
.section__title, .page-head h1, .cta-band__title { font-weight: 700; }
.step__icon { border-radius: 50%; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary); }
.story__frame, .call, .codes li, .note-box, .price-teaser__plans a, .trade-grid a, .key-points, .toc, .stepper-card, .hours-summary, .stripe-sim, .empty, .plan-card, .dash__list { border-radius: var(--radius-l); }
.dash__bar { border-radius: var(--radius-l) var(--radius-l) 0 0; }
.dash__list { border-radius: 0 0 var(--radius-l) var(--radius-l); }
.call { background: var(--surface); }
.call.is-playing { box-shadow: 0 0 0 2px var(--primary); }
.chip-link { background: var(--surface); border-radius: 999px; font-weight: 600; }
.chip-link--all { background: var(--primary); color: var(--on-primary); }
.faq__mark { border-radius: 50%; background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.faq__mark::before, .faq__mark::after { background: var(--primary); }
.trust-strip .icon { color: var(--primary); }
.hear { background: var(--surface); }
.hear .player { color: var(--primary); }
.cta-band { background: var(--surface); color: var(--ink); --focus: var(--focus); }
.cta-band__title { color: var(--ink); }
.cta-band .btn--secondary { color: var(--ink); border-color: var(--ink); }
.cta-band .small { color: var(--muted); }
.plan-card--featured { outline: 2px solid var(--primary); outline-offset: -2px; }
.plans__tabs, .kinds__tabs, .carriers__tabs, .how__tabs { border-radius: 999px; }
.plans__tabs button, .kinds__tabs button, .carriers__tabs button, .how__tabs button { border-radius: 999px; }
.kinds__tabs .badge { font-size: 0.75rem; }
.choice > label { border-radius: var(--radius-m); background: var(--surface); }
.choice > input:checked + label { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select { border-radius: var(--radius-m); border-width: 1.5px; }
.convo__line--kumara .convo__said { color: var(--ink); }
.proof--calls .call { background: var(--surface); }
.player--hero { color: var(--primary); }
.site-footer { background: var(--sunken); }
.btn-auth { border-radius: 999px; }

/* Option F: Voice First × Hi-Vis. E's compositions in the current brand's ink and hi-vis yellow (a fill, never text on light),
   with G's type: Bricolage Grotesque for headings and interface, Literata for transcripts (owner, round 3). */

/* Transcripts read like a printed call log. */
.convo__said, .greeting, .story__frame p { font-family: 'Literata', Georgia, serif; }
.convo__line--kumara .convo__said { font-size: var(--step-1); line-height: 1.45; }
.hero-f .hero__title::after, .page-head h1::after { content: ""; display: block; width: 3.5ch; height: 0.14em; margin-top: 0.2em; background: var(--accent); box-shadow: inset 0 -0.05em 0 var(--tape); }
.btn { font-weight: 600; }
.player--hero .player__play, .player__play { background: var(--primary); color: var(--on-primary); }
.player--hero { color: var(--ink); }
.call__player { color: var(--ink); }
.convo__line--kumara .convo__who::before { background: var(--accent); box-shadow: 0 0 0 1.5px var(--ink); }
.chip-link--all, .plan-card--featured .btn--primary { background: var(--primary); color: var(--on-primary); }
.plan-card--featured { outline-color: var(--accent); }
.step__icon, .faq__mark { background: var(--accent); color: var(--on-accent); }
.faq__mark::before, .faq__mark::after { background: var(--on-accent); }
.trust-strip .icon { color: var(--ink); }
.cta-band { background: var(--band); color: var(--on-band); box-shadow: inset 0 0.5rem 0 var(--accent); --focus: var(--accent); }
.cta-band__title { color: var(--on-band); }
.cta-band .btn--secondary { color: var(--on-band); border-color: var(--on-band); }
.cta-band .small { color: var(--on-band-muted); }
.site-footer { background: var(--band); color: var(--on-band); --logo-ink: var(--on-band); --logo-primary: var(--accent); --focus: var(--accent); }
.site-footer .logo { color: var(--on-band); }
.site-footer__legal { color: var(--on-band-muted); }
.note__icon--k { --note-icon: #ffd60a; --note-icon-ink: #15171a; }
/* The wordmark's waveform macron: yellow on dark grounds, ink on light (yellow is never used as a mark on light). */
.site-header { --logo-primary: var(--wave); }
.og-card { --logo-primary: var(--accent); }