/* Hallmark · pre-emit critique: P4 H5 E5 S5 R4 V4 */
/* Hallmark · macrostructure: Narrative Workflow · tone: public-information comparison guide · anchor hue: teal-navy
 * theme: source-locked mobile comparison guide · studied: source reference camp · enrichment: Tier-C generated still
 */
@import url("./tokens.css");

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; background: var(--color-paper); }
body { min-width: 20rem; margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; }
button, select { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: var(--rule-strong) solid var(--color-focus); outline-offset: 0.1875rem; }
.skip-link { position: fixed; inset: var(--space-sm) auto auto var(--space-sm); z-index: var(--z-toast); padding: var(--space-xs) var(--space-sm); background: var(--color-navy); color: var(--color-teal-ink); font-family: var(--font-ui); font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform var(--dur-short) var(--ease-out); }
.skip-link:focus { transform: translateY(0); }

.hero { position: relative; min-height: 20.75rem; overflow: hidden; border-block: var(--rule-strong) solid var(--color-navy); background: linear-gradient(145deg, var(--color-surface) 0%, var(--color-surface-blue) 100%); }
.hero__content { position: relative; z-index: var(--z-raised); width: min(66%, 42rem); padding: var(--space-md) 0 var(--space-lg) max(var(--space-md), env(safe-area-inset-left)); }
.hero__pr { margin: 0 0 var(--space-sm); color: var(--color-navy); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em; line-height: 1.35; }
.hero h1 { max-width: 13ch; margin: 0; color: var(--color-navy-deep); font-family: var(--font-display); font-size: var(--text-display); font-style: normal; font-weight: 900; letter-spacing: -0.06em; line-height: 1.22; overflow-wrap: anywhere; }
.hero__lead { display: none; max-width: 37ch; margin: var(--space-md) 0 0; font-size: var(--text-sm); font-weight: 700; line-height: 1.65; }
.hero__notice { max-width: 34ch; margin: var(--space-sm) 0 0; color: var(--color-ink-soft); font-size: 0.625rem; font-weight: 500; line-height: 1.45; }
.hero__cta { display: inline-flex; align-items: center; justify-content: space-between; min-height: 2.75rem; min-width: min(100%, 12.5rem); gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: 999px; background: var(--color-teal); color: var(--color-teal-ink); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 900; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.hero__cta svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.hero__cta:active { transform: translateY(0.0625rem); }
@media (hover: hover) and (pointer: fine) { .hero__cta:hover { background: var(--color-teal-deep); transform: translateY(-0.0625rem); } }
.hero__art { position: absolute; z-index: var(--z-base); right: -7%; bottom: -23%; width: 61%; max-width: 28rem; height: auto; mix-blend-mode: multiply; }
.hero__city { position: absolute; right: 0; bottom: 0; left: 48%; z-index: var(--z-base); display: flex; align-items: end; height: 22%; gap: 0.1875rem; opacity: 0.44; }
.hero__city span { display: block; width: 18%; background: var(--color-rule); }
.hero__city span:nth-child(1) { height: 45%; }.hero__city span:nth-child(2) { height: 76%; }.hero__city span:nth-child(3) { height: 55%; }.hero__city span:nth-child(4) { height: 100%; }.hero__city span:nth-child(5) { height: 66%; }
.hero__thought { position: absolute; z-index: var(--z-raised); top: 0.85rem; right: 0.5rem; display: grid; place-items: center; width: 4.1rem; aspect-ratio: 1; border: var(--rule-thin) solid var(--color-navy); border-radius: 45% 48% 45% 40%; background: var(--color-surface); color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; line-height: 1; }
.hero__thought::after { position: absolute; right: 0.45rem; bottom: -0.42rem; width: 0.65rem; height: 0.65rem; border-right: var(--rule-thin) solid var(--color-navy); border-bottom: var(--rule-thin) solid var(--color-navy); background: var(--color-surface); content: ""; transform: rotate(45deg); }
.hero__thought i { position: absolute; right: 3.9rem; display: block; border-radius: 50%; background: var(--color-surface); outline: var(--rule-thin) solid var(--color-navy); }.hero__thought i:nth-child(1) { width: 0.32rem; height: 0.32rem; bottom: -0.12rem; }.hero__thought i:nth-child(2) { width: 0.2rem; height: 0.2rem; right: 4.35rem; bottom: -0.34rem; }.hero__thought i:nth-child(3) { display: none; }

.section-nav { position: relative; z-index: var(--z-sticky); display: flex; justify-content: center; overflow-x: auto; overscroll-behavior-inline: contain; border-bottom: var(--rule-strong) solid var(--color-teal-deep); background: var(--color-teal); scrollbar-width: none; }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a { display: grid; flex: 0 0 auto; place-items: center; min-height: 2.25rem; padding-inline: var(--space-sm); border-inline-end: var(--rule-thin) solid var(--color-teal-ink); color: var(--color-teal-ink); font-family: var(--font-ui); font-size: 0.625rem; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; }
.section-nav a:last-child { border-inline-end: 0; }
.section-nav a:active { background: var(--color-teal-deep); }
@media (hover: hover) and (pointer: fine) { .section-nav a:hover { background: var(--color-teal-deep); } }

.section, .finder { width: min(100%, 64rem); margin-inline: auto; padding: var(--space-xl) var(--space-md); }
.section--intro { padding-top: var(--space-md); }
.intro-grid { display: grid; gap: var(--space-md); }
.check-card, .system-card { position: relative; min-width: 0; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-md); }
.section-kicker { margin: 0; color: var(--color-teal-deep); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 900; }
.check-card h2, .system-card h2 { margin: var(--space-2xs) 0 var(--space-sm); color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-lg); font-style: normal; font-weight: 900; letter-spacing: -0.035em; line-height: 1.4; }
.check-card > p:not(.section-kicker), .system-card p { margin: 0 0 var(--space-sm); font-size: var(--text-sm); line-height: 1.7; }
.check-list { display: grid; gap: var(--space-xs); margin: var(--space-md) 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 700; line-height: 1.45; }
.check-list li { display: flex; gap: var(--space-xs); align-items: start; }.check-list span { display: grid; flex: 0 0 auto; place-items: center; width: 1.125rem; height: 1.125rem; margin-top: 0.03rem; border-radius: var(--radius-sm); background: var(--color-teal); color: var(--color-teal-ink); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1; }
.small-note { padding-right: 4.2rem; color: var(--color-ink-soft); font-size: var(--text-xs) !important; }
.check-card__illustration { position: absolute; right: var(--space-xs); bottom: var(--space-sm); width: 4.25rem; color: var(--color-navy); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.system-card { border: 0; border-radius: 0; background: transparent; padding: var(--space-sm) var(--space-xs); }
.system-card h2 { display: inline; border-bottom: var(--rule-strong) solid var(--color-teal); padding-bottom: 0.12rem; }
.system-card h3 { margin: var(--space-md) 0 var(--space-xs); color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-md); font-style: normal; font-weight: 900; }

