@import url("/brand.css");
/* Parley web design system (2026-10-08 portal design): home, pricing and site dialogs. */
/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */


:root {
  --fs-xs: 13px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px;
  --fs-xl: 28px; --fs-2xl: clamp(32px, 4vw, 40px); --fs-3xl: clamp(36px, 4.1vw, 58px); --fs-4xl: clamp(50px, 5.7vw, 82px);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --t-fast: 180ms; --t-mid: 240ms; --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in: cubic-bezier(.4,0,1,1);
  --header-h: 80px;
  --max: 1248px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: var(--fs-base); line-height: 1.6; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r-sm); z-index: 100; }
.skip:focus { top: 12px; }

h1, h2, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
.lede { font-size: var(--fs-md); color: var(--muted); max-width: 36em; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 48px; }
@media (max-width: 1100px) { .wrap { padding-inline: 32px; } }
@media (max-width: 700px) { .wrap { padding-inline: 24px; } }
.section { padding-block: 112px; }
@media (max-width: 900px) { .section { padding-block: 80px; } }
@media (max-width: 700px) { .section { padding-block: 64px; } }
.section.tint { background: var(--surface); }
.section-head { display: grid; gap: var(--s4); margin-bottom: var(--s7); max-width: 720px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.lg { width: 24px; height: 24px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-base); text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.btn-primary { background: var(--pine); color: var(--paper); }
.btn-dark { background: var(--pine); color: var(--paper); }
.btn-ghost { border-color: var(--rule-strong); color: var(--ink); background: var(--ground); }
.btn-text { min-height: 44px; padding: 0 var(--s2); color: var(--accent); border-radius: var(--r-sm); }
.btn-danger-text { color: var(--danger); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 var(--s4); font-size: var(--fs-sm); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--accent-strong); }
  .btn-dark:hover { background: #000; }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-text:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--surface-2); color: #6d7064; border-color: transparent; cursor: not-allowed; transform: none; }
.btn .spinner { display: none; }
.btn.is-loading .spinner { display: block; }
.btn.is-loading { pointer-events: none; }
.spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Home */
.hero { padding-block: var(--s8) var(--s9); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); align-items: center; }
.badge { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px 14px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-sm); font-weight: 600; }
.badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.hero-copy { display: grid; gap: var(--s5); justify-items: start; }
.hero-stats { --od-cols: 3; --od-gap: var(--s5); margin-top: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--rule); width: 100%; }
.stat-num { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 40px); line-height: 1.05; }
.stat-cap { font-size: var(--fs-sm); color: var(--muted); }
.shot { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule); background: var(--surface); box-shadow: 0 24px 48px -24px rgba(31,33,28,.28); }
.shot img { --od-ratio: 1180 / 780; }
.shot figcaption { padding: var(--s3) var(--s4); font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--rule); background: var(--ground); }

.features { --od-cols: 5; --od-gap: var(--s5); }
.feature { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5); border-top: 2px solid var(--ink); }
.feature .icon { color: var(--accent); }
.feature p { color: var(--muted); }

.modes { --od-cols: 2; --od-gap: var(--s5); }
.mode { display: grid; gap: var(--s4); align-content: start; padding: var(--s6); border-radius: var(--r-lg); background: var(--ground); border: 1px solid var(--rule); }
.mode .tag { justify-self: start; font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface); color: var(--muted); }
.mode h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); }
.mode ul { display: grid; gap: var(--s2); }
.mode li { display: flex; gap: var(--s2); align-items: flex-start; }
.mode li .icon { color: var(--accent); margin-top: 3px; width: 18px; height: 18px; }

.models { --od-cols: 2; --od-gap: var(--s5); }
.model { padding: var(--s6); border-radius: var(--r-lg); background: var(--pine); color: var(--paper); display: grid; gap: var(--s5); align-content: start; }
.model .eyebrow { color: var(--lime); }
.model h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); }
.model .od-grid { --od-cols: 2; --od-gap: var(--s4); }
.model .stat-cap { color: #c8cabd; }
.model p { color: #c8cabd; }
.footnote { margin-top: var(--s5); font-size: var(--fs-sm); color: var(--muted); max-width: 60em; }

.steps-list { --od-cols: 3; --od-gap: var(--s5); counter-reset: step; }
.check { display: grid; gap: var(--s3); padding: var(--s5); border-radius: var(--r-lg); background: var(--ground); border: 1px solid var(--rule); align-content: start; }
.check .num { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--accent); }
.check p { color: var(--muted); }

.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); align-items: center; }

