/* Clarity Care design system.
   Warm ivory ground, near-black type and one dusty blue taken from the hero photograph.
   Outfit for display, light or regular. Albert Sans for anything read quickly or filled in.
   Liquid glass is the one surface treatment: translucent white, blurred, with a soft edge light. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&family=Albert+Sans:wght@400;500;600&display=swap');

:root{
  /* Near monochrome on a warm off-white ground. The one strong colour is the sky
     blue of the hero image, used for every deep panel. Brown was retired on
     October 28, 2026 at Emily's request; the amber logo stroke remains. */
  --ivory:#F7F5F2; --ivory-deep:#F1EEE9; --paper:#FFFFFF;
  /* the one brand blue, sampled from the hero photograph's sky. Every blue on the site
     is this token, its ink shade for text on tints, or its pale tint. */
  --brand:#4A7299;          /* white text on it is about 5:1 */
  --brand-ink:#35597D;      /* brand-coloured text on --brand-tint, about 6:1 */
  --brand-tint:#EAF0F6;
  --deep:var(--brand);
  --amber:#C2742F;          /* accent fills and graphics */
  --forest:#171614;         /* near-black: display type and primary buttons */
  --forest-mid:#3D3A35; --forest-soft:#EFEDE8;
  --sage:#DAD6CE; --sage-deep:#9A968F;
  --peach:#9A5620;          /* accent text, dark enough to pass AA on white */
  --peach-soft:var(--brand-tint);
  --ink:#171614; --ink-2:#6E6B66; --ink-3:#9A968F;
  --line:#E6E2DC; --line-soft:#F0EDE8;
  --danger:#9A3B22; --danger-soft:#FBEDE8;
  --display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Albert Sans',system-ui,-apple-system,'Segoe UI',sans-serif;  /* body, forms, numbers */
  --r:10px; --r-lg:18px; --r-xl:28px; --r-pill:999px;
  --hair:1px solid var(--line);
  --shadow:0 1px 2px rgba(30,48,70,.05),0 10px 28px rgba(30,48,70,.07);
  /* motion: one easing curve and three durations, used for every transition */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:160ms; --dur-2:260ms; --dur-3:420ms;
  /* liquid glass */
  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-strong:rgba(255,255,255,.8);
  --glass-line:rgba(255,255,255,.85);
  --glass-blur:blur(18px) saturate(160%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(30,48,70,.05),0 14px 36px rgba(30,48,70,.09);
  --lift-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(30,48,70,.06),0 22px 46px rgba(30,48,70,.13);
  /* type scale */
  --fs-sm:.875rem; --fs-body:1.0625rem; --fs-lead:1.1875rem;
  --wrap:1240px;
  /* The page edge every section shares: header, hero, content and footer. Past the
     1240px content width it reaches halfway into the side margins, so wide screens
     are used without the page feeling stretched. --gutter is the minimum padding. */
  --gutter:24px;
  --edge:calc((100vw - min(100vw, var(--wrap)) + 2 * var(--gutter)) / 4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{scroll-behavior:smooth;interpolate-size:allow-keywords}
/* two very soft washes of the brand blue behind everything, so glass has light to catch */
body{margin:0;color:var(--ink);font:400 17px/1.65 var(--sans);
  background:
    radial-gradient(1100px 620px at 88% -8%,rgba(74,114,153,.11),transparent 62%),
    radial-gradient(900px 560px at -12% 38%,rgba(74,114,153,.07),transparent 60%),
    radial-gradient(900px 600px at 105% 92%,rgba(74,114,153,.07),transparent 62%),
    var(--ivory);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--forest-mid);text-underline-offset:3px}
a:hover{color:var(--forest)}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:#fff;padding:12px 18px;z-index:100;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:300;letter-spacing:-.022em;line-height:1.06;
  font-size:clamp(2.4rem,5.6vw,4.2rem);margin:0 0 .45em;color:var(--forest)}
.display-sm{font-family:var(--display);font-weight:300;line-height:1.12;letter-spacing:-.018em;
  font-size:clamp(1.9rem,3.4vw,2.7rem);margin:0 0 .4em;color:var(--forest)}
h2{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.18;
  margin:0 0 .5em;color:var(--forest);letter-spacing:-.016em}
h3{font-family:var(--sans);font-weight:600;font-size:1.0625rem;margin:0 0 .4em;color:var(--ink)}
.eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);
  font-weight:600;margin:0 0 1rem}
.lede{font-size:clamp(1.0625rem,1.6vw,1.1875rem);color:var(--ink-2);line-height:1.65;max-width:62ch;margin:0 0 1.5rem}
p{margin:0 0 1rem}
.muted{color:var(--ink-2)}
.fine{font-size:.875rem;color:var(--ink-3);line-height:1.55}

