/* v2 UX/UI layer — hierarchy, hero dashboard, story cards, agent band. Loads after styles.css. */

/* Hierarchy: calmer rhythm, tighter headline, clearer section heads */
.hero{padding:var(--space-8) 0 var(--space-9)}
.hero h1{font-size:clamp(2.5rem,1.7rem + 3vw,4.25rem);letter-spacing:-.035em;line-height:1.02;max-width:14ch}
.hero .lede{color:var(--ink-2);max-width:34ch}
.hero .note{display:flex;align-items:center;gap:.5em}
.hero .note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--highlight);box-shadow:0 0 0 3px color-mix(in srgb,var(--highlight) 30%,transparent)}
.section-head h2{max-width:20ch;text-wrap:balance}
.section-head p{max-width:52ch}
h2{letter-spacing:-.03em}
section{padding:var(--space-10) 0}
#products,#agents,#about,#questions{padding-top:0}

@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:var(--space-7)}
  .showcase{max-width:none;margin:0}
  .hero .dash-body{grid-template-columns:132px 1fr}
}

/* Hero dashboard */
.dash-title{font-size:.8rem;margin-left:.5rem;font-weight:600}
.dash-bar{background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))}
.dash-side span{padding:.35rem .6rem;margin:0 -.6rem;border-radius:8px}
.dash-side span.is-active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.dash-side b{margin-bottom:var(--space-2)}
.dash-body{min-height:0}
.hero .dash-main{grid-template-columns:1.3fr 1fr 1fr;gap:var(--space-3);padding:var(--space-4)}
.tile{background:var(--bg)}
.tile strong{display:block;margin-top:.15rem;font-size:clamp(1.25rem,1rem + .8vw,1.6rem);letter-spacing:-.02em}
.tile-hero{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.tile-hero small{color:#C3CBDD}
.tile-hero .split{display:flex;gap:8px;margin:.5rem 0 .35rem}
.tile-hero .split i{flex:1;height:4px;border-radius:99px;background:color-mix(in srgb,#fff 28%,transparent)}
.tile-hero .split i:first-child{background:var(--highlight)}
[data-theme="dark"] .tile-hero{background:var(--surface-2);border-color:var(--line)}
.hero .tile.wide{grid-column:1/-1;background:var(--surface)}
.tile-head{display:flex;justify-content:space-between;margin-bottom:var(--space-2)}
.tile-head .total{color:var(--ink);font-weight:700}
.bar-row{display:grid;grid-template-columns:1fr auto;row-gap:.35rem;padding:.45rem 0}
.bar-row .amt{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.bar-row .bar{grid-column:1/-1;height:4px;border-radius:99px;background:linear-gradient(var(--accent),var(--accent)) 0 0/var(--w) 100% no-repeat,var(--surface-2)}
.float-card{position:static;width:min(280px,100%);margin-top:var(--space-4)}
.float-card .pill{background:var(--highlight);color:var(--highlight-ink)}

/* Story cards: numbered rail, quieter mocks, clear "what they see" caption */
.story{position:relative;gap:var(--space-9)}
.story-item{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-8)}
.story-copy{max-width:30rem}
.story-num{display:inline-flex;align-items:center;gap:.6rem;font:600 .8rem/1 var(--font-mono);color:var(--accent);letter-spacing:.08em}
.story-num::after{content:"";width:2.5rem;height:1px;background:var(--line)}
.story-copy h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.25rem);letter-spacing:-.03em;text-wrap:balance}
.story-copy p{font-size:var(--step-1);line-height:1.5;max-width:34ch}
.mock-wrap{margin:0;position:relative}
.mock-wrap::before{content:"";position:absolute;inset:12% -4% -6% 8%;z-index:-1;border-radius:28px;background:radial-gradient(60% 60% at 50% 50%,var(--accent-soft),transparent 70%);opacity:.9}
.story-item:nth-child(even) .mock-wrap::before{inset:12% 8% -6% -4%}
.mock{border-radius:var(--radius-lg);padding:var(--space-6)}
.mock-head b{font-family:var(--font-display);font-size:var(--step-1);letter-spacing:-.01em}
.mock .row:last-child b{font-size:var(--step-1)}
.mock .row span:last-child{font-variant-numeric:tabular-nums}
.mock .progress span.on:nth-child(3){background:linear-gradient(90deg,var(--accent),var(--highlight))}
@media (max-width:860px){.story{gap:var(--space-8)}.story-item{gap:var(--space-5)}.mock{padding:var(--space-5)}}

/* Products: status first */
.plan .price{display:inline-flex;align-self:start;font:600 .75rem/1 var(--font-sans)!important;letter-spacing:.06em;text-transform:uppercase;padding:.45em .75em;border-radius:99px;background:var(--surface-2);color:var(--ink-2)}
.plan.featured .price{background:var(--highlight);color:var(--highlight-ink)}
.plan.featured{box-shadow:var(--shadow)}

/* Agent band */
.agent{position:relative;overflow:hidden;padding:var(--space-9) var(--space-8);background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--royal-600) 55%,transparent),transparent 60%),var(--navy-900)}
[data-theme="dark"] .agent{background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--royal-600) 35%,transparent),transparent 60%),var(--surface)}
.agent-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-8)}
.agent h2{max-width:14ch}
.agent .eyebrow{color:#AEB9D3}
.checks{list-style:none;padding:0!important;margin:var(--space-6) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-5)}
.checks li{position:relative;padding-left:1.75rem;color:#DCE2EE;font-size:var(--step--1);line-height:1.45}
.checks li::before{content:"";position:absolute;left:0;top:.1em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--highlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%230A1A3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.flow{list-style:none;margin:0 0 var(--space-4);padding:0;display:flex;gap:var(--space-2);flex-wrap:wrap}
.flow li{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:#fff;padding:.4rem .8rem .4rem .4rem;border:1px solid rgb(255 255 255/.16);border-radius:99px;background:rgb(255 255 255/.06)}
.flow li span{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:rgb(255 255 255/.14);font:600 .7rem/1 var(--font-mono)}
.flow li:last-child span{background:var(--highlight);color:var(--highlight-ink)}
.agent .dash{box-shadow:0 30px 80px -30px rgb(0 0 0/.6)}
.agent .dash-main{grid-template-columns:repeat(3,1fr);gap:var(--space-3);padding:var(--space-4)}
@media (max-width:1023px){.checks{grid-template-columns:1fr}}
@media (max-width:860px){.agent{padding:var(--space-7) var(--space-5)}.agent .dash-main{grid-template-columns:1fr 1fr}.hero .dash-main{grid-template-columns:1fr 1fr}.tile-hero{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media (min-width:1024px){.float-card{position:static;width:min(280px,100%)}}
.dash-main>*,.dash-body>*,.story-item>*,.agent-grid>*,.hero-grid>*{min-width:0}
@media (max-width:860px){.hero .dash-main,.agent .dash-main{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-bar .dash-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mock{padding:var(--space-4)}.mock .row{gap:var(--space-2)}}
.mock-head,.dash-bar{min-width:0}.mock-head>b{min-width:0}.placeholder-tag{flex-shrink:0}
@media (max-width:480px){.mock-head{flex-wrap:wrap}.dash-bar i{display:none}}
.float-card .mock-head b{font-size:.95rem;line-height:1.25}
@media (min-width:1024px){.float-card{position:static;width:min(280px,100%)}}
.agent .tile{padding:var(--space-3)}
.agent .tile strong{font-size:clamp(1.05rem,.8rem + .6vw,1.3rem)}
.agent .tile small{line-height:1.3}
.agent .row .pill{align-self:center}
.agent .dash{--surface-2:#EEF1F6;--accent-soft:#E3E9FB;--accent:#1E40AF;--ink-2:#36435E}

/* ===== v2 motion layer ===== */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{transition-duration:var(--dur-reveal);transition-timing-function:var(--ease-expo)}
  /* masked headline */
  .motion .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.32em;margin-bottom:-.06em}
  .motion .hero h1 .w>span{display:inline-block;transform:translateY(105%);transition:transform 650ms var(--ease-mask);transition-delay:calc(var(--wi) * 30ms)}
  .motion .hero h1.is-in .w>span{transform:none}
  /* bill rows assemble */
  .motion .hero .dash .bar-row,.motion .hero .dash .tile{transition:opacity 500ms var(--ease-expo),transform 500ms var(--ease-expo);transition-delay:100ms}
  .motion .hero .dash.pre .tile,.motion .hero .dash.pre .bar-row{opacity:0;transform:translateY(10px)}
  .motion .hero .dash .tile:nth-child(2){transition-delay:150ms}.motion .hero .dash .tile:nth-child(3){transition-delay:200ms}.motion .hero .dash .tile.wide{transition-delay:250ms}
  .motion .hero .dash .bar-row:nth-child(1){transition-delay:300ms}.motion .hero .dash .bar-row:nth-child(2){transition-delay:360ms}.motion .hero .dash .bar-row:nth-child(3){transition-delay:420ms}.motion .hero .dash .bar-row:nth-child(4){transition-delay:480ms}.motion .hero .dash .bar-row:nth-child(5){transition-delay:540ms}.motion .hero .dash .bar-row:nth-child(6){transition-delay:600ms}
  .motion .hero .dash .float-card{transition:opacity 500ms var(--ease-expo),transform 500ms var(--ease-expo);transition-delay:680ms}
  .motion .hero .dash.pre .float-card{opacity:0;transform:translateY(10px)}
  .motion .hero .dash .bar::after{transition:transform 600ms var(--ease-expo);transition-delay:inherit}
  .motion .hero .dash.pre .bar::after{transform:scaleX(0)}
  /* repair pill swap */
  .pill.swap{animation:pill-in 420ms var(--ease-expo)}
  @keyframes pill-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
  .progress span{position:relative;overflow:hidden}
  .progress span::after{content:"";position:absolute;inset:0;background:inherit;border-radius:inherit}
  #repair-progress span{transition:background-color 500ms var(--ease-expo)}
  /* CTA hover: quick colour, soft ring, sheen sweep */
  .btn{transition:background-color var(--dur-hover) var(--ease-hover),box-shadow 260ms var(--ease-hover),color var(--dur-hover)}
  .btn-primary{position:relative;overflow:hidden;isolation:isolate}
  .btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgb(255 255 255/.18) 50%,transparent 70%);transform:translateX(-120%);transition:transform 700ms var(--ease-mask)}
  .btn-primary:hover::after{transform:translateX(120%)}
  .btn-ghost:hover{transform:none}
  /* story mocks: slight lift on hover */
  .mock{transition:transform 500ms var(--ease-expo),box-shadow 500ms var(--ease-expo)}
  
}
/* bar fill as transformable pseudo element (also static fallback) */
.bar-row .bar{position:relative;background:var(--surface-2)!important;overflow:hidden}
.bar-row .bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--accent);border-radius:inherit;transform-origin:left}
/* sheen */
.hero .dash{position:relative;isolation:isolate}
.hero .dash::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),color-mix(in srgb,var(--royal-500) 9%,transparent),transparent 60%);opacity:0;transition:opacity 400ms var(--ease-hover)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.hero .dash:hover::after{opacity:1}}
.float-card .pill:not(.lime){background:var(--accent-soft);color:var(--accent)}