.faq { display: grid; border-top: 1px solid var(--rule); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding-block: var(--s4); font-weight: 600; font-size: var(--fs-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform var(--t-fast) var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding-bottom: var(--s5); color: var(--muted); max-width: 44em; }

.cta-band { background: var(--pine); color: var(--paper); border-radius: var(--r-lg); padding: var(--s8) var(--s7); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s6); align-items: center; }
.cta-band h2 em { color: var(--lime); }
.cta-band p { color: #c8cabd; }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: #6c6f63; }

/* Pricing */
.page-hero { padding-block: var(--s8) var(--s7); display: grid; gap: var(--s4); }
.price-board { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: start; }
.panel { background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s6); }
.panel.soft { background: var(--surface); border-color: transparent; }
.panel-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.panel-head h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); }

.seg { display: grid; grid-template-columns: repeat(var(--seg-cols, 4), minmax(0, 1fr)); gap: var(--s2); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { position: relative; display: grid; place-items: center; min-height: 56px; border: 1.5px solid var(--rule); border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-md); cursor: pointer; background: var(--ground);
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); text-align: center; padding: var(--s2); }
.seg label small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.seg input:checked + label { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.seg input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .seg label:hover { border-color: var(--rule-strong); } }

.rate-table { display: grid; margin-top: var(--s5); border-top: 1px solid var(--rule); }
.rate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s4); align-items: center; padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
.rate-row .od-field strong { font-weight: 600; }
.rate-row .od-field span { color: var(--muted); font-size: var(--fs-sm); }
.rate-row .rate { color: var(--muted); font-size: var(--fs-sm); text-align: right; }
.rate-row .mins { font-family: var(--serif); font-size: var(--fs-lg); text-align: right; min-width: 6.5em; }
.note { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s4); }
.note .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }

.receipt { display: grid; gap: var(--s4); }
.receipt .big { font-family: var(--serif); font-size: clamp(44px, 5vw, 60px); line-height: 1; }
.kv { display: grid; gap: var(--s2); }
.kv > div { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--fs-sm); }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 600; text-align: right; }
.pay-logos { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pay-logos span { font-size: var(--fs-xs); padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--rule); color: var(--muted); background: var(--ground); }

.licences { --od-cols: 2; --od-gap: var(--s5); }
.licence { display: grid; gap: var(--s4); align-content: start; }
.licence .price { font-family: var(--serif); font-size: 48px; line-height: 1; }
.licence .price small { font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); margin-left: var(--s2); }
.licence ul { display: grid; gap: var(--s2); }
.licence li { display: flex; gap: var(--s2); align-items: flex-start; }
.licence li .icon { color: var(--accent); width: 18px; height: 18px; margin-top: 3px; }
.facts { --od-cols: 3; --od-gap: var(--s5); }
.fact { display: grid; gap: var(--s2); align-content: start; }
.fact p { color: var(--muted); font-size: var(--fs-sm); }

/* Responsive */
@media (max-width: 1023px) {
  .hero-grid, .split, .price-board { grid-template-columns: minmax(0, 1fr); }
  .features { --od-cols: 2; }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* wrap padding handled by gutter breakpoints */
  .section { padding-block: var(--s8); }
  .features, .modes, .models, .steps-list, .licences, .facts { --od-cols: 1; }
  .hero { padding-block: var(--s6) var(--s8); }
  .hero-stats { --od-cols: 3; --od-gap: var(--s3); }
  .seg { --seg-cols: 2; }
  .rate-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rate-row .rate { display: none; }
  .cta-band { padding: var(--s6) var(--s5); }
  .panel { padding: var(--s5); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .reveal-ready, .sound-flow__ribbon, .hero-bubble { opacity: 1 !important; transform: none !important; }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation: none !important; transition: none !important;
}
html.reduce-motion .sound-flow__ribbon, html.reduce-motion .hero-bubble {
  animation: none !important; transform: none !important;
}
/* Utilities that replace inline styles (CSP forbids style attributes). */
.gap-8 { --od-gap: 8px; }
.gap-12 { --od-gap: 12px; }
.gap-16 { --od-gap: 16px; }
.self-start { justify-self: start; }
.legend-gap { margin-bottom: var(--s3); }
.h1-page { font-size: var(--fs-3xl); }
.h3-serif { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); }
.text-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0; color: var(--accent); font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; font-size: inherit; }
@media (hover: hover) { .text-link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; } }
.shot a { display: block; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 1180 / 780; }
.model-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); }
.model-meta a { color: #e2e5d6; }
.mode-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.faq .answer a { color: var(--accent); }
.faq-more { margin-top: var(--s5); }
.rate-row .rate:empty::before { content: "—"; }
.licence .price del { font-family: var(--sans); font-size: var(--fs-md); color: var(--muted); margin-left: var(--s2); }
.licence .price-note { font-size: var(--fs-sm); color: var(--muted); }
.receipt .savings dd { color: var(--success); }
.amount-help { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); }
.amount-help a { color: var(--accent); font-weight: 600; }
.offer-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: start; margin-top: var(--s5); padding: var(--s5); border-radius: var(--r-lg); background: var(--accent-soft); }
.offer-strip .icon { color: var(--accent); width: 24px; height: 24px; margin-top: 2px; }
.offer-strip strong { display: block; font-size: var(--fs-md); }
.offer-strip p { color: var(--muted); font-size: var(--fs-sm); }
.offer-strip details { margin-top: var(--s2); font-size: var(--fs-sm); }
.offer-strip summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.offer-strip .od-grid { --od-cols: 3; --od-gap: var(--s4); margin-top: var(--s3); }
.offer-strip h3 { font-size: var(--fs-base); }
.mobile-bar { display: none; }
@media (max-width: 767px) {
  .offer-strip .od-grid { --od-cols: 1; }
  .pricing-page { padding-bottom: 80px; }
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: rgba(255,255,255,.96); border-top: 1px solid var(--rule); }
  .mobile-bar .od-stat span:first-child { font-size: var(--fs-xs); color: var(--muted); }
  .mobile-bar strong { font-family: var(--serif); font-size: var(--fs-lg); font-weight: 400; }
}

