, not inside a Section wrapper. */ .action-band--bleed { border-radius: 0; box-shadow: none; display: block; padding: 0; } .action-band--bleed::before { background: var(--wave-color, var(--color-paper)); block-size: var(--wave-h-section); content: ""; inline-size: var(--wave-inline-size); inset-block: -1px auto; inset-inline-start: 50%; -webkit-mask: var(--wave-mask) center top/100% 100% no-repeat; mask: var(--wave-mask) center top/100% 100% no-repeat; position: absolute; transform: translateX(-50%) scaleY(-1); z-index: 3; } .action-band__media { inset: 0; position: absolute; z-index: 0; } .action-band__media > img, .action-band__media > picture, .action-band__media > picture > img { block-size: 100%; display: block; inline-size: 100%; object-fit: cover; object-position: var(--media-focal-position, 50% 50%); } .action-band__veil { background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary-deep) 86%, transparent) 0%, color-mix(in srgb, var(--color-primary-deep) 55%, transparent) 55%, color-mix(in srgb, var(--color-primary-deep) 24%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--color-primary-deep) 55%, transparent), transparent 45%); inset: 0; position: absolute; z-index: 1; } .action-band--bleed .action-band__inner { display: grid; gap: var(--space-xl); padding-block: calc(var(--section-pad-spacious) + var(--wave-h-section) * 0.4) var(--section-pad-spacious); position: relative; z-index: 2; } .action-band--bleed .action-band__copy h2 { max-inline-size: 15ch; } .action-band--bleed .action-band__copy > p:last-child { max-inline-size: var(--measure-md); } /* -------------------------------------------------------------------------- Location-template composition -------------------------------------------------------------------------- */ .location-page__service-area { border-block-start: 1px solid var(--color-line); margin-block-start: var(--space-xl); padding-block-start: var(--space-xl); } .brand-core-values .feature-card__icon { block-size: 3.2rem; inline-size: 3.2rem; } .brand-core-values .card-grid { grid-template-columns: minmax(0, 1fr); } @media (min-width: 40rem) { .brand-core-values .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .brand-core-values .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- Area display + lists -------------------------------------------------------------------------- */ .area-display { display: grid; gap: var(--space-lg); grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr); } .area-display__primary { align-content: end; background: var(--color-primary-deep); border-radius: var(--radius-drop); color: var(--color-fg-on-dark); display: grid; min-block-size: 14rem; overflow: hidden; padding: 1.4rem; position: relative; } .area-display__primary strong { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.028em; position: relative; z-index: 1; } .area-list--plain { align-content: start; display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .area-list--plain li { background: none; border: 0; border-block-end: 1px solid var(--color-line); border-radius: 0; padding: 0.75rem 0.25rem; } /* -------------------------------------------------------------------------- Overhang clearance — sections that follow a deep band whose photo hangs over the seam keep their heading clear of the hanging media (desktop). -------------------------------------------------------------------------- */ @media (min-width: 960px) { .content-section--overhang-clear .section-heading { max-inline-size: 34rem; min-block-size: clamp(2rem, 5vw, 4rem); } } /* -------------------------------------------------------------------------- Seam flow — sections that carve their own top seam (wave/crest) and the full-bleed action band sit flush against the band before them, instead of showing a sliver of page background through the global section gap. A page that ends on a bleed band runs straight into the footer flowline. -------------------------------------------------------------------------- */ main > * + .content-section--wave-top, main > * + .content-section--crest-top, main > * + .action-band--bleed { margin-block-start: 0; } main:has(> .action-band--bleed:last-child) { padding-block-end: 0; } /* -------------------------------------------------------------------------- Form shell + wizard adjustments -------------------------------------------------------------------------- */ .form-shell { background: var(--form-surface); border: 1px solid var(--color-line); border-radius: var(--radius-drop); box-shadow: var(--shadow-3); overflow: hidden; } .form-shell__intro { --eyebrow-color: var(--eyebrow-color-on-dark, var(--color-accent)); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-deep) 96%, transparent), var(--color-primary)); color: var(--color-fg-on-dark); padding: var(--space-md); position: relative; } .form-shell__intro h2, .form-shell__intro p { color: inherit; margin: 0; } .form-shell__intro h2 { font-size: var(--font-lg); line-height: 1.1; } .form-shell__intro .eyebrow { color: var(--eyebrow-color); } .form-shell__intro > p:last-child { color: color-mix(in srgb, currentColor 76%, transparent); } .form-shell [data-lead-wizard-root] { padding: var(--space-md); } .form-shell .wizard-form { border: 0; border-radius: 0; box-shadow: none; padding: 0; } .form-shell .wizard-completion { border-block-start: 1px solid var(--color-line); margin-block-start: 1rem; padding-block-start: 1rem; } .form-shell .wizard-completion[data-wizard-completion-step] { border-block-start: 0; margin-block-start: 0; padding-block-start: 0; } .service-area-summary { border-block-start: 1px solid var(--color-line); color: color-mix(in srgb, currentColor 72%, transparent); line-height: 1.55; margin: 0; padding-block-start: 1rem; } /* -------------------------------------------------------------------------- Metrics + misc content -------------------------------------------------------------------------- */ .content-page h2 { margin-block-start: 1.5rem; } .content-page p, .content-page li { line-height: var(--leading-loose); } /* -------------------------------------------------------------------------- Gallery-only brand token swatches -------------------------------------------------------------------------- */ .component-state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-md); align-items: stretch; } .component-state-grid > * { margin: 0; text-align: start; } .brand-token-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); } .brand-token { background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); display: grid; gap: var(--space-xs); overflow: hidden; padding: 0 1rem 1rem; } .brand-token > span { block-size: 4.5rem; margin-inline: -1rem; } .brand-token--true-flow > span { background: linear-gradient(100deg, #052427 0 30%, #0b7479 30% 72%, #f2bf32 72%); } .brand-token--medix > span { background: linear-gradient(100deg, #08172e 0 30%, #173f77 30% 72%, #2f9348 72%); } .brand-token--franchise > span { background: linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.16) 50% 51%, transparent 52%), linear-gradient(#053c42, #075e65); background-size: 2rem 2rem, auto; } .brand-token small { color: color-mix(in srgb, currentColor 62%, transparent); } .spacing-token-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); } .spacing-token { align-content: end; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-md); display: grid; gap: var(--space-sm); min-block-size: 5rem; padding: var(--space-md); } .spacing-token > span { background: var(--color-primary); block-size: 0.55rem; border-radius: var(--radius-pill); max-inline-size: 100%; } .spacing-token code { font-size: var(--font-2xs); overflow-wrap: anywhere; } /* Token ramp swatches (gallery) */ .token-ramp { border-radius: var(--radius-md); display: grid; grid-auto-flow: column; min-block-size: 3rem; overflow: hidden; } .token-ramp span { block-size: 100%; } /* -------------------------------------------------------------------------- Franchise compositions -------------------------------------------------------------------------- */ /* Bold stat moment: the figure sits directly on the deep band at display scale — no box-in-box. The disclaimer stays verbatim and quiet. */ .franchise-cost { align-items: end; display: grid; gap: var(--space-2xl); grid-template-columns: auto minmax(0, 1fr); position: relative; } .franchise-cost__value { color: var(--color-accent); font-family: var(--font-display); font-size: clamp(4.2rem, 12.5vw, 10rem); font-weight: 900; letter-spacing: -0.045em; line-height: 0.8; } .franchise-cost h2, .franchise-cost p { margin: 0; } .franchise-cost h2, .franchise-cost p:not(.eyebrow) { color: inherit; } .franchise-cost__copy { min-inline-size: 0; } .franchise-cost__disclaimer { color: color-mix(in srgb, currentColor 68%, transparent) !important; font-size: 0.74rem; line-height: 1.45; } .franchise-services-section .section-heading { margin-block-end: var(--space-xl); } .franchise-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .franchise-service-grid .feature-card__content { align-items: start; } .franchise-service-grid .feature-card__icon { block-size: 3.25rem; inline-size: 3.25rem; } .franchise-service-grid .feature-card__content h3 { font-size: var(--font-sm); } .franchise-founder-section .media-overlap-feature__body { --media-overlap-panel-bg: var(--color-card); } .franchise-founder-section .media-overlap-feature__content h2 { max-inline-size: 20ch; } .franchise-founder-section .prose { max-inline-size: var(--measure-lg); } #franchise-markets, #initial-cost, #franchise-questions, #franchise-inquiry { scroll-margin-top: calc(var(--nav-h) + 1rem); } .franchise-market-grid { display: grid; gap: var(--space-xl); margin-block-start: var(--space-2xl); } .franchise-markets-section { --section-bg: var(--color-primary); } .franchise-market-grid__state { min-inline-size: 0; } .franchise-market-grid__state-heading { align-items: baseline; border-block-end: 2px solid color-mix(in srgb, currentColor 30%, transparent); display: flex; margin-block-end: var(--space-md); padding-block-end: var(--space-sm); } .franchise-market-grid__state-heading h3 { color: inherit; font-size: var(--font-xl); margin: 0; } .franchise-market-grid__list { display: grid; gap: var(--space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .franchise-market-grid__item { min-inline-size: 0; } .location-directory__card, .franchise-market-card { background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-card)) 0%, var(--color-card) 52%); border: 1px solid color-mix(in srgb, var(--color-primary) 13%, var(--color-line)); border-radius: var(--radius-drop-sm); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 12%, transparent); position: relative; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .location-directory__card::before, .franchise-market-card::before { background: color-mix(in srgb, var(--color-primary) 38%, transparent); block-size: 2px; content: ""; inline-size: 2.75rem; inset-block-start: 0; inset-inline-start: var(--space-md); position: absolute; } .franchise-market-card { --color-fg-heading: var(--color-fg-heading-on-light); align-items: center; color: var(--color-fg-on-light); display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr) auto; min-block-size: 5.5rem; padding: var(--space-md); } .franchise-market-card__identity h4 { color: var(--color-fg-heading-on-light); font-family: var(--font-display); font-size: var(--font-md); line-height: 1.08; margin: 0; } .franchise-market-card__actions { margin: 0; } .franchise-market-card__button { --btn-depth-offset: .12rem; --button-control-font-size: var(--font-2xs); --button-control-padding-block: .625rem; --button-control-padding-inline: .75rem; inline-size: auto; } .franchise-market-callout { margin-block-start: var(--space-xl); } .franchise-process-split .indexed-list { margin: 0; } .franchise-process-list .indexed-list__item { padding-block: var(--space-md); } .franchise-faq .section-heading { max-inline-size: 28rem; } .franchise-final-split .franchise-inquiry-panel { inline-size: 100%; } .franchise-selected-market { border-block-end: 1px solid var(--color-line); margin-block-end: var(--space-md); padding-block-end: var(--space-md); } .franchise-selected-market .text-eyebrow { color: var(--color-primary); } @media (min-width: 40rem) { .franchise-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 64rem) { .franchise-service-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .franchise-process-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .franchise-final-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } @media (max-width: 900px) { .franchise-market-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .franchise-market-grid__list { grid-template-columns: minmax(0, 1fr); } .franchise-market-card { min-block-size: 0; } } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 759px) { .brand-hero--home { min-block-size: clamp(34.5rem, 76svh, 39rem); } .site-hero.brand-hero--form.decorative-hero--no-media { min-block-size: clamp(20rem, 43svh, 22rem); } .site-hero.brand-hero--form .decorative-hero__content-wrapper { padding-block: calc(var(--nav-h) + 1rem) 1.45rem; } .brand-hero h1 { font-size: clamp(2.2rem, 11vw, 3.05rem); } body[data-audience=consumer] .brand-hero--home h1 { font-size: clamp(2rem, 8.75vw, 2.4rem); max-inline-size: none; } .brand-hero.brand-hero--form .decorative-hero__content h1 { font-size: clamp(1.9rem, 9vw, 2.35rem); } .form-shell__intro { padding: 0.9rem; } .action-band, .area-display, .franchise-cost { grid-template-columns: 1fr; } .area-list--plain { grid-template-columns: 1fr; } .brand-token-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- */ /* Service finder — ZIP-first entry into the scheduling wizard. */ /* Structural styling only; designer owns the finesse pass. */ .service-finder { --service-finder-control-height: var(--field-control-height, 2.5rem); --service-finder-control-font-size: max(16px, var(--font-xs)); container-type: inline-size; display: block; inline-size: 100%; max-inline-size: 34rem; } .service-finder__label { display: block; font-family: var(--font-heading, inherit); font-weight: 700; } .service-finder__label--hidden { block-size: 1px; clip-path: inset(50%); inline-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } .service-finder__row { align-items: flex-start; } /* Input height matches the default button height exactly (the row stretches both), so the pair reads as one designed control. Uniform radius: small controls never take the droplet corner. */ .service-finder__input { appearance: none; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-md); block-size: var(--service-finder-control-height); box-sizing: border-box; color: var(--color-ink); flex: 1 1 12rem; font-family: var(--font-body); font-size: var(--service-finder-control-font-size); line-height: 1; min-inline-size: 0; padding-block: 0; padding-inline: 1rem; } .service-finder__input:focus-visible { outline: 2px solid var(--color-primary-bright); outline-offset: 2px; } .service-finder__submit { --button-control-font-size: var(--service-finder-control-font-size); --button-control-padding-block: 0; block-size: var(--service-finder-control-height); flex: 0 0 auto; margin-block-start: 0; } .service-finder__hint { opacity: 0.82; } .service-finder__error { color: var(--color-accent); font-weight: 600; } .service-finder--hero .service-finder__error { color: var(--color-accent); } .content-section .service-finder__error { color: #a03d1d; } @media (max-width: 420px) { .service-finder__row { flex-direction: column; } .service-finder__input { flex: 0 0 auto; inline-size: 100%; } .service-finder__submit { inline-size: 100%; } } @container (max-width: 24rem) { .service-finder__row { flex-direction: column; } .service-finder__input { flex: 0 0 auto; inline-size: 100%; } .service-finder__submit { inline-size: 100%; } } .brand-hero .service-finder__input { border-color: transparent; } /* ------------------------------------------------------------------------- */ /* ZIP lookup and published location directory. */ .location-search__finder, .location-search__finder .service-finder { max-inline-size: none; } .location-search { max-inline-size: 42rem; } .location-directory-section { margin-block-start: 0; } .location-directory { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); } .location-directory__state { min-inline-size: 0; } .location-directory__state-heading { align-items: baseline; border-block-end: 2px solid color-mix(in srgb, var(--color-primary) 28%, transparent); display: flex; gap: var(--space-sm); margin-block-end: var(--space-md); padding-block-end: var(--space-sm); } .location-directory__state-heading h2 { font-size: var(--font-xl); margin: 0; } .location-directory__list { display: grid; gap: var(--space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .location-directory__item { min-inline-size: 0; } .location-directory__card { display: flex; flex-direction: column; gap: var(--space-sm); min-block-size: 9.75rem; padding: var(--space-md); } .location-directory__link { color: var(--color-fg-heading); text-decoration: none; } .location-directory__link:hover, .location-directory__link:focus-visible { text-decoration: none; } .location-directory__link::after { border-radius: var(--radius-drop-sm); content: ""; inset: 0; position: absolute; z-index: 0; } .location-directory__identity { display: grid; gap: var(--space-xs); min-inline-size: 0; } .location-directory__identity h3 { color: var(--color-fg-heading); font-family: var(--font-display); font-size: var(--font-md); line-height: 1.08; margin: 0; } .location-directory__brand { color: color-mix(in srgb, var(--color-fg) 64%, transparent); } .location-directory__areas { color: color-mix(in srgb, var(--color-fg) 60%, transparent); font-size: var(--font-2xs); line-height: 1.45; margin: 0; } .location-directory__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: auto; position: relative; z-index: 1; } .location-directory__actions--single { display: flex; } .location-directory__button { --btn-depth-offset: .12rem; --button-control-font-size: var(--font-2xs); --button-control-padding-block: .625rem; --button-control-padding-inline: .75rem; inline-size: auto; } .location-directory__link:focus-visible { outline: none; } .location-directory__link:focus-visible::after { outline: 2px solid var(--color-primary); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .location-directory__card:hover, .franchise-market-card:hover { border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-line)); box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--color-primary) 9%, transparent); transform: translateY(-1px); } } @media (max-width: 900px) { .location-directory__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .location-directory__list { grid-template-columns: minmax(0, 1fr); } .location-directory__card { min-block-size: 0; } } /* ------------------------------------------------------------------------- Compact booking gateway ------------------------------------------------------------------------- */ .booking-gateway { min-inline-size: 0; } .booking-gateway .section-heading { max-inline-size: 46rem; } .booking-gateway__list { max-inline-size: 58rem; } /* ------------------------------------------------------------------------- Saved-request booking outcomes ------------------------------------------------------------------------- */ .booking-outcome { container: scheduler/inline-size; min-inline-size: 0; } .booking-outcome__summary { align-items: start; display: grid; grid-template-columns: minmax(0, 1fr); } .booking-outcome__summary--complete { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-card) 95%); border: 1px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-line) 85%); border-radius: var(--radius-md); gap: var(--space-md); grid-template-columns: auto minmax(0, 1fr); padding: 0.85rem; } .booking-outcome__summary h4, .booking-outcome__summary p, .booking-outcome__message { margin: 0; } .booking-outcome__summary h4 { color: var(--color-fg-heading); font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.2rem); line-height: 1.25; } .booking-outcome__summary h4 + p { color: color-mix(in srgb, var(--color-fg) 66%, transparent); } .booking-outcome__check { background: var(--color-primary); border-radius: 50%; color: var(--color-fg-on-dark); display: grid; font-size: 0.88rem; font-weight: 800; block-size: 1.9rem; inline-size: 1.9rem; place-items: center; } .booking-outcome__message { color: color-mix(in srgb, var(--color-fg) 76%, transparent); } .booking-outcome__loading { background: var(--color-wash); border: 1px solid var(--color-line); border-radius: var(--radius-md); color: color-mix(in srgb, var(--color-fg) 72%, transparent); font-size: var(--font-xs); min-block-size: 3.4rem; padding: 0.85rem 1rem; } .booking-outcome__spinner { animation: booking-outcome-spin 0.8s linear infinite; border: 2px solid color-mix(in srgb, var(--color-primary) 22%, transparent); border-block-start-color: var(--color-primary); border-radius: 50%; block-size: 1.25rem; flex: 0 0 auto; inline-size: 1.25rem; } .booking-outcome__actions { background: var(--color-wash); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1rem; } .booking-outcome__announcement { block-size: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); inline-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } .scheduler-body, .scheduler-loading, .scheduler-dates, .scheduler-times, .scheduler-times-wrap { min-inline-size: 0; } .scheduler-loading { overflow: hidden; } .scheduler-skeleton { display: grid; gap: 0; grid-template-columns: 1fr; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); } .scheduler-skeleton span { background: linear-gradient(100deg, var(--color-wash) 20%, color-mix(in srgb, var(--color-primary) 9%, var(--color-card)) 42%, var(--color-wash) 64%); background-size: 240% 100%; border-radius: 0; block-size: 17rem; animation: scheduler-skeleton-shift 1.25s ease-in-out infinite; } .scheduler-skeleton__times { border-block-start: 1px solid var(--color-line); } .scheduler-context { color: color-mix(in srgb, var(--color-fg) 66%, transparent); margin: 0; } .scheduler-times { border: 0; margin: 0; padding: 0; scroll-margin-block-start: calc(var(--nav-h) + var(--space-sm)); } .scheduler-times__legend { block-size: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); inline-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } .scheduler-picker { background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; overflow: hidden; } .scheduler-calendar, .scheduler-time-panel { min-inline-size: 0; padding: var(--space-md); } .scheduler-time-panel { background: color-mix(in srgb, var(--color-primary) 3%, var(--color-card)); border-block-start: 1px solid var(--color-line); } .scheduler-calendar__header { align-items: center; display: grid; gap: 0.5rem; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; margin-block-end: 0.8rem; } .scheduler-calendar__header h5, .scheduler-times-empty h5 { color: var(--color-fg-heading); font-family: var(--font-display); font-size: var(--font-sm); font-weight: 750; line-height: 1.25; margin: 0; text-align: center; } .scheduler-times-empty h5 { text-align: start; } .scheduler-month-nav { align-items: center; appearance: none; background: transparent; border: 1px solid var(--color-line); border-radius: var(--radius-md); color: var(--color-fg-heading); cursor: pointer; display: inline-flex; font: inherit; block-size: 2.75rem; inline-size: 2.75rem; justify-content: center; line-height: 1; padding: 0; transition: background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); } .scheduler-month-nav__icon { background: currentColor; block-size: 0.95rem; inline-size: 0.95rem; -webkit-mask: url("/media/svg/arrow-right.svg") center/contain no-repeat; mask: url("/media/svg/arrow-right.svg") center/contain no-repeat; } .scheduler-month-nav__icon--previous { transform: rotate(180deg); } .scheduler-month-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card)); border-color: var(--color-primary); } .scheduler-month-nav:disabled { cursor: not-allowed; opacity: 0.3; } .scheduler-calendar__grid { --scheduler-calendar-gap: var(--space-xs); display: grid; gap: 0.45rem; } .scheduler-calendar__weekdays, .scheduler-calendar__week { display: grid; gap: var(--scheduler-calendar-gap); grid-template-columns: repeat(7, minmax(0, 1fr)); } .scheduler-calendar__days { display: grid; gap: var(--scheduler-calendar-gap); grid-template-columns: minmax(0, 1fr); } .scheduler-calendar__weekdays span { color: color-mix(in srgb, var(--color-fg) 68%, transparent); font-size: var(--font-2xs); font-weight: 750; padding-block: 0.25rem; text-align: center; } .scheduler-date, .scheduler-time { appearance: none; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-md); color: var(--color-fg); cursor: pointer; font: inherit; font-size: var(--font-xs); font-weight: 700; line-height: 1.25; min-block-size: 2.9rem; padding: 0.65rem 0.7rem; transition: background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); } .scheduler-date { align-items: center; aspect-ratio: 1/1; block-size: auto; border-radius: 0.65rem; display: inline-flex; justify-content: center; min-block-size: 0; min-inline-size: 0; inline-size: 100%; padding: 0.2rem; text-align: center; } .scheduler-date:hover:not(.is-unavailable), .scheduler-time:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card)); border-color: var(--color-primary); } .scheduler-date.is-selected, .scheduler-time.is-selected { background: var(--color-primary); border-color: var(--color-primary); box-shadow: none; color: var(--color-fg-on-dark); } .scheduler-date[aria-current=date]:not(.is-selected) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 68%, transparent); } .scheduler-date.is-unavailable { background: transparent; border-color: transparent; color: color-mix(in srgb, var(--color-fg) 30%, transparent); cursor: default; } .scheduler-date--outside { border-color: transparent; pointer-events: none; } .scheduler-date:focus-visible, .scheduler-time:focus-visible, .scheduler-month-nav:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .booking-outcome.is-booking :is(.scheduler-date, .scheduler-time):disabled { cursor: wait; opacity: 0.58; } .scheduler-times__list { display: grid; gap: 0.55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .scheduler-times-empty p { margin: 0; } .scheduler-times-empty > p { color: color-mix(in srgb, var(--color-fg) 72%, transparent); } .scheduler-notice { background: var(--color-wash); border: 1px solid var(--color-line); border-radius: var(--radius-md); color: color-mix(in srgb, var(--color-fg) 78%, transparent); font-size: var(--font-xs); line-height: 1.45; margin: 0; padding: 0.65rem 0.75rem; } .scheduler-notice--error { background: color-mix(in srgb, var(--error-text) 7%, var(--color-card)); border-color: color-mix(in srgb, var(--error-text) 28%, var(--color-line)); color: var(--error-text); } .scheduler-controls, .scheduler-book-actions { align-items: center; min-inline-size: 0; } .scheduler-book-actions { background: var(--color-card); border-block-start: 1px solid var(--color-line); display: grid; gap: 0.9rem; grid-column: 1/-1; grid-template-columns: minmax(0, 1fr); padding: var(--space-md); } .scheduler-book-actions .scheduler-action { inline-size: 100%; } .scheduler-book-summary { min-inline-size: 0; } .scheduler-book-summary__value, .scheduler-book-summary__timezone { margin: 0; } .scheduler-book-summary__value { color: var(--color-fg-heading); font-size: var(--font-sm); font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; } .scheduler-book-summary__timezone { color: color-mix(in srgb, var(--color-fg) 58%, transparent); font-size: var(--font-2xs); line-height: 1.4; margin-block-start: 0.15rem; } .scheduler-picker > .scheduler-notice { grid-column: 1/-1; margin: 0.85rem; } .scheduler-action:disabled { cursor: not-allowed; opacity: 0.48; } .scheduler-confirmation { background: var(--color-wash); border: 1px solid var(--color-line); border-radius: var(--radius-md); display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; inline-size: min(100%, 36rem); overflow: hidden; } .scheduler-confirmation dt, .scheduler-confirmation dd { border-block-end: 1px solid var(--color-line); margin: 0; padding: 0.7rem 0.8rem; } .scheduler-confirmation dt { color: color-mix(in srgb, var(--color-fg) 62%, transparent); font-size: var(--font-xs); font-weight: 700; } .scheduler-confirmation dd { color: var(--color-fg-heading); font-weight: 650; overflow-wrap: anywhere; } .scheduler-confirmation :is(dt, dd):nth-last-child(-n+2) { border-block-end: 0; } @keyframes booking-outcome-spin { to { transform: rotate(360deg); } } @keyframes scheduler-skeleton-shift { from { background-position: 100% 0; } to { background-position: -100% 0; } } @media (max-width: 759px) { .scheduler-confirmation { grid-template-columns: 1fr; } .scheduler-confirmation dt { border-block-end: 0; padding-block-end: 0.1rem; } .scheduler-confirmation dd { padding-block-start: 0.1rem; } .scheduler-confirmation :is(dt, dd):nth-last-child(-n+2) { border-block-end: 0; } } @container scheduler (min-width: 40rem) { .scheduler-picker, .scheduler-skeleton { grid-template-columns: minmax(18.5rem, 1.05fr) minmax(15rem, 0.95fr); } .scheduler-time-panel, .scheduler-skeleton__times { border-block-start: 0; border-inline-start: 1px solid var(--color-line); } .scheduler-book-actions { grid-template-columns: minmax(0, 1fr) auto; } .scheduler-book-actions .scheduler-action { inline-size: auto; min-inline-size: 11.5rem; } } @container scheduler (max-width: 39.999rem) { .scheduler-skeleton__times { display: none; } } @container scheduler (min-width: 22rem) and (max-width: 39.999rem) { .scheduler-calendar { padding-inline: 0.7rem; } .scheduler-calendar__grid { --scheduler-calendar-gap: .25rem; } } @media (prefers-reduced-motion: reduce) { .booking-outcome__spinner, .scheduler-skeleton span { animation: none; } .scheduler-date, .scheduler-time, .scheduler-month-nav { transition: none; } } .guide-card-grid__cards { margin-block-start: 0; } .guide-card .card-link__surface { display: flex; flex-direction: column; } .guide-card .card-link__body { align-items: stretch; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); } .guide-card .card-link__content { flex: 1 1 auto; } .guide-card .card-link__icon { display: none; } .guide-card .eyebrow { --eyebrow-color: var(--color-primary); gap: 0; } .guide-card .eyebrow::before { content: none; } .guide-card .card-link__content :is(h2, h3, h4), .guide-card:hover .card-link__content :is(h2, h3, h4) { color: var(--color-fg-on-light); transition: none; } .guide-card__action { color: var(--color-primary); font-family: var(--font-display); font-size: var(--font-xs); font-weight: 750; margin-block-start: auto; text-decoration-line: underline; text-underline-offset: 0.22em; } .guide-article { --guide-reading-measure: 68ch; --guide-wide-measure: 56rem; } .guide-intro-section { scroll-margin-block-start: 0; } .guide-intro-section > .content-section__inner, .guide-section > .content-section__inner, .guide-local-help-section > .content-section__inner { --container-max: var(--guide-wide-measure); } .guide-topic-section { padding-block: var(--space-xl); } .guide-topic-section > .content-section__inner { --gap: var(--space-md); } .guide-block { inline-size: min(100%, var(--guide-reading-measure, 68ch)); margin-inline: 0; } .guide-breakout, .guide-intro, .guide-service-panel { inline-size: 100%; margin-inline: 0; } .guide-intro { align-items: stretch; display: grid; gap: var(--space-md); } .guide-intro--split .guide-intro__nav .in-page-nav__list { grid-template-columns: minmax(0, 1fr); } .guide-intro :is(.callout, .in-page-nav) { block-size: 100%; margin: 0; } .guide-intro .in-page-nav__list { gap: var(--space-xs) var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .guide-intro .in-page-nav { padding: var(--space-md) var(--space-lg); } .guide-intro .in-page-nav__heading { margin-block-end: var(--space-sm); } .guide-intro .callout__heading { font-size: var(--font-xl); } .guide-article .prose > h2:first-child { margin-block-start: 0; } .guide-article .prose h2 { line-height: 1.08; max-inline-size: 24ch; scroll-margin-block-start: var(--space-md); } .guide-subsection { margin-block-start: var(--space-lg); } .guide-article .instructional-figure--reading { margin-inline: 0; } .guide-article .guide-breakout.instructional-figure { inline-size: 100%; } .guide-decision-grid { align-items: stretch; } .guide-decision-grid .feature-card, .guide-decision-grid .feature-card__surface { block-size: 100%; } .guide-decision-grid .feature-card__surface { padding: var(--space-lg); } .guide-step-help { align-items: center; border-block-start: 1px solid var(--color-line); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin-block-start: var(--space-md); padding-block-start: var(--space-sm); } .guide-step-help span { color: color-mix(in srgb, var(--color-fg-on-light) 72%, transparent); } .guide-step-help a { color: var(--color-primary); font-family: var(--font-display); font-weight: 750; } .guide-outcome-grid { margin-block-start: var(--space-md); } .guide-action-list { margin-block-start: var(--space-md); } .guide-anatomy-layout { align-items: start; display: grid; gap: var(--space-lg); margin-block-start: var(--space-lg); } .guide-anatomy-figure { inline-size: 100%; margin: 0; } .guide-anatomy-clues { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 0 var(--space-md); } .guide-anatomy-clues .indexed-list__content h3 { font-size: var(--font-sm); } .guide-repair-check-grid { margin-block-start: var(--space-md); } .guide-repair-check-grid .feature-card, .guide-repair-check-grid .feature-card__surface, .guide-stop-grid .feature-card, .guide-stop-grid .feature-card__surface { block-size: 100%; } .guide-repair-check-grid .feature-card__surface, .guide-stop-grid .feature-card__surface { padding: var(--space-md); } .guide-repair-checks { display: grid; gap: var(--space-md); margin-block-start: var(--space-lg); } .guide-repair-checks > * { inline-size: 100%; margin: 0; } .guide-verification-card, .guide-verification-card .feature-card__surface { block-size: 100%; } .guide-stop-grid { grid-template-columns: minmax(0, 1fr); margin-block: var(--space-md) var(--space-lg); } .guide-symptom-grid, .guide-zone-check-grid, .guide-service-signal-grid { margin-block-start: var(--space-md); } .guide-symptom-grid .feature-card, .guide-symptom-grid .feature-card__surface, .guide-zone-check-grid .feature-card, .guide-zone-check-grid .feature-card__surface, .guide-service-signal-grid .feature-card, .guide-service-signal-grid .feature-card__surface { block-size: 100%; } .guide-symptom-grid .feature-card__surface, .guide-zone-check-grid .feature-card__surface, .guide-service-signal-grid .feature-card__surface { padding: var(--space-md); } .guide-zone-flow { margin-block-start: var(--space-lg); } .guide-controller-notes { align-items: stretch; display: grid; gap: var(--space-md); margin-block-start: var(--space-lg); } .guide-controller-notes > *, .guide-controller-record, .guide-controller-record .feature-card__surface { block-size: 100%; inline-size: 100%; margin: 0; } .guide-controller-record .feature-card__surface { padding: var(--space-md); } .guide-safety-note { color: color-mix(in srgb, var(--color-fg-on-light) 68%, transparent); margin-block: var(--space-md) 0; max-inline-size: var(--guide-reading-measure); } .guide-outcome-grid .feature-card, .guide-outcome-grid .feature-card__surface, .guide-check-cards .feature-card, .guide-check-cards .feature-card__surface { block-size: 100%; } .guide-outcome-grid .feature-card__surface, .guide-check-cards .feature-card__surface { padding: var(--space-md); } .guide-check-layout { display: grid; gap: var(--space-lg); } .guide-check-cards { grid-template-columns: minmax(0, 1fr); } .guide-tip-stack { align-content: start; display: grid; gap: var(--space-md); } .guide-tip { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-md); } .guide-tip h3 { font-size: var(--font-md); margin: 0; } .guide-tip p { margin: var(--space-xs) 0 0; } .guide-tip--quiet { background: transparent; font-size: var(--font-xs); } .guide-pattern-chooser { border: 0; margin: var(--space-lg) 0 0; min-inline-size: 0; padding: 0; } .guide-pattern-chooser__legend { color: var(--color-fg-heading); font-family: var(--font-display); font-size: var(--font-lg); font-weight: 750; line-height: 1.12; padding: 0; } .guide-pattern-chooser__intro { margin: var(--space-xs) 0 var(--space-md); max-inline-size: var(--measure-md); } .guide-pattern-chooser__control { block-size: 1px; clip-path: inset(50%); inline-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } .guide-pattern-chooser__choices { display: grid; gap: var(--space-md); grid-auto-columns: min(82vw, 20rem); grid-auto-flow: column; overflow-x: auto; overscroll-behavior-inline: contain; padding-block-end: var(--space-xs); scroll-snap-type: inline mandatory; scrollbar-width: thin; } .guide-pattern-choice { background: var(--color-card); border: 2px solid transparent; border-radius: var(--radius-drop-sm); box-shadow: var(--shadow-1); cursor: pointer; display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; position: relative; scroll-snap-align: start; transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .guide-pattern-choice__media { aspect-ratio: 4/3; background: var(--color-wash); display: block; overflow: hidden; } .guide-pattern-choice__media :is(.media, picture, img) { block-size: 100%; display: block; inline-size: 100%; } .guide-pattern-choice__media img { object-fit: cover; } .guide-pattern-choice__copy { display: grid; gap: 0.25rem; padding: var(--space-md) var(--space-md) var(--space-xs); } .guide-pattern-choice__copy strong { color: var(--color-fg-heading); font-family: var(--font-display); font-size: var(--font-sm); line-height: 1.2; } .guide-pattern-choice__copy span { color: color-mix(in srgb, var(--color-fg-on-light) 76%, transparent); font-size: var(--font-xs); line-height: 1.45; } .guide-pattern-choice__selection { color: var(--color-primary); font-family: var(--font-display); font-size: var(--font-2xs); font-weight: 750; margin-block-start: auto; opacity: 0; padding: var(--space-xs) var(--space-md) var(--space-md); transition: opacity var(--dur-quick) var(--ease-out); } .guide-pattern-chooser__results { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-paper)); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-line)); border-radius: var(--radius-md); margin-block-start: var(--space-md); min-block-size: 6.5rem; padding: var(--space-md) var(--space-lg); } .guide-pattern-chooser__prompt, .guide-pattern-chooser__result p { margin: 0; } .guide-pattern-chooser__prompt { color: color-mix(in srgb, var(--color-fg-on-light) 70%, transparent); } .guide-pattern-chooser__result { display: none; } .guide-pattern-chooser__result strong { color: var(--color-fg-heading); display: block; font-family: var(--font-display); margin-block-end: var(--space-xs); } .guide-pattern-chooser__note { color: color-mix(in srgb, var(--color-fg-on-light) 68%, transparent); margin: var(--space-xs) 0 0; } .guide-pattern-chooser__control:checked ~ .guide-pattern-chooser__results .guide-pattern-chooser__prompt { display: none; } .guide-pattern-chooser__control:nth-of-type(1):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(1) { border-color: var(--color-primary); box-shadow: var(--shadow-2); } .guide-pattern-chooser__control:nth-of-type(1):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(1) .guide-pattern-choice__selection { opacity: 1; } .guide-pattern-chooser__control:nth-of-type(1):focus-visible ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(1) { outline: 3px solid var(--color-primary); outline-offset: 3px; } .guide-pattern-chooser__control:nth-of-type(1):checked ~ .guide-pattern-chooser__results .guide-pattern-chooser__result:nth-of-type(1) { display: block; } .guide-pattern-chooser__control:nth-of-type(2):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(2) { border-color: var(--color-primary); box-shadow: var(--shadow-2); } .guide-pattern-chooser__control:nth-of-type(2):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(2) .guide-pattern-choice__selection { opacity: 1; } .guide-pattern-chooser__control:nth-of-type(2):focus-visible ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(2) { outline: 3px solid var(--color-primary); outline-offset: 3px; } .guide-pattern-chooser__control:nth-of-type(2):checked ~ .guide-pattern-chooser__results .guide-pattern-chooser__result:nth-of-type(2) { display: block; } .guide-pattern-chooser__control:nth-of-type(3):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(3) { border-color: var(--color-primary); box-shadow: var(--shadow-2); } .guide-pattern-chooser__control:nth-of-type(3):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(3) .guide-pattern-choice__selection { opacity: 1; } .guide-pattern-chooser__control:nth-of-type(3):focus-visible ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(3) { outline: 3px solid var(--color-primary); outline-offset: 3px; } .guide-pattern-chooser__control:nth-of-type(3):checked ~ .guide-pattern-chooser__results .guide-pattern-chooser__result:nth-of-type(3) { display: block; } .guide-pattern-chooser__control:nth-of-type(4):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(4) { border-color: var(--color-primary); box-shadow: var(--shadow-2); } .guide-pattern-chooser__control:nth-of-type(4):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(4) .guide-pattern-choice__selection { opacity: 1; } .guide-pattern-chooser__control:nth-of-type(4):focus-visible ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(4) { outline: 3px solid var(--color-primary); outline-offset: 3px; } .guide-pattern-chooser__control:nth-of-type(4):checked ~ .guide-pattern-chooser__results .guide-pattern-chooser__result:nth-of-type(4) { display: block; } .guide-pattern-chooser__control:nth-of-type(5):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(5) { border-color: var(--color-primary); box-shadow: var(--shadow-2); } .guide-pattern-chooser__control:nth-of-type(5):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(5) .guide-pattern-choice__selection { opacity: 1; } .guide-pattern-chooser__control:nth-of-type(5):focus-visible ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(5) { outline: 3px solid var(--color-primary); outline-offset: 3px; } .guide-pattern-chooser__control:nth-of-type(5):checked ~ .guide-pattern-chooser__results .guide-pattern-chooser__result:nth-of-type(5) { display: block; } .guide-pattern-chooser__control:nth-of-type(6):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(6) { border-color: var(--color-primary); box-shadow: var(--shadow-2); } .guide-pattern-chooser__control:nth-of-type(6):checked ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(6) .guide-pattern-choice__selection { opacity: 1; } .guide-pattern-chooser__control:nth-of-type(6):focus-visible ~ .guide-pattern-chooser__choices .guide-pattern-choice:nth-child(6) { outline: 3px solid var(--color-primary); outline-offset: 3px; } .guide-pattern-chooser__control:nth-of-type(6):checked ~ .guide-pattern-chooser__results .guide-pattern-chooser__result:nth-of-type(6) { display: block; } @media (hover: hover) and (pointer: fine) { .guide-pattern-choice:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); } } .guide-article .comparison-table { background: var(--color-paper); border: 1px solid color-mix(in srgb, var(--color-fg-on-light) 16%, transparent); border-radius: var(--radius-md); color: var(--color-fg-on-light); } .guide-article .comparison-table caption { padding: var(--space-md) var(--space-lg); } .guide-article .comparison-table :is(th, td) { font-size: 0.9rem; line-height: 1.45; } .guide-article .content-section--deep .prose a { color: var(--color-accent); } .guide-service-panel { align-items: start; display: grid; gap: var(--space-xl); } .guide-service-panel__intro { max-inline-size: var(--measure-md); } .guide-service-panel .service-finder { color: var(--color-fg-on-dark); } .guide-faq-section .content-section__inner > *, .guide-sources-section .prose { inline-size: min(100%, var(--guide-reading-measure)); margin-inline: 0; } .guide-sources__list { display: grid; gap: var(--space-xs); padding-inline-start: 1.2rem; } .guide-sources__list a { text-decoration-line: underline; text-underline-offset: 0.2em; } .guide-sources__intro { margin-block: var(--space-xs) var(--space-md); } .guide-sources__meta { color: color-mix(in srgb, var(--color-fg-on-light) 64%, transparent); font-size: var(--font-2xs); margin: var(--space-md) 0 0; } .guide-sources--compact { border-block-start: 1px solid var(--color-line); padding-block-start: var(--space-md); } .guide-sources--compact h2 { font-size: var(--font-md); margin: 0 0 var(--space-sm); } .guide-sources--compact .guide-sources__list { color: color-mix(in srgb, var(--color-fg-on-light) 66%, transparent); font-size: var(--font-2xs); gap: 0.35rem var(--space-lg); line-height: 1.45; margin: 0; } .guide-sources--compact .guide-sources__list a { color: inherit; } .guide-intro .in-page-nav a:focus-visible { border-radius: var(--radius-xs); outline: 2px solid var(--color-primary); outline-offset: 3px; } .guide-demo-narrow { inline-size: min(100%, 34rem); } .guide-demo-narrow .guide-intro { grid-template-columns: 1fr; } @media (min-width: 760px) { .guide-intro--split { grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); } .guide-pattern-chooser__choices { grid-auto-columns: initial; grid-auto-flow: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-block-end: 0; scroll-snap-type: none; } .guide-check-layout { grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); } .guide-anatomy-layout { grid-template-columns: minmax(0, 3fr) minmax(17rem, 2fr); } .guide-repair-checks, .guide-stop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-controller-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-service-signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-symptom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-service-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } @media (prefers-reduced-motion: reduce) { .guide-pattern-choice, .guide-pattern-choice__selection { transition: none; } .guide-pattern-choice:hover { transform: none; } } @media (min-width: 681px) { .guide-article .comparison-table :is(th, td):first-child { inline-size: 28%; } } @media (max-width: 680px) { .guide-article .comparison-table { background: transparent; border: 0; border-radius: 0; } .guide-article .comparison-table caption { padding: 0 0 var(--space-md); } .guide-article .comparison-table tbody tr { background: var(--color-paper); } .guide-article .comparison-table tbody :is(th, td) { inline-size: 100%; } } @media (max-width: 440px) { .guide-article .comparison-table tbody :is(th, td) { gap: var(--space-xs); grid-template-columns: 1fr; overflow-wrap: anywhere; padding: 0.75rem 0.875rem; } .guide-article .comparison-table tbody :is(th, td) + :is(th, td) { border-block-start: 1px solid color-mix(in srgb, var(--color-fg-on-light) 10%, transparent); } } /*# sourceMappingURL=site.css.map */