/* Page layouts of the Voxaris site (piano 06 · G-03/G-04/G-05). Colours only from tokens.css. */

/* Hero */
.hero { position: relative; padding-block: var(--s-7) var(--s-8); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 70vmax; height: 70vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--voice-a) 22%, transparent), transparent 70%); pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; gap: var(--s-7); align-items: start; }
.hero-copy { display: grid; gap: var(--s-4); }
.hero h1 { font-size: clamp(var(--fs-36), 6vw, var(--fs-64)); line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
.hero .lead { margin: 0; }
@media (min-width: 980px) {
  .hero { padding-block: var(--s-8) var(--s-9); }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* Call form (owner, 3/11): 1 · the scenario, each in its colour; 2 · the number; then the two
   ways to try, equally big. A white card on the ivory. */
.call-form { margin-top: var(--s-2); padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.call-grid { display: grid; gap: var(--s-4); }
/* Wide card (the bar of the home): name and scenarios on one row, number and the two buttons on the next. */
@container (min-width: 980px) {
  .call-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); grid-template-areas: "head step1" "step2 buttons" "custom custom" "error error" "note links" "options options"; gap: var(--s-4) var(--s-6); align-items: end; }
  .call-form-head { grid-area: head; align-self: center; } .call-step-1 { grid-area: step1; } .call-step-2 { grid-area: step2; } [data-custom-task] { grid-area: custom; }
  .call-grid > .error-text { grid-area: error; } .call-buttons { grid-area: buttons; } .call-note { grid-area: note; text-align: left; } .call-links { grid-area: links; justify-content: flex-end; } .call-options { grid-area: options; }
  .call-step-2 [data-phone-result]:empty { display: none; }
  .chips-scenario .chip .icon { display: none; }
  .chips-scenario .chip span { min-height: 38px; padding-inline: 12px; }
  .call-options { border: 0; padding: 0; }
}
.call-form-head { display: grid; gap: 2px; }
.call-form-head .eyebrow { margin: 0; color: var(--accent-text); }
.call-title { font-size: var(--fs-22); margin: 0; }
.call-step legend, .call-step > label { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-1); color: var(--text); font-weight: 620; }
.step-num { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--on-text); font-size: var(--fs-12); font-weight: 750; }
.chips-scenario .chip span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--verm)); }
.chips-scenario .chip .icon { width: 17px; height: 17px; }
.chips-scenario .chip input:checked + span { color: var(--on-scv); background: var(--c, var(--verm)); border-color: transparent; }
.chips-scenario .chip input:checked + span::before { background: var(--on-scv); }
.phone-prefix { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 54px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 650; }
.phone-prefix:focus-within { border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
.phone-prefix select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.phone-prefix .icon { width: 14px; height: 14px; color: var(--text-faint); transform: rotate(90deg); }
.call-buttons { display: grid; gap: var(--s-2); align-items: center; }
.call-or { display: flex; align-items: center; gap: var(--s-3); color: var(--text-faint); font-size: var(--fs-12); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }
.call-or::before, .call-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@container (min-width: 680px) {
  .call-buttons { grid-template-columns: 1fr auto 1fr; }
  .call-or::before, .call-or::after { display: none; }
}
.call-form { container-type: inline-size; }
.call-note { text-align: center; }
.call-form .text-link { justify-self: center; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-5); }
dialog .fields { margin-top: var(--s-4); }
dialog .input { margin-top: var(--s-3); }
dialog .hint { margin-top: var(--s-3); }

/* Voice console (sample dialogue) */
.console { display: grid; gap: var(--s-4); padding: var(--s-4); container-type: inline-size; }
/* One tab per sector: a row that scrolls sideways and fades where tabs are hidden; a 3 x 2
   grid once the console is wide enough to show them all. */
