/* 30–40% glass in navigation/feature surfaces; content stays quiet and readable. */
:root {
 --bg: #f4f7fb;
 --surface: #fff;
 --text: #162b40;
 --muted: #4a5e73;
 --line: #dce5ee;
 --brand: #1261c9;
 --brand-dark: #0a4ca6;
 --soft: #eaf2fe;
 --radius: 22px;
 --shadow: 0 4px 18px rgb(25 53 82 / 4%);
 --glass: #fdfefe;
 --glass-line: rgb(255 255 255 / 86%);
 --glass-shadow: 0 8px 30px rgb(31 60 92 / 8%);
 --control-line: #8192a4;
 --page-gutter: clamp(16px, 4vw, 28px);
 --nav-height: 78px;
 --nav-gutter: 12px;
 --nav-offset: max(10px, env(safe-area-inset-bottom), var(--safe-bottom));
 --nav-clearance: calc(var(--nav-height) + var(--nav-offset) + 16px);
}

body {
 background: radial-gradient(ellipse at 6% 0, #e6f0fd 0, transparent 42rem),
             radial-gradient(ellipse at 100% 26rem, #eaf4ef 0, transparent 34rem), var(--bg);
 -webkit-font-smoothing: antialiased;
}

/* Fix intrinsic sizing at its source; never hide overflowing page content. */
.app-shell, #screen, .stack, .grid, .split, .partner-list, .category-grid,
.form-grid, .quick-grid, .trust-strip, .row, .section-heading, .key-value {
 min-inline-size: 0;
 max-inline-size: 100%;
}
.stack > *, .grid > *, .split > *, .partner-list > *, .category-grid > *,
.form-grid > *, .quick-grid > *, .trust-strip > *, .row > * {
 min-inline-size: 0;
}
h1, h2, h3, p, strong, label, summary, legend, .button, .text-button,
.category-title, .badge, .key-value > span, .bottom-nav a > span {
 overflow-wrap: anywhere;
 word-break: normal;
}
h1, h2, h3, .category-title { text-wrap: pretty; }
h1 { font-size: clamp(25px, 4vw, 34px); letter-spacing: -.8px; }
h2 { font-size: clamp(18px, 2.4vw, 20px); }
h3 { font-size: 16px; }
img, video { max-inline-size: 100%; }
.icon-tile, .icon-button, .avatar, .schedule-date, .row > svg { flex-shrink: 0; }
.row > div { min-inline-size: 0; overflow-wrap: anywhere; }
#screen { padding: 22px var(--page-gutter) calc(var(--nav-clearance) + 16px); }
#screen > .stack { gap: 24px; }
.stack > section.stack { gap: 14px; }
.section-heading { align-items: center; gap: 10px; }
.section-heading h2 { flex: 1; }
.section-heading .text-button { flex: 0 0 auto; max-inline-size: 42%; }
.text-button { gap: 5px; white-space: normal; line-height: 1.4; }
.text-button svg { inline-size: 19px; block-size: 19px; }

/* Glass accents have opaque fallbacks for older webviews. */
.app-header, .bottom-nav, .search-field, .sticky-summary, .hero-copy, .hero-photo-caption {
 background: var(--glass);
 border: 1px solid var(--glass-line);
 box-shadow: var(--glass-shadow);
}
.app-header {
 flex-wrap: wrap;
 gap: 10px 12px;
 position: sticky;
 top: 0;
 z-index: 8;
 padding: calc(12px + max(env(safe-area-inset-top), var(--safe-top))) var(--page-gutter) 12px;
 border-block-start: 0;
 border-radius: 0 0 24px 24px;
}
.brand { flex: 1 1 auto; min-inline-size: 0; font-size: 21px; gap: 9px; }
.brand > span:last-child { flex: 1; min-inline-size: 0; }
.brand-name { display: block; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.brand-mark {
 inline-size: 40px;
 block-size: 40px;
 flex: 0 0 40px;
 border-radius: 14px;
 box-shadow: 0 4px 12px rgb(18 97 201 / 18%);
}
.brand small { font-size: 10px; line-height: 1.5; overflow-wrap: normal; word-break: normal; }
.header-actions { position: relative; flex: 0 0 auto; max-inline-size: 100%; margin-inline-start: auto; gap: 6px; }
.icon-button, .language-select { border-color: var(--control-line); background: var(--surface); border-radius: 14px; }
.language-select { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-inline-size: 68px; padding: 0 11px; cursor: pointer; }
.language-select[aria-expanded="true"] { border-color: var(--brand); background: var(--soft); }
.language-select[aria-disabled="true"] { cursor: progress; }
.language-chevron { inline-size: 14px; block-size: 14px; transition: transform .15s ease; }
.language-select[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
.language-popover {
 position: absolute;
 inset-inline-end: 0;
 inset-block-start: calc(100% + 10px);
 z-index: 2;
 inline-size: min(280px, calc(100vw - 32px - max(env(safe-area-inset-left), var(--safe-left)) - max(env(safe-area-inset-right), var(--safe-right))));
 max-block-size: 60vh;
 max-block-size: min(360px, calc(100dvh - 140px - max(env(safe-area-inset-top), var(--safe-top))));
 overflow-y: auto;
 overscroll-behavior: contain;
 padding: 8px;
 border: 1px solid var(--control-line);
 border-radius: 20px;
 background: var(--surface);
 color: var(--text);
 box-shadow: 0 14px 40px rgb(15 35 65 / 18%);
}
.language-menu-title { padding: 7px 10px 11px; color: var(--muted); font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.language-menu { display: grid; gap: 4px; }
.language-option { display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 54px; padding: 10px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--text); font-size: 15px; font-weight: 650; text-align: start; }
.language-option[aria-checked="true"] { background: var(--soft); color: var(--brand); }
.language-option:hover { border-color: var(--control-line); }
.language-option:focus-visible { outline-offset: -3px; }
.language-option-code { display: grid; place-items: center; flex: 0 0 34px; min-block-size: 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.language-option[aria-checked="true"] .language-option-code { border-color: var(--brand); color: var(--brand); }
.language-name { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.language-check { inline-size: 20px; block-size: 20px; visibility: hidden; }
.language-option[aria-checked="true"] .language-check { visibility: visible; }
.preview-bar { margin: 10px var(--page-gutter) 0; border-radius: 14px; border: 1px solid #ecdca6; }
.home-summary { align-items: center; gap: 12px; }
.home-summary > .row { flex: 1; }
.home-summary > .text-button { max-inline-size: 40%; text-align: end; }
.home-summary .icon-tile { inline-size: 42px; block-size: 42px; border-radius: 14px; }
.search-field { padding-inline: 14px 6px; border-radius: 18px; min-block-size: 58px; }
.search-field input { font-size: 15px; flex: 1; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.search-field > .icon-button { border: 0; background: var(--soft); color: var(--brand); }

/* One photographic feature, with a readable frosted copy panel. */
.hero { border-radius: 26px; }
.hero--photo {
 display: grid;
 padding: 0;
 gap: 0;
 color: var(--text);
 background: var(--soft);
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.hero--photo::after { content: none; }
.hero-visual { position: relative; order: -1; block-size: clamp(162px, 48vw, 224px); overflow: hidden; background: var(--soft); }
.hero-photo { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 55% 43%; }
.hero-photo-caption {
 position: absolute;
 inset-inline-start: 14px;
 inset-block-end: 32px;
 display: inline-flex;
 align-items: center;
 gap: 7px;
 max-inline-size: calc(100% - 28px);
 padding: 8px 12px;
 border-radius: 13px;
 font-size: 12px;
 font-weight: 750;
 color: var(--text);
}
.hero-photo-caption svg { inline-size: 18px; block-size: 18px; color: var(--brand); }
.hero-copy { position: relative; margin-block-start: -20px; border-radius: 22px 22px 0 0; padding: 22px; gap: 13px; }
.hero--photo h1 { max-inline-size: 21ch; font-size: clamp(25px, 5.2vw, 33px); line-height: 1.18; }
.hero--photo p { max-inline-size: 45ch; color: var(--muted); font-size: 14px; line-height: 1.6; }
.hero--photo .eyebrow { color: var(--brand); font-size: 11px; letter-spacing: .9px; }
.hero--photo .actions { margin-block-start: 3px; gap: 9px; }
.hero--photo .actions > .button { flex: 1 1 9rem; }
.hero--photo .button.outline { background: var(--surface); color: var(--brand); border-color: var(--line); }
.hero--photo .button.outline:hover { background: var(--soft); }
.hero--photo.is-image-missing { grid-template-columns: minmax(0, 1fr); }
.hero--photo.is-image-missing .hero-copy { margin-block-start: 0; }
.hero:not(.hero--photo) { background: #155db7; }

/* Solid reading surfaces, restrained depth and clear primary controls. */
.card { border-color: var(--line); padding: 18px; box-shadow: var(--shadow); }
.button { border-radius: 15px; min-block-size: 48px; line-height: 1.4; max-inline-size: 100%; transition: background-color .16s ease, box-shadow .16s ease; }
.button:not(.secondary):not(.outline):not(.white):not(.danger) { box-shadow: 0 4px 12px rgb(18 97 201 / 14%); }
.button.secondary { background: var(--soft); border-color: transparent; }
.button.secondary:hover { border-color: var(--brand); }
.button.outline { border-color: var(--line); }
.actions > .button { flex: 1 1 10rem; }
.icon-tile { border-radius: 15px; }
.notice { line-height: 1.6; border: 1px solid transparent; }
.badge { line-height: 1.45; white-space: normal; text-align: start; }
.trust-strip { gap: 12px 8px; background: var(--surface); padding: 16px 10px; border-radius: 20px; }
.trust-strip > div { padding-inline: 3px; font-size: 11px; line-height: 1.5; }
.trust-strip svg { inline-size: 23px; block-size: 23px; margin-block-end: 6px; }

/* Each scene is a true square crop of a shared 2×2 atlas; labels never overlay images. */
.category-grid { gap: 12px; align-items: stretch; }
.category {
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 gap: 0;
 min-inline-size: 0;
 min-block-size: 0;
 padding: 0;
 background: var(--surface);
 border-color: var(--line);
 border-radius: 21px;
 box-shadow: var(--shadow);
 overflow: hidden;
 transition: border-color .16s ease, box-shadow .16s ease;
}
.category:nth-child(n) { background: var(--surface); }
.category:focus-visible { outline-offset: 3px; }
.category-photo { display: block; position: relative; aspect-ratio: 1.5; inline-size: 100%; background-color: var(--soft); overflow: hidden; }
.service-scene::before {
 content: "";
 position: absolute;
 inset-inline-start: 0;
 inset-block-start: 50%;
 inline-size: 100%;
 aspect-ratio: 1;
 background-image: var(--service-scenes-image, url('./images/service-scenes.png'));
 background-size: 200% 200%;
 background-position: var(--scene-x, 100%) var(--scene-y, 100%);
 transform: translateY(-50%);
}
.service-scene--heating { --scene-x: 0%; --scene-y: 0%; }
.service-scene--installation { --scene-x: 100%; --scene-y: 0%; }
.service-scene--pipes { --scene-x: 0%; --scene-y: 100%; }
.service-scene--repair { --scene-x: 100%; --scene-y: 100%; }
.category-icon {
 position: absolute;
 inset-inline-end: 10px;
 inset-block-end: 10px;
 display: grid;
 place-items: center;
 inline-size: 34px;
 block-size: 34px;
 border-radius: 12px;
 background: #fffffff0;
 color: #1261c9;
 border: 1px solid #fff;
 box-shadow: 0 3px 12px #173b5b12;
}
.category-icon svg { inline-size: 20px; block-size: 20px; }
.category-body { display: flex; flex: 1; align-items: flex-start; gap: 7px; padding: 14px 13px 16px; min-inline-size: 0; }
.category-title { flex: 1; min-inline-size: 0; max-inline-size: 100%; white-space: normal; font-size: clamp(14px, 3.5vw, 16px); line-height: 1.4; font-weight: 750; hyphens: auto; }
.category-arrow { flex: 0 0 16px; color: var(--brand); margin-block-start: 2px; }
.category-arrow svg { inline-size: 16px; block-size: 16px; }
.service-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.service-card > .category-photo { aspect-ratio: 2.1; }
.service-card-body { padding: 18px; flex: 1; }
.service-card-body > .button { margin-block-start: auto; }

.partner-list { gap: 12px; }
.partner-card { gap: 14px; }
.partner-card .row { align-items: center; }
.partner-rating { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.partner-rating svg { inline-size: 17px; block-size: 17px; color: #98600d; }
.avatar-frame { position: relative; overflow: hidden; inline-size: 56px; block-size: 56px; flex: 0 0 56px; border: 1px solid var(--line); border-radius: 19px; background: var(--soft); }
.avatar-initials { font-size: 16px; font-weight: 800; color: var(--brand); }
.avatar-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Account information is separate from the editable form and its one save action. */
.profile-screen { max-inline-size: 960px; margin-inline: auto; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.profile-layout > *, .profile-contact > *, .profile-privacy > * { min-inline-size: 0; }
.profile-overview, .profile-settings { gap: 18px; }
.profile-overview > section.profile-identity { position: relative; border-block-start: 3px solid var(--brand); padding: 22px; gap: 22px; }
.profile-identity .avatar-frame { inline-size: 76px; block-size: 76px; flex-basis: 76px; border-radius: 25px; }
.profile-identity .avatar-initials { font-size: 25px; letter-spacing: -.6px; }
.profile-identity > .row { gap: 16px; }
.profile-identity > .row .badge { max-inline-size: 50%; }
.profile-identity h2 { font-size: clamp(22px, 4vw, 28px); line-height: 1.3; letter-spacing: -.6px; }
.profile-identity .eyebrow { font-size: 10px; letter-spacing: 1.1px; }
.profile-contact { display: flex; align-items: flex-start; gap: 12px; padding-block-start: 20px; border-block-start: 1px solid var(--line); }
.profile-contact > svg { inline-size: 20px; block-size: 20px; color: var(--muted); margin-block-start: 4px; }
.profile-contact .stack { flex: 1; align-items: flex-start; gap: 6px; }
.profile-contact strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.profile-contact .badge { font-size: 11px; gap: 5px; }
.profile-contact .badge svg { inline-size: 14px; block-size: 14px; }
.profile-privacy { display: flex; align-items: flex-start; gap: 12px; padding: 18px; background: var(--bg); box-shadow: none; }
.profile-privacy h2 { font-size: 14px; }
.profile-privacy .icon-tile { inline-size: 36px; block-size: 36px; border-radius: 12px; background: var(--surface); color: var(--muted); }
.profile-privacy svg { inline-size: 20px; block-size: 20px; }
.profile-settings > section.stack { padding: 22px; gap: 24px; }
.profile-settings .row .stack, .profile-help .stack { gap: 4px; }
.profile-settings form { gap: 20px; }
.profile-settings .form-grid { gap: 16px; }
.profile-language { border-block-start: 1px solid var(--line); padding-block-start: 20px; }
.profile-settings .button.full { margin-block-start: 2px; }
.profile-help { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.profile-help strong { font-size: 15px; }
.profile-help-arrow { color: var(--muted); flex: none; }
.profile-help-arrow svg { inline-size: 18px; block-size: 18px; }
.profile-help:hover { border-color: var(--brand); }
.button.profile-logout { align-self: flex-start; background: transparent; color: var(--muted); border-color: transparent; box-shadow: none; }
.profile-logout svg { inline-size: 18px; block-size: 18px; }
.button.profile-logout:hover { background: var(--surface); color: var(--text); border-color: var(--line); }

.order-card .status-row { gap: 8px 12px; }
.order-card .status-row > .badge { max-inline-size: 100%; }
.order-card strong { line-height: 1.5; }
.key-value { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
.key-value > span { min-inline-size: 0; }
.key-value.total { font-size: 17px; }
.price { overflow-wrap: anywhere; font-size: clamp(18px, 3.8vw, 24px); }
.chips { inline-size: 100%; max-inline-size: 100%; overscroll-behavior-inline: contain; }
.chip { max-inline-size: min(25rem, calc(100vw - 72px)); overflow-wrap: anywhere; white-space: normal; line-height: 1.4; }
.quick-grid > a { overflow-wrap: anywhere; padding: 8px 4px; }
.form-field, .checkbox > span { min-inline-size: 0; }
.form-field input, .form-field textarea, .form-field select { border-radius: 14px; background: var(--surface); border-color: var(--control-line); }
.form-field select { text-overflow: ellipsis; }
.file-field { overflow-wrap: anywhere; }
.file-field input { inline-size: 100%; min-inline-size: 0; }
.file-field input::file-selector-button { border: 1px solid var(--line); background: var(--soft); color: var(--brand); border-radius: 10px; min-block-size: 44px; padding-inline: 12px; margin-inline-end: 8px; font: inherit; }
.stepper, .rating-input { flex-wrap: wrap; }
.chip.active, .timeline .current .step, .stepper span.active,
.rating-input input:checked + span, .bottom-nav .nav-create svg, .brand-mark { color: var(--button-text, #fff); }
.timeline li > div { min-inline-size: 0; }
summary { line-height: 1.6; }
dialog { padding: 22px; border-radius: 25px; box-shadow: 0 20px 80px #112a4d33; }
.dialog-header h2 { min-inline-size: 0; }
.legal-text { max-inline-size: 100%; }
.sticky-summary { bottom: var(--nav-clearance); }

.bottom-nav {
 display: grid;
 grid-template-columns: repeat(var(--nav-columns, 5), minmax(0, 1fr));
 gap: 2px;
 align-items: stretch;
 bottom: var(--nav-offset);
 inline-size: min(calc(100% - var(--nav-gutter) - var(--nav-gutter) - max(env(safe-area-inset-left), var(--safe-left)) - max(env(safe-area-inset-right), var(--safe-right))), 760px);
 padding: 6px;
 border-radius: 24px;
}
.bottom-nav a { display: grid; grid-template-rows: 36px auto; align-content: center; justify-items: center; min-inline-size: 0; min-block-size: 68px; padding: 6px 2px; font-size: 11px; line-height: 1.35; gap: 3px; border-radius: 18px; }
.bottom-nav .nav-label { display: block; min-inline-size: 0; max-inline-size: 100%; white-space: nowrap; overflow-wrap: normal; word-break: normal; line-height: 1.35; }
.nav-label-full { display: none; }
.nav-label-compact { display: inline; }
.bottom-nav a.active { background: var(--soft); color: var(--brand); }
.bottom-nav .nav-create svg { box-sizing: border-box; inline-size: 36px; block-size: 36px; margin: 0; border-radius: 13px; border: 0; padding: 7px; box-shadow: 0 4px 10px #1261c91f; }
.toast { bottom: var(--nav-clearance); overflow-wrap: anywhere; }
.onboarding-art { border: 1px solid var(--line); background: var(--soft); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 :root { --glass: rgb(255 255 255 / 86%); }
 .app-header, .bottom-nav, .search-field, .sticky-summary, .hero-copy, .hero-photo-caption {
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
 }
}
@media (hover: hover) and (pointer: fine) {
 .category:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgb(25 66 112 / 10%); }
 .card.interactive:hover { box-shadow: 0 8px 24px rgb(25 66 112 / 8%); }
}
@media (min-width: 650px) {
 #screen { padding-block-start: 28px; }
 .hero--photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
 .hero-copy { margin: 0; border-radius: 0; padding: clamp(24px, 4vw, 38px); justify-content: center; }
 .hero-visual { order: initial; block-size: auto; min-block-size: 310px; }
 .hero-photo { position: absolute; inset: 0; object-position: 60% center; }
 .hero-photo-caption { inset-block-end: 18px; }
 .trust-strip > div { font-size: 13px; }
 .category-title { font-size: 15px; }
 .bottom-nav a { display: flex; flex-direction: row; min-block-size: 54px; padding-inline: 4px; font-size: 13px; gap: 7px; }
 .nav-label-full { display: inline; }
 .nav-label-compact { display: none; }
 .bottom-nav .nav-create svg { inline-size: 28px; block-size: 28px; margin: 0; padding: 5px; border: 0; box-shadow: none; }
 .form-layout { max-inline-size: 740px; }
}
@media (max-width: 360px) {
 :root { --page-gutter: 14px; --nav-gutter: 8px; }
 .brand { font-size: 19px; }
 .brand-mark { inline-size: 36px; block-size: 36px; flex-basis: 36px; }
 .brand small { font-size: 9px; }
 .hero-copy { padding: 18px; }
 .hero--photo h1 { font-size: 25px; }
 .hero-visual { block-size: 160px; }
 .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .category-body { padding: 12px; gap: 4px; }
 .category-title { font-size: 14px; }
 .form-grid, .key-value { grid-template-columns: minmax(0, 1fr); }
 .key-value > span:last-child { text-align: start; }
 .key-value { gap: 4px; }
 dialog { padding: 18px; }
 .profile-overview > section.profile-identity, .profile-settings > section.stack { padding: 18px; }
}
@media (min-width: 850px) {
 .profile-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 24px; }
 .profile-overview { position: sticky; top: calc(112px + max(env(safe-area-inset-top), var(--safe-top))); }
}
:root[data-theme="dark"] { --glass: #18263b; --glass-line: #40536c; --glass-shadow: 0 8px 28px #0003; --control-line: #72849d; }
:root[data-theme="dark"] body { background: radial-gradient(ellipse at 0 0, #1a2e49 0, transparent 42rem), var(--bg); }
:root[data-theme="dark"] .hero:not(.hero--photo) { background: #1b416f; }
:root[data-theme="dark"] .category:nth-child(n) { background: var(--surface); }
:root[data-theme="dark"] .preview-bar { background: #3d321c; color: #ffe5a2; border-color: #69532c; }
:root[data-theme="dark"] .preview-bar .text-button { color: #ffe5a2; }
:root[data-theme="dark"] .preview-bar select { background: var(--surface); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .partner-rating svg { color: #f4c06d; }
:root[data-theme="dark"] .timeline .done .step { color: var(--bg); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 :root[data-theme="dark"] { --glass: rgb(24 38 59 / 86%); }
}
@media (prefers-reduced-transparency: reduce) {
 :root, :root[data-theme="dark"] { --glass: var(--surface); }
 .app-header, .bottom-nav, .search-field, .sticky-summary, .hero-copy, .hero-photo-caption {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
 }
}
@media (forced-colors: active) {
 .app-header, .bottom-nav, .search-field, .hero-copy, .hero-photo-caption, .category { border-color: CanvasText; box-shadow: none; }
 .category-icon { background: Canvas; color: CanvasText; }
 .language-popover, .language-option-code { border-color: CanvasText; box-shadow: none; }
 .language-option[aria-checked="true"] { border-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
 .button, .category, .card, .language-chevron { transition: none; }
}
@media print {
 body { background: white; }
 .hero-visual, .category-photo { display: none; }
 .hero-copy { backdrop-filter: none; -webkit-backdrop-filter: none; }
}