:root {
  color-scheme: light;
  --paper: #f8f7f6;
  --white: #fff;
  --ink: #242128;
  --muted: #5f5964;
  --quiet: #716a74;
  --line: #e8e2e4;
  --accent: #c71941;
  --accent-dark: #a91134;
  --pink: #fbe7ea;
  --green: #28624e;
  --rail: 226px;
  --top: 70px;
  font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box }
body { margin: 0; color: var(--ink); background: var(--paper) }
a { color: inherit; text-decoration: none }
a:hover { color: var(--accent-dark) }
img { display: block; max-width: 100%; height: auto }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
[hidden] { display: none !important }
:focus-visible { outline: 3px solid #ac2557; outline-offset: 3px }
h1, h2, h3, p { margin: 0 }
h1, h2, h3 { line-height: 1.16; letter-spacing: -.035em; overflow-wrap: anywhere }
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 760 }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 730 }
h3 { font-size: 1.1rem; font-weight: 700 }
p, li, dd { overflow-wrap: anywhere }
small { font-size: .875rem }
.icon { width: 22px; height: 22px; vertical-align: middle; flex: none }
.icon-small { width: 17px; height: 17px }
.skip { position: fixed; top: 12px; left: 14px; z-index: 50; padding: 12px 16px; transform: translateY(-160%); border-radius: 8px; background: var(--white) }
.skip:focus { transform: none }
.eyebrow, .nav-label, .kicker {
  font-size: .77rem; font-weight: 780; letter-spacing: .095em; text-transform: uppercase;
}
.eyebrow, .kicker { color: var(--accent-dark) }
.muted { color: var(--muted) }
.stack { display: grid; gap: 16px }
.topbar {
  position: sticky; top: 0; z-index: 10; min-height: var(--top); display: grid;
  grid-template-columns: calc(var(--rail) - 24px) minmax(0, 560px) minmax(max-content, 1fr);
  align-items: center; gap: 24px; padding: 9px 28px; border-bottom: 1px solid var(--line);
  background: var(--white);
}
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; max-width: 100%; min-width: 0; white-space: nowrap }
.brand img { width: 38px; height: 38px; flex: none }
.brand > span { min-width: 0 }
.brand-word { display: block; font-size: 1.4rem; line-height: 1.05; font-weight: 830; letter-spacing: -.07em }
.brand-word span { color: var(--accent) }
.brand-note { display: block; font-size: .66rem; margin-top: 4px; color: var(--muted); font-weight: 690; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis }
.header-search, .search-box { display: flex; align-items: center; min-width: 0; border: 1px solid #ded7d9; border-radius: 9px; background: #fbfaf9; color: var(--muted); padding: 0 4px 0 12px; gap: 7px }
.header-search input, .search-box input { flex: 1 1 0; min-width: 0; border: 0; background: transparent; min-height: 42px; outline: none; padding: 4px 5px }
.header-search:focus-within, .search-box:focus-within { outline: 2px solid var(--accent); outline-offset: 2px }
.header-search button { padding: 7px; border: 0; background: transparent; color: var(--ink); border-radius: 6px }
.header-search button:hover { background: var(--pink); color: var(--accent-dark) }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-width: 0 }
.topbar .mobile-menu { display: none }
.header-cta .btn, .language summary { white-space: nowrap }
.language { position: relative }
.language summary { list-style: none; cursor: pointer }
.language summary::-webkit-details-marker { display: none }
.language-list { display: grid; position: absolute; top: calc(100% + 10px); right: 0; min-width: min(300px, calc(100vw - 40px)); max-height: 70vh; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 12px 26px #34202916 }
.language-list a { padding: 9px 11px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; gap: 10px }
.language-list a:hover, .language-list [aria-current=true] { color: var(--accent-dark); background: var(--pink) }
.site-shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) }
.sidebar {
  position: sticky; top: var(--top); align-self: start; height: calc(100dvh - var(--top));
  overflow: auto; padding: 24px 13px; background: #fcfbfa; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 22px;
}
.nav-label { display: block; padding: 0 12px; margin-bottom: 9px; color: var(--quiet) }
.sidebar a { display: flex; position: relative; align-items: center; gap: 11px; min-height: 46px; padding: 8px 11px; border-radius: 8px; color: #49424b; font-size: .96rem; font-weight: 610; margin: 2px 0 }
.sidebar a:hover { background: #f1edee; color: var(--ink) }
.sidebar a[aria-current=page] { color: var(--accent-dark); background: var(--pink); font-weight: 720 }
.sidebar a[aria-current=page]::before { content: ""; position: absolute; height: 23px; width: 3px; left: -13px; border-radius: 0 4px 4px 0; background: var(--accent) }
.sidebar .nav-foot { margin-top: auto }
.nav-divider { border: 0; border-top: 1px solid var(--line); margin: 0 9px }
.menu-backdrop { position: fixed; inset: var(--top) 0 0; z-index: 8; border: 0; background: #33232a70 }
.site-main { min-width: 0 }
.container { width: min(100%, 1450px); margin: 0 auto; padding: 28px 32px 0 }
.btn, .badge, .tag { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; text-align: start }
.btn { border: 1px solid transparent; border-radius: 8px; min-height: 43px; padding: 9px 14px; font-size: .93rem; line-height: 1.25; font-weight: 700; background: #fff; overflow-wrap: anywhere }
.btn:hover { background: #f8f3f4 }
.btn-primary { color: var(--white); background: var(--accent); border-color: var(--accent) }
.btn-primary:hover { color: var(--white); background: var(--accent-dark); border-color: var(--accent-dark) }
.btn-line { border-color: #dfd8db }
.btn-quiet { background: transparent }
.btn-icon { padding-inline: 10px }
.badge, .tag { border-radius: 6px; line-height: 1.2; font-size: .79rem; font-weight: 690; padding: 6px 8px; color: #544750; background: #f3eff0; overflow-wrap: anywhere }
.badge-red { color: #8d1738; background: var(--pink) }
.badge-green { color: #215945; background: #e8f4ee }
.badge-amber { color: #784615; background: #fff2dd }
.tag-group { display: flex; flex-wrap: wrap; gap: 6px }
.link { display: inline-flex; gap: 7px; align-items: center; color: var(--accent-dark); font-weight: 730 }
.link:hover { text-decoration: underline; text-underline-offset: 3px }
.hero {
  min-height: 328px; position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: center;
  background: linear-gradient(104deg, #fff5f2 10%, #fde6e7 66%, #f8d7df);
  border: 1px solid #f1d9dd; border-radius: 15px;
}
.hero img { position: absolute; width: 68%; height: 100%; right: -4%; top: 0; object-fit: contain; object-position: center right; z-index: -1 }
.hero-inner { padding: clamp(25px, 4.3vw, 52px); max-width: min(66%, 680px) }
.hero .eyebrow { margin-bottom: 12px }
.hero h1 { font-size: clamp(2.4rem, 4.8vw, 4.3rem); line-height: 1.015; letter-spacing: -.065em }
.hero h1 strong { color: var(--accent-dark); font-weight: inherit }
.hero p { color: #51434a; margin-top: 15px; max-width: 460px; font-size: 1.03rem }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 23px }
.hero-actions .btn { min-height: 46px }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 15px }
.quick-card, .region-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; gap: 11px; padding: 13px; min-height: 69px }
.quick-card:hover, .region-card:hover { border-color: #d8a2af; background: #fffbfc }
.quick-card strong, .region-card strong { display: block; line-height: 1.25; overflow-wrap: anywhere; font-size: .98rem }
.quick-card small { color: var(--muted); line-height: 1.3; display: block; margin-top: 3px }
.tile-icon { width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--pink); color: var(--accent-dark) }
.tile-icon.green { background: #e9f3ef; color: #2d624f }
.tile-icon.lilac { background: #eee9f8; color: #67499a }
.tile-icon.sand { background: #fff0df; color: #935022 }
.tile-icon .icon { width: 20px; height: 20px }
.section { margin-top: clamp(27px, 4vw, 46px) }
.section-head { display: flex; gap: 16px; align-items: end; justify-content: space-between; margin-bottom: 16px }
.section-head p { color: var(--muted); margin-top: 6px }
.section-head .link { flex: none }
.region-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 187px), 1fr)); gap: 10px }
.region-card { min-height: 55px; padding: 9px 12px; gap: 9px }
.region-card .tile-icon { width: 30px; height: 30px; font-size: .74rem; font-weight: 800 }
.region-card-text { min-width: 0 }
.region-card > .icon:last-child { margin-left: auto; color: var(--muted); width: 15px; height: 15px }
.region-card small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.28; overflow-wrap: anywhere }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 195px), 1fr)); gap: 14px; align-items: stretch }
.article-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) }
.card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); border-radius: 10px; overflow: hidden; transition: border-color .18s }
.card:hover { border-color: #d5a2af }
.card-art { aspect-ratio: 16 / 10; display: block; overflow: hidden; background: #fce6e6 }
.card-art > img { width: 100%; height: 100%; object-fit: cover }
.card-art > svg { display: block; width: 100%; height: 100% }
.product-card .card-art { aspect-ratio: 5 / 3 }
.product-card .card-art > img, .product-visual img { object-fit: contain; background: #f7f3f3 }
.card-copy { padding: 13px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1 }
.card-copy p { font-size: .92rem; color: var(--muted) }
.card-title:hover { text-decoration: underline; text-underline-offset: 3px }
.card-copy .link { font-size: .9rem; margin-top: auto; padding-top: 3px; align-self: start }
.card-meta { color: var(--quiet); font-size: .8rem; line-height: 1.35 }
.section-counts { display: flex; flex-wrap: wrap; gap: 7px 20px; padding: 11px 0 0; color: var(--muted); font-size: .88rem }
.section-counts strong { color: var(--ink) }
.banner, .note, .empty { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--white) }
.note { display: flex; gap: 11px; align-items: start; color: var(--muted) }
.note .icon { color: var(--accent-dark) }
.note strong { color: var(--ink) }
.note p + p { margin-top: 6px }
.note-urgent { background: #fff3f0; border-color: #f0d1cf; color: #68323c }
.note .link { margin-top: 5px }
.page-head { padding: 9px 0 16px }
.page-head .eyebrow { margin-bottom: 8px }
.page-head p { max-width: 750px; margin-top: 9px; color: var(--muted); font-size: 1.04rem }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .89rem; color: var(--muted); margin-bottom: 8px }
.crumbs a { color: var(--accent-dark) }
.crumbs a:hover { text-decoration: underline }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 6px 0 19px }
.filter-bar .search-box { flex: 1 1 min(100%, 265px); max-width: 520px }
.field, .filter-bar label { display: grid; gap: 5px; font-size: .94rem; font-weight: 640 }
.field input, .field select, .field textarea, .filter-bar select { min-width: 0; min-height: 43px; width: 100%; padding: 8px 11px; border: 1px solid #dbd3d7; border-radius: 7px; color: var(--ink); background: var(--white); font-weight: 450 }
.field textarea { resize: vertical }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.form-grid .wide { grid-column: 1 / -1 }
.hp { position: absolute; top: auto; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 22px 0 }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 13px }
.provider-card { display: grid; align-content: start; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 16px }
.provider-top { display: flex; align-items: center; justify-content: space-between; gap: 9px }
.provider-card address { font-style: normal; color: var(--muted) }
.provider-card p { color: var(--muted); font-size: .94rem }
.provider-links { display: flex; flex-wrap: wrap; gap: 7px }
.empty { color: var(--muted) }
.empty strong { color: var(--ink) }
.article-layout, .forum-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 310px); align-items: start; gap: 22px }
.article-main, .forum-main { min-width: 0 }
.prose { font-size: 1.05rem; line-height: 1.73 }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 10px }
.prose h2 { margin-bottom: 8px }
.prose section + section { margin-top: 27px }
.prose a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px }
.article-art { margin: 8px 0 24px; border-radius: 10px; aspect-ratio: 2.75; max-height: 272px }
.read-panel { position: sticky; top: calc(var(--top) + 15px); display: grid; gap: 12px }
.read-panel ul, .sources ul { padding-left: 19px; margin: 8px 0 0 }
.read-panel li + li, .sources li + li { margin-top: 5px }
.prose section { scroll-margin-top: calc(var(--top) + 16px) }
.product-detail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(18px, 4vw, 40px) }
.product-visual { border-radius: 11px; border: 1px solid var(--line); overflow: hidden; aspect-ratio: 4 / 3 }
.product-visual img, .product-visual svg { width: 100%; height: 100% }
.product-data { display: grid; gap: 12px }
.product-data h1 { margin-top: 2px }
.product-data dl { display: grid; margin: 0 }
.product-data dl div { display: grid; grid-template-columns: minmax(0, 126px) minmax(0, 1fr); gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line) }
.product-data dt { font-weight: 680 }
.product-data dd { margin: 0; color: var(--muted) }
.forum-list { display: grid; gap: 10px }
.forum-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 14px }
.forum-tabs [aria-current=page] { background: var(--pink); border-color: #edc4cf; color: var(--accent-dark) }
.post { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 13px; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px }
.vote { display: flex; flex-direction: column; align-items: center; align-self: start; padding: 2px; gap: 2px; border-radius: 9px; background: #f5f2f2; font-size: .88rem; color: #51464e }
.vote button { display: grid; place-items: center; min-width: 33px; min-height: 32px; padding: 0; border-radius: 6px; border: 0; background: transparent }
.vote button:hover { background: var(--pink); color: var(--accent-dark) }
.post-body { display: grid; align-content: start; gap: 7px; min-width: 0 }
.post-meta { color: var(--muted); font-size: .84rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px }
.post-body p { color: #524b55 }
.post-body .link { font-size: .87rem }
.post.single { padding: 19px }
.post.single p { font-size: 1.035rem }
.reply-list { margin-top: 12px; display: grid; gap: 8px }
.reply { border-left: 3px solid #dfc8d0; padding: 8px 12px; background: #fbf9f9; border-radius: 0 7px 7px 0 }
.reply p { margin-top: 4px }
.footer { margin: 43px 0 0; border-top: 1px solid var(--line); padding: 20px 0 26px; color: var(--muted); display: grid; gap: 10px; font-size: .87rem }
.footer-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 20px }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 15px; font-weight: 620 }
.footer strong { color: var(--ink) }
.flash { margin-bottom: 15px }
@media (max-width: 1180px) {
  :root { --rail: 192px }
  .topbar { padding-inline: 19px; gap: 14px }
  .container { padding-inline: 22px }
  .quick-card { padding-inline: 9px; gap: 7px }
  .quick-card .icon:last-child:not(.tile-icon .icon) { display: none }
}
@media (max-width: 1080px) {
  .topbar .header-cta { display: none }
}
@media (max-width: 900px) {
  :root { --top: 62px }
  .site-shell { display: block }
  .topbar { display: flex; gap: 9px; padding: 8px 12px }
  .brand { margin-right: 3px }
  .brand img { width: 33px; height: 33px }
  .brand-note { display: none }
  .header-search { flex: 1 }
  .header-actions { margin-left: auto; gap: 2px }
  .topbar .header-cta { display: none }
  .topbar .mobile-menu { display: inline-flex }
  .sidebar { position: fixed; inset: var(--top) auto 0 0; width: min(280px, 83vw); height: auto; z-index: 9; transform: translateX(-105%); transition: transform .2s ease }
  .menu-open { overflow: hidden }
  .menu-open .sidebar { transform: none }
  .site-no-js { background: var(--white); display: block; padding: 8px 14px }
  .hero-inner { max-width: 68% }
}
@media (max-width: 700px) {
  .container { padding: 15px 14px 0 }
  .hero { min-height: 0 }
  .hero-inner { max-width: 100%; padding: 25px 18px 116px }
  .hero h1 { font-size: clamp(2.2rem, 8vw, 3.25rem); max-width: 13ch }
  .hero p { margin-top: 10px }
  .hero img { top: auto; bottom: -35px; right: -21px; height: 195px; width: min(67%, 390px); opacity: .82 }
  .hero-actions { margin-top: 16px }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px }
  .section-head { align-items: start }
  .section-head .link { flex: 0 0 auto; max-width: 37% }
  .section-head .link .icon { display: none }
  .article-layout, .forum-layout, .product-detail { grid-template-columns: minmax(0, 1fr) }
  .read-panel { position: static }
  .product-visual { max-width: 500px }
}
@media (max-width: 440px) {
  .brand-word { font-size: 1.18rem }
  .topbar { padding-inline: 7px; gap: 5px }
  .topbar .btn-quiet { padding-inline: 6px }
  .header-search { padding-inline: 6px 1px; gap: 2px }
  .header-search > .icon, .language .current-language { display: none }
  .header-search button { padding: 5px }
  .header-search input { font-size: 16px; padding-inline: 1px }
  .quick-card small { display: none }
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .region-card { padding-inline: 7px }
  .region-card .tile-icon { width: 26px; height: 26px }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .card-copy { padding: 9px }
  .card-copy h3 { font-size: 1rem }
  .card-copy p { font-size: .875rem }
  .section-head .link { font-size: .88rem }
  .form-grid { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important }
}
.site-no-js { display: none }
@media (max-width: 900px) {
  .site-no-js { display: flex }
}
.video-panel { margin-bottom: 24px; align-items: center }
.video-panel .tile-icon { width: 42px; height: 42px }
.video-panel p .link { margin-top: 1px }
.community-side h2, .comment-form h3 { margin-bottom: 12px }
.community-side .form-grid { grid-template-columns: minmax(0, 1fr) }
.comment-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
.post-body h2 { font-size: 1.25rem }
.product-data .hero-actions { margin-top: 4px }
.read-panel a:hover { text-decoration: underline; text-underline-offset: 3px }
.translation-consent { display: grid; gap: 5px }
.translation-consent label { display: flex; align-items: flex-start; gap: 8px; font-weight: 640 }
.translation-consent input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent) }
.translation-consent p { padding-inline-start: 26px }
.geo-crumbs { list-style: none; padding: 0; margin-top: 0 }
.geo-crumbs li { display: inline-flex; align-items: flex-start; gap: 5px; max-width: 100%; min-width: 0 }
.geo-crumbs li > .icon { margin-top: 3px }
.geo-crumbs li > a, .geo-crumbs li > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; min-width: 0; overflow-wrap: anywhere }
.geo-crumbs small { color: var(--muted); font-size: .76rem }
.geo-crumbs [aria-current=page] { font-weight: 700 }
.geo-crumbs [aria-current=page] small { font-weight: 500 }
.geo-search-heading { margin-bottom: 12px }
.page-counter { font-size: .9rem; color: var(--muted) }
.provider-distance { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .87rem }
.provider-card .card-meta a { color: var(--accent-dark) }
.provider-card .card-meta a:hover { text-decoration: underline }