.console-tabs { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
.console-tabs.more-right { mask-image: linear-gradient(to right, var(--bg) calc(100% - 48px), transparent); }
.console-tabs.more-left { mask-image: linear-gradient(to left, var(--bg) calc(100% - 48px), transparent); }
.console-tabs.more-left.more-right { mask-image: linear-gradient(to right, transparent, var(--bg) 48px, var(--bg) calc(100% - 48px), transparent); }
@container (min-width: 470px) {
  .console-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; }
  .console-tab { justify-content: center; padding-inline: var(--s-3); }
}
.console-tab { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--text-soft); font-size: var(--fs-14); cursor: pointer; white-space: nowrap; transition: all var(--dur-ui) var(--ease-standard); }
.console-tab[aria-selected="true"] { color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }
.console-body { display: grid; gap: var(--s-4); }
.console .orb { --size: 132px; }
.console-transcript { height: 212px; padding: var(--s-2); mask-image: linear-gradient(transparent, var(--bg) 18%); }
.console-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); min-height: 172px; align-content: start; }
.console-note { text-align: center; }
@media (min-width: 600px) {
  .console-body { grid-template-columns: 1fr 1fr; align-items: start; }
  .console-body > .orb, .console-body > .orb-label { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .console .orb { --size: 104px; }
  .console-transcript { height: 184px; }
}

/* Sections */
.section-soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.compare { display: grid; gap: var(--s-3); }
.compare-line { font-family: var(--font-display); font-size: var(--fs-22); line-height: 1.35; margin: 0; }
.compare-before .compare-line { color: var(--text-faint); }
.compare-after { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--voice) border-box; border: 1px solid transparent; }
.case { align-items: start; }
.sector-card { display: grid; gap: var(--s-2); align-content: start; color: inherit; text-decoration: none; transition: transform var(--dur-ui) var(--ease-standard), border-color var(--dur-ui) var(--ease-standard); }
.sector-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sc, var(--line-strong)) 55%, transparent); }
/* Each sector in its own colour (approved set of 9/10): icon, border and pointer light. */
.sector-card.fx-tilt:hover { transform: perspective(900px) translateY(-2px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.sector-card .sector-more { color: var(--sc, var(--accent-text)); }
.sector-card .sector-icon { color: var(--sc, var(--accent-text)); background: color-mix(in srgb, var(--sc, var(--accent-text)) 14%, var(--surface-2)); }
.sector-card.fx-spotlight::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--sc, var(--voice-b)) 13%, transparent), transparent 42%); }
.sector-card h3, .sector-card p { margin: 0; }
.sector-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); color: var(--accent-text); }
.sector-icon .icon { width: 22px; height: 22px; }
.sector-more { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-14); font-weight: 600; color: var(--accent-text); }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.trust-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.trust-list .icon { flex: none; width: 22px; height: 22px; color: var(--success); margin-top: 2px; }
.contact-card { display: grid; gap: var(--s-3); justify-items: start; }
.contact-card h3, .contact-card p { margin: 0; }

/* Sector page */
.sector-hero { padding-block: var(--s-7); }
.sector-hero .hero-grid { gap: var(--s-6); }
.sector-hero h1 { font-size: clamp(var(--fs-36), 5vw, var(--fs-48)); line-height: 1.08; margin: 0; }
.sector-dialog { display: grid; gap: var(--s-3); }
.faq { display: grid; gap: var(--s-3); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: var(--s-3) 0 0; color: var(--text-soft); }
.sector-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Live call page */
.live { padding-block: 0 var(--s-8); }
.live-band { padding-block: var(--s-6) var(--s-7); margin-bottom: var(--s-6); }
.live-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.live-head h1 { font-size: clamp(2.4rem, 6vw, 5rem); margin: var(--s-2) 0 0; }
.live-head .back-link { margin-bottom: var(--s-2); }
.live-head > div { flex: 1 1 260px; }
.live-band .pill { background: var(--ink); color: var(--paper); border-color: transparent; }
/* Under the sticky site header (72 px and its border), not behind it. */
.live-session-bar { position: sticky; top: calc(73px + var(--s-2)); z-index: 10; }
.live-conversation > summary { cursor: pointer; padding: var(--s-3); color: var(--text-soft); }
/* The scenario dashboard spans the whole window and grows with its content, so the page
   keeps a single scroll; the height below is only the start, before the first measure. */
.live { overflow-x: clip; }
.live-dashboard { width: 100vw; margin-inline: calc(50% - 50vw); border-top: 1px solid var(--line); }
.live-dashboard iframe { display: block; width: 100%; height: 85vh; min-height: 480px; border: 0; background: var(--bg); }
.live-conversation:not([open]) + .live-dashboard { margin-top: 0; }
.live-stage { display: grid; gap: var(--s-5); }
.live-ringing { text-align: center; display: grid; gap: var(--s-3); padding-block: var(--s-7); }
.live-ringing p { margin: 0; }
.live-timer { font: 250 clamp(2.6rem, 5vw, 4.2rem)/1 var(--font-display); font-stretch: 62%; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.live-grid { display: grid; gap: var(--s-5); }
/* The conversation keeps its own height: it no longer stretches to a long outcome column. */
.live-voice { display: grid; gap: var(--s-4); align-content: start; align-self: start; }
.live-voice > .orb { width: clamp(240px, 72%, 360px); max-width: 100%; height: auto; aspect-ratio: 1; justify-self: center; margin-inline: auto; }
.live-voice > .orb-label { text-align: center; }
.live-transcript { max-height: min(56vh, 520px); min-height: 220px; padding: var(--s-2); }
.live-transcript .bubble.is-partial { opacity: .72; }
.live-side { display: grid; gap: var(--s-4); align-content: start; }
.live-activity { display: flex; align-items: center; gap: var(--s-3); }
.live-activity .dots { display: inline-flex; gap: 4px; }
.live-activity .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--voice-b); animation: dot 1.2s var(--ease-standard) infinite; }
.live-activity .dots i:nth-child(2) { animation-delay: .15s; }
.live-activity .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.live-outcome { display: grid; gap: var(--s-4); }
.live-outcome .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.receipt { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-soft); border: 1px solid var(--line); }
.receipt strong { font-family: var(--font-display); }
.receipt p { margin: 0; }
.live-outcome [data-live-receipts] { display: grid; gap: var(--s-3); min-width: 0; }
.live-outcome .receipt { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 980px) {
  .live-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
/* Call options, pairing, links under the call button */
.call-options { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.call-options summary { cursor: pointer; font-size: var(--fs-14); color: var(--text-soft); }
.call-options[open] summary { margin-bottom: var(--s-3); }
.options-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.call-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); }
.pair-code { font: 600 var(--fs-48)/1 var(--font-display); letter-spacing: 0.18em; text-align: center; margin: var(--s-5) 0; min-height: 1em; }
.misuse-notice { margin-top: var(--s-3); }
.resume-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); }

