/* starter — section styles (loaded from by build.py) */ #vp-starter, #vp-starter * { box-sizing:border-box; } #vp-starter { width:100vw; margin-left:calc(50% - 50vw); padding:56px 0 0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); } #vp-starter .vp-starter__panel { width:var(--vp-page); margin:auto; padding:34px 38px; border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-md); } #vp-starter .vp-starter__head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-bottom:26px; } #vp-starter .vp-starter__head h2 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:30px; line-height:1.1; } #vp-starter .vp-starter__head p { margin:0; color:color-mix(in srgb, var(--color-text) 62%, transparent); font-size:14px; } #vp-starter .vp-starter__row { display:flex; flex-wrap:wrap; align-items:end; gap:26px 36px; } #vp-starter .vp-starter__chips { display:flex; flex-wrap:wrap; gap:8px; } #vp-starter .vp-starter__estimate { margin-left:auto; text-align:right; } #vp-starter .vp-starter__estimateRow { display:flex; align-items:center; gap:18px; } #vp-starter .vp-starter__sum { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:34px; line-height:1; white-space:nowrap; } #vp-starter .vp-starter__cta { padding:14px 26px; font-size:15px; white-space:nowrap; } #vp-starter .vp-starter__rate { margin:20px 0 0; color:color-mix(in srgb, var(--color-text) 55%, transparent); font-size:13px; } /* ------------------------------------------------------------ narrow -- */ @media (max-width:980px) { #vp-starter .vp-starter__panel { padding:28px 26px; } #vp-starter .vp-starter__estimate { margin-left:0; text-align:left; width:100%; padding-top:22px; border-top:1px solid var(--color-divider); } #vp-starter .vp-starter__estimateRow { justify-content:space-between; } } /* One column, and every control at least a thumb high: the chips become a four-across grid so the four answers stay on one line each. */ @media (max-width:780px) { #vp-starter { padding-top:26px; } #vp-starter .vp-starter__panel { width:calc(100% - 32px); padding:20px; } #vp-starter .vp-starter__head { margin-bottom:16px; } #vp-starter .vp-starter__head h2 { font-size:21px; } #vp-starter .vp-starter__head p { display:none; } #vp-starter .vp-starter__row { display:block; } #vp-starter .vp-starter__group + .vp-starter__group { margin-top:16px; } #vp-starter .vp-starter__chips { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } #vp-starter .vp-chip { min-height:48px; padding:0 6px; font-size:13px; } #vp-starter .vp-stepper { height:48px; width:100%; justify-content:space-between; } #vp-starter .vp-stepper .vp-stepper__value { font-size:18px; } #vp-starter .vp-starter__estimate { margin-top:16px; padding-top:16px; } #vp-starter .vp-starter__estimateRow { align-items:center; gap:12px; } #vp-starter .vp-starter__sum { font-size:30px; } #vp-starter .vp-starter__cta { min-height:48px; padding:0 20px; font-size:14px; } #vp-starter .vp-starter__rate { margin-top:14px; font-size:12px; } }