/* ===== Affordance pass ===== */
/* FAQ accordion: visible chevron, full-row target, hover/focus, smooth open */
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
details summary{list-style:none;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-2);margin:0 calc(-1 * var(--space-2));min-height:56px;border-radius:var(--radius-sm);transition:background-color var(--dur-hover) var(--ease-hover),color var(--dur-hover)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231E40AF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform 300ms var(--ease-expo),background-color var(--dur-hover)}
[data-theme="dark"] details summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%237C9BFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
details[open] summary::after{transform:rotate(180deg);border-color:var(--accent)}
details summary:hover{background:var(--surface-2)}
details summary:hover::after{border-color:var(--accent)}
details summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
details p{padding:0 var(--space-2) var(--space-5) 0;max-width:52ch}
@media (prefers-reduced-motion:no-preference){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size 380ms var(--ease-expo),opacity 300ms var(--ease-expo),content-visibility 380ms allow-discrete}
  details[open]::details-content{block-size:auto;opacity:1}
}
@media (prefers-reduced-motion:reduce){details summary::after{transition:none}}

/* Links: inline links are always underlined; nav shows hover + current underline */
p a,.note a,.source a,footer a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-thickness var(--dur-hover)}
p a:hover,footer a:hover{text-decoration-thickness:2px}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:.4rem;right:.4rem;bottom:10px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease-expo)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
/* Buttons */
.theme-toggle{width:44px;height:44px;transition:border-color var(--dur-hover),background-color var(--dur-hover)}
.theme-toggle:hover{border-color:var(--accent);background:var(--surface-2)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-primary:active,.btn-ghost:active{opacity:.9}
.logo{min-height:44px}
.logo:focus-visible,.btn:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.agent .btn:focus-visible,.agent a:focus-visible{outline-color:#fff}
@media (max-width:480px){.hero .actions .btn{flex:1 1 100%}.header-actions .btn-sm{padding:0 var(--space-3)}}
/* Pricing page */
.pricing-hero{padding-bottom:var(--space-9)}
.pricing-hero h1{font-size:var(--step-4);letter-spacing:-.035em}
.pricing-hero .plan{gap:var(--space-4)}
.price-amt{font:700 var(--step-3)/1 var(--font-display);color:var(--ink);display:flex;align-items:center;gap:var(--space-3)}
.plan .btn{margin-top:var(--space-3);justify-self:start}
.plan ul{display:grid;gap:var(--space-2)}
/* QA fix: nav was display:none on mobile, so sections and Pricing were unreachable. Second row instead. */
@media (max-width:860px){
  .site-header .container{flex-wrap:wrap;height:auto;padding-top:var(--space-2);padding-bottom:0;row-gap:0}
  .header-actions{margin-left:auto}
  .nav{display:flex;order:3;width:100%;margin:0;justify-content:space-between;gap:0;border-top:1px solid var(--line)}
  .nav a{padding:0 .25rem;font-size:.8rem}
  .nav a::after{bottom:8px}
  section[id]{scroll-margin-top:120px}
}
/* Problem section */
.problems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7);border-top:1px solid var(--line);padding-top:var(--space-6)}
.problems h3{font:700 var(--step-1)/1.25 var(--font-display);letter-spacing:-.02em;margin:var(--space-3) 0 var(--space-3)}
#problem{padding-bottom:0}
.problems.steps{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.problems.steps{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.problems{grid-template-columns:1fr;gap:var(--space-6)}.problems.steps{grid-template-columns:1fr}}
/* Four items in a three-column grid left the last one alone. Two by two keeps every step with a partner. */
@media (min-width:861px){.problems.quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Plain-English explanation under each bill row */
.mock .row .plain{display:block;color:var(--ink-3);font-size:.78rem;margin-top:.1rem}
.mock .row{align-items:center}
/* Pricing (single page) */
.pricing-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:center;border-top:1px solid var(--line);padding-top:var(--space-8)}
.price-facts{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-3) var(--space-6)}
.price-facts>div{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.price-facts>div:last-child{border:0}
.price-facts dt{font-weight:600;color:var(--ink)} .price-facts dd{margin:0;color:var(--ink-2);text-align:right}
.price-facts>div:nth-child(2) dd{font-weight:700;color:var(--ink)}
@media (max-width:860px){.pricing-band{grid-template-columns:1fr;gap:var(--space-6)}.price-facts{padding:var(--space-2) var(--space-4)}}
.checks li b{color:#fff;font-weight:600}
/* Fix: v2 story-item column override was leaking into mobile (two cramped columns at 390px) */
@media (max-width:860px){.story-item{grid-template-columns:1fr}.story-item:nth-child(even) .story-copy{order:0}.agent-grid{grid-template-columns:1fr}}
.pricing-band h2+p{margin-top:var(--space-4)}

/* ===== Typography: Geist + Geist Mono (decision 23 Oct 2026) ===== */
body{font-family:var(--font-sans);font-feature-settings:"ss01" on}
h1,h2,h3,.story-copy h3,.problems h3,.mock-head b,.plan h3,.logo{font-family:var(--font-display)}
.hero h1{font-weight:600;letter-spacing:-.045em;line-height:1}
h2{font-weight:600;letter-spacing:-.035em;line-height:1.05}
.story-copy h3,.problems h3{font-weight:600;letter-spacing:-.03em}
h3{font-weight:600;letter-spacing:-.02em}
.logo{font-weight:700;letter-spacing:-.05em}
.lede{letter-spacing:-.01em}
/* Figures in Geist Mono with tabular numbers */
.tile strong,.bar-row .amt,.tile-head .total,.mock .row span:last-child,.mock .row b:last-child,.story-num,.price-facts dd,.plan h3+.price,#why-now .plan h3,.placeholder-tag,.flow li span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile strong{font-weight:500}
.tile-hero strong{font-weight:500}
.mock .row span:last-child,.bar-row .amt{font-weight:500}
.price-facts dd{font-family:var(--font-sans);letter-spacing:0}
.pill{font-family:var(--font-sans);font-size:.75rem;font-weight:500;line-height:1.35;letter-spacing:.005em;font-variant-numeric:tabular-nums}
#difference .plan .pill{display:block;width:fit-content;margin-bottom:.55rem}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em}

/* ===== Graceful scrolling (23 Oct 2026) ===== */
html{scroll-behavior:auto}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
:root{--header-h:64px}
/* static fallbacks (no JS); JS measures the live header height. WebKit miscomputes calc(var()) here, so no var. */
section[id],main{scroll-margin-top:80px}
@media (max-width:860px){section[id],main{scroll-margin-top:114px}}
section[tabindex="-1"]:focus,main:focus{outline:none}
a.logo{text-decoration:none;color:inherit}
.nav a[aria-current="true"]{color:var(--ink)}
.nav a[aria-current="true"]::after{transform:scaleX(1);opacity:.6}

/* ===== UI audit v3 (23 Oct 2026): rhythm, money fit, polish ===== */
:root{
  --section-y:clamp(4.5rem,3rem + 6vw,9rem);      /* vertical padding of every section */
  --section-y-tight:clamp(2.5rem,1.5rem + 3vw,4.5rem); /* follow-on sections that continue a story */
  --head-gap:var(--space-4);                      /* heading -> body */
  --head-block:clamp(2rem,1.5rem + 2vw,3rem);     /* section head -> content */
  --card-pad:clamp(1.25rem,1rem + 1vw,2rem);      /* cards, plans, mocks */
  --tile-pad:clamp(.75rem,.6rem + .4vw,1rem);     /* dashboard tiles */
  --grid-gap:clamp(1rem,.75rem + 1vw,1.5rem);
  --measure:62ch;
  --radius-card:var(--radius-lg);--radius-tile:var(--radius);
}
section{padding-block:var(--section-y)}
section[style*="padding-top:0"]{padding-top:var(--section-y-tight)!important}
.hero{padding-block:clamp(3rem,2rem + 4vw,6rem) clamp(5rem,10vh,8rem)}
.section-head{margin-bottom:var(--head-block)}
.section-head p,.section-head .lede{margin-top:var(--head-gap)}
h1,h2,h3{text-wrap:balance}
p,li,dd,summary{text-wrap:pretty}
p{max-width:var(--measure)}
.mock,.plan,.price-facts,.bill{padding:var(--card-pad)}
.mock,.plan,.price-facts{border-radius:var(--radius-card);border:1px solid var(--line)}
.dash-main{gap:var(--space-3)!important}

/* --- Money fit: tiles are size containers, figures scale with the tile, never overflow --- */
.tile{container-type:inline-size;padding:var(--tile-pad);border-radius:var(--radius-tile);min-width:0;display:flex;flex-direction:column;gap:.2rem}
.tile small{line-height:1.3;text-wrap:balance}
.tile strong{
  font-family:var(--font-display)!important;   /* proportional Geist + tabular figures for big numbers; Mono is too wide here */
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  font-weight:600!important;letter-spacing:-.03em!important;line-height:1.1;
  font-size:clamp(.9rem,17cqi,1.75rem)!important;white-space:nowrap;max-width:100%;margin-top:.15rem
}
.tile-hero strong{font-size:clamp(1.35rem,17cqi,2.5rem)!important;margin-top:.15rem}
.tile.wide strong{font-size:clamp(1rem,6cqi,1.6rem)!important}
.agent .tile small{font-size:.72rem}
/* small row amounts keep Geist Mono, but never shrink below their content */
.bar-row .amt,.mock .row span:last-child,.tile-head .total{flex:0 0 auto;white-space:nowrap}
.bar-row .top,.mock .row,.tile-head{gap:var(--space-3);min-width:0}
.bar-row .top>span:first-child,.mock .row>span:first-child{min-width:0;overflow-wrap:anywhere}
.price-amt{font-variant-numeric:tabular-nums;flex-wrap:wrap}
@supports not (container-type:inline-size){.tile strong{font-size:clamp(1rem,.9rem + .5vw,1.4rem)!important}}

/* --- Consistent interaction states --- */
.btn,.pill,.tile,.plan,.mock,summary{transition-timing-function:var(--ease-hover)}
@media (prefers-reduced-motion:no-preference){
  .plan{box-shadow:var(--shadow-rest)}
  .js .plan[data-reveal]{transition:opacity var(--dur-reveal) var(--ease-expo) calc(var(--i,0) * var(--stagger)),transform var(--dur-reveal) var(--ease-expo) calc(var(--i,0) * var(--stagger)),box-shadow 800ms var(--ease-expo) calc(var(--i,0) * var(--stagger))}
  .plan.featured,.js .plan.featured[data-reveal]{box-shadow:var(--shadow)}
}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}

/* --- Mobile: nav never wraps item labels; tidy spacing --- */
@media (max-width:860px){
  .nav{overflow-x:auto;scrollbar-width:none;justify-content:flex-start;gap:var(--space-1);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex:0 0 auto;padding:0 .55rem}
  .agent{padding:var(--card-pad)}
  .problems{gap:var(--space-5)}
}
/* agent mini-dashboard: 2 money tiles + a full-width 'Homes on this bill' row (no awkward 3-line label) */
.agent .dash-main{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.agent .dash-main>.tile:nth-child(3){grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
.agent .dash-main>.tile:nth-child(3) strong{margin:0;font-size:1.1rem!important}
.agent .tile.wide{grid-column:1/-1}

/* Home example: one bill. Each charge is a line, and the repair sits on the same card. */
.hero .dash.bill .dash-body{display:block;min-height:0}
.hero .dash.bill .dash-bar{padding:var(--space-3) var(--space-5)}
.hero .dash.bill .dash-title{margin-left:0}
.hero .dash.bill .tile-hero{border:0;border-radius:0;padding:var(--space-4) var(--space-5);box-shadow:inset 0 -1px 0 rgb(255 255 255 / .14)}
.hero .dash.bill .tile-hero strong{font-size:clamp(1.85rem,3vw,2.5rem)!important;letter-spacing:-.04em}
.hero .dash.bill .tile-hero .split{margin:.4rem 0 .3rem}
.hero .dash.bill .rows{padding:.15rem var(--space-5) 0}
.hero .dash.bill .bar-row{align-items:start;padding:.42rem 0;row-gap:.28rem}
.hero .dash.bill .bar-row .amt{padding-top:.05rem}
.hero .dash.bill .bar-row .plain{margin-top:0;font-size:.72rem;line-height:1.3}
.hero .dash.bill .bar-row .bar{height:3px}
.hero .dash.bill .float-card{width:auto;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:var(--space-3) var(--space-5) var(--space-4)}
.hero .dash.bill .float-card p{margin-top:.55rem;color:var(--ink-2)}
.hero .dash.bill .float-card p+p{margin-top:.2rem;color:var(--ink-3)}
[data-theme="dark"] .hero .dash.bill .tile-hero{box-shadow:inset 0 -1px 0 var(--line)}

/* Automate jobs: the name sits on its own line, a mark sits by the outcome, and the two cards share row heights. */
#jobs .plan .row{display:grid;grid-template-columns:1.25rem minmax(0,1fr);column-gap:.65rem;row-gap:.25rem;align-items:start;padding:.85rem 0}
#jobs .plan .row .job{grid-column:1 / -1;grid-row:1;font-weight:600;color:var(--ink)}
#jobs .plan .row span:last-child{grid-column:2;grid-row:2;color:var(--ink-2);min-width:0}
#jobs .plan .row::before{content:"";grid-column:1;grid-row:2;width:1.125rem;height:1.125rem;margin-top:.12rem;background:var(--ink-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5 8h6' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5 8h6' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
#jobs .plan.featured .row::before{background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5.1 8.2 7.1 10.2 11 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5.1 8.2 7.1 10.2 11 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (min-width:861px){
  @supports (grid-template-rows:subgrid){
    #jobs .plans.two{grid-template-rows:auto repeat(7,auto);row-gap:0;column-gap:var(--space-5)}
    #jobs .plans.two>.plan{grid-template-rows:subgrid;grid-row:1 / -1;align-content:stretch;gap:0}
    #jobs .plans.two>.plan>h3{align-self:end}
    #jobs .plans.two>.plan>.rows{display:grid;grid-template-rows:subgrid;grid-row:2 / span 7;gap:0}
  }
}

/* Privacy: the title uses the page hero. The notes sit in a hairline list, at the smaller heading size. */
#privacy.hero h1{max-width:16ch;text-wrap:balance}
#privacy.hero .lede{max-width:36rem}
.legal{max-width:40rem;border-top:1px solid var(--line)}
.legal article{display:grid;gap:var(--space-3);padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.legal h2{font-family:var(--font-sans);font-size:var(--step-1);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.legal p{max-width:62ch}
#privacy-detail{padding-top:0}
@media (max-width:860px){
  #privacy-detail{padding-top:0!important;padding-bottom:var(--space-8,64px)!important}
  .legal h2{font-size:var(--step-1)!important;line-height:1.3!important;letter-spacing:-.02em!important}
}