.support-strip { width: min(calc(100% - var(--space-xl)), 63rem); margin-inline: auto; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface-blue); padding: var(--space-sm); }
.support-strip > h2 { margin: 0 0 var(--space-sm); color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-md); font-weight: 900; letter-spacing: 0.02em; line-height: 1.35; text-align: center; }
.support-strip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-surface); }
.support-strip article { display: grid; min-width: 0; place-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-xs); border: var(--rule-thin) solid var(--color-rule-light); text-align: center; }
.support-strip svg { width: 2.55rem; height: 2.55rem; color: var(--color-navy); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.support-strip h3 { margin: 0; color: var(--color-ink); font-family: var(--font-ui); font-size: 0.625rem; font-weight: 800; line-height: 1.4; }

.section--criteria { padding-top: var(--space-lg); }
.band-title { margin: 0; padding: var(--space-xs) var(--space-sm); background: var(--color-navy); color: var(--color-teal-ink); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 900; letter-spacing: 0.07em; line-height: 1.25; text-align: center; }
.band-title span { color: var(--color-gold); font-size: 1.28em; }
.criteria-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--rule-thin) solid var(--color-navy); }
.criteria-grid article { position: relative; min-width: 0; padding: var(--space-md) var(--space-sm); border: var(--rule-thin) solid var(--color-rule); background: var(--color-surface); }
.criteria-num { display: block; color: var(--color-teal-deep); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; line-height: 1; }
.criteria-grid svg { width: 2.75rem; height: 2.75rem; margin: var(--space-xs) 0; color: var(--color-navy); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.criteria-grid h3 { margin: 0 0 var(--space-xs); color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 900; line-height: 1.5; }
.criteria-grid p { margin: 0; font-size: var(--text-xs); line-height: 1.65; }

.section-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-md); color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 900; letter-spacing: 0.025em; line-height: 1.35; text-align: center; }
.section-title::before, .section-title::after { height: var(--rule-thin); background: var(--color-rule); content: ""; }
.swipe-note { display: flex; justify-content: center; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-xs); color: var(--color-teal-deep); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; }.swipe-note svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.comparison-scroll { overflow-x: auto; border: var(--rule-thin) solid var(--color-navy); background: var(--color-surface); }
.comparison-table { min-width: 50rem; width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.45; font-variant-numeric: tabular-nums; }.comparison-table th, .comparison-table td { padding: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); text-align: left; vertical-align: middle; }.comparison-table thead th { background: var(--color-navy); color: var(--color-teal-ink); font-weight: 800; text-align: center; white-space: nowrap; }.comparison-table tbody th { position: sticky; left: 0; background: var(--color-surface-blue); color: var(--color-navy); font-weight: 900; white-space: nowrap; }
.comparison-note { margin: var(--space-sm) 0 0; color: var(--color-ink-soft); font-size: var(--text-xs); line-height: 1.65; }