/* Demo menu and sample conversations */
.menu-tools { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: end; margin-bottom: var(--s-5); }
.menu-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.dish { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); }
.dish-head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.dish-head h3 { font-size: var(--fs-16); margin: 0; }
.dish-price { font-weight: 600; white-space: nowrap; color: var(--accent-text); }
.dish p { margin: 0; }
.examples { align-items: stretch; }
.example { display: grid; gap: var(--s-4); align-content: start; }
.example h3 { margin: 0; }
.example .btn { justify-self: start; }
/* Sector pages (review of 12/10): the sector's own colour (--sc, approved set of 9/10) in
   the light of the hero, the icon, the wave, the numbers and the pointer light. */
.sector-page .hero::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--sc) 22%, transparent), transparent 70%); }
.back-link { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; font-size: var(--fs-14); font-weight: 600; color: var(--text-soft); text-decoration: none; }
.back-link:hover { color: var(--text); }
.back-link .icon { width: 18px; height: 18px; transform: rotate(180deg); }
.sector-title { display: flex; align-items: center; gap: var(--s-4); }
.sector-title .sector-icon { width: 56px; height: 56px; flex: none; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, var(--surface-2));
  box-shadow: 0 0 32px color-mix(in srgb, var(--sc) 24%, transparent); }
.sector-title .sector-icon .icon { width: 28px; height: 28px; }
.does-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.does-card { display: grid; gap: var(--s-2); align-content: start; }
.does-card h3 { margin: 0; font-size: var(--fs-18); }
.does-card p { margin: 0; }
.does-mark { display: block; min-height: 28px; font: 650 var(--fs-22)/1 var(--font-display); color: var(--sc); }
.does-mark .icon { width: 26px; height: 26px; color: var(--success); }
/* Demo services and data of each sector (18/10). */
.path-steps { margin: var(--s-2) 0 0; padding-left: 1.25em; display: grid; gap: var(--s-1); font-size: var(--fs-14); color: var(--text-muted, var(--text)); }
.path-steps li::marker { color: var(--sc); font-weight: 650; }
.facts-card { margin-top: var(--s-6); display: grid; gap: var(--s-2); border-top: 3px solid color-mix(in srgb, var(--sc) 70%, transparent); }
.facts-card .call-title, .facts-card p { margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(150px, 28%) 1fr; align-items: baseline; }
.facts dd { text-align: left; overflow-wrap: anywhere; }
@media (max-width: 640px) { .facts > div { grid-template-columns: 1fr; gap: var(--s-1); } }
.sector-page .fx-spotlight::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--sc) 13%, transparent), transparent 42%); }
.menu-more { display: flex; margin: var(--s-5) auto 0; }
.sector-links a.chip span:hover { color: var(--text); border-color: color-mix(in srgb, var(--sc, var(--accent-text)) 55%, var(--line-strong)); }
.sector-chip .icon { color: var(--sc); }
.call-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-5); font-size: var(--fs-14); }
.chip-locked .icon { color: var(--text-faint); }
.staff-area { display: grid; gap: var(--s-3); margin-top: var(--s-7); }
.staff-area .call-title, .staff-area p { margin: 0; }
.other-sectors { margin-top: var(--s-7); }
.other-sectors .call-title { margin-bottom: var(--s-3); }

/* The error page with its number in giant thin figures (A7); the big title and the wave of the
   simple pages are in components.css. */
.error-page { display: grid; justify-items: center; gap: var(--s-3); border: 0; }
.error-code { margin: 0; font: 200 clamp(7rem, 30vw, 20rem)/0.8 var(--font-display); font-stretch: 62%; letter-spacing: -0.04em; color: var(--accent-text); }
.error-page h1 { font-size: clamp(var(--fs-28), 4vw, var(--fs-48)); color: var(--text); }
.call-row .sector-icon { color: var(--sc, var(--accent-text)); }