/* ---------- layout ---------- */
.shell{max-width:none;margin:0;padding:0 var(--edge)}
.shell-narrow{max-width:760px;margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.section-tight{padding:48px 0}
.band{background:var(--ivory-deep)}
/* a rounded panel on the shared page edge, matching the hero, rather than a full-bleed strip */
.band-forest{background:var(--deep);color:#F3F6F9;margin-inline:var(--edge);border-radius:28px}
@media(max-width:760px){.band-forest{border-radius:20px}}
.band-forest .display,.band-forest h2{color:#FDFBF9}
.band-forest p{color:#F3F6F9}
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack-sm>*+*{margin-top:8px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.crumbs{font-size:.875rem;color:var(--ink-3);padding:24px 0 8px}
.crumbs a{color:var(--ink-2)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(247,245,242,.66);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(30,48,70,.06);
}
/* the header row sits on the shared page edge, so the logo lines up with everything below */
.header-in{max-width:none;margin:0;display:flex;align-items:center;gap:20px;padding:14px var(--edge)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.3rem;
  color:var(--forest);text-decoration:none;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.brand:hover{color:var(--forest-mid)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{font-size:.9375rem;color:var(--ink-2);text-decoration:none;padding:9px 13px;border-radius:var(--r-pill);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.nav a:not(.btn):hover{color:var(--forest);background:rgba(255,255,255,.7)}
.nav .btn{margin-left:8px}
.nav a[aria-current="page"]{color:var(--forest);font-weight:500}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--r);padding:9px 12px;font:500 .9375rem var(--sans);color:var(--forest);cursor:pointer}
@media(max-width:900px){
  .nav{display:none;position:absolute;top:calc(100% + 8px);left:var(--edge);right:var(--edge);
    flex-direction:column;align-items:stretch;padding:10px;gap:2px;border-radius:var(--r-lg);
    background:var(--glass-bg-strong);border:1px solid var(--glass-line);box-shadow:var(--lift-shadow);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  .nav.open{display:flex;animation:menuIn var(--dur-2) var(--ease)}
  .nav .btn{margin-left:0}
  .nav a{padding:13px 10px;font-size:1rem}
  .nav .btn{margin-top:8px;text-align:center}
  .nav-toggle{display:block}
}
@keyframes menuIn{from{opacity:0;translate:0 -6px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  font:500 .9375rem/1 var(--sans);padding:14px 26px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),translate var(--dur-1) var(--ease)}
.btn:active{translate:0 1px}
.btn-lg{padding:18px 32px;font-size:1rem}
.btn[aria-busy="true"]{cursor:progress;opacity:.75}
.btn-round{width:62px;height:62px;padding:0;border-radius:50%;background:var(--forest);color:#fff;
  border:0;flex:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.btn-round:hover{background:#2E2B27}
.btn-round svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9}
.btn-primary{background:var(--forest);color:#FBF8F3;border-color:var(--forest);
  box-shadow:0 1px 2px rgba(23,22,20,.12),0 8px 20px rgba(23,22,20,.12)}
.btn-primary:hover{background:#2E2B27;border-color:#2E2B27;color:#fff;
  box-shadow:0 2px 4px rgba(23,22,20,.14),0 12px 26px rgba(23,22,20,.16)}
.btn-secondary{background:rgba(255,255,255,.55);color:var(--forest);border-color:rgba(23,22,20,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-secondary:hover{background:#fff;border-color:rgba(23,22,20,.3);color:var(--forest)}
.btn-ghost{background:transparent;color:var(--forest-mid);padding:10px 12px}
.btn-ghost:hover{background:rgba(255,255,255,.7)}
.btn-sm{padding:9px 14px;font-size:.875rem}
.btn-danger{background:transparent;color:var(--danger);border-color:#E0C4BD}
.btn-danger:hover{background:var(--danger-soft)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- cards & panels ---------- */
.card{background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:30px;
  box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.bare{padding:34px 0;border-top:var(--hair)}
.bare:first-child{border-top:0}
.rule{border:0;border-top:var(--hair);margin:0}
.stat-big{font-family:var(--display);font-weight:200;font-size:clamp(3rem,7vw,5rem);line-height:1;
  letter-spacing:-.03em;color:var(--forest)}
.stat-cap{font-size:.9375rem;color:var(--ink-2);margin-top:6px}
.divided{display:grid;gap:0}
.divided>*{padding:26px 0;border-top:var(--hair)}
.divided>*:first-child{border-top:0;padding-top:0}
.card-quiet{background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r);padding:20px;
  box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.panel{background:rgba(255,255,255,.5);border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:26px;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.panel-peach{background:var(--peach-soft);border-radius:var(--r-lg);padding:22px 24px}
.panel-peach p:last-child,.panel p:last-child{margin-bottom:0}
.hr{height:1px;background:var(--line);border:0;margin:32px 0}

/* dark band internals, so no page has to hardcode a colour */
.band-forest .eyebrow{color:#F3F6F9}
.band-forest h3{color:#FDFBF9}
.band-forest .btn-secondary{border-color:rgba(255,255,255,.6);color:#FFFFFF}
.band-forest .btn-secondary:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- tags & badges ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:500;
  letter-spacing:.02em;padding:4px 9px;border-radius:5px;white-space:nowrap}
.tag-verified{background:var(--forest-soft);color:#3A362F}
.tag-illustrative{background:var(--brand-tint);color:var(--brand-ink)}
.tag-type{background:var(--ivory-deep);color:var(--ink-2)}
.tag-insurer{background:var(--brand-tint);color:var(--brand-ink)}
.tag-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.demo-banner{background:#1B1916;color:#C9C3BA;font-size:.8125rem;text-align:center;
  padding:8px 20px;line-height:1.45}
.demo-banner strong{color:#fff;font-weight:600}

/* ---------- forms ---------- */
.field{margin:0 0 20px}
label,.label{display:block;font-size:.9375rem;font-weight:500;color:var(--ink);margin:0 0 6px}
.hint{font-size:.8125rem;color:var(--ink-3);line-height:1.5;margin:6px 0 0}
input[type=text],input[type=number],input[type=search],input[type=email],select,textarea{
  width:100%;font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--sage-deep);border-radius:var(--r);padding:13px 14px;appearance:none;min-height:48px;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
textarea{min-height:130px;resize:vertical}
select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23171614' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(74,114,153,.2);outline:none}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-soft)}
.err{color:var(--danger);font-size:.8125rem;margin:6px 0 0;font-weight:500}
fieldset{border:0;padding:0;margin:0 0 24px}
legend{font-family:var(--display);font-size:1.25rem;color:var(--forest);padding:0;margin:0 0 4px}
.choice{display:flex;gap:12px;align-items:flex-start;background:var(--glass-bg);border:1px solid var(--glass-line);
  border-radius:var(--r-lg);padding:16px 18px;cursor:pointer;margin:0 0 10px;box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease),translate var(--dur-2) var(--ease)}
.choice:hover{border-color:rgba(74,114,153,.45);translate:0 -1px;box-shadow:var(--lift-shadow)}
.choice[aria-checked="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand),var(--glass-shadow);
  background:rgba(234,240,246,.85)}
.choice input{margin:4px 0 0;accent-color:var(--brand);flex:none}
.choice b{display:block;font-weight:500;font-size:1rem;color:var(--ink)}
.choice span{display:block;font-size:.875rem;color:var(--ink-2);line-height:1.5;margin-top:2px}

/* ---------- hero panel ---------- */
.hero{position:relative;margin:8px 0 0;padding:0 0 72px}
/* The photograph is AI-generated (ChatGPT), not a real scene. It is pinned to the bottom of the
   panel at full width and faded in at its top edge, and the panel is filled with the sky's own blue
   above it, so the headline always sits in open sky and never across the hands. The hands begin
   about 20% of the panel's width above its bottom edge, which is what the bottom padding clears. */
/* The hands start 20% of the panel's width above its bottom, which the bottom padding clears. */
.hero-panel{background:#4A7299;border-radius:28px;padding:52px 56px calc(20% + 40px);text-align:center;
  position:relative;overflow:hidden}
.hero-panel .display{color:#FBF8F3;margin:0 auto .5em;max-width:18ch;
  font-size:clamp(2.4rem,4.6vw,4.6rem)}
.hero-panel .hero-sub{color:#FFFFFF;font-size:clamp(1.0625rem,1.7vw,1.25rem);margin:0 auto;max-width:44ch;
  line-height:1.55}
.hero-panel .eyebrow{color:#F3F6F9;text-align:center}
.hero-panel::before{content:'';position:absolute;left:0;bottom:0;width:100%;aspect-ratio:3/1;z-index:0;
  background:url('img/hero.webp') center bottom/100% auto no-repeat;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);
  mask-image:linear-gradient(to bottom,transparent,#000 22%)}
.hero-panel>*{position:relative;z-index:1}
.hero-dock{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,1100px);
  padding:0 24px}
/* On a phone the pill is tall, so it stops floating and flows under the panel
   with a small overlap. Shrinking the desktop composition would bury the headline. */
@media(max-width:860px){
  .hero{padding-bottom:0}
  .hero-panel{padding:36px 24px calc(36% + 48px);border-radius:20px}
  /* wider than the panel on a phone, so the hands stay large enough to read */
  .hero-panel::before{width:180%;left:-40%}
  .hero-dock{position:relative;left:auto;bottom:auto;z-index:2;transform:none;width:auto;
    padding:0;margin-top:-14px}
}

/* ---------- search module ---------- */
.searchbar{background:var(--glass-bg-strong);border:1px solid var(--glass-line);border-radius:var(--r-pill);
  padding:10px 10px 10px 14px;display:flex;align-items:stretch;gap:0;box-shadow:var(--lift-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.searchbar .sb-field{position:relative;flex:1;min-width:0;padding:12px 24px;display:flex;
  flex-direction:column;justify-content:center}
.searchbar .sb-field+.sb-field{border-left:var(--hair)}
.searchbar label{font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--ink-3);
  margin:0 0 3px;font-weight:400}
.searchbar input,.searchbar select{border:0;padding:0;background:transparent;font-size:1.0625rem;
  color:var(--ink);font-weight:500;width:100%;text-overflow:ellipsis}
.searchbar input::placeholder{color:var(--sage-deep);font-weight:400}
.searchbar input:focus,.searchbar select:focus{outline:none}
.searchbar .sb-field:focus-within label{color:var(--forest-mid)}
.searchbar select{background-position:right 0 center;padding-right:22px}
@media(max-width:760px){
  .searchbar{flex-direction:column;border-radius:22px;padding:8px;align-items:stretch}
  .searchbar .sb-field{padding:13px 16px}
  .searchbar .sb-field+.sb-field{border-left:0;border-top:var(--hair)}
  .searchbar .btn-round{width:100%;height:54px;border-radius:var(--r-pill);margin-top:8px}
  .searchbar .btn-round .sb-go{display:inline}
}
.sb-go{display:none;font:500 1rem var(--sans);margin-left:8px}
/* the hero's one primary action: a labelled pill, not an icon */
.searchbar .btn-go{height:62px;padding:0 28px;border-radius:var(--r-pill);background:var(--forest);color:#fff;border:0;
  flex:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:500 1rem var(--sans);
  transition:background var(--dur-1) var(--ease),translate var(--dur-1) var(--ease)}
.searchbar .btn-go:hover{background:#2E2B27}
.searchbar .btn-go:active{translate:0 1px}
.searchbar .btn-go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9}
@media(max-width:760px){.searchbar .btn-go{width:100%;height:54px;justify-content:center;margin-top:8px}}
.ac{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:30;max-height:300px;overflow:auto;padding:6px;
  background:var(--glass-bg-strong);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--lift-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);animation:menuIn var(--dur-2) var(--ease)}
.ac[hidden]{display:none}
.ac button{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 13px;
  border-radius:7px;cursor:pointer;font:400 .9375rem var(--sans);color:var(--ink)}
.ac button:hover,.ac button[aria-selected="true"]{background:var(--brand-tint)}
.ac .ac-sub{display:block;font-size:.8125rem;color:var(--ink-3);margin-top:1px}

.find-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:32px;align-items:start}
@media(max-width:900px){.find-layout{grid-template-columns:minmax(0,1fr)}}

/* ---------- results ---------- */
.result{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start;margin:0 0 14px;
  background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:24px;
  box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:box-shadow var(--dur-2) var(--ease),translate var(--dur-2) var(--ease)}
.result:hover{box-shadow:var(--lift-shadow);translate:0 -2px}
.result h3{font-size:1.1875rem;font-weight:500;margin:0 0 3px}
.result-meta{font-size:.875rem;color:var(--ink-2);margin:0 0 10px}
.result-cost{text-align:right;min-width:190px}
.cost-figure{font-family:var(--display);font-size:2rem;color:var(--forest);line-height:1.05;letter-spacing:-.01em}
.cost-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-deep);font-weight:600;margin:0 0 4px}
.cost-range{font-size:.875rem;color:var(--ink-2);margin-top:4px}
@media(max-width:720px){
  .result{grid-template-columns:1fr;gap:16px}
  .result-cost{text-align:left;border-top:1px solid var(--line);padding-top:14px}
}

/* two column pairs, handled in CSS so nothing can clear them at desktop width */
.pair{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.pair-text{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.pair-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:48px;align-items:start}
@media(max-width:900px){
  .pair,.pair-text,.pair-main{grid-template-columns:minmax(0,1fr);gap:32px}
}

/* ---------- split layout, laptop first ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:start}
.rail{position:sticky;top:104px}
@media(max-width:1000px){
  .split{grid-template-columns:minmax(0,1fr);gap:0}
  .rail{position:static}
}
/* hairline sections instead of a stack of boxes */
.sheet{padding:40px 0;border-top:var(--hair)}
.sheet:first-child{border-top:0;padding-top:8px}
.sheet>h2{margin-bottom:.35em}
.figure{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
.figure .amount{font-family:var(--display);font-weight:200;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(3.2rem,7vw,5.6rem);color:var(--forest);margin:0}
.figure .meta{text-align:right}
@media(max-width:680px){.figure .meta{text-align:left}}

/* ---------- breakdown ---------- */
.breakdown{list-style:none;padding:0;margin:0}
.breakdown li{display:flex;justify-content:space-between;gap:18px;padding:14px 0;
  border-bottom:1px solid var(--line-soft);align-items:baseline}
.breakdown .bd-label{color:var(--ink-2);font-size:.9375rem}
.breakdown .bd-amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.breakdown li.bd-total{border-top:2px solid var(--forest);border-bottom:0;margin-top:6px;padding-top:16px}
.breakdown li.bd-total .bd-label{color:var(--ink);font-weight:500}
.breakdown li.bd-total .bd-amt{font-family:var(--display);font-size:1.5rem;color:var(--forest)}
.breakdown li.bd-muted .bd-amt{color:var(--ink-2);font-weight:400}

/* ---------- steps ---------- */
.progress{display:flex;gap:6px;margin:0 0 30px;list-style:none;padding:0;flex-wrap:wrap}
.progress li{flex:1 1 90px;font-size:.75rem;letter-spacing:.04em;color:var(--ink-3);
  padding-top:10px;border-top:3px solid var(--line);text-transform:uppercase;font-weight:600;
  transition:border-color var(--dur-3) var(--ease),color var(--dur-3) var(--ease)}
.progress li[data-state="done"]{border-top-color:rgba(74,114,153,.45);color:var(--ink-2)}
.progress li[data-state="current"]{border-top-color:var(--brand);color:var(--forest)}

/* ---------- tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:.9375rem}
.table th{text-align:left;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-deep);
  font-weight:600;padding:0 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:bottom}
.table td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.table .n{font-variant-numeric:tabular-nums;white-space:nowrap}
.table tr.is-best td{background:var(--brand-tint)}
@media(max-width:820px){
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table thead{display:none}
  .table tr{border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:16px;margin:0 0 12px;
    background:var(--glass-bg);box-shadow:var(--glass-shadow)}
  .table td{border:0;padding:4px 0}
  .table td::before{content:attr(data-lab);display:block;font-size:.75rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--sage-deep);font-weight:600;margin-bottom:1px}
}

/* centred page opener, the landing page composition at interior scale */
.page-hero{text-align:center;padding:64px 0 48px;max-width:20ch;margin:0 auto}
.page-hero .display{margin:0 auto;max-width:18ch}
.page-hero-wide{max-width:none}
.page-hero-actions{display:flex;justify-content:center;margin:34px 0 0}
@media(max-width:760px){.page-hero{padding:40px 0 32px}}

/* ---------- how it works ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:52px}
@media(max-width:900px){.steps-grid{grid-template-columns:1fr;gap:40px}}
.step-visual{position:relative;aspect-ratio:1/.92;border-radius:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:26px;
  background:var(--deep) center/cover no-repeat}
.step:nth-child(1) .step-visual{background-image:url('img/step-1.webp')}
.step:nth-child(2) .step-visual{background-image:url('img/step-2.webp')}
.step:nth-child(3) .step-visual{background-image:url('img/step-3.webp')}
.step-num{position:absolute;top:16px;left:16px;z-index:2;width:30px;height:30px;border-radius:9px;
  background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.875rem;font-weight:500;border:0}

/* liquid glass. Tinted dark rather than light, because one of the three
   backgrounds is near-white and light glass would lose the text on it. */
/* every card the same size, content centred, whatever it holds */
.step-card{position:relative;z-index:1;border-radius:14px;padding:17px 18px;width:100%;max-width:265px;
  min-height:212px;display:flex;flex-direction:column;justify-content:center;
  background:rgba(20,17,14,.72);border:1px solid rgba(255,255,255,.22);color:#fff;
  box-shadow:0 16px 38px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.2)}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .step-card{backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%)}
  /* tint is set per panel, because the three backdrops differ in brightness and a
     single value leaves white text under 4.5:1 on the two light ones */
  .step:nth-child(1) .step-card{background:rgba(20,17,14,.52)}
  .step:nth-child(2) .step-card{background:rgba(20,17,14,.38)}
  .step:nth-child(3) .step-card{background:rgba(20,17,14,.55)}
}
/* keep the check beside the procedure name; the name wraps instead */
.step-card .row{flex-wrap:nowrap}
.step-card .row>div{min-width:0}
.step-card .sc-lab{font-size:.6875rem;color:rgba(255,255,255,.62);margin:0 0 3px}
.step-card .sc-val{font-size:.9375rem;font-weight:500;color:#fff;margin:0}
.step-card .sc-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  font-size:.8125rem;color:rgba(255,255,255,.76);align-items:baseline}
.step-card .sc-row+.sc-row{border-top:1px solid rgba(255,255,255,.15)}
.step-card .sc-row b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.step-card .sc-total{border-top:1.5px solid rgba(255,255,255,.55);margin-top:5px;padding-top:9px;
  font-size:.875rem}
.step-card .sc-total b{font-family:var(--display);font-weight:300;font-size:1.5rem;letter-spacing:-.02em}
.step-card .sc-check{width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.9);flex:none;
  display:flex;align-items:center;justify-content:center}
.step-card .sc-check svg{width:10px;height:10px;stroke:#1A1714;fill:none;stroke-width:2.6}
.step h3{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:-.016em;
  color:var(--ink);margin:24px 0 8px;line-height:1.15}
.step p{font-size:1rem;color:var(--ink-2);line-height:1.55;margin:0;max-width:32ch}

/* ---------- flashcards ---------- */
/* six flashcards: two even rows of three on laptops, two per row on tablets, one on phones */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 20px}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cards{grid-template-columns:minmax(0,1fr)}}
.flip{background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font:inherit;color:inherit;border-radius:var(--r-lg);display:block;width:100%}
.flip-stage{display:block;perspective:1400px;height:100%}
.flip:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px}
/* both faces share one grid cell, so the card is as tall as the longer side */
.flip-inner{display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.22,.85,.3,1);
  min-height:260px;height:100%}
/* hover turns the card. A click pins it, and then hover leaves it alone. */
.flip:not([aria-expanded="true"]):hover .flip-inner,
.flip:not([aria-expanded="true"]):focus-visible .flip-inner,
.flip[aria-expanded="true"] .flip-inner{transform:rotateY(180deg)}
.flip-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%}
.flip-front{background:var(--glass-bg);border-color:var(--glass-line);box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.flip-back{background:var(--deep);color:#F3F6F9;transform:rotateY(180deg);justify-content:center}

/* front hierarchy: label, then the term large, then the one line hint */
.flip-label{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--sage-deep);margin:0 0 16px}
.flip-term{font-family:var(--display);font-weight:300;font-size:2.125rem;letter-spacing:-.025em;
  color:var(--ink);margin:0 0 16px;line-height:1.06;max-width:14ch}
.flip-hint{font-size:1rem;color:var(--ink-2);line-height:1.55;margin:0;max-width:30ch}
/* back hierarchy: the term small at the top, the meaning large, the example quiet */
.flip-back{position:relative}
.flip-back .flip-label{color:#F3F6F9;margin-bottom:14px}
.flip-back p{color:#FFFFFF;font-size:1.0625rem;line-height:1.5;margin:0 0 12px;max-width:34ch}
.flip-back p.flip-sub{color:#F3F6F9;font-size:.9375rem;line-height:1.55}
/* the example sits in its own white bubble, dark text, so it reads clearly on the blue */
.flip-eg{display:block;margin-top:16px;padding:12px 16px;background:#FFFFFF;border-radius:12px;
  font-size:.875rem;color:var(--ink);line-height:1.5;max-width:36ch}
.flip:hover .flip-front{border-color:rgba(74,114,153,.45)}
@media(hover:none){.flip:hover .flip-inner{transform:none}
  .flip[aria-expanded="true"] .flip-inner{transform:rotateY(180deg)}}
@media(prefers-reduced-motion:reduce){.flip-inner{transition-duration:0s}}

/* ---------- accordion ---------- */
details.acc{border-bottom:1px solid var(--line);padding:4px 0}
details.acc summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;position:relative;
  font-weight:500;font-size:1.0625rem;color:var(--forest)}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:'';position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--forest-mid);border-bottom:1.6px solid var(--forest-mid);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur-2) var(--ease)}
details.acc::details-content{height:0;overflow:clip;
  transition:height var(--dur-2) var(--ease),content-visibility var(--dur-2) allow-discrete}
details.acc[open]::details-content{height:auto}
details.acc[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details.acc .acc-body{padding:0 0 20px;color:var(--ink-2);max-width:68ch}
details.acc .acc-body p:last-child{margin-bottom:0}

/* ---------- misc ---------- */
.empty{text-align:center;padding:64px 24px;background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r-xl);
  box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.empty h2{margin-bottom:.3em}
.notice{background:var(--brand-tint);border:1px solid rgba(74,114,153,.18);border-radius:var(--r-lg);padding:16px 18px;
  font-size:.9375rem;color:#2C4864;line-height:1.6;margin:0 0 24px}
.notice strong{color:#1F364D}
.notice-forest{background:rgba(255,255,255,.6);border-color:var(--glass-line);color:var(--forest-mid)}
.notice-forest strong{color:var(--forest)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;
  font-size:.875rem;color:var(--ink-2);text-decoration:none;cursor:pointer}
.chip:hover{border-color:var(--sage-deep);color:var(--forest);background:#fff}
.chip[aria-pressed="true"]{background:var(--forest);color:#F3F0E9;border-color:var(--forest)}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding:0 0 14px 30px;color:var(--ink-2);line-height:1.6}
.checklist li::before{content:'';position:absolute;left:4px;top:9px;width:8px;height:8px;
  border-radius:50%;border:1.6px solid var(--sage-deep)}

/* ---------- footer ---------- */
.site-footer{background:#1B1916;color:#B5B0A8;padding:56px 0 32px;margin-top:80px;font-size:.9375rem}
.site-footer a{color:#E8E4DE;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px}
.footer-grid h3{color:#fff;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;font-weight:600}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:0 0 9px}
.footer-brand{font-family:var(--display);font-size:1.3rem;color:#fff;margin:0 0 10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:22px;
  font-size:.8125rem;color:#8D877E;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- tests page ---------- */
.test-summary{margin:0 0 24px;font-weight:500}
.test-summary .all-pass{color:var(--forest);background:var(--brand-tint);padding:14px 18px;border-radius:var(--r)}
.test-summary .some-fail{color:var(--danger);background:var(--danger-soft);padding:14px 18px;border-radius:var(--r)}
.test{border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 12px;background:var(--paper)}
.test-fail{border-color:var(--danger)}
.test-name{font-weight:500;margin:0 0 4px}
.test-flag{display:inline-block;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;margin-right:10px;background:var(--brand-tint);color:var(--brand-ink);font-weight:600}
.test-fail .test-flag{background:var(--danger-soft);color:var(--danger)}
.test-why{font-size:.875rem;color:var(--ink-2);margin:0 0 10px}
.test-table{width:100%;font-size:.8125rem;color:var(--ink-3);border-collapse:collapse}
.test-table td{padding:3px 14px 3px 0;font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .test-table,.test-table tbody,.test-table tr,.test-table td{display:block;width:100%}
  .test-table tr{padding:6px 0;border-bottom:1px solid var(--line-soft)}
  .test-table td{padding:1px 0;word-break:break-word}
}

@media(max-width:760px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .section{padding:52px 0}
  /* phones: one 16px edge for logo, hero, text and footer alike */
  :root{--gutter:16px;--edge:16px}
  .shell,.shell-narrow{padding:0 var(--edge)}
  .card{padding:22px}
}
@media(min-width:761px) and (max-width:1000px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{
  .site-header,.site-footer,.demo-banner,.no-print{display:none!important}
  body{background:#fff}
  .card,.panel{border:1px solid #ccc;box-shadow:none}
  details.acc{display:block}details.acc summary{display:none}
}

/* ---------- scroll reveal (added by app.js on content pages) ----------
   Uses the separate translate and scale properties, not transform, so it never
   fights an element's own transform, such as the flashcard flip. */
html.reveal-on .rv{opacity:0;translate:0 16px;
  transition:opacity .5s var(--ease),translate .5s var(--ease);transition-delay:var(--rv-delay,0ms)}
html.reveal-on .rv.is-in{opacity:1;translate:none}
@media(prefers-reduced-motion:reduce){html.reveal-on .rv{opacity:1;translate:none;scale:none}}
@media print{html.reveal-on .rv{opacity:1;translate:none;scale:none}}

/* ---------- for providers ----------
   A frosted card over the hero photograph, so the page shares the homepage's look.
   Light glass with dark type: body text measures about 6:1 over the blurred sky. */
.pro-hero{position:relative;border-radius:28px;overflow:hidden;margin:8px 0 0;padding:64px 24px;
  display:grid;place-items:center;background:#4A7299 url('img/hero.webp') center/cover no-repeat}
.pro-card{width:100%;max-width:640px;border-radius:22px;padding:40px 40px 36px;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.75);
  box-shadow:0 24px 60px rgba(20,30,45,.18)}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .pro-card{background:rgba(255,255,255,.6);backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%)}
}
.pro-kicker{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:0 0 12px}
.pro-card h1{margin:0 0 28px;max-width:16ch}
.pro-steps{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:22px}
.pro-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start}
.pro-num{width:34px;height:34px;border-radius:9px;background:var(--forest);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:.9375rem;font-weight:500;margin-top:2px}
.pro-steps h2{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.25;margin:0 0 4px;color:var(--ink)}
.pro-steps p{margin:0;color:#3D3A35;line-height:1.55}
.pro-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn-glass{background:rgba(255,255,255,.55);color:var(--forest);border-color:rgba(23,22,20,.25)}
.btn-glass:hover{background:#fff;color:var(--forest)}
.pro-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin:64px 0 0}
.pro-terms h2{margin-top:0}
.pro-note{text-align:center;margin:40px auto 72px}
@media(max-width:760px){
  .pro-hero{padding:24px 12px;border-radius:20px}
  .pro-card{padding:28px 22px 24px}
  .pro-terms{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:44px}
}

/* headlines break into even lines, so no single word is left alone on the last line */
.display,.display-sm,h1,h2{text-wrap:balance}

/* logo: Emily's Clarity Care mark and wordmark, in the site blue (white on the dark footer) */
.brand-logo{display:block;height:32px;width:auto}
.footer-brand img{display:block;height:28px;width:auto}
@media(max-width:600px){.brand-logo{height:28px}}

/* ---------- laptop and desktop layout for reading pages ----------
   From 1100px the reading pages use the full page edge in two columns: the title and
   introduction on the left, staying in view while the text scrolls on the right. The
   text column stays near 70 characters a line, which is what keeps long text readable.
   app.js wraps the opening breadcrumb, title and introduction into .read-intro. */
@media(min-width:1100px){
  main.read-split{max-width:none;margin:0;padding:0 var(--edge);display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,700px);column-gap:clamp(56px,6vw,112px);align-items:start}
  .read-intro{position:sticky;top:96px;padding-bottom:32px}
  .read-intro .display-sm{max-width:14ch}
  .read-body{padding-top:52px;min-width:0}
  .read-body > h2:first-child{margin-top:0}
  /* the homepage FAQ: heading on the left, questions on the right */
  .section > .shell-narrow{max-width:none;margin:0;padding:0 var(--edge);display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,700px);column-gap:clamp(56px,6vw,112px);align-items:start}
  .section > .shell-narrow > h2{grid-column:1;grid-row:1 / span 20;margin-top:0}
  .section > .shell-narrow > :not(h2){grid-column:2}
  .section > .shell-narrow > div:first-of-type{margin-top:0 !important}
}

/* =====================================================================
   Redesign, October 28, 2026: homepage narrative, product demo, glass,
   and continuity between pages. Everything below uses the tokens above.
   ===================================================================== */

/* ---------- smooth page-to-page flow ----------
   Each page's content fades in on arrival while the header stays still, so moving between
   pages feels continuous. (Cross-document view transitions were tried first; browsers log an
   error whenever they skip one, so this simpler fade replaced them.) Off for reduced motion. */
main{animation:pageIn var(--dur-3) var(--ease) both}
@keyframes pageIn{from{opacity:0;translate:0 6px}}

/* ---------- glass utility, for anything that floats ---------- */
.glass{background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  :root{--glass-bg:rgba(255,255,255,.92);--glass-bg-strong:#fff}
}

/* ---------- section heads ---------- */
.sec-head{max-width:40ch;margin:0 0 44px}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.022em;margin:0 0 .35em}
.sec-head p{font-size:var(--fs-lead);color:var(--ink-2);margin:0}
.kicker{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--brand-ink);margin:0 0 14px}

/* how it works: example data is labelled where it appears */
.sc-tag{align-self:flex-start;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);
  padding:3px 9px;margin:0 0 10px}

/* ---------- live product demo ---------- */
.demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.demo-controls .field{margin-bottom:18px}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.55);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
.seg label{margin:0;position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:10px 6px;border-radius:var(--r-pill);font-size:.875rem;font-weight:500;
  color:var(--ink-2);transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.seg input:checked+span{background:var(--forest);color:#fff;box-shadow:0 2px 8px rgba(23,22,20,.18)}
.seg input:focus-visible+span{outline:2.5px solid var(--brand);outline-offset:2px}
.demo-card{border-radius:var(--r-xl);padding:clamp(24px,3.4vw,40px);position:relative;overflow:hidden}
.demo-card .tag-row{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px}
.demo-owe-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:0 0 6px}
.demo-owe{font-family:var(--display);font-weight:200;font-size:clamp(3.4rem,7vw,5.4rem);line-height:.95;letter-spacing:-.04em;
  color:var(--forest);margin:0 0 8px;font-variant-numeric:tabular-nums;transition:opacity var(--dur-1) var(--ease)}
.demo-range{color:var(--ink-2);margin:0 0 26px;font-size:.9375rem}
/* the allowed amount, split into what you pay and what your plan pays */
.split-bar{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;background:rgba(23,22,20,.06);margin:0 0 14px}
.split-bar i{display:block;height:100%;transition:width var(--dur-3) var(--ease)}
.split-bar .sb-ded{background:var(--brand)}
.split-bar .sb-coin{background:rgba(74,114,153,.45)}
.split-bar .sb-plan{background:rgba(23,22,20,.14)}
.split-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.split-legend div{min-width:0}
.split-legend dt{font-size:.8125rem;color:var(--ink-2);display:flex;align-items:center;gap:7px;margin:0 0 2px}
.split-legend dt i{width:9px;height:9px;border-radius:50%;flex:none}
.split-legend dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;font-size:1.0625rem}
.demo-source{font-size:.8125rem;color:var(--ink-3);line-height:1.55;margin:0 0 22px}
@media(max-width:900px){.demo{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.split-legend{grid-template-columns:1fr;gap:8px}
  .split-legend div{display:flex;justify-content:space-between}}

/* ---------- benefits, on the blue panel ---------- */
.benefits-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;
  padding-block:clamp(16px,3vw,40px)}
.benefits-in h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;margin:0 0 .4em;max-width:13ch}
.benefits-in .b-lead{font-size:var(--fs-lead);margin:0;max-width:36ch}
.benefit-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.benefit-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:20px 22px;
  border-radius:var(--r-lg);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.benefit-list .b-num{font-family:var(--display);font-weight:300;font-size:1.5rem;line-height:1.1;color:#fff}
.benefit-list h3{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:-.012em;margin:0 0 4px;color:#fff}
.benefit-list p{margin:0;color:#F3F6F9;font-size:1rem;line-height:1.55}
@media(max-width:900px){.benefits-in{grid-template-columns:minmax(0,1fr)}}

/* ---------- FAQ in a glass panel, and the closing action ---------- */
.faq-panel{border-radius:var(--r-xl);padding:8px 28px}
.faq-panel details.acc:last-child{border-bottom:0}
.cta-panel{border-radius:var(--r-xl);padding:clamp(40px,6vw,80px) 24px;text-align:center}
.cta-panel h2{font-size:clamp(2rem,3.6vw,3rem);margin:0 auto .3em;max-width:16ch}
.cta-panel p{color:var(--ink-2);font-size:var(--fs-lead);margin:0 auto 28px;max-width:40ch}
.final-cta{padding-top:24px}

/* ---------- estimator: each step settles in instead of snapping ---------- */
.panel-in{animation:panelIn var(--dur-3) var(--ease)}
@keyframes panelIn{from{opacity:0;translate:0 10px}}
#panel{background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r-xl);padding:clamp(22px,3vw,36px);
  box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);margin:0 0 20px}
#panel .choice{background:rgba(255,255,255,.7)}
/* the three numbers every estimate is made of */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 6px}
.trio div{background:rgba(255,255,255,.7);border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:14px 16px}
.trio dt{font-size:.8125rem;color:var(--ink-2);margin:0 0 4px}
.trio dd{margin:0;font-family:var(--display);font-weight:300;font-size:1.6rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.trio .you{background:var(--brand-tint);border-color:rgba(74,114,153,.25)}
@media(max-width:560px){.trio{grid-template-columns:1fr}}
.saved-note{animation:panelIn var(--dur-3) var(--ease)}

/* The header lives inside #site-header with the demo banner. Without this the wrapper is exactly
   the header's height, so position:sticky had no room and the header scrolled away. */
#site-header{display:contents}
.hero-panel .hero-sub{text-wrap:pretty}
.nav a.btn-primary,.nav a.btn-primary:hover{color:#FBF8F3}
/* the estimate amount is the largest thing on the result, as it is on the homepage demo */
#panel .eyebrow + h2{font-size:clamp(2.8rem,5vw,4.2rem);font-weight:200;letter-spacing:-.035em;line-height:1;margin:0 0 .25em}
/* tablets: each step reads as a row, image beside its text, rather than three very tall cards */
@media(min-width:600px) and (max-width:900px){
  .steps-grid{gap:24px}
  .step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
  .step h3{margin-top:0}
}

/* ---------- insurance card: preview of a future feature ----------
   A made-up sample card and the three future steps. Nothing is scanned; the estimate runs
   on the quick path. Card proportions follow a real wallet card (85.6 x 54 mm). */
.card-preview{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px 28px;align-items:center;
  background:rgba(255,255,255,.55);border:1px solid var(--glass-line);border-radius:var(--r-xl);padding:22px;margin:0 0 24px}
.cp-flag{grid-column:1 / -1;margin:0}
.ins-card{position:relative;aspect-ratio:85.6/54;border-radius:14px;padding:16px 18px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#5A80A6 0%,var(--brand) 55%,#3F6589 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 30px rgba(30,48,70,.22);font-size:.8125rem}
.ins-card::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 90% -10%,rgba(255,255,255,.28),transparent 55%)}
.ic-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px;position:relative;z-index:1}
.ic-brand{font-family:var(--display);font-size:1rem;letter-spacing:.01em}
.ic-type{font-size:.6875rem;font-weight:600;letter-spacing:.08em;border:1px solid rgba(255,255,255,.6);border-radius:var(--r-pill);padding:2px 8px}
.ic-name,.ic-id{margin:0;position:relative;z-index:1}
.ic-id{opacity:.85;margin-bottom:12px}
.ic-rows{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.6875rem;opacity:.9;position:relative;z-index:1}
.ic-mark{position:absolute;right:-28px;bottom:16px;rotate:-24deg;font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--brand-ink);padding:3px 34px;z-index:2}
.cp-steps{list-style:none;counter-reset:cp;margin:0;padding:0;display:grid;gap:10px}
.cp-steps li{counter-increment:cp;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:.9375rem;
  color:var(--ink-2);line-height:1.5}
.cp-steps li>span:first-child::before{content:counter(cp) '. ';font-weight:600;color:var(--ink)}
.cp-steps b{color:var(--ink);font-weight:500}
.cp-steps .tag{flex:none}
.card-preview .hint{grid-column:1 / -1}
@media(max-width:700px){.card-preview{grid-template-columns:minmax(0,1fr)}.ins-card{max-width:320px}}

/* Build an estimate: one question per screen with a progress bar (Oct 28, 2026) */
.survey-progress{margin:0 0 20px}
.sp-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 9px;
  font-size:.8125rem;letter-spacing:.04em;color:var(--ink-2)}
.sp-row b{font-weight:500;color:var(--forest)}
.sp-track{height:6px;border-radius:999px;background:rgba(74,114,153,.15);overflow:hidden}
.sp-track i{display:block;height:100%;width:0;border-radius:inherit;background:var(--brand);
  transition:width var(--dur-3) var(--ease)}
#panel legend{font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.2;margin:0 0 12px}
@media (prefers-reduced-motion:reduce){.sp-track i{transition:none}}
.cta-panel h2{max-width:18ch}
/* .choice span is display:block, which was stacking the rate tag's dot above its text */
.choice .tag{display:inline-flex;font-size:.75rem;line-height:1.4}
.choice .tag-dot{display:inline-block;margin:0}
/* homepage demo: the bar fills over the same 0.9s as the money counting up */
.demo-card .split-bar i{transition:width .9s var(--ease)}
.demo-owe,.split-legend dd{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.demo-card .split-bar i{transition:none}}

/* Profile: plan, saved places, saved estimates, all in this browser (Oct 28, 2026) */
.pf-sec{margin-top:56px}
.pf-head{margin:0 0 18px}
.pf-head h2{margin:0 0 6px}
.pf-head p{margin:0;max-width:62ch}
.pf-plan{padding:clamp(20px,3vw,32px)}
.pf-actions{margin-top:20px;align-items:center;gap:16px}
.pf-actions .fine{margin:0}
.pf-empty{padding:28px 20px}
.pf-clear{margin-top:48px}
.pf-note{margin:-2px 0 14px}
.places{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.places li{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(23,22,20,.08);border-radius:18px;padding:16px 20px}
.places b{display:block;font-weight:600;color:var(--ink)}
.places li>div>span{display:block;color:var(--ink-2);font-size:.875rem;margin-top:2px}

/* hero search bar: solid, so the photo's edge doesn't show through the glass as a seam,
   and the button sits in the middle of the pill instead of hugging the top */
.searchbar{background:#FFFFFF;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(23,22,20,.06)}
.searchbar .btn-go{align-self:center}
@media(max-width:760px){.searchbar .btn-go{align-self:stretch}}
/* equal breathing room around the hero button: 28px above, below and to the right */
@media(min-width:761px){.searchbar{padding-right:27px}}

/* homepage questions: heading, one line and the link on the left, the answers on the right */
.faq-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-intro h2{margin:0 0 12px}
.faq-intro p{color:var(--ink-2);margin:0 0 24px;max-width:30ch}
@media(max-width:860px){.faq-home{grid-template-columns:1fr;gap:24px}}

/* ---------- How it works, visual version (Oct 28, 2026) ---------- */
.hw{padding-bottom:40px}
.hw-hero{max-width:720px;margin:0 0 32px}
.hw-steps{list-style:none;padding:0;margin:0 0 80px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hw-steps li{position:relative;background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r-lg);
  padding:22px 24px;box-shadow:var(--glass-shadow)}
.hw-steps li+li::before{content:'';position:absolute;left:-13px;top:50%;width:8px;height:8px;
  border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);transform:translate(-2px,-50%) rotate(45deg)}
.hw-n{display:block;font-family:var(--display);font-weight:600;font-size:2rem;line-height:1;color:var(--brand);margin:0 0 14px}
.hw-steps b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--ink);margin:0 0 4px}
.hw-steps li>span:last-child{display:block;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.hw-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center;margin:0 0 96px}
.hw-sec.flip .hw-text{order:2}
.hw-text h2{margin:0 0 14px}
.hw-text p{color:var(--ink-2);max-width:46ch}
.hw-text p strong{color:var(--ink);font-weight:600}
.hw-fig{margin:0;padding:clamp(20px,3vw,32px)}
.hw-fig figcaption{font-size:.8125rem;color:var(--ink-3);margin-top:18px;line-height:1.5}
.hw-spread{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.hw-big{font-family:var(--display);font-weight:600;font-size:3rem;line-height:1;color:var(--brand);letter-spacing:-.02em}
.hw-spread p{margin:0;color:var(--ink-2);font-size:.9375rem}
.hw-bars{display:flex;align-items:flex-end;gap:4px;height:160px;border-bottom:2px solid var(--ink)}
.hw-bars i{flex:1;display:block;background:#DAD6CE;border-radius:3px 3px 0 0}
.hw-bars i.hl{background:var(--brand)}
.hw-bars-lab{display:flex;justify-content:space-between;margin-top:8px;font-size:.8125rem;font-weight:600;color:var(--ink)}
.hw-ask{display:grid;gap:14px}
.hw-ask .card{padding:22px 24px}
.hw-k{margin:0 0 12px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--brand-ink)}
.hw-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.hw-chips li{padding:8px 14px;border-radius:var(--r-pill);background:var(--brand-tint);color:var(--brand-ink);font-size:.9375rem}
.hw-chips.no li{background:rgba(23,22,20,.05);color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(23,22,20,.35)}
.hw-total{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 12px}
.hw-total span{color:var(--ink-2)}
.hw-total b{font-family:var(--display);font-weight:600;font-size:1.75rem;color:var(--ink)}
.hw-split{display:flex;gap:2px;height:18px;border-radius:var(--r-pill);overflow:hidden}
.hw-split i{display:block}
.hw-split .d,.hw-legend .d{background:var(--brand)}
.hw-split .c,.hw-legend .c{background:rgba(74,114,153,.5)}
.hw-split .p,.hw-legend .p{background:rgba(23,22,20,.16)}
.hw-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 18px;font-size:.875rem;color:var(--ink-2)}
.hw-legend span{display:inline-flex;align-items:center;gap:7px}
.hw-legend i{width:10px;height:10px;border-radius:50%;display:block}
.hw-order{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hw-order li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;
  border-radius:14px;background:rgba(255,255,255,.7)}
.hw-order li>b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-tint);
  color:var(--brand-ink);font-size:.875rem;font-weight:600}
.hw-order li>div{font-size:.9375rem;color:var(--ink-2);line-height:1.45}
.hw-order strong{color:var(--ink);font-weight:600}
.hw-order em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.hw-order li.you{background:var(--brand)}
.hw-order li.you>b{background:#fff;color:var(--brand)}
.hw-order li.you strong,.hw-order li.you em{color:#fff}
.hw-order li.you em{font-family:var(--display);font-size:1.375rem}
.hw-range .track{position:relative;height:14px;margin:40px 0 0;border-radius:var(--r-pill);background:rgba(23,22,20,.08)}
.hw-range .band{position:absolute;left:10%;right:10%;top:0;bottom:0;border-radius:inherit;background:rgba(74,114,153,.4)}
.hw-range .tick{position:absolute;left:37.4%;top:-9px;bottom:-9px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ink)}
.hw-range .labels{position:relative;height:58px;margin-top:14px}
.hw-range .labels span{position:absolute;translate:-50% 0;text-align:center;font-size:.8125rem;line-height:1.4;color:var(--ink-2);white-space:nowrap}
.hw-range .labels b{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink)}
.hw-range .labels .mid b{color:var(--brand)}
.hw-wont-head{margin:0 0 20px}
.hw-wont{list-style:none;padding:0;margin:0 0 96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.hw-wont li{background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--glass-shadow)}
.hw-wont .x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(23,22,20,.06);margin:0 0 12px}
.hw-wont .x svg{width:14px;height:14px;stroke:var(--ink-2);stroke-width:2.2;fill:none;stroke-linecap:round}
.hw-wont b{display:block;font-weight:600;color:var(--ink);margin:0 0 4px}
.hw-wont li>span:last-child{display:block;font-size:.875rem;line-height:1.5;color:var(--ink-2)}
.hw-confirm{padding:clamp(28px,4vw,48px);text-align:center}
.hw-confirm h2{margin:0}
.hw-flow{list-style:none;padding:0;margin:24px auto;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.hw-flow li{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:var(--r-pill);background:#fff;
  border:1px solid rgba(23,22,20,.08);font-weight:500;color:var(--ink)}
.hw-flow b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:.875rem}
.hw-confirm>p{color:var(--ink-2);max-width:52ch;margin:0 auto 22px}
.hw-confirm .row{justify-content:center;margin:0}
@media(max-width:860px){
  .hw-steps{grid-template-columns:1fr;margin-bottom:56px}
  .hw-steps li+li::before{display:none}
  .hw-sec{grid-template-columns:1fr;margin-bottom:64px}
  .hw-sec.flip .hw-text{order:0}
  .hw-wont{margin-bottom:64px}
}

/* estimate result: the same plan at other places, lowest first */
.cmp{margin-top:30px}
.cmp h3{margin:0 0 4px}
.cmp-note{margin:0 0 14px;color:var(--ink-2)}
.cmp-note strong{color:var(--brand-ink);font-weight:600}
.cmp-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.cmp-list li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 88px 76px;gap:14px;align-items:center;
  padding:10px 12px;border-radius:12px}
.cmp-list li.cur{background:var(--brand-tint)}
.cmp-name{font-size:.9375rem;color:var(--ink);min-width:0;line-height:1.35}
.cmp-you{display:inline-block;margin-left:8px;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--brand-ink)}
.cmp-bar{height:10px;border-radius:var(--r-pill);background:rgba(23,22,20,.06);overflow:hidden}
.cmp-bar i{display:block;height:100%;border-radius:inherit;background:rgba(23,22,20,.22)}
.cmp-list li.low .cmp-bar i{background:rgba(74,114,153,.55)}
.cmp-list li.cur .cmp-bar i{background:var(--brand)}
.cmp-amt{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.cmp-act{justify-self:end}
@media(max-width:640px){
  .cmp-list li{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name amt act" "bar bar bar";row-gap:8px}
  .cmp-name{grid-area:name}.cmp-amt{grid-area:amt}.cmp-act{grid-area:act}.cmp-bar{grid-area:bar}
}

/* phone menu: solid, because a blur nested inside the header's own blur can't see the page behind it,
   so the hero headline was showing straight through the links */
@media(max-width:900px){
  .nav{background:#FBFAF8;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(23,22,20,.08);
    box-shadow:0 2px 6px rgba(23,22,20,.06),0 20px 50px rgba(23,22,20,.18)}
  .nav a:not(.btn){color:var(--ink);font-size:1.0625rem}
  .nav a[aria-current="page"]:not(.btn){color:var(--brand-ink);font-weight:600}
}

/* How it works: exaggerated hierarchy. Title > step numerals > headings > key numbers > body > captions */
.hw-hero{margin:0 0 64px}
.hw .hw-hero h1{font-size:clamp(3.25rem,7.5vw,6.5rem);line-height:.96;letter-spacing:-.04em;font-weight:300;margin:0 0 20px}
.hw .hw-hero .lede{font-size:clamp(1.125rem,1.7vw,1.4375rem);line-height:1.5;color:var(--ink-2);max-width:38ch;margin:0}
.hw-steps{margin-bottom:128px}
.hw-steps b{font-size:1.4375rem}
.hw-steps li>span:last-child{font-size:.875rem;color:var(--ink-3)}
.hw-num{font-family:var(--display);font-weight:200;font-size:clamp(5rem,10vw,8.5rem);line-height:.8;letter-spacing:-.05em;
  color:var(--brand);margin:0 0 18px}
.hw-num-sym{font-weight:200}
.hw-text h2,.hw-wont-head,.hw-confirm h2{font-size:clamp(2.25rem,3.8vw,3.5rem);line-height:1.04;letter-spacing:-.028em;font-weight:300}
.hw-text h2{margin:0 0 20px}
.hw-text p{font-size:1rem;line-height:1.65;color:var(--ink-2);max-width:42ch}
.hw-sec{margin-bottom:144px}
.hw-fig figcaption{font-size:.75rem;color:var(--ink-3)}
.hw-big{font-size:clamp(3.75rem,6.5vw,5.5rem);letter-spacing:-.04em}
.hw-spread p{font-size:.875rem;max-width:16ch;line-height:1.35}
.hw-total b{font-size:clamp(2.25rem,3.4vw,2.75rem);letter-spacing:-.02em}
.hw-order li.you{padding:16px 16px}
.hw-order li.you em{font-size:clamp(1.75rem,2.6vw,2.25rem);letter-spacing:-.02em}
.hw-range .labels{height:80px}
.hw-range .labels .mid b{font-size:1.75rem}
.hw-wont-head{margin:0 0 32px}
.hw-wont{margin-bottom:144px}
.hw-wont b{font-size:1.0625rem}
.hw-confirm h2{margin:0}
@media(max-width:860px){.hw-sec,.hw-wont{margin-bottom:96px}.hw-steps{margin-bottom:88px}}
.hw-text .hw-num{font-family:var(--display);font-weight:200;font-size:clamp(5rem,10vw,8.5rem);line-height:.8;
  letter-spacing:-.05em;color:var(--brand);margin:0 0 18px;max-width:none}
/* the page title was over-scaled; keep it the largest thing on the page, but not by a mile */
.hw .hw-hero h1{font-size:clamp(2.75rem,5vw,4.25rem);line-height:1;letter-spacing:-.03em}

/* ---------- Compare costs, simplified (Oct 28, 2026) ---------- */
.cc{padding:24px 26px;margin:0 0 36px}
.cc-label{margin:0 0 10px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--brand-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.chip{border:1px solid rgba(23,22,20,.12);background:#fff;border-radius:var(--r-pill);padding:9px 16px;
  font:500 .9375rem var(--sans);color:var(--ink);cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.chip:hover{border-color:rgba(23,22,20,.3)}
.chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}
.cc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cc-row .field{margin:0}
.cc-row .field[hidden]{display:none}
.plan-sum{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0;
  padding:12px 12px 12px 16px;border-radius:14px;background:var(--brand-tint);color:var(--brand-ink);font-size:.9375rem}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:16px}
.plan-grid .field{margin:0}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--brand-ink);text-decoration:underline;cursor:pointer;margin-left:6px}
.rbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.rbar-sum{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.375rem,2.2vw,1.75rem);letter-spacing:-.01em;color:var(--ink)}
.rbar-sum strong{font-weight:600}
.rbar-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;color:var(--ink);cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--brand)}
.field-inline{display:flex;align-items:center;gap:8px;margin:0}
.field-inline label{margin:0;font-size:.875rem;color:var(--ink-2)}
.field-inline select{width:auto;padding-top:8px;padding-bottom:8px}
.rlist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.r{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:6px 32px;padding:20px 22px;border-radius:var(--r-lg);
  background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
.r-best{background:#fff;box-shadow:0 0 0 2px var(--brand),var(--glass-shadow)}
.r-main h3{margin:0 0 2px;font-size:1.125rem;font-weight:600}
.r-flag{margin:2px 0 4px;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--brand)}
.r-main .result-meta{margin:0}
.r-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.r-cost{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.r-label{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.r-cost b{font-family:var(--display);font-weight:600;font-size:2rem;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.r-best .r-cost b{color:var(--brand)}
.r-range{font-size:.8125rem;color:var(--ink-2)}
.r-bar{display:block;width:100%;height:8px;margin-top:10px;border-radius:var(--r-pill);background:rgba(23,22,20,.06);overflow:hidden}
.r-bar i{display:block;height:100%;border-radius:inherit;background:rgba(23,22,20,.22)}
.r-best .r-bar i{background:var(--brand)}
.r-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.r-src{grid-column:1 / -1}
.r-src summary{cursor:pointer;font-size:.8125rem;color:var(--ink-2);width:max-content}
.r-src p{margin:8px 0 0;max-width:70ch}
@media(max-width:900px){.cc-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .cc{padding:18px}
  .cc-row{grid-template-columns:1fr}
  .r{grid-template-columns:1fr}
  .r-cost{align-items:flex-start;text-align:left}
}

/* survey: Back and Continue stay pinned to the bottom of the screen, so a long question
   never hides the next step below the fold */
.wiz-nav{position:sticky;bottom:0;z-index:20;justify-content:space-between;margin-top:18px;
  padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,rgba(247,245,242,0),var(--ivory) 30%)}
.wiz-nav{background:linear-gradient(to bottom,rgba(247,245,242,0) 0,var(--ivory) 14px)}

/* verified check for published rates: on the tag, and beside a hospital's name */
.vcheck{width:14px;height:14px;flex:none;display:block}
.vcheck circle{fill:var(--brand)}
.vcheck path{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tag-verified{gap:5px}
.tag-verified .vcheck{width:13px;height:13px}
.vbadge{display:inline-flex;vertical-align:-2px;margin-left:6px}
.vbadge .vcheck{width:16px;height:16px}
.choice .vbadge{display:inline-flex;margin:0 0 0 6px}

/* survey: less scrolling. Long answer lists sit in two columns on wider screens, and the title is quieter */
@media(min-width:720px){
  .choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .choice-grid .choice{margin:0;height:100%}
}
main[data-one-column] h1.display-sm{font-size:clamp(1.5rem,2.4vw,1.875rem);margin:0 0 .25em}
main[data-one-column] > .lede{font-size:1rem;margin:0 0 20px}

/* How it works, toned down about a third: same order of sizes, less shouting */
.hw .hw-hero h1{font-size:clamp(2.5rem,4.2vw,3.5rem)}
.hw .hw-hero .lede{font-size:clamp(1.0625rem,1.4vw,1.25rem)}
.hw-hero{margin-bottom:48px}
.hw-steps{margin-bottom:96px}
.hw-steps b{font-size:1.25rem}
.hw-text .hw-num{font-size:clamp(3.5rem,6vw,5.5rem);margin-bottom:14px}
.hw-text h2,.hw-wont-head,.hw-confirm h2{font-size:clamp(1.75rem,2.6vw,2.375rem)}
.hw-sec,.hw-wont{margin-bottom:112px}
.hw-big{font-size:clamp(2.75rem,4.4vw,3.75rem)}
.hw-total b{font-size:clamp(1.75rem,2.4vw,2.125rem)}
.hw-order li.you em{font-size:clamp(1.375rem,1.9vw,1.625rem)}
.hw-range .labels .mid b{font-size:1.5rem}
@media(max-width:860px){.hw-sec,.hw-wont{margin-bottom:80px}.hw-steps{margin-bottom:72px}}
/* 7.2x chart: bold digits need normal spacing or they collide; caption sits beside the number in two lines */
.hw-big{letter-spacing:-.01em}
.hw-spread{align-items:center;gap:18px}
.hw-spread p{max-width:24ch;line-height:1.4}

/* ---------- sitewide polish (lead, Oct 28, 2026) ---------- */
/* text contrast: the lightest grey was 2.7:1 on ivory; this is 4.6:1, enough for captions and labels */
:root{--ink-3:#726E68}
/* headlines and intros never leave one word alone on a line */
h1,h2,h3,.lede{text-wrap:balance}
p{text-wrap:pretty}
/* tap targets: 44px minimum for the menu button, the logo and footer links on phones */
.nav-toggle{min-height:44px;min-width:44px}
.brand{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:760px){
  .footer-grid li{margin:0}
  .site-footer li a{display:inline-flex;align-items:center;min-height:44px}
}
/* corner radii come from four tokens only: 10, 18, 28 and pill */
@media(max-width:860px){.hero-panel{border-radius:var(--r-lg)}}
@media(max-width:760px){.searchbar{border-radius:var(--r-lg)}}
.step-num{border-radius:var(--r)}
.hw-order li,.plan-sum{border-radius:var(--r)}
/* tool pages appear at once instead of fading in */
.tool-page main{animation:none}

/* ---------- homepage polish (Oct 28, 2026), scoped to main.home-page ---------- */
/* one rhythm between sections: 112px on laptops, 72px on phones */
.home-page{--home-gap:112px}
.home-page .section{padding-block:calc(var(--home-gap) / 2)}
.home-page .hero{margin-bottom:calc(var(--home-gap) / 2)}
.home-page .final-cta{padding-bottom:var(--home-gap)}
@media(max-width:760px){.home-page{--home-gap:72px}}

/* hero: balanced subtitle; on phones only the procedure and the button (the survey asks the rest) */
.home-page .hero-panel .hero-sub{text-wrap:balance}
@media(max-width:760px){.home-page .searchbar .sb-opt{display:none}}

/* section intros: no single word left alone on the last line */
.home-page .sec-head h2,.home-page .sec-head p,.home-page .faq-intro h2,.home-page .faq-intro p,
.home-page .cta-panel p,.home-page .statement h2,.home-page .statement p{text-wrap:balance}

/* demo money: Outfit 600 with normal spacing, so the digits read as figures, not display type */
.home-page #dOwe{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1;
  font-size:clamp(2.875rem,4vw + 1rem,3.625rem)}
.home-page .split-legend dd{font-family:var(--display);font-weight:600;letter-spacing:-.01em;font-size:1.1875rem}

/* three steps: real screens from the product, one 4:3 frame on the alt band for all three */
.home-page .steps-grid{margin-top:12px}
.home-page .step-shot{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--ivory-deep)}
.home-page .step-shot{background-size:cover;background-position:center}
.home-page .step:nth-child(1) .step-shot{background-image:url('img/step-1.webp')}
.home-page .step:nth-child(2) .step-shot{background-image:url('img/step-2.webp')}
.home-page .step:nth-child(3) .step-shot{background-image:url('img/step-3.webp')}
.home-page .step-shot img{position:absolute;top:7%;left:50%;height:86%;width:auto;max-width:none;aspect-ratio:750/872;
  translate:-50% 0;object-fit:cover;object-position:top;border-radius:28px;background:#F2F1EE;
  box-shadow:0 0 0 1px rgba(23,22,20,.06),0 2px 6px rgba(30,48,70,.06),0 18px 40px rgba(30,48,70,.12)}
/* tablets: screen on the left across both rows, title and line stacked on the right */
@media(min-width:600px) and (max-width:900px){
  .home-page .step{row-gap:8px;align-content:center}
  .home-page .step-shot{grid-column:1;grid-row:1 / span 2}
  .home-page .step h3{grid-column:2;align-self:end}
  .home-page .step p{grid-column:2;align-self:start}
}

/* the statement: one calm line on the alt band, not another blue panel */
/* closing panel: same hero blue as the statement, white type */
.home-page .cta-panel.glass{background:#4A7299;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.home-page .cta-panel h2{color:#fff}
.home-page .cta-panel p{color:rgba(255,255,255,.88)}
.home-page .statement{background:#4A7299;border-radius:28px;padding:96px 48px;text-align:center}
.home-page .statement h2{font-family:var(--display);font-weight:300;font-size:clamp(1.875rem,3vw + .5rem,2.875rem);
  line-height:1.12;letter-spacing:-.02em;max-width:18ch;margin:0 auto .5em;color:#fff}
.home-page .statement p{font-size:var(--fs-lead);color:rgba(255,255,255,.88);line-height:1.6;max-width:46ch;margin:0 auto}
@media(max-width:760px){.home-page .statement{padding:64px 24px;border-radius:20px}}

/* How it works: "What we won't do" as a calm two-column list. No card backgrounds, no divider lines,
   just the small X, a short bold title and one line of text. One column on phones. */
main.hw .hw-sec.flip{cursor:auto}
main.hw .hw-wont{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 64px}
main.hw .hw-wont li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:start;
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
main.hw .hw-wont .x{grid-column:1;grid-row:1 / span 2;width:28px;height:28px;margin:0}
main.hw .hw-wont .x svg{width:13px;height:13px}
main.hw .hw-wont b{grid-column:2;margin:0;line-height:1.4;padding-top:2px}
main.hw .hw-wont li>span:last-child{grid-column:2;font-size:.9375rem;line-height:1.55}
@media(max-width:640px){main.hw .hw-wont{grid-template-columns:minmax(0,1fr);gap:24px}}

/* Insurance, explained: flashcards sized by their content instead of a tall fixed box. Every title sits
   on the same top line, and each front carries one small example line in brand ink. The flip is untouched. */
main.ie .cards{grid-auto-rows:1fr}
main.ie .flip-inner{min-height:0}
main.ie .flip-face{padding:26px 26px 24px}
main.ie .flip-front{justify-content:flex-start}
main.ie .flip-term{font-size:clamp(1.5rem,2.1vw,1.75rem);line-height:1.15;max-width:none;margin:0 0 10px}
main.ie .flip-hint{font-size:.9375rem;line-height:1.5;max-width:34ch}
main.ie .flip-ex{display:block;margin-top:auto;padding-top:18px;font-size:.8125rem;font-weight:600;line-height:1.4;
  color:var(--brand-ink)}
main.ie .flip-back .flip-label{margin-bottom:10px}
main.ie .flip-back p{font-size:.9375rem;line-height:1.45;margin:0 0 8px;max-width:none}
main.ie .flip-back p.flip-sub{font-size:.875rem;line-height:1.5}
main.ie .flip-eg{margin-top:10px;padding:10px 14px;font-size:.8125rem;line-height:1.45;max-width:none}
@media(max-width:600px){main.ie .cards{grid-auto-rows:auto}}

/* For providers: the hands photograph is its own wide band, so no card or text covers it.
   The label, heading, three points and buttons sit below it on ivory. */
main.pv .pv-hero{margin:8px 0 0}
main.pv .pv-photo{aspect-ratio:3/1;border-radius:var(--r-xl);background:#4A7299 url('img/hero.webp') 50% 50%/cover no-repeat}
main.pv .pv-head{margin:56px 0 0;max-width:760px}
main.pv .pv-head .kicker{margin:0 0 14px}
main.pv .pv-head h1{margin:0;max-width:22ch}
main.pv .pv-steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
main.pv .pv-num{display:block;font-family:var(--display);font-weight:300;font-size:2.25rem;line-height:1;letter-spacing:-.02em;
  color:var(--brand);margin:0 0 16px}
main.pv .pv-steps h2{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.25;letter-spacing:-.01em;
  margin:0 0 8px;color:var(--ink)}
main.pv .pv-steps p{margin:0;color:var(--ink-2);line-height:1.6;max-width:36ch}
main.pv .pv-actions{display:flex;flex-wrap:wrap;gap:12px;margin:44px 0 0}
main.pv .pro-terms{margin-top:96px}
@media(max-width:860px){main.pv .pv-steps{grid-template-columns:minmax(0,1fr);gap:28px}}
@media(max-width:760px){
  main.pv .pv-photo{aspect-ratio:3/2;border-radius:var(--r-lg);background-position:52% 50%}
  main.pv .pv-head,main.pv .pv-steps{margin-top:36px}
  main.pv .pv-actions{margin-top:32px}
  main.pv .pro-terms{margin-top:64px}
}

/* Estimate result + saved estimate (estimate.html main.est-survey, estimates.html main.est-saved), Oct 28 2026.
   The money figure is Outfit 600; that weight is loaded by a font link on these two pages. */
main.est-survey #panel .eyebrow + h2.owe-big{font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(2.75rem,2rem + 2.5vw,3.5rem);line-height:1;margin:0 0 .2em}
main.est-saved .figure .amount{font-weight:600;letter-spacing:-.01em;line-height:1;
  font-size:clamp(3rem,2.2rem + 2.6vw,4rem)}
/* "See the math": a quiet disclosure, not another heading */
details.cc-math{margin:22px 0 0;border-top:1px solid var(--line)}
details.cc-math>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;
  min-height:44px;padding:10px 0 8px;font:500 .9375rem/1.3 var(--sans);color:var(--brand-ink)}
details.cc-math>summary::-webkit-details-marker{display:none}
details.cc-math>summary::after{content:'';width:7px;height:7px;flex:none;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-2) var(--ease)}
details.cc-math[open]>summary::after{transform:translateY(2px) rotate(225deg)}
details.cc-math>summary:hover{color:var(--ink)}
details.cc-math::details-content{height:0;overflow:clip;
  transition:height var(--dur-2) var(--ease),content-visibility var(--dur-2) allow-discrete}
details.cc-math[open]::details-content{height:auto}
.cc-math .cc-math-h{font-size:1rem;margin:2px 0 0}
.cc-math .breakdown{margin:4px 0 0}
/* survey result: the doctor tip sits under the savings line */
main.est-survey .cmp-note{margin-bottom:4px}
main.est-survey .cmp-tip{margin:0 0 14px;font-size:.875rem;color:var(--ink-2)}
/* phones: the three boxes become compact rows so the result isn't three tall cards */
@media(max-width:560px){
  main.est-survey .trio,main.est-saved .trio{gap:8px}
  main.est-survey .trio div,main.est-saved .trio div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px}
  main.est-survey .trio dt,main.est-saved .trio dt{margin:0}
  main.est-survey .trio dd,main.est-saved .trio dd{font-size:1.375rem;white-space:nowrap}
}
/* saved estimate: title, then the number, nothing in between */
main.est-saved .est-head h1{margin-bottom:.1em}
main.est-saved .est-head .fine{margin:0}
main.est-saved .split{margin-top:24px}
main.est-saved .est-main>.sheet{padding-bottom:20px}
main.est-saved h2.est-label{font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
main.est-saved .figure{align-items:center;gap:16px 32px}
main.est-saved .est-range{margin:16px 0 0}
main.est-saved .est-source{margin:12px 0 0}
main.est-saved .cc-math{margin-top:26px}
main.est-saved .cc-math>.muted{font-size:.9375rem;max-width:62ch;margin:2px 0 8px}
main.est-saved .cc-math .hint{margin:10px 0 0}
main.est-saved .cc-math details.acc:first-of-type{margin-top:14px;border-top:1px solid var(--line)}
main.est-saved .cc-math details.acc:last-child{border-bottom:0}
/* Rename, Duplicate, Print, Delete: a quiet row at the end of the main column */
main.est-saved .est-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 0 -12px;padding:6px 0 0}
main.est-saved .est-actions .btn{color:var(--ink-2);font-weight:500}
main.est-saved .est-actions .btn:hover{color:var(--ink);background:rgba(255,255,255,.7)}
main.est-saved .est-actions .est-del{color:var(--danger);margin-left:auto}
main.est-saved .est-actions .est-del:hover{color:var(--danger);background:var(--danger-soft)}
/* What to do next: real checkboxes, ticks kept on the saved estimate */
main.est-saved .rail h3{margin:0 0 4px}
main.est-saved .est-todo{list-style:none;padding:0;margin:0 0 16px}
main.est-saved .est-todo li{margin:0}
main.est-saved .est-todo label{display:flex;gap:12px;align-items:flex-start;margin:0;padding:7px 0;cursor:pointer;
  font-size:1rem;font-weight:400;line-height:1.55;color:var(--ink-2)}
main.est-saved .est-todo input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--brand);cursor:pointer}
main.est-saved .est-todo input:focus{box-shadow:none}
main.est-saved .est-todo input:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}
main.est-saved .est-todo input:checked+span{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(23,22,20,.3)}
main.est-saved .rail .hint{margin:0}
@media(max-width:1000px){main.est-saved .est-actions{margin-bottom:28px}}
@media print{
  details.cc-math>summary::after{display:none}
  main.est-saved .est-todo input{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  main.est-saved .est-todo input:checked+span{color:var(--ink-2)}
}

/* ---------- Compare costs: compact result rows (find-care.html, Oct 28, 2026) ----------
   Phones stack name, figure, bar, actions. From 900px each row reads as one line:
   who | bar | figure | Estimate + More. Compare, Save and Details open beneath More. */
.fc{gap:10px}
.fc .r{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "cost" "bar" "act" "more" "src";
  gap:0;padding:14px 18px;align-items:center}
.fc .r-main{grid-area:main;min-width:0}
.fc .r-flag{margin:0 0 3px}
.fc .r-main h3{margin:0;font-size:1.0625rem;line-height:1.35}
.fc .r-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:5px 0 0}
.fc .r-meta{font-size:.875rem;color:var(--ink-2);margin-right:2px}
.fc .r-cost{grid-area:cost;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;text-align:left;margin-top:12px}
.fc .r-label{flex-basis:100%}
.fc .r-cost b{font-family:var(--display);font-weight:600;font-size:1.75rem;line-height:1.1;letter-spacing:-.01em}
.fc .r-bar{grid-area:bar;margin-top:8px;height:6px}
.fc .r-act{grid-area:act;display:flex;align-items:center;gap:8px;margin-top:12px}
.fc .r-est{flex:1 1 auto}
.fc .r-morebtn{flex:none;gap:6px;padding-left:14px;padding-right:12px;color:var(--ink)}
.fc .r-morebtn[aria-expanded="true"]{background:rgba(23,22,20,.06)}
.r-chev{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur-1) var(--ease)}
.fc .r-morebtn[aria-expanded="true"] .r-chev{transform:rotate(180deg)}
.fc .r-more{grid-area:more;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px;padding:4px;
  border-radius:var(--r);background:rgba(23,22,20,.04)}
.fc .r-more[hidden]{display:none}
.fc .r-more .btn{flex:1 1 auto;color:var(--ink)}
.fc .r-more .btn[aria-pressed="true"]{background:var(--brand-tint);color:var(--brand-ink)}
.fc .r-golink{flex-basis:100%;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:.875rem;color:var(--brand-ink)}
.fc .r-note{flex-basis:100%;padding:4px 12px 6px;font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.fc .r-note:empty{display:none}
.fc .r-src{grid-area:src;margin-top:2px}
.fc .r-src summary{padding:12px 0;line-height:1.5}
.fc .r-src p{margin:0 0 6px}
/* phones: every control in the panel and the filters is at least 44px tall */
@media(max-width:899px){
  .cc .chip{min-height:44px}
  .rbar-tools .toggle{min-height:44px}
}
@media(min-width:600px) and (max-width:899px){
  .fc .r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main cost" "bar bar" "act act" "more more" "src src";column-gap:20px}
  .fc .r-cost{flex-direction:column;flex-wrap:nowrap;align-items:flex-end;text-align:right;margin-top:0;gap:0}
  .fc .r-label{flex-basis:auto}
  .fc .r-est,.fc .r-more .btn{flex:none}
}
@media(min-width:900px){
  .fc .r{grid-template-columns:minmax(0,1.7fr) minmax(56px,1fr) minmax(104px,auto) auto;
    grid-template-areas:"main bar cost act" "src src more more";column-gap:24px}
  .fc .r-bar{margin-top:0}
  .fc .r-cost{flex-direction:column;flex-wrap:nowrap;align-items:flex-end;text-align:right;margin-top:0;gap:0}
  .fc .r-label{flex-basis:auto}
  .fc .r-act{margin-top:0}
  .fc .r-est,.fc .r-more .btn{flex:none}
  .fc .r-more{justify-self:end;align-self:start;justify-content:flex-end}
  .fc .r-golink,.fc .r-note{flex-basis:auto}
  .fc .r-src{align-self:start;margin-top:6px}
  .fc .r-src summary{padding:4px 0}
}
/* homepage: the same gap before the footer as between sections (the footer's own 80px margin is dropped here only),
   and the centred steps intro gets room for its one line */
.home-page ~ #site-footer .site-footer{margin-top:0}
.home-page .sec-head.center{max-width:56ch}
/* Compare costs rows: an open More panel must not widen the figure and action columns, so every row stays aligned */
@media(min-width:900px){.fc .r-more{justify-self:stretch;contain:inline-size}}

/* Build an estimate, review step: long values (hospital name, source date) wrap instead of
   widening the fieldset past a phone screen */
main.est-survey #panel fieldset{min-width:0}
main.est-survey .rv-list .bd-label{flex:none;max-width:42%}
main.est-survey .rv-list .bd-amt{white-space:normal;text-align:right;min-width:0}

/* How it works: the second column of "What we won't do" lines up with the text column of the steps above */
main.hw .hw-wont{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(28px,5vw,72px)}
@media(max-width:640px){main.hw .hw-wont{grid-template-columns:minmax(0,1fr)}}

/* Insurance, explained: the front reads as title, hint, then the example anchored at the foot of the card */
main.ie .flip-front{padding-top:30px}
main.ie .flip-term{font-size:clamp(1.5rem,2.3vw,2rem)}
main.ie .flip-hint{font-size:1rem}
main.ie .flip-ex{margin-top:auto;padding:7px 14px;border-radius:12px;background:var(--brand-tint);text-wrap:balance}
main.ie .flip-hint+.flip-ex{margin-top:auto}
main.ie .flip-front .flip-hint{margin-bottom:18px}
/* Compare costs rows: the More tray sits under the bar, figure and actions; an open source note takes the full width */
@media(min-width:900px){
  .fc .r{grid-template-areas:"main bar cost act" "src more more more"}
  .fc .r-more{contain:none;justify-self:end}
  .fc .r-src[open]{grid-column:1 / -1;grid-row:3}
}
/* Compare costs rows on phones: the range sits on the same line as the figure */
@media(max-width:599px){.fc .r-cost{flex-direction:row}}
/* Compare costs rows on phones and tablets: the source toggle is a full 44px tap target */
@media(max-width:899px){.fc .r-src summary{min-height:44px}}

/* Insurance, explained: three across only when cards are wide enough to keep each title on one line,
   two across on tablets, one on phones (where each card takes its own height) */
@media(max-width:1099px){main.ie .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:719px){main.ie .cards{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}

/* ---------- Compare side by side (compare.html, Oct 28, 2026) ----------
   Same row language as Compare costs: glass rows, the name with its check, tags, and Outfit figures. */
.cmp-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;margin:0 0 18px}
.cmp-who .r-flag{margin:0 0 3px}
.cmp-name{font-weight:600;font-size:1.0625rem;color:var(--ink);text-decoration-color:rgba(23,22,20,.25);text-underline-offset:3px}
.cmp-name:hover{text-decoration-color:currentColor}
.cmp-who .r-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:5px 0 0}
.cmp-who .r-meta{font-size:.875rem;color:var(--ink-2);margin-right:2px}
.cmp-owe b{display:block;font-family:var(--display);font-weight:600;font-size:1.75rem;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.cmp-table tr.is-best .cmp-owe b{color:var(--brand)}
.cmp-range{display:block;margin-top:2px;font-size:.8125rem;color:var(--ink-2)}
.cmp-fig{font-family:var(--display);font-weight:600;font-size:1.125rem;letter-spacing:-.01em;color:var(--ink)}
.cmp-none{font-size:.875rem;color:var(--ink-2)}
.cmp-act{white-space:nowrap}
.cmp-src summary{padding:12px 0}
.cmp-src ul{list-style:none;padding:0;margin:2px 0 0;display:grid;gap:8px;max-width:78ch}
.cmp-src li{margin:0}
.cmp-src strong{color:var(--ink);font-weight:600}
@media(min-width:821px){
  .cmp-table{border-collapse:separate;border-spacing:0 10px;margin-top:-4px}
  .cmp-table th{color:var(--ink-3);border-bottom:0;padding:0 16px 0 0}
  .cmp-table th:first-child{padding-left:19px}
  .cmp-table td{background:var(--glass-bg);border-top:1px solid var(--glass-line);border-bottom:1px solid var(--glass-line);
    padding:14px 16px 14px 0;vertical-align:middle}
  .cmp-table td:first-child{padding-left:18px;border-left:1px solid var(--glass-line);border-radius:var(--r-lg) 0 0 var(--r-lg)}
  .cmp-table td:last-child{padding-right:18px;border-right:1px solid var(--glass-line);border-radius:0 var(--r-lg) var(--r-lg) 0}
  .cmp-table tr.is-best td{background:#fff;border-top:2px solid var(--brand);border-bottom:2px solid var(--brand)}
  .cmp-table tr.is-best td:first-child{border-left:2px solid var(--brand)}
  .cmp-table tr.is-best td:last-child{border-right:2px solid var(--brand)}
  .cmp-act{text-align:right}
  .cmp-act .btn + .btn{margin-left:4px}
}
@media(max-width:820px){
  .cmp-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;padding:16px 18px}
  .cmp-table td{padding:0}
  .cmp-table td.cmp-who,.cmp-table td.cmp-owe,.cmp-table td.cmp-act{grid-column:1 / -1}
  .cmp-table td.cmp-who::before,.cmp-table td.cmp-act::before{display:none}
  .cmp-act{display:flex;gap:8px}
  .cmp-act .btn-secondary{flex:1 1 auto}
  .cmp-table tr.is-best{background:#fff;box-shadow:0 0 0 2px var(--brand),var(--glass-shadow)}
  .cmp-table tr.is-best td{background:none}
  .cmp-src summary{min-height:44px}
}
/* the empty state: what to do, in three short steps */
.cmp-empty{padding:48px 24px}
.cmp-empty .muted{max-width:52ch;margin:0 auto 22px}
.cmp-steps{list-style:none;padding:0;margin:0 auto 26px;max-width:460px;text-align:left;display:grid;gap:12px;counter-reset:cmpstep}
.cmp-steps li{position:relative;padding-left:40px;font-size:.9375rem;line-height:1.5;color:var(--ink);counter-increment:cmpstep}
.cmp-steps li::before{content:counter(cmpstep);position:absolute;left:0;top:-2px;width:26px;height:26px;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-ink);font:600 .8125rem/26px var(--display);text-align:center}

/* Insurance, explained: a tighter back face, since the longest back sets every card's height */
main.ie .flip-back{padding:22px 24px}
main.ie .flip-back .flip-label{margin-bottom:8px}
main.ie .flip-back p{line-height:1.4;margin:0 0 6px}
main.ie .flip-back p.flip-sub{line-height:1.45}
main.ie .flip-eg{margin-top:8px;padding:8px 12px;line-height:1.4}
/* Compare side by side: three classes renamed to sbs- because estimate.html's widget already uses
   .cmp-name, .cmp-act and .cmp-bar. The :where() lines undo the leak on estimate.html without adding
   specificity, so any later estimate rule still wins. */
:where(.cmp-list) .cmp-name{font-weight:400;font-size:.9375rem}
:where(.cmp-list) .cmp-bar{display:block;margin:0}
.sbs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;margin:0 0 18px}
.sbs-name{font-weight:600;font-size:1.0625rem;color:var(--ink);text-decoration-color:rgba(23,22,20,.25);text-underline-offset:3px}
.sbs-name:hover{text-decoration-color:currentColor}
.sbs-act{white-space:nowrap}
@media(min-width:821px){.sbs-act{text-align:right}.sbs-act .btn + .btn{margin-left:4px}}
@media(max-width:820px){
  .cmp-table td.sbs-act{grid-column:1 / -1;display:flex;gap:8px}
  .cmp-table td.sbs-act::before{display:none}
  .sbs-act .btn-secondary{flex:1 1 auto}
}