.finder { margin-top: var(--space-md); border-block: var(--rule-thin) solid var(--color-rule); background: var(--color-surface-teal); }
.finder h2 { margin: 0; color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; letter-spacing: 0.04em; line-height: 1.35; text-align: center; }.finder__intro { margin: var(--space-xs) auto var(--space-md); max-width: 56ch; color: var(--color-ink-soft); font-size: var(--text-xs); text-align: center; }
.finder__controls { display: grid; gap: var(--space-sm); }.finder fieldset { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }.finder legend, .sort-select { color: var(--color-navy); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 800; }.finder legend { width: 100%; margin-bottom: var(--space-2xs); }.filter-chip { min-height: 2.25rem; padding: var(--space-xs) var(--space-sm); border: var(--rule-thin) solid var(--color-rule); border-radius: 999px; background: var(--color-surface); color: var(--color-ink); font-size: var(--text-xs); font-weight: 700; line-height: 1; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }.filter-chip.is-selected { border-color: var(--color-teal-deep); background: var(--color-teal); color: var(--color-teal-ink); }.filter-chip:active { transform: translateY(0.0625rem); }@media (hover: hover) and (pointer: fine) { .filter-chip:not(.is-selected):hover { border-color: var(--color-teal-deep); background: var(--color-surface-blue); } }
.sort-select { display: grid; gap: var(--space-2xs); }.sort-select select { min-height: 2.5rem; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); padding-inline: var(--space-sm); }.filter-status { min-height: 1.7lh; margin: var(--space-sm) 0 0; color: var(--color-ink-soft); font-size: var(--text-xs); }