/* Legacy names used by dialog markup in content.js / languages.js. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: var(--r-pill); font-weight: 600; text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; }
.button.primary { background: var(--accent); color: #fff; }
.button.outline { border-color: var(--rule-strong); color: var(--ink); background: var(--ground); }
@media (hover: hover) { .button.primary:hover { background: var(--accent-strong); } .button.outline:hover { border-color: var(--ink); } }
.button-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd { font-size: 11px; border: 1px solid var(--rule); padding: 2px 4px; border-radius: 4px; margin-left: 4px; }

/* Site dialog (language checker, voices, caption example, search). */
dialog { border: 0; border-radius: var(--r-lg); width: min(820px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; background: var(--ground); color: var(--ink); box-shadow: 0 32px 64px -24px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(31,33,28,.48); }
dialog[open] { animation: enter var(--t-mid) var(--ease-out); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dialog-close { position: sticky; top: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: 12px 12px 0 auto; border: 1.5px solid var(--rule); border-radius: 50%; background: var(--ground); font-size: 22px; line-height: 1; }
#dialog-content { padding: 0 var(--s7) var(--s7); }
#dialog-content h2 { font-size: var(--fs-2xl); margin: 0 0 var(--s5); padding-right: var(--s4); }
#dialog-content p { color: var(--muted); margin: var(--s4) 0; font-size: var(--fs-base); }
#dialog-content ul { display: grid; gap: var(--s3); padding-left: var(--s5); list-style: disc; color: var(--muted); }
#dialog-content a:not(.button) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#dialog-content .button-row { margin-top: var(--s5); }
.dialog-note { font-size: var(--fs-sm) !important; border-top: 1px solid var(--rule); padding-top: var(--s4); }
.dialog-callout { margin: var(--s5) 0; padding: var(--s4); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); }
.dialog-image { display: block; width: 100%; height: auto; margin: var(--s5) 0; border-radius: var(--r-md); border: 1px solid var(--rule); }
.guide-step { display: flex; gap: var(--s5); margin: var(--s5) 0; }
.guide-step .step-number { font-family: var(--serif); font-size: var(--fs-lg); color: var(--accent); line-height: 1.2; }
.guide-step strong { font-weight: 600; }
.guide-step p { margin: var(--s2) 0 !important; }
.tab-buttons { display: flex; gap: var(--s2); margin: var(--s5) 0; }
.tab-buttons button { min-height: 44px; padding: 0 var(--s5); border: 1.5px solid var(--rule); border-radius: var(--r-pill); font-weight: 600; }
.tab-buttons [aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.demo-controls { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; margin: var(--s5) 0; font-size: var(--fs-sm); }
.demo-controls select, .language-controls select { min-height: 48px; padding: 0 var(--s3); border: 1.5px solid var(--rule-strong); border-radius: var(--r-md); background: var(--ground); max-width: 100%; }
.demo-display { padding: var(--s6); border-radius: var(--r-lg); background: var(--surface); }
.demo-display small { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.demo-display .demo-source, .demo-display .demo-target { min-height: 56px; color: var(--ink) !important; font-size: 21px !important; }
.demo-display .demo-target { font-family: var(--serif); font-size: 27px !important; }
.demo-progress { height: 4px; margin-top: var(--s5); border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.demo-progress span { display: block; width: 0; height: 100%; background: var(--accent); }
.service-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s5) 0; }
.service-list > div { padding: var(--s4); border: 1px solid var(--rule); border-radius: var(--r-md); }
.service-list p { margin: var(--s2) 0 !important; font-size: var(--fs-sm) !important; }
.search-input { width: 100%; min-height: 52px; padding: 0 var(--s4); border: 1.5px solid var(--rule-strong); border-radius: var(--r-md); font-size: var(--fs-base); }
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-results a { display: block; padding: var(--s4) 2px; border-bottom: 1px solid var(--rule); text-decoration: none !important; color: var(--ink) !important; }
.search-results small { display: block; margin-top: var(--s1); color: var(--muted); }
.language-controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
.language-controls label { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; font-size: var(--fs-sm); font-weight: 600; }
.language-controls label:first-child, #language-voice-label { grid-column: span 2; }
.language-controls select { width: 100%; min-width: 0; }
.language-table { width: 100%; margin-top: var(--s5); border-collapse: collapse; font-size: var(--fs-sm); }
.language-table th, .language-table td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.language-table th { color: var(--muted); font-weight: 600; }
@media (max-width: 600px) {
  #dialog-content { padding: 0 var(--s5) var(--s6); }
  .demo-display { padding: var(--s5); }
  .service-list, .language-controls { grid-template-columns: 1fr; }
  .language-controls label:first-child, #language-voice-label { grid-column: auto; }
  .guide-step { gap: var(--s4); }
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.group-title { font-weight: 600; font-size: var(--fs-md); }

/* Server-rendered Chinese headings: avoid one-character last lines. */
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 { text-wrap: balance; line-break: strict; }

/* —— Pine Flow: sound-stream art + home rhythm —— */
.home-page .hero {
  position: relative;
  isolation: isolate;
  padding-block: 64px 96px;
  overflow: hidden;
}
.home-page .hero > .sound-flow {
  position: absolute;
  inset: -8% -12%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.home-page .hero > .sound-flow svg {
  position: absolute;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
  opacity: 0.4;
}
.sound-flow__ribbon {
  transform-origin: 50% 50%;
  animation: pine-drift 16s ease-in-out infinite alternate;
}
.sound-flow__ribbon.is-amber {
  animation-duration: 18s;
  animation-delay: -6s;
  opacity: 0.9;
}
@keyframes pine-drift {
  from { transform: translate3d(-1.5%, 0.8%, 0) scale(1.015); }
  to   { transform: translate3d(2.2%, -1.5%, 0) scale(1.035); }
}
.home-page .hero > .hero-grid { position: relative; z-index: 1; }
.home-page .hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
}
.home-page .shot {
  border-radius: 20px;
  box-shadow: 0 28px 64px -28px rgba(24, 61, 53, 0.28);
  border-color: var(--line);
}
.home-page .feature { border-top-color: var(--pine); }
.home-page h1 em { color: var(--pine); font-style: italic; }
.home-page h1 {
  font-size: var(--fs-4xl);
  line-height: 1.055;
}
.home-page h1 em { font-size: 0.9em; }
.home-page .hero .lede { font-size: 17px; }
@media (max-width: 1100px) {
  html:not([lang^="zh"]) .home-page h1 { font-size: 65px; }
}
@media (max-width: 900px) {
  html:not([lang^="zh"]) .home-page h1 { font-size: 56px; }
}
@media (max-width: 700px) {
  .home-page .hero .lede { font-size: 15px; }
  html:not([lang^="zh"]) .home-page h1 { font-size: clamp(44px, 10vw, 62px); line-height: 1.08; }
  html:not([lang^="zh"]) .home-page h2 { font-size: 37px; }
  html[lang^="zh"] .home-page h2 { font-size: 34px; }
}
@media (max-width: 360px) {
  html:not([lang^="zh"]) .home-page h1 { font-size: 40px; }
}
html[lang^="zh"] .home-page h1 {
  font-size: clamp(42px, 4.8vw, 68px);
  line-height: 1.2;
  letter-spacing: 0;
}
html[lang^="zh"] .home-page h1 em { font-style: normal; color: var(--pine); }
@media (max-width: 700px) {
  html[lang^="zh"] .home-page h1 { font-size: clamp(38px, 10vw, 54px); line-height: 1.2; }
  .home-page .hero-grid { gap: 28px; }
  .home-page .hero { padding-block: 40px 64px; }
}
html.hero-offscreen .sound-flow__ribbon,
html.reduce-motion-offscreen .sound-flow__ribbon {
  animation-play-state: paused !important;
}