/* The trial form keeps the text of its own theme, also inside the vivid colour of a sector. */
.call-form[data-theme] { color: var(--text); }

/* Contact form (the honeypot field stays out of sight and out of the tab order) */
.contact-form { display: grid; gap: var(--s-4); }
.contact-form h3 { margin: 0; }
.contact-form .btn { justify-self: start; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-page { align-items: start; }

/* Legal pages and my demos */
.narrow { max-width: 760px; }
.doc-section { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.doc-section h2 { font-size: var(--fs-22); margin-bottom: var(--s-2); }
.doc-section p { color: var(--text-soft); margin: 0; }
.doc-links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); font-size: var(--fs-14); }
/* Preferences of this browser on the cookie page (12/10); they need the script. */
.cookie-prefs { display: grid; gap: var(--s-3); }
.no-js .cookie-prefs { display: none; }
.pref-switch { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text); cursor: pointer; }
.pref-switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--voice-a); }
.cookie-prefs [role="status"]:empty { display: none; }
.call-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.call-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: var(--s-4); }
.call-row-text { display: grid; flex: 1 1 200px; }
/* The practice code (from the Orbita history, 12/10) goes to the next line whole. */
.call-row-text code { white-space: nowrap; font-size: inherit; }
.call-row-actions { display: flex; gap: var(--s-2); }
.footer-brand { display: grid; gap: var(--s-1); }
.geo-credit { flex-basis: 100%; margin: 0; color: var(--text-faint); }

/* Browser demo panel */
.browser-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.browser-call-text { flex: 1 1 280px; }
.browser-call-text p { margin: 0; }
.browser-call-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.browser-call .error-text { flex-basis: 100%; }

/* Advanced settings, features, dialogs */
.advanced-settings { margin-top: var(--s-3); display: grid; gap: var(--s-3); }
.advanced-settings > summary, .confirm-settings > summary { cursor: pointer; color: var(--text-soft); font-size: var(--fs-14); }
.json-editor { min-height: 160px; padding: var(--s-3); font: 400 var(--fs-12)/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; }
.json-schema { max-height: 240px; overflow: auto; margin: var(--s-2) 0 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-soft); font: 400 var(--fs-12)/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre-wrap; }
.confirm-settings { margin-top: var(--s-3); }
.features { align-items: stretch; }
.feature { display: flex; gap: var(--s-4); align-items: flex-start; }
.feature h3 { margin-bottom: var(--s-1); font-size: var(--fs-18); }
.feature p { margin: 0; }

/* Phones: the home stays short (G-03 acceptance: under 3,500 px at 390 px). */
@media (max-width: 599px) {
  .section { padding-block: 40px; }
  .section-head { margin-bottom: var(--s-4); }
  .section-head .lead { display: none; }
  .hero { padding-block: var(--s-5) 40px; }
  .hero-grid { gap: var(--s-5); }
  .hero-copy > .eyebrow:first-child { display: none; }
  .site-footer { padding-block: var(--s-5); }
  .call-form { padding: var(--s-4); }
  /* Owner, 3/11: the choice of the trial easy to see: the six scenarios all visible, two per row. */
  .call-form .chips-scenario { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .call-form .chips-scenario .chip span { width: 100%; padding-inline: 10px; white-space: nowrap; }
}
@media (max-width: 360px) {
  .call-form .chips-scenario { grid-template-columns: 1fr; }
  .console { gap: var(--s-3); }
  .console .orb { --size: 84px; }
  .console .orb-label { margin-top: 0; }
  .console-transcript { height: 132px; }
  .console-card { min-height: 0; }
  .compare { padding: var(--s-4); gap: var(--s-2); }
  .compare-line { font-size: var(--fs-16); }
  .grid-2 { gap: var(--s-4); }
  .timeline p { display: none; }
  .timeline h3, .steps h3 { font-size: var(--fs-18); margin-bottom: var(--s-1); }
  .grid-3 { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .sector-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); }
  .sector-card p, .sector-more { display: none; }
  .sector-card h3 { font-size: var(--fs-14); margin: 0; }
  .sector-icon { width: 36px; height: 36px; flex: none; }
  .steps { gap: var(--s-4); }
  .steps li { padding: 0 0 0 var(--s-7); min-height: 36px; }
  .steps li p { display: none; }
  .steps li { display: flex; align-items: center; }
  .trust-list { gap: var(--s-3); font-size: var(--fs-14); }
  .contact-card { padding: var(--s-4); }
  .contact-card p { display: none; }
}
@media (max-width: 359px) { .grid-3 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .live-activity .dots i { animation: none; opacity: 1; } }
:root[data-motion="reduce"] .live-activity .dots i { animation: none; opacity: 1; }