.ranking-section { padding-top: var(--space-2xl); }.service-list { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }.service-card { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); overflow: hidden; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); }.service-card--top { border-color: var(--color-gold); background: var(--color-surface-warm); }.rank-medal { display: grid; place-content: center; align-content: center; gap: var(--space-2xs); background: var(--color-surface-blue); color: var(--color-navy); font-family: var(--font-display); text-align: center; }.service-card--top .rank-medal { background: var(--color-gold); color: var(--color-navy-deep); }.rank-medal strong { font-size: var(--text-sm); line-height: 1.15; }.rank-medal span { font-size: 0.5625rem; font-weight: 700; line-height: 1.1; }.service-card__main { min-width: 0; padding: var(--space-sm); }.service-card h3 { margin: 0; color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 900; line-height: 1.3; }.service-card__summary { margin: var(--space-2xs) 0 var(--space-xs); color: var(--color-teal-deep); font-size: var(--text-xs); font-weight: 800; line-height: 1.5; }.service-card ul { display: grid; gap: var(--space-2xs); margin: 0; padding-left: 1.1em; font-size: var(--text-xs); line-height: 1.5; }.service-card__facts { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-thin) solid var(--color-rule-light); }.service-card__facts p { min-width: 0; margin: 0; padding: var(--space-xs); border-inline-end: var(--rule-thin) solid var(--color-rule-light); font-size: 0.625rem; line-height: 1.45; overflow-wrap: anywhere; }.service-card__facts p:last-child { border-inline-end: 0; }.service-card__facts b { display: block; margin-bottom: var(--space-2xs); color: var(--color-ink-soft); font-size: 0.5625rem; }.service-cta { grid-column: 2; display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: var(--space-xs) var(--space-sm); border: 0; border-top: var(--rule-thin) solid var(--color-rule-light); background: var(--color-surface); color: var(--color-teal-deep); font-size: var(--text-xs); font-weight: 900; line-height: 1; text-align: left; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }.service-cta span { font-size: var(--text-xl); line-height: 0; }.service-cta:active { transform: translateX(0.125rem); }@media (hover: hover) and (pointer: fine) { .service-cta:hover { background: var(--color-surface-teal); color: var(--color-navy); } }.service-cta:disabled, .service-cta[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.advice-box { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; margin-top: var(--space-md); border: var(--rule-thin) solid var(--color-gold); border-radius: var(--radius-md); background: var(--color-surface-warm); padding: var(--space-md); }.advice-box svg { width: 2.5rem; height: 2.5rem; color: var(--color-gold-deep); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }.advice-box h3 { margin: 0 0 var(--space-xs); color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-md); font-weight: 900; line-height: 1.45; }.advice-box p { margin: 0; font-size: var(--text-xs); line-height: 1.7; }.advice-box .official-status { margin-top: var(--space-xs); color: var(--color-ink-soft); font-weight: 700; }

.flow-list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }.flow-list li { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: var(--space-sm); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); }.flow-list li:not(:last-child)::after { position: absolute; bottom: -0.85rem; left: 1rem; z-index: var(--z-raised); width: 0; height: 0; border-top: 0.4rem solid var(--color-teal); border-right: 0.4rem solid transparent; border-left: 0.4rem solid transparent; content: ""; }.flow-list > li > span { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-teal); color: var(--color-teal-ink); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 900; }.flow-list h3 { margin: 0 0 var(--space-2xs); color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-md); font-weight: 900; line-height: 1.4; }.flow-list p { margin: 0; font-size: var(--text-xs); line-height: 1.7; }

.faq-section { padding-bottom: var(--space-3xl); }.faq-list { border-top: var(--rule-strong) solid var(--color-navy); }.faq-list details { border-bottom: var(--rule-thin) solid var(--color-rule); background: var(--color-surface); }.faq-list summary { position: relative; min-height: 3.1rem; padding: var(--space-sm) 2.75rem var(--space-sm) 2.1rem; color: var(--color-navy); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 800; line-height: 1.5; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::before { position: absolute; top: var(--space-sm); left: var(--space-sm); color: var(--color-teal-deep); content: "Q"; font-family: var(--font-display); font-size: var(--text-md); font-weight: 900; }.faq-list summary::after { position: absolute; top: 50%; right: var(--space-md); width: 0.65rem; height: 0.65rem; border-right: var(--rule-strong) solid var(--color-navy); border-bottom: var(--rule-strong) solid var(--color-navy); content: ""; transform: translateY(-68%) rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }.faq-list details[open] summary::after { transform: translateY(-32%) rotate(225deg); }.faq-list details p { margin: 0; padding: 0 var(--space-md) var(--space-md) 2.1rem; color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.75; }

.site-footer { position: relative; border-top: var(--rule-strong) solid var(--color-navy); background: var(--color-navy); color: var(--color-teal-ink); padding: var(--space-xl) var(--space-md) calc(var(--space-3xl) + 3rem); }.footer__body, .footer__links { width: min(100%, 64rem); margin-inline: auto; }.footer__body h2 { margin: 0 0 var(--space-xs); color: var(--color-teal-ink); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 900; }.footer__body p { margin: 0 0 var(--space-md); color: var(--color-surface-teal); font-size: var(--text-xs); line-height: 1.7; }.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-thin) solid var(--color-rule); }.footer__links a { min-height: 2.25rem; color: var(--color-teal-ink); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; line-height: 2.25rem; text-decoration: underline; text-underline-offset: 0.2rem; white-space: nowrap; }.footer__trust { position: absolute; top: calc(var(--space-xl) * -1); right: var(--space-md); display: flex; align-items: center; gap: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-navy); padding: var(--space-xs) var(--space-sm); }.footer__trust svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }.footer__trust p { margin: 0; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 800; line-height: 1.35; }
.sticky-cta { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); border-top: var(--rule-thin) solid var(--color-teal-deep); background: var(--color-teal); color: var(--color-teal-ink); padding: max(var(--space-xs), env(safe-area-inset-bottom)) var(--space-md) var(--space-xs); box-shadow: 0 -0.125rem 0.75rem var(--color-shadow); }.sticky-cta[hidden] { display: none; }.sticky-cta > span { min-width: 0; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 800; }.sticky-cta a { display: inline-flex; align-items: center; min-height: 2.25rem; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border: var(--rule-thin) solid var(--color-teal-ink); border-radius: 999px; color: var(--color-teal-ink); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 900; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }.sticky-cta a:active { transform: translateY(0.0625rem); }@media (hover: hover) and (pointer: fine) { .sticky-cta a:hover { background: var(--color-teal-ink); color: var(--color-teal-deep); } }

@media (min-width: 40rem) {
  .hero { min-height: 26rem; }.hero__content { padding: var(--space-lg) 0 var(--space-xl) max(var(--space-xl), env(safe-area-inset-left)); }.hero__lead { display: block; }.hero__notice { font-size: var(--text-xs); }.hero__art { right: 1%; bottom: -18%; width: 45%; }.hero__thought { top: var(--space-lg); right: 10%; width: 5rem; }.hero__city { left: 53%; }.section-nav a { padding-inline: var(--space-md); font-size: var(--text-xs); }.section, .finder { padding-inline: var(--space-xl); }.intro-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr); align-items: stretch; }.system-card { padding: var(--space-md) 0 var(--space-md) var(--space-md); }.support-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.criteria-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.criteria-grid article { padding: var(--space-md); }.criteria-grid h3 { font-size: var(--text-base); }.criteria-grid p { font-size: var(--text-sm); }.service-card { grid-template-columns: 5rem minmax(0, 1fr) minmax(12rem, 0.58fr) auto; align-items: stretch; }.service-card__main { grid-column: 2; }.service-card__facts { grid-column: 3; display: block; align-self: stretch; border-top: 0; border-inline-start: var(--rule-thin) solid var(--color-rule-light); }.service-card__facts p { padding: var(--space-sm); border-inline-end: 0; border-bottom: var(--rule-thin) solid var(--color-rule-light); font-size: var(--text-xs); }.service-cta { grid-column: 4; width: 3.35rem; min-height: 100%; justify-content: center; border-top: 0; border-inline-start: var(--rule-thin) solid var(--color-rule-light); padding: var(--space-sm); }.service-cta:not(:focus-visible) { font-size: 0; }.service-cta span { font-size: 2rem; }.flow-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }.flow-list li { grid-template-columns: 1fr; padding: var(--space-sm); }.flow-list li:not(:last-child)::after { top: 2rem; right: -0.45rem; bottom: auto; left: auto; border-top: 0.4rem solid transparent; border-bottom: 0.4rem solid transparent; border-left: 0.4rem solid var(--color-teal); }.flow-list > li > span { width: 1.75rem; }.flow-list h3 { font-size: var(--text-sm); }.flow-list p { font-size: var(--text-xs); }.site-footer { padding-inline: var(--space-xl); }
}

@media (min-width: 60rem) {
  .hero__content { padding-left: max(var(--space-3xl), calc((100% - 64rem) / 2)); }.hero__art { right: max(var(--space-xl), calc((100% - 64rem) / 2)); width: min(28%, 22rem); }.hero__thought { right: max(17%, calc((100% - 64rem) / 2 + 12rem)); }.hero__city { left: 57%; right: max(var(--space-lg), calc((100% - 64rem) / 2)); }.section-nav { position: sticky; top: 0; }.service-list { gap: var(--space-md); }.site-footer { padding-inline: max(var(--space-xl), calc((100% - 64rem) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
}