:root {
--brand-glass: #0F0B07;
--brand-glass-2: #1A1410;
--brand-glass-3: #2A2016;
--brand-seam: #3A2F24;
--brand-cream: #FFF6E4;
--brand-dust: #C7B9A0;
--brand-dust-deep: #9A8B72;
--brand-ray: #FBA83C;
--brand-sun-light: #FFC841;
--brand-sun-start: #FFD64A;
--brand-sun-end: #EF6F2C;
--brand-on-sun: #1A1208;
--brand-paper: #F2F5F8;
--brand-white: #FFFFFF;
--brand-ink: #0E1A26;
--brand-slate: #4B5E72;
--brand-mist: #C9D4DF;
--brand-steel: #6F8296;
--brand-amber-ink: #8A5A00;
--brand-sun-wash: #FFF1D2;
--brand-error-dark: #FF9B8A;
--brand-error-light: #B3261E;
--brand-ok-dark: #9FE0AE;
--brand-ok-light: #1F6B39;
--sun: linear-gradient(135deg, #FFD64A 0%, #FBA83C 55%, #EF6F2C 100%);
--font-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
--font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
--type-price: clamp(5.25rem, 21vw, 9.5rem);
--type-display: clamp(2.875rem, 7.4vw, 6rem);
--type-title: clamp(2.125rem, 4.6vw, 3.625rem);
--type-heading: clamp(1.375rem, 1.6vw, 1.625rem);
--type-lead: clamp(1.1875rem, 1.4vw, 1.3125rem);
--type-body: 1.0625rem;
--type-small: 0.9375rem;
--type-micro: 0.8125rem;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-18: 72px;
--space-28: 112px;
--radius-frame: 6px;
--radius-field: 12px;
--radius-card: 22px;
--radius-pill: 999px;
--layout-max: 1240px;
--layout-gutter: clamp(1.25rem, 4vw, 2.5rem);
--layout-measure: 62ch;
--layout-tap: 48px;
--motion-fast: 120ms;
--motion-base: 180ms;
--motion-reveal: 650ms;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
:root, [data-theme="dark"] {
color-scheme: dark;
--bg: #0F0B07;
--surface: #1A1410;
--surface-2: #2A2016;
--line: #3A2F24;
--field: #9A8B72;
--text: #FFF6E4;
--muted: #C7B9A0;
--accent: #FBA83C;
--accent-text: #FFC841;
--on-accent: #1A1208;
--focus: #FFC841;
--error: #FF9B8A;
--ok: #9FE0AE;
--scrim: #0F0B07D9;
}
[data-theme="light"] {
color-scheme: light;
--bg: #F2F5F8;
--surface: #FFFFFF;
--surface-2: #FFF1D2;
--line: #C9D4DF;
--field: #6F8296;
--text: #0E1A26;
--muted: #4B5E72;
--accent: #FBA83C;
--accent-text: #8A5A00;
--on-accent: #1A1208;
--focus: #8A5A00;
--error: #B3261E;
--ok: #1F6B39;
--scrim: #0E1A26B3;
}
@font-face {
font-family: "Bricolage Grotesque";
src: url("/fonts/bricolage-grotesque-var.0e12cd636f.woff2") format("woff2");
font-weight: 200 800;
font-display: swap;
}
@font-face {
font-family: "Instrument Sans";
src: url("/fonts/instrument-sans-var.e1e36655b2.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--space-4);
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-text);
font-size: var(--type-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg,
picture,
video {
display: block;
max-width: 100%;
}
img {
height: auto;
}
h1,
h2,
h3 {
margin: 0;
font-family: var(--font-display);
font-weight: var(--weight-black);
line-height: 1;
letter-spacing: -0.03em;
text-wrap: balance;
}
h1 {
font-size: var(--type-display);
letter-spacing: -0.04em;
line-height: 0.95;
}
h2 {
font-size: var(--type-title);
}
h3 {
font-size: var(--type-heading);
font-weight: var(--weight-bold);
letter-spacing: -0.02em;
line-height: 1.1;
}
p,
ul,
ol,
figure,
blockquote {
margin: 0;
}
p {
text-wrap: pretty;
}
ul,
ol {
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover {
text-decoration-thickness: 2px;
}
code {
font-size: 0.9em;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
.lead {
max-width: 44ch;
color: var(--muted);
font-size: var(--type-lead);
line-height: 1.45;
}
.label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
line-height: 1.3;
}
.hint {
margin-top: var(--space-2);
color: var(--muted);
font-size: var(--type-small);
line-height: 1.4;
}
.req {
color: var(--muted);
font-weight: var(--weight-medium);
}
.tel {
white-space: nowrap;
}
.skip {
position: absolute;
z-index: 100;
top: -100px;
left: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-field);
background: var(--text);
color: var(--bg);
font-weight: var(--weight-bold);
}
.skip:focus {
top: var(--space-3);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
[hidden] {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.wrap {
width: 100%;
max-width: var(--layout-max);
margin-inline: auto;
padding-inline: var(--layout-gutter);
}
.section {
padding-block: var(--space-12);
}
.section-head {
display: grid;
gap: var(--space-4);
max-width: 34rem;
margin-bottom: var(--space-8);
}
[data-theme] {
background: var(--bg);
color: var(--text);
}
.split {
display: grid;
gap: var(--space-8);
}
@media (width >= 768px) {
.section {
padding-block: var(--space-18);
}
.split {
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
}
}
@media (width >= 1100px) {
.section {
padding-block: var(--space-28);
}
}
.band {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: var(--space-18);
background: var(--bg);
}
.band__media {
position: absolute;
z-index: -1;
inset: 0;
}
.band__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 60%;
}
.band__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--brand-glass) 45%, transparent) 0%, color-mix(in srgb, var(--brand-glass) 88%, transparent) 55%, var(--brand-glass) 100%);
}
.band__in {
display: grid;
gap: var(--space-5);
justify-items: start;
color: var(--brand-cream);
}
.band h2 {
max-width: 12ch;
font-size: clamp(2.75rem, 7vw, 5.5rem);
letter-spacing: -0.04em;
}
.band p {
max-width: 40ch;
color: var(--brand-dust);
font-size: var(--type-lead);
}
.band__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.band .btn--line {
color: var(--brand-cream);
}
@media (width >= 1100px) {
.band {
padding-block: var(--space-28);
}
.band__media {
left: 45%;
}
.band__media::after {
background: linear-gradient(90deg, var(--brand-glass) 0%, color-mix(in srgb, var(--brand-glass) 55%, transparent) 40%, color-mix(in srgb, var(--brand-glass) 10%, transparent) 100%);
}
}
.bar {
position: fixed;
z-index: 20;
inset: auto 0 0;
display: grid;
grid-template-columns: 1fr 1fr 1.6fr;
gap: var(--space-2);
padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: var(--bg);
visibility: hidden;
transform: translateY(110%);
transition: transform var(--motion-base) var(--ease), visibility 0s linear var(--motion-base);
}
.bar.is-visible {
visibility: visible;
transform: translateY(0);
transition: transform var(--motion-base) var(--ease);
}
.bar .btn {
min-height: 52px;
padding-inline: var(--space-2);
font-size: 1rem;
}
@media (width >= 768px) {
.bar {
display: none;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 52px;
padding: 0 var(--space-6);
border: 2px solid transparent;
border-radius: var(--radius-pill);
font-family: var(--font-text);
font-size: 1.0625rem;
font-weight: var(--weight-bold);
line-height: 1.1;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: transform var(--motion-fast) var(--ease), background-color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease);
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
}
.btn--sun {
background: var(--sun);
color: var(--on-accent);
}
.btn--line {
border-color: currentcolor;
background: transparent;
color: var(--text);
}
.btn--line:hover {
background: var(--surface-2);
}
.btn--quiet {
min-height: 48px;
padding-inline: var(--space-2);
color: var(--text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.25em;
}
.btn--lg {
min-height: 58px;
font-size: 1.125rem;
}
.btn--block {
width: 100%;
}
.btn:disabled,
.btn[aria-disabled="true"] {
cursor: progress;
opacity: 0.6;
transform: none;
}
.btn:focus-visible,
.btn.sg-focus {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.pill {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--space-4);
border: 2px solid var(--text);
border-radius: var(--radius-pill);
font-size: var(--type-small);
font-weight: var(--weight-bold);
text-decoration: none;
white-space: nowrap;
}
.pill:hover {
background: var(--surface-2);
}
.pill__long {
display: none;
}
@media (width >= 768px) {
.pill__short {
display: none;
}
.pill__long {
display: inline;
}
}
.compare {
display: grid;
gap: var(--space-3);
}
.compare__frame {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
overflow: hidden;
border-radius: var(--radius-frame);
background: var(--surface);
}
.compare__img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 5;
}
.compare__tag {
position: absolute;
z-index: 3;
top: var(--space-3);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--brand-glass) 78%, transparent);
color: var(--brand-cream);
font-size: var(--type-small);
font-weight: var(--weight-bold);
}
.compare__tag--before {
left: var(--space-3);
}
.compare__tag--after {
right: var(--space-3);
}
.compare__range,
.compare__handle {
display: none;
}
.compare__cap {
max-width: 62ch;
color: var(--muted);
font-size: var(--type-small);
}
.compare.is-live .compare__frame {
display: block;
aspect-ratio: 4 / 5;
--pos: 50%;
}
.compare.is-live .compare__frame > picture,
.compare.is-live .compare__after {
position: absolute;
inset: 0;
}
.compare.is-live .compare__img {
aspect-ratio: auto;
}
.compare.is-live .compare__after {
clip-path: inset(0 0 0 var(--pos));
}
.compare.is-live .compare__after picture {
width: 100%;
height: 100%;
}
.compare.is-live .compare__handle {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: var(--pos);
display: block;
width: 3px;
background: var(--brand-cream);
transform: translateX(-50%);
pointer-events: none;
}
.compare.is-live .compare__handle::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 52px;
height: 52px;
border: 3px solid var(--brand-cream);
border-radius: 50%;
background: color-mix(in srgb, var(--brand-glass) 94%, transparent);
transform: translate(-50%, -50%);
}
.compare__knob {
position: absolute;
max-width: none;
z-index: 1;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
fill: none;
stroke: var(--brand-cream);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.5;
transform: translate(-50%, -50%);
}
.compare.is-live .compare__range {
position: absolute;
z-index: 4;
inset: 0;
display: block;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
touch-action: pan-y;
}
.compare.is-live .compare__frame:has(.compare__range:focus-visible) .compare__handle::before {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.compare.is-wiping .compare__after,
.compare.is-wiping .compare__handle {
transition: clip-path var(--motion-reveal) var(--ease), left var(--motion-reveal) var(--ease);
}
@media (width >= 1100px) {
.compare.is-live .compare__frame {
max-height: 82vh;
}
}
.facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5) var(--space-4);
}
.fact {
display: grid;
grid-template-columns: 12px 1fr;
gap: 2px var(--space-3);
}
.fact::before {
content: "";
grid-row: span 2;
width: 12px;
height: 12px;
margin-top: 6px;
border-radius: 50%;
background: var(--sun);
}
.fact__title {
font-weight: var(--weight-bold);
line-height: 1.3;
}
.fact__text {
color: var(--muted);
font-size: var(--type-small);
line-height: 1.35;
}
.facts--stack {
grid-template-columns: 1fr;
margin-top: var(--space-6);
}
@media (width >= 768px) {
.hero__facts {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (width >= 1100px) {
.hero__facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 30rem;
}
}
.faq__grid {
display: grid;
gap: var(--space-8);
}
.faq__groups {
display: grid;
gap: var(--space-8);
}
.faq__h {
margin-bottom: var(--space-2);
color: var(--muted);
font-family: var(--font-text);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
letter-spacing: 0;
}
.faq-item {
border-top: 1px solid var(--line);
}
.faq-item:last-child {
border-bottom: 1px solid var(--line);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 56px;
padding-block: var(--space-3);
font-weight: var(--weight-semibold);
list-style: none;
cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
flex: none;
color: var(--accent-text);
font-family: var(--font-display);
font-size: 1.625rem;
font-weight: var(--weight-bold);
line-height: 1;
}
.faq-item[open] summary::after {
content: "\2212";
}
.faq-item p {
max-width: 62ch;
padding-bottom: var(--space-4);
color: var(--muted);
}
@media (width >= 900px) {
.faq__grid {
grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
gap: var(--space-12);
}
.faq__groups {
grid-template-columns: 1fr 1fr;
gap: var(--space-8) var(--space-12);
}
}
.site-footer {
padding-block: var(--space-12) var(--space-8);
border-top: 1px solid var(--line);
background: var(--bg);
}
.site-footer__in {
display: grid;
gap: var(--space-8);
}
.site-footer__about {
max-width: 34ch;
margin-top: var(--space-4);
color: var(--muted);
}
.site-footer__insured {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
font-weight: var(--weight-semibold);
}
.site-footer__insured::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--sun);
}
.site-footer__h {
margin-bottom: var(--space-3);
color: var(--muted);
font-family: var(--font-text);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
letter-spacing: 0;
}
.site-footer__list {
display: grid;
gap: var(--space-1);
}
.site-footer__list a {
display: inline-flex;
align-items: center;
min-height: 44px;
overflow-wrap: anywhere;
}
.site-footer__hours li {
padding-block: var(--space-1);
}
.site-footer__area {
margin-top: var(--space-3);
color: var(--muted);
}
.site-footer__legal {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--line);
color: var(--muted);
font-size: var(--type-small);
}
@media (width >= 900px) {
.site-footer__in {
grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
}
}
@media (width < 768px) {
.site-footer:has(+ .bar) {
padding-bottom: calc(var(--space-12) + 72px);
}
}
.request__grid {
display: grid;
gap: var(--space-8);
}
.request__intro {
display: grid;
align-content: start;
gap: var(--space-4);
}
.request__summary {
padding: var(--space-4);
border-left: 3px solid var(--accent);
background: var(--surface);
font-weight: var(--weight-semibold);
}
.request__change a,
.request__contact a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: var(--weight-semibold);
}
.form-card {
display: grid;
gap: var(--space-5);
padding: var(--space-5);
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
}
.lead__fields {
display: grid;
gap: var(--space-4);
}
.lead .input {
background: var(--surface);
}
.checks {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
}
.err {
margin-top: var(--space-2);
color: var(--error);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
.err:empty {
display: none;
}
.hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.lead__consent,
.lead__privacy {
color: var(--muted);
font-size: var(--type-small);
line-height: 1.45;
}
.lead__call {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: var(--weight-semibold);
}
.lead__fallback {
display: grid;
gap: var(--space-2);
justify-items: center;
}
.status {
font-weight: var(--weight-semibold);
}
.status:empty {
display: none;
}
.status--ok {
color: var(--ok);
}
.status--error {
color: var(--error);
}
.lead-done {
align-content: start;
}
.lead-done__title {
font-size: var(--type-title);
}
.lead-done__plan {
display: grid;
gap: var(--space-2);
padding: var(--space-4);
border-left: 4px solid var(--accent);
border-radius: var(--radius-field);
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.lead-done__plan-title {
font-weight: var(--weight-bold);
}
.lead-done__more a {
font-weight: var(--weight-semibold);
}
@media (width >= 768px) {
.lead__fields {
grid-template-columns: 1fr 1fr;
}
.field--full {
grid-column: 1 / -1;
}
.form-card {
padding: var(--space-8);
}
}
@media (width >= 1100px) {
.request__grid {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: var(--space-18);
}
}
.site-header {
position: relative;
z-index: 5;
background: var(--bg);
}
.site-header__in {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: minmax(68px, auto) auto;
align-items: center;
gap: 0 var(--space-4);
}
.lockup {
display: inline-flex;
align-items: center;
min-height: 48px;
gap: var(--space-2);
color: var(--text);
text-decoration: none;
}
.lockup__mark {
flex: none;
width: 40px;
height: 40px;
}
.lockup__word {
display: flex;
flex-direction: column;
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: var(--weight-black);
letter-spacing: 0.14em;
line-height: 1;
}
.lockup__tag {
margin-top: 5px;
color: var(--muted);
font-family: var(--font-text);
font-size: 0.5625rem;
font-weight: var(--weight-medium);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.site-nav {
display: flex;
grid-column: 1 / -1;
order: 3;
justify-content: space-between;
border-top: 1px solid var(--line);
}
.site-nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--space-2);
color: var(--muted);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
text-decoration: none;
}
.site-nav a:hover {
color: var(--text);
text-decoration: underline;
}
@media (width >= 900px) {
.site-header__in {
display: flex;
justify-content: space-between;
min-height: 80px;
}
.site-nav {
order: 0;
justify-content: flex-start;
gap: var(--space-2);
margin-left: auto;
border-top: 0;
}
.site-nav a {
padding: 0 var(--space-3);
}
}
.hero {
position: relative;
padding-bottom: var(--space-8);
}
.hero__media {
position: relative;
aspect-ratio: 2 / 1;
overflow: hidden;
background: var(--surface);
}
.hero__media > picture {
height: 100%;
}
.hero__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 30% 50%;
}
.hero__grid {
position: relative;
display: grid;
grid-template-areas: "copy" "quote" "facts";
gap: var(--space-6);
margin-top: var(--space-6);
}
.hero__copy {
grid-area: copy;
display: grid;
gap: var(--space-4);
}
.hero__title {
max-width: 11ch;
}
.hero__lead {
max-width: 30ch;
color: var(--muted);
font-size: var(--type-lead);
line-height: 1.4;
}
.hero__quote {
grid-area: quote;
display: grid;
gap: var(--space-3);
}
.hero__facts {
grid-area: facts;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-2);
}
.qr-welcome {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--accent);
border-radius: var(--radius-field);
background: var(--surface);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
@media (width >= 768px) {
.hero__media {
aspect-ratio: 21 / 8;
}
.hero__quote {
max-width: 560px;
}
}
@media (width >= 1100px) {
.hero {
padding-bottom: var(--space-18);
}
.hero__media {
position: absolute;
inset: 0 0 auto;
height: 760px;
aspect-ratio: auto;
}
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 84%, transparent) 30%, color-mix(in srgb, var(--bg) 30%, transparent) 58%, color-mix(in srgb, var(--bg) 10%, transparent) 100%),
linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 22%, transparent 48%);
}
.hero__img {
object-position: 30% 40%;
}
.hero__grid {
grid-template: "copy quote" auto "facts quote" auto ". quote" 1fr / minmax(0, 1fr) 480px;
gap: var(--space-12) var(--space-12);
margin-top: 0;
padding-top: var(--space-12);
}
.hero__copy {
padding-top: var(--space-12);
}
.hero__quote {
max-width: none;
}
}
.hero--commercial .hero__media {
aspect-ratio: 4 / 3;
}
.hero--commercial .hero__img--commercial {
object-position: 50% 12%;
}
.hero__grid--single {
grid-template-areas: "copy";
}
@media (width >= 768px) {
.hero--commercial .hero__media {
aspect-ratio: 16 / 9;
}
}
@media (width >= 1100px) {
.hero--commercial {
min-height: 680px;
}
.hero--commercial .hero__media {
inset: 0;
height: auto;
aspect-ratio: auto;
}
.hero__grid--single {
grid-template-columns: minmax(0, 640px);
grid-template-areas: "copy";
padding-top: var(--space-28);
}
.hero--commercial .hero__title {
max-width: 14ch;
}
}
.how__grid {
display: grid;
gap: var(--space-12);
}
.how__steps h2 {
max-width: 14ch;
}
.steps {
display: grid;
gap: var(--space-8);
margin-top: var(--space-8);
}
.step {
position: relative;
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--space-1) var(--space-4);
}
.step::after {
content: "";
position: absolute;
top: 56px;
bottom: calc(var(--space-8) * -1 + 8px);
left: 23px;
width: 2px;
background: var(--line);
}
.step:last-child::after {
display: none;
}
.step__n {
display: grid;
grid-row: span 2;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--sun);
color: var(--on-accent);
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: var(--weight-black);
}
.step__title {
align-self: end;
font-family: var(--font-display);
font-size: var(--type-heading);
font-weight: var(--weight-bold);
}
.step p,
.step > span:last-child {
color: var(--muted);
max-width: 40ch;
}
.steps--compact {
gap: var(--space-5);
margin-top: 0;
}
.steps--compact .step::after {
bottom: calc(var(--space-5) * -1 + 8px);
}
.method {
display: grid;
gap: var(--space-5);
}
.method__img {
width: 100%;
height: auto;
border-radius: var(--radius-frame);
aspect-ratio: 4 / 3;
object-fit: cover;
}
.method__body {
display: grid;
gap: var(--space-4);
}
.method__list {
display: grid;
gap: var(--space-3);
}
.method__list li {
position: relative;
padding-left: var(--space-6);
}
.method__list li::before {
content: "";
position: absolute;
top: 9px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
}
.method__credit {
color: var(--muted);
font-size: var(--type-small);
}
.method--plain {
align-content: start;
padding: var(--space-6);
border: 1px solid var(--line);
border-radius: var(--radius-card);
}
@media (width >= 1100px) {
.how__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
align-items: start;
gap: var(--space-18);
}
}
.meet__grid {
display: grid;
gap: var(--space-6);
align-items: center;
}
.meet__img {
width: 100%;
height: auto;
border-radius: var(--radius-frame);
aspect-ratio: 5 / 4;
object-fit: cover;
}
.meet__copy {
display: grid;
justify-items: start;
gap: var(--space-4);
}
.meet__text {
max-width: var(--layout-measure);
font-size: var(--type-lead);
}
.meet__sign {
color: var(--muted);
font-weight: var(--weight-semibold);
}
@media (width >= 1100px) {
.meet__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
}
}
.ask__in {
display: grid;
justify-items: start;
gap: var(--space-5);
max-width: 34rem;
}
.ask__mark {
width: 72px;
height: 72px;
}
.ask__actions {
display: grid;
gap: var(--space-3);
width: 100%;
}
.ask__email {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
font-weight: var(--weight-semibold);
}
.ask__soon,
.ask__fine {
color: var(--muted);
font-size: var(--type-small);
}
.ask__help {
display: grid;
gap: var(--space-2);
width: 100%;
padding-top: var(--space-5);
border-top: 1px solid var(--line);
}
.ask__h {
font-size: var(--type-heading);
}
.prose__in {
display: grid;
gap: var(--space-4);
max-width: 44rem;
}
.prose h1 {
font-size: var(--type-title);
}
.prose h2 {
margin-top: var(--space-6);
font-size: var(--type-heading);
}
.prose p {
color: var(--muted);
}
.prose .lead {
color: var(--text);
}
.draft-note {
padding: var(--space-3) var(--space-4);
border: 2px solid var(--accent);
border-radius: var(--radius-field);
font-weight: var(--weight-semibold);
}
.prose .draft-note {
color: var(--text);
}
.gallery__grid {
display: grid;
gap: var(--space-6);
}
.gallery__item {
display: grid;
gap: var(--space-2);
}
.gallery__img {
width: 100%;
height: auto;
border-radius: var(--radius-frame);
aspect-ratio: 3 / 4;
object-fit: cover;
}
.gallery__item figcaption {
color: var(--muted);
font-size: var(--type-small);
}
@media (width >= 768px) {
.gallery__grid {
grid-template-columns: 1fr 1fr;
}
}
.pairs {
display: grid;
gap: var(--space-6);
margin-top: var(--space-8);
}
.pair {
display: grid;
gap: var(--space-2);
}
.pair__photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
overflow: hidden;
border-radius: var(--radius-frame);
}
.pair__half {
position: relative;
}
.pair__img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 3 / 4;
}
.pair__tag {
position: absolute;
top: var(--space-2);
left: var(--space-2);
padding: 2px var(--space-2);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--brand-glass) 78%, transparent);
color: var(--brand-cream);
font-size: var(--type-micro);
font-weight: var(--weight-bold);
}
.pair figcaption {
color: var(--muted);
font-size: var(--type-small);
}
@media (width >= 768px) {
.pairs {
grid-template-columns: repeat(3, 1fr);
}
.pairs--two {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width >= 1100px) {
.proof .wrap {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
grid-template-areas: "head head" "compare pairs";
column-gap: var(--space-12);
}
.proof .section-head {
grid-area: head;
}
.proof .compare {
grid-area: compare;
}
.proof .pairs {
grid-area: pairs;
grid-template-columns: 1fr;
align-content: start;
margin-top: 0;
}
.proof .pair__img {
aspect-ratio: 4 / 3;
}
}
.pair__img--top {
object-position: 15% 0;
}
.plan {
padding-block: var(--space-12);
background: var(--sun);
color: var(--brand-on-sun);
}
.plan__grid {
display: grid;
gap: var(--space-8);
}
.plan__head {
display: grid;
gap: var(--space-3);
}
.plan__name {
font-weight: var(--weight-bold);
}
.plan__head h2,
.plan__h {
max-width: 16ch;
font-family: var(--font-display);
font-size: var(--type-title);
font-weight: var(--weight-black);
letter-spacing: -0.03em;
line-height: 1;
}
.plan__lead {
max-width: 44ch;
font-size: var(--type-lead);
}
.plan__items {
display: grid;
gap: var(--space-8);
}
.plan__item {
display: grid;
align-content: start;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 2px solid var(--brand-on-sun);
}
.plan__big {
font-family: var(--font-display);
font-size: clamp(3.5rem, 7vw, 5rem);
font-weight: var(--weight-black);
letter-spacing: -0.04em;
line-height: 0.9;
}
.plan__item h3,
.plan__item-title {
font-family: var(--font-display);
font-size: var(--type-heading);
font-weight: var(--weight-bold);
}
.plan__item ul {
display: grid;
gap: var(--space-2);
}
.plan__item li {
position: relative;
padding-left: var(--space-5);
}
.plan__item li::before {
content: "";
position: absolute;
top: 10px;
left: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand-on-sun);
}
.plan a {
color: var(--brand-on-sun);
}
@media (width >= 768px) {
.plan {
padding-block: var(--space-18);
}
.plan__items {
grid-template-columns: 1fr 1fr;
}
}
@media (width >= 1100px) {
.plan {
padding-block: var(--space-28);
}
.plan__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
gap: var(--space-18);
}
}
.plan__link {
color: inherit;
font-weight: var(--weight-bold);
text-decoration: underline;
text-underline-offset: 3px;
}
.planner-hero__back a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--muted);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
.planner-hero__title {
max-width: 18ch;
font-family: var(--font-display);
font-size: var(--type-display);
font-weight: var(--weight-black);
letter-spacing: -0.04em;
line-height: 0.98;
}
.planner-hero .lead {
max-width: 52ch;
margin-top: var(--space-4);
color: var(--muted);
}
.planner-sec {
padding-top: 0;
}
.planner__grid {
display: grid;
gap: var(--space-6);
align-items: start;
}
.planner__steps {
display: grid;
gap: var(--space-4);
min-width: 0;
}
.planner__step {
display: grid;
gap: var(--space-4);
padding: var(--space-5);
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
}
.planner__h {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--type-heading);
}
.planner__n {
display: grid;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
font-size: var(--type-small);
font-weight: var(--weight-black);
place-items: center;
}
.planner [hidden] {
display: none;
}
.visits {
display: grid;
gap: var(--space-2);
}
.visit {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-1) var(--space-3);
padding: var(--space-3);
border: 1px solid var(--line);
border-radius: var(--radius-field);
}
.visit__n {
color: var(--muted);
font-size: var(--type-small);
font-weight: var(--weight-bold);
}
.visit__what {
font-weight: var(--weight-semibold);
}
.visit__month .input {
width: 6.5rem;
}
.visit__price {
grid-column: 1 / -1;
color: var(--accent-text);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
.next-steps {
display: grid;
gap: var(--space-3);
padding-left: 1.4em;
list-style: decimal;
}
.next-steps li::marker {
color: var(--accent-text);
font-weight: var(--weight-bold);
}
.plan-sum {
display: grid;
gap: var(--space-2);
padding: var(--space-5);
border: 1px solid var(--line);
border-radius: var(--radius-card);
background-color: var(--brand-glass);
background-image: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--brand-sun-start) 26%, transparent) 0%, transparent 52%);
color: var(--brand-cream);
}
.plan-sum__name {
color: var(--brand-sun-start);
font-size: var(--type-small);
font-weight: var(--weight-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.plan-sum__label {
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
.plan-sum__total {
font-family: var(--font-display);
font-size: clamp(2.75rem, 9vw, 4rem);
font-weight: var(--weight-black);
letter-spacing: -0.04em;
line-height: 1;
color: var(--brand-sun-start);
}
.plan-sum__list {
display: grid;
border-top: 1px solid color-mix(in srgb, var(--brand-cream) 18%, transparent);
}
.plan-sum__list li {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) 0;
border-bottom: 1px solid color-mix(in srgb, var(--brand-cream) 18%, transparent);
font-size: var(--type-small);
}
.plan-sum__list small {
display: block;
color: var(--brand-dust);
}
.plan-sum__after {
font-weight: var(--weight-semibold);
}
.plan-sum__note {
color: var(--brand-dust);
font-size: var(--type-small);
}
.plan-done {
display: grid;
gap: var(--space-3);
padding: var(--space-4);
border-left: 4px solid var(--accent);
border-radius: var(--radius-field);
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.plan-done__title {
font-weight: var(--weight-bold);
}
.plan-done__year {
color: var(--muted);
font-size: var(--type-small);
}
@media (width >= 1000px) {
.planner__grid {
grid-template-columns: minmax(0, 1fr) 22rem;
}
.plan-sum {
position: sticky;
top: var(--space-4);
order: 2;
}
}
@media (width < 1000px) {
.plan-sum {
order: -1;
}
}
.plans-hero__title {
max-width: 16ch;
font-family: var(--font-display);
font-size: var(--type-display);
font-weight: var(--weight-black);
letter-spacing: -0.04em;
line-height: 0.98;
}
.plans-hero .lead,
.plans-cta .lead {
max-width: 46ch;
margin-top: var(--space-4);
color: var(--muted);
}
.plans-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
.tiers {
display: grid;
gap: var(--space-4);
}
.tier {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
}
.tier__name {
color: var(--muted);
font-size: var(--type-small);
font-weight: var(--weight-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tier__pct {
color: var(--accent-text);
font-family: var(--font-display);
font-size: clamp(2.75rem, 6vw, 4rem);
font-weight: var(--weight-black);
letter-spacing: -0.04em;
line-height: 0.95;
}
.tier__after {
margin-top: calc(var(--space-2) * -1);
color: var(--accent-text);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
.tier__for {
font-weight: var(--weight-semibold);
}
.tier__ways {
display: grid;
gap: var(--space-1);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius-field);
}
.tier__ways-h {
color: var(--muted);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
.tier__or {
color: var(--muted);
font-size: var(--type-small);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.tier__list {
display: grid;
gap: var(--space-2);
padding-left: 1.1em;
color: var(--muted);
list-style: disc;
}
.tier__go {
margin-top: auto;
}
.plans-promise {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
margin-top: var(--space-6);
color: var(--muted);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
.plans-promise li {
display: flex;
align-items: center;
gap: var(--space-2);
}
.plans-promise li::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.plans-note {
max-width: 70ch;
margin-top: var(--space-6);
color: var(--muted);
font-size: var(--type-small);
}
.fit__cols,
.remind__rules {
display: grid;
gap: var(--space-4);
align-content: start;
}
.fit__card {
display: grid;
align-content: start;
gap: var(--space-3);
padding: var(--space-6);
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
}
.fit__card h3 {
font-family: var(--font-display);
font-size: var(--type-heading);
}
.fit__card ul {
display: grid;
gap: var(--space-2);
padding-left: 1.1em;
list-style: disc;
}
.fit__help {
color: var(--muted);
}
.table-scroll {
margin-top: var(--space-6);
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--radius-field);
background: var(--surface);
}
.compare-plans {
width: 100%;
min-width: 36rem;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.compare-plans caption {
padding: var(--space-4);
color: var(--muted);
font-weight: var(--weight-semibold);
text-align: left;
}
.compare-plans th,
.compare-plans td {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.compare-plans thead th {
color: var(--muted);
font-size: var(--type-small);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.compare-plans tbody th {
font-weight: var(--weight-semibold);
}
.plans-cta__in {
display: grid;
justify-items: start;
}
.plans-cta h2 {
max-width: 16ch;
font-family: var(--font-display);
font-size: var(--type-title);
font-weight: var(--weight-black);
letter-spacing: -0.03em;
line-height: 1;
}
@media (width >= 768px) {
.tiers {
grid-template-columns: repeat(3, 1fr);
}
.fit__cols {
grid-template-columns: 1fr 1fr;
}
}
.eyebrow {
margin-bottom: var(--space-3);
color: var(--accent-text);
font-size: var(--type-small);
font-weight: var(--weight-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.msgs__h {
margin-top: var(--space-6);
font-family: var(--font-display);
font-size: var(--type-heading);
}
.msgs {
display: grid;
gap: var(--space-3);
margin-top: var(--space-3);
}
.msg {
display: grid;
gap: var(--space-1);
max-width: 52ch;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 4px;
background: var(--surface);
}
.msg__when {
color: var(--accent-text);
font-size: var(--type-small);
font-weight: var(--weight-bold);
}
.price-tiles {
display: grid;
border-block: 1px solid var(--line);
}
.price-tile {
display: grid;
gap: var(--space-2);
padding-block: var(--space-6);
}
.price-tile + .price-tile {
border-top: 1px solid var(--line);
}
.price-tile__amount {
color: var(--accent-text);
font-family: var(--font-display);
font-size: clamp(4rem, 9vw, 6.5rem);
font-variant-numeric: tabular-nums;
font-weight: var(--weight-black);
letter-spacing: -0.045em;
line-height: 0.9;
}
.price-tile__what {
font-size: var(--type-heading);
}
.price-tile__how {
color: var(--muted);
font-size: var(--type-small);
font-variant-numeric: tabular-nums;
}
.price-tile__new {
color: var(--muted);
font-weight: var(--weight-semibold);
}
.prices__note {
max-width: 62ch;
margin-top: var(--space-6);
color: var(--muted);
}
@media (width >= 768px) {
.price-tiles {
grid-template-columns: repeat(3, 1fr);
}
.price-tile {
padding: var(--space-8) var(--space-6) var(--space-8) 0;
}
.price-tile + .price-tile {
padding-left: var(--space-6);
border-top: 0;
border-left: 1px solid var(--line);
}
}
.quoter {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
}
.price-panel {
position: relative;
container-type: inline-size;
display: grid;
gap: var(--space-2);
padding: var(--space-5) var(--space-5) var(--space-4);
border-bottom: 1px solid var(--line);
background-color: var(--brand-glass);
background-image:
radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--brand-sun-start) 26%, transparent) 0%, transparent 52%),
linear-gradient(color-mix(in srgb, var(--brand-dust) 9%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--brand-dust) 9%, transparent) 1px, transparent 1px);
background-position: 0 0, -1px -1px, -1px -1px;
background-size: auto, 26px 26px, 26px 26px;
color: var(--brand-cream);
}
.price-panel__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.price-panel__label {
color: var(--brand-dust);
font-family: var(--font-text);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
letter-spacing: 0;
}
.price-panel__badge {
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: var(--sun);
color: var(--brand-on-sun);
font-size: var(--type-micro);
font-weight: var(--weight-bold);
}
.price-panel__total {
font-family: var(--font-display);
font-size: min(var(--type-price), calc(118cqi / var(--len, 4)));
font-variant-numeric: tabular-nums;
font-weight: var(--weight-black);
letter-spacing: -0.045em;
line-height: 0.92;
}
.price-panel__total output,
.price-panel__total span {
display: inline-block;
color: var(--brand-sun-light);
}
.price-panel__total .is-changing {
animation: price-in var(--motion-base) var(--ease);
}
@keyframes price-in {
from {
opacity: 0.4;
transform: translateY(0.08em);
}
to {
opacity: 1;
transform: none;
}
}
.price-panel__summary {
color: var(--brand-cream);
font-weight: var(--weight-semibold);
}
.price-panel__note {
color: var(--brand-dust);
font-size: var(--type-micro);
line-height: 1.4;
}
.price-panel__next {
color: var(--brand-dust);
font-size: var(--type-small);
line-height: 1.4;
}
.breakdown {
display: grid;
gap: 0;
font-size: var(--type-small);
}
.breakdown:empty {
display: none;
}
.breakdown li {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding-block: 6px;
border-top: 1px solid color-mix(in srgb, var(--brand-dust) 22%, transparent);
color: var(--brand-dust);
}
.breakdown li span:last-child {
color: var(--brand-cream);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.quoter__body {
display: grid;
gap: var(--space-5);
padding: var(--space-5);
}
.quoter__group,
.quoter__panel {
display: grid;
gap: var(--space-4);
}
.field {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.row2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.input {
width: 100%;
min-height: 52px;
padding: 0 var(--space-4);
border: 2px solid var(--field);
border-radius: var(--radius-field);
background: var(--bg);
color: var(--text);
font-size: 1.125rem;
font-weight: var(--weight-medium);
}
textarea.input {
min-height: 120px;
padding-block: var(--space-3);
resize: vertical;
}
select.input {
appearance: none;
padding-right: var(--space-8);
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
background-repeat: no-repeat;
background-size: 6px 6px, 6px 6px;
}
.input::placeholder {
color: var(--muted);
opacity: 1;
}
.input:focus-visible {
border-color: var(--focus);
outline: 3px solid var(--focus);
outline-offset: 1px;
}
.input:disabled {
opacity: 0.55;
}
.input[aria-invalid="true"] {
border-color: var(--error);
}
.tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2);
}
.tile {
position: relative;
display: grid;
align-content: center;
gap: 2px;
min-height: 68px;
padding: var(--space-2);
border: 2px solid var(--field);
border-radius: var(--radius-field);
background: transparent;
color: var(--text);
text-align: left;
cursor: pointer;
}
.tile__name {
font-size: 0.9375rem;
font-weight: var(--weight-bold);
line-height: 1.15;
}
.tile__rate {
color: var(--muted);
font-size: var(--type-micro);
line-height: 1.2;
}
.tile[aria-selected="true"],
.tile[aria-current="true"] {
border-color: var(--accent);
background: var(--surface-2);
}
.tile__dot {
position: absolute;
top: 8px;
right: 8px;
display: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--sun);
}
.tile--has-value .tile__dot {
display: block;
}
.stepper {
display: grid;
grid-template-columns: 56px 1fr 56px;
overflow: hidden;
border: 2px solid var(--field);
border-radius: var(--radius-field);
background: var(--bg);
}
.stepper:focus-within {
border-color: var(--focus);
}
.stepper__btn {
display: grid;
place-items: center;
min-height: 56px;
border: 0;
background: var(--surface-2);
color: var(--text);
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: var(--weight-bold);
line-height: 1;
cursor: pointer;
}
.stepper__btn:hover {
background: var(--line);
}
.stepper__input {
width: 100%;
min-width: 0;
border: 0;
background: transparent;
color: var(--text);
font-family: var(--font-display);
font-size: 1.75rem;
font-variant-numeric: tabular-nums;
font-weight: var(--weight-bold);
text-align: center;
appearance: textfield;
}
.sg-static-input {
display: grid;
place-items: center;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button {
margin: 0;
appearance: none;
}
.seg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.seg__opt,
.day {
position: relative;
margin: 0;
}
.seg__opt input,
.day input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.seg__opt span {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
border: 2px solid var(--field);
border-radius: var(--radius-field);
font-weight: var(--weight-semibold);
cursor: pointer;
}
.days {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-2);
}
.day {
display: grid;
min-height: 56px;
cursor: pointer;
}
.day__name,
.day__hours {
position: relative;
z-index: 1;
text-align: center;
pointer-events: none;
}
.day__name {
align-self: end;
padding-top: var(--space-2);
font-weight: var(--weight-bold);
line-height: 1.1;
}
.day__hours {
align-self: start;
padding-bottom: var(--space-2);
color: var(--muted);
font-size: var(--type-micro);
line-height: 1.3;
}
.day::before {
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--field);
border-radius: var(--radius-field);
}
.seg__opt input:checked + span,
.day:has(input:checked)::before {
border-color: var(--accent);
background: var(--surface-2);
}
.day:has(input:checked) .day__hours {
color: var(--text);
}
.seg__opt input:focus-visible + span,
.day:has(input:focus-visible)::before {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
.check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-height: 44px;
margin: 0;
cursor: pointer;
}
.check input {
flex: none;
width: 24px;
height: 24px;
margin: 1px 0 0;
accent-color: var(--accent);
}
.check--offer {
align-items: center;
padding: var(--space-3) var(--space-4);
border: 2px solid var(--accent);
border-radius: var(--radius-field);
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
font-weight: var(--weight-semibold);
}
.check--offer strong {
color: var(--accent-text);
}
.check[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
}
.more {
border-block: 1px solid var(--line);
}
.more summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 52px;
font-size: var(--type-small);
font-weight: var(--weight-semibold);
list-style: none;
cursor: pointer;
}
.more summary::-webkit-details-marker {
display: none;
}
.more summary::after {
content: "";
flex: none;
width: 9px;
height: 9px;
margin-right: 4px;
border-right: 2px solid currentcolor;
border-bottom: 2px solid currentcolor;
transform: rotate(45deg) translateY(-3px);
transition: transform var(--motion-base) var(--ease);
}
.more[open] summary::after {
transform: rotate(-135deg) translateY(-3px);
}
.more__body {
display: grid;
gap: var(--space-4);
padding-bottom: var(--space-4);
}
.more__body .hint {
margin-top: calc(var(--space-2) * -1);
}
.quoter__actions {
display: grid;
gap: var(--space-3);
}
.quoter__alt {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 var(--space-6);
}
.quoter__alt a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: var(--weight-semibold);
}
.quoter__fine {
color: var(--muted);
font-size: var(--type-small);
text-align: center;
}
@media (width < 420px) {
.tile {
padding-inline: 10px;
}
.tile__name {
font-size: 0.875rem;
}
}
@media (width >= 1100px) {
.price-panel {
padding: var(--space-6) var(--space-6) var(--space-5);
}
.quoter__body {
padding: var(--space-6);
}
}
.quoter__details {
display: grid;
gap: var(--space-4);
}
.quoter__send {
display: grid;
gap: var(--space-3);
}
.quoter__send .form-card {
padding: 0;
border: 0;
background: transparent;
}
.quoter__or {
color: var(--muted);
font-size: var(--type-small);
text-align: center;
}
.refer__grid {
display: grid;
gap: var(--space-8);
}
.refer__intro {
display: grid;
align-content: start;
gap: var(--space-4);
}
.refer__title {
font-size: var(--type-title);
}
.refer__h {
margin-top: var(--space-2);
font-size: var(--type-heading);
}
.refer__tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
padding: 0;
list-style: none;
}
.refer__tiers li {
display: grid;
gap: var(--space-1);
padding: var(--space-4) var(--space-3);
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
color: var(--muted);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
text-align: center;
}
.refer__tiers b {
color: var(--text);
font-family: var(--font-display);
font-size: var(--type-title);
font-weight: var(--weight-black);
line-height: 1;
}
.refer__rules {
display: grid;
gap: var(--space-2);
padding-left: 1.2em;
list-style: disc;
}
.refer__steps {
display: grid;
align-content: start;
gap: var(--space-6);
}
.refer-card__h {
font-size: var(--type-heading);
}
.refer-out {
display: grid;
gap: var(--space-3);
}
.refer-out__link {
font-weight: var(--weight-semibold);
}
.refer-out__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.refer-you {
display: grid;
gap: var(--space-4);
}
.refer-rows {
display: grid;
gap: var(--space-4);
}
.refer-row {
display: grid;
gap: var(--space-3);
min-width: 0;
margin: 0;
padding: var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius-field);
}
.refer-row__n {
padding: 0 var(--space-2);
font-weight: var(--weight-bold);
}
@media (width >= 768px) {
.refer-you,
.refer-row {
grid-template-columns: 1fr 1fr;
}
.refer-row__n,
.refer-row__ok {
grid-column: 1 / -1;
}
}
@media (width >= 1100px) {
.refer__grid {
grid-template-columns: 5fr 7fr;
align-items: start;
}
}
.pairs + .reviews__list {
margin-top: var(--space-6);
}
.reviews__list {
display: grid;
gap: var(--space-6);
}
.review {
display: grid;
max-width: 76ch;
gap: var(--space-3);
padding: var(--space-6);
border: 1px solid var(--line);
border-radius: var(--radius-field);
}
.review__stars {
display: flex;
gap: 2px;
}
.review__star {
fill: var(--accent);
}
.review blockquote {
display: grid;
gap: var(--space-3);
max-width: 68ch;
}
.review blockquote p {
font-size: var(--type-lead);
line-height: 1.45;
}
.review figcaption {
color: var(--muted);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
.review__date {
font-weight: var(--weight-regular);
}
@media (width >= 900px) {
.reviews__list:has(.review:nth-child(3)) {
grid-template-columns: repeat(3, 1fr);
}
}
.rings {
display: grid;
gap: var(--space-4);
max-width: 44rem;
margin: var(--space-6) 0 0;
}
.rings__title {
font-weight: var(--weight-bold);
}
.rings__bar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
margin: 0;
padding: 0;
list-style: none;
}
.rings__seg {
display: grid;
gap: var(--space-1);
align-content: end;
min-height: 5.5rem;
padding: var(--space-3) var(--space-2);
border: 1px solid var(--line);
color: var(--text);
}
.rings__seg:first-child {
border-radius: var(--radius-field) 0 0 var(--radius-field);
}
.rings__seg:last-child {
border-radius: 0 var(--radius-field) var(--radius-field) 0;
}
.rings__seg--free {
border-style: dashed;
}
.rings__seg--1 {
background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.rings__seg--2 {
background: color-mix(in srgb, var(--accent) 34%, transparent);
}
.rings__seg--3 {
background: color-mix(in srgb, var(--accent) 52%, transparent);
}
.rings__miles {
font-size: var(--type-micro);
font-variant-numeric: tabular-nums;
}
.rings__rate {
font-family: var(--font-display);
font-size: clamp(0.9375rem, 2.6vw, 1.25rem);
font-weight: var(--weight-bold);
line-height: 1.1;
}
.rings__eg {
display: grid;
gap: var(--space-2);
}
.rings__eg-h {
font-weight: var(--weight-semibold);
}
.rings__sum {
display: grid;
margin: 0;
padding: 0;
list-style: none;
font-variant-numeric: tabular-nums;
}
.rings__sum li {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding-block: var(--space-2);
border-bottom: 1px dashed var(--line);
}
.rings__sum .rings__total {
border-bottom: 0;
font-weight: var(--weight-bold);
}
.rings__note {
color: var(--muted);
font-size: var(--type-small);
}
.sources {
display: grid;
gap: var(--space-8);
}
.source-card {
display: grid;
align-content: start;
gap: var(--space-3);
padding-top: var(--space-5);
border-top: 3px solid var(--accent);
}
.source-card__claim {
font-size: clamp(1.5rem, 2.2vw, 1.875rem);
font-weight: var(--weight-black);
letter-spacing: -0.025em;
}
.source-card p {
color: var(--muted);
}
.source-card .source-card__claim {
color: var(--text);
}
.source-card__ref {
font-size: var(--type-small);
}
.source-card__ref a {
display: inline;
color: var(--accent-text);
font-weight: var(--weight-semibold);
}
.why__note {
max-width: 62ch;
margin-top: var(--space-8);
color: var(--muted);
}
@media (width >= 900px) {
.sources {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
}
.sg-intro .lead {
max-width: 60ch;
margin-top: var(--space-4);
}
.sg-toc {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin-top: var(--space-6);
}
.sg-toc a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: var(--weight-semibold);
}
.sg-block {
border-top: 1px solid var(--line);
}
.sg-block h2 {
margin-bottom: var(--space-4);
}
.sg-note {
max-width: 62ch;
margin-bottom: var(--space-6);
color: var(--muted);
}
.sg-h3 {
margin: var(--space-12) 0 var(--space-4);
}
.sg-themes {
display: grid;
gap: var(--space-4);
}
.sg-theme {
display: grid;
gap: var(--space-4);
padding: var(--space-6);
border: 1px solid var(--line);
border-radius: var(--radius-field);
}
.sg-theme__name {
color: var(--muted);
font-size: var(--type-small);
font-weight: var(--weight-semibold);
}
.sg-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
}
.sg-stack {
display: grid;
gap: var(--space-6);
}
.sg-mark-big {
width: 120px;
height: 120px;
}
.lockup--static {
display: inline-flex;
}
.sg-swatch-grid {
display: grid;
gap: var(--space-4);
}
.sg-swatches {
padding: var(--space-6);
border: 1px solid var(--line);
border-radius: var(--radius-field);
}
.sg-swatches__h {
margin-bottom: var(--space-4);
}
.sg-swatches__list {
display: grid;
gap: var(--space-2);
}
.sg-swatch {
display: grid;
grid-template-columns: 40px 1fr;
column-gap: var(--space-3);
align-items: center;
font-size: var(--type-small);
}
.sg-swatch__chip {
grid-row: span 3;
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: var(--radius-frame);
}
.sg-swatch__name {
font-weight: var(--weight-bold);
}
.sg-swatch__val,
.sg-swatch__ratio {
color: var(--muted);
}
.sg-sun {
height: 64px;
margin-top: var(--space-6);
border-radius: var(--radius-field);
background: var(--sun);
}
.sg-type {
display: grid;
gap: var(--space-6);
}
.sg-type__row {
display: grid;
gap: var(--space-2);
}
.sg-type__meta {
color: var(--muted);
font-size: var(--type-small);
}
.price-sample {
color: var(--accent-text);
font-family: var(--font-display);
font-size: var(--type-price);
font-weight: var(--weight-black);
letter-spacing: -0.045em;
line-height: 0.92;
}
.sg-display,
.sg-title,
.sg-heading {
font-family: var(--font-display);
font-weight: var(--weight-black);
letter-spacing: -0.03em;
line-height: 1;
}
.sg-display {
font-size: var(--type-display);
}
.sg-title {
font-size: var(--type-title);
}
.sg-heading {
font-size: var(--type-heading);
font-weight: var(--weight-bold);
}
.sg-space,
.sg-radius {
display: grid;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.sg-space li,
.sg-radius li {
display: flex;
align-items: center;
gap: var(--space-4);
color: var(--muted);
font-size: var(--type-small);
}
.sg-space__bar {
height: 16px;
border-radius: 2px;
background: var(--accent);
}
.sg-space__bar--1 { width: var(--space-1); }
.sg-space__bar--2 { width: var(--space-2); }
.sg-space__bar--3 { width: var(--space-3); }
.sg-space__bar--4 { width: var(--space-4); }
.sg-space__bar--6 { width: var(--space-6); }
.sg-space__bar--8 { width: var(--space-8); }
.sg-space__bar--12 { width: var(--space-12); }
.sg-space__bar--18 { width: var(--space-18); }
.sg-space__bar--28 { width: var(--space-28); }
.sg-radius__box {
width: 64px;
height: 48px;
border: 2px solid var(--accent);
}
.sg-radius__box--frame { border-radius: var(--radius-frame); }
.sg-radius__box--field { border-radius: var(--radius-field); }
.sg-radius__box--card { border-radius: var(--radius-card); }
.sg-radius__box--pill { border-radius: var(--radius-pill); }
.sg-tiles {
max-width: 440px;
}
.sg-price-panel {
max-width: 440px;
border-radius: var(--radius-card);
}
.sg-form {
display: grid;
gap: var(--space-4);
max-width: 440px;
}
.sg-plan {
padding: var(--space-8);
border-radius: var(--radius-card);
}
@media (width >= 900px) {
.sg-themes,
.sg-swatch-grid {
grid-template-columns: 1fr 1fr;
}
}
.sg-chip--dark-bg{background:#0F0B07}
.sg-chip--dark-surface{background:#1A1410}
.sg-chip--dark-surface-2{background:#2A2016}
.sg-chip--dark-line{background:#3A2F24}
.sg-chip--dark-field{background:#9A8B72}
.sg-chip--dark-text{background:#FFF6E4}
.sg-chip--dark-muted{background:#C7B9A0}
.sg-chip--dark-accent{background:#FBA83C}
.sg-chip--dark-accent-text{background:#FFC841}
.sg-chip--dark-on-accent{background:#1A1208}
.sg-chip--dark-focus{background:#FFC841}
.sg-chip--dark-error{background:#FF9B8A}
.sg-chip--dark-ok{background:#9FE0AE}
.sg-chip--dark-scrim{background:#0F0B07D9}
.sg-chip--light-bg{background:#F2F5F8}
.sg-chip--light-surface{background:#FFFFFF}
.sg-chip--light-surface-2{background:#FFF1D2}
.sg-chip--light-line{background:#C9D4DF}
.sg-chip--light-field{background:#6F8296}
.sg-chip--light-text{background:#0E1A26}
.sg-chip--light-muted{background:#4B5E72}
.sg-chip--light-accent{background:#FBA83C}
.sg-chip--light-accent-text{background:#8A5A00}
.sg-chip--light-on-accent{background:#1A1208}
.sg-chip--light-focus{background:#8A5A00}
.sg-chip--light-error{background:#B3261E}
.sg-chip--light-ok{background:#1F6B39}
.sg-chip--light-scrim{background:#0E1A26B3}