/* ===== Tax Plan Estimator (homepage hero) =====
   Guided 3-step flow at every breakpoint. Scoped under .ovp-card.
   Type: Instrument Serif for pane headings (echoes the hero h1),
   Figtree for UI and numerals (the only family the site loads at
   700/800, so bold never falls back to synthesized weights),
   JetBrains Mono at 600 max for eyebrow labels. */

/* Fit-to-viewport wrapper. On the two-column hero the card is scaled as a
   single unit (never re-laid-out) so it always fits the screen, and the
   wrapper reserves exactly the scaled height so the hero row gains no
   phantom space above the headline. --ovp-scale is set by the component. */
.ovp-fit{position:relative;width:100%}
.ovp-card{transform-origin:top center;transform:scale(var(--ovp-scale,1))}
/* per-step height animates instead of locking to the tallest step */
@media (prefers-reduced-motion:no-preference){
  .ovp-fit{transition:height .35s ease}
  .ovp-card{transition:height .35s ease,transform .35s ease}
}
.ovp-card.measuring{transition:none}

.ovp-card{
  --ovp-bg:#fff; --ovp-text:#0f172a; --ovp-dim:#64748b; --ovp-faint:#cbd5e1;
  --ovp-edge:rgba(15,23,42,.09); --ovp-edge2:rgba(15,23,42,.17);
  --ovp-blue:#0057FF; --ovp-blue2:#1B6BFF; --ovp-green:#118A5F; --ovp-red:#D8402C;
  --ovp-serif:'Instrument Serif',Georgia,serif;
  --ovp-sans:'Figtree',ui-sans-serif,system-ui,sans-serif;
  --ovp-mono:'JetBrains Mono',ui-monospace,monospace;

  position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;
  border:1px solid var(--ovp-edge);border-radius:24px;
  background:
    radial-gradient(100% 55% at 50% -8%, rgba(0,87,255,.07), transparent 64%),
    radial-gradient(70% 45% at 100% 100%, rgba(8,145,178,.045), transparent 58%),
    var(--ovp-bg);
  box-shadow:0 24px 60px -32px rgba(15,26,39,.30);
  color:var(--ovp-text);font-family:var(--ovp-sans);
}
.ovp-card *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.ovp-card button,.ovp-card a{font:inherit}
.ovp-card button:focus-visible,.ovp-card a:focus-visible,.ovp-card summary:focus-visible{
  outline:3px solid rgba(0,87,255,.28);outline-offset:3px}
.ovp-card [hidden]{display:none!important}
.ovp-card .fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.ovp-card>*:not(.fx):not(.tip){position:relative;z-index:2}

/* ---- header: big tool title + explainer + labeled step nav ---- */
.ovp-card .ovp-head{padding:18px 22px 13px;border-bottom:1px solid var(--ovp-edge)}
.ovp-card .wlab,.ovp-card .result-kicker{color:var(--ovp-blue);font-family:var(--ovp-mono);
  font-size:9.5px;font-weight:600;letter-spacing:.18em;line-height:1.4;text-transform:uppercase}
.ovp-card .ovp-title{margin:6px 0 0;color:var(--ovp-text);font-family:var(--ovp-serif);font-weight:400;
  font-size:27px;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
.ovp-card .ovp-sub{margin:7px 0 0;max-width:52ch;color:var(--ovp-dim);font-size:12.5px;line-height:1.5}
.ovp-card .progress{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.ovp-card .progress button{display:flex;flex-direction:column;gap:5px;padding:4px 2px 2px;
  border:0;background:transparent;cursor:pointer;text-align:left}
.ovp-card .progress button:disabled{cursor:default}
.ovp-card .progress i{display:block;height:4px;border-radius:99px;background:#e2e8f0;transition:background .2s}
.ovp-card .progress span{color:var(--ovp-faint);font-size:9px;font-weight:600;letter-spacing:.05em;
  line-height:1;text-transform:uppercase;transition:color .2s;white-space:nowrap}
.ovp-card .progress button.active i,.ovp-card .progress button.complete i{background:var(--ovp-blue)}
.ovp-card .progress button.active span{color:var(--ovp-text)}
.ovp-card .progress button.complete span{color:var(--ovp-dim)}
.ovp-card .progress button.complete:hover span{color:var(--ovp-blue)}

/* ---- step panes ----
   the card sizes to the current step, so the nav button gets fixed
   breathing room instead of an auto margin (which collapses to zero
   now that no leftover height exists to absorb) */
.ovp-card .pane{display:flex;flex:1 1 auto;flex-direction:column;padding:20px 22px 22px}
.ovp-card .pane>.next,.ovp-card .pane-actions{margin-top:24px}
.ovp-card .pane:not([hidden]){animation:ovp-pane .26s ease-out}
.ovp-card.measuring .pane{animation:none!important}
@keyframes ovp-pane{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ovp-card .pane-intro{margin-bottom:16px}
.ovp-card .pane h3{margin:0;color:var(--ovp-text);font-family:var(--ovp-serif);font-weight:400;
  font-size:23px;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
.ovp-card .pane h3:focus{outline:none}
.ovp-card .pane-intro p{margin:9px 0 0;max-width:44ch;color:var(--ovp-dim);font-size:13px;line-height:1.55}

/* ---- step 1: household ---- */
.ovp-card .prof{display:flex;flex-wrap:wrap;gap:14px}
.ovp-card .prof.house{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(110px,.75fr);gap:10px;
  margin-bottom:15px;padding:12px;border:1px solid var(--ovp-edge);border-radius:15px;background:rgba(255,255,255,.85)}
.ovp-card .pf{display:flex;min-width:0;flex-direction:column;gap:7px}
.ovp-card .pf.grow{flex:1 1 155px}
.ovp-card .pf label,.ovp-card .rowlab{color:var(--ovp-dim);font-family:var(--ovp-mono);font-size:9px;
  font-weight:600;letter-spacing:.13em;line-height:1.35;text-transform:uppercase}
.ovp-card .pf label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ovp-card .seg,.ovp-card .step{display:grid;min-height:44px;overflow:hidden;
  border:1px solid var(--ovp-edge2);border-radius:12px;background:#fff}
.ovp-card .seg{grid-template-columns:1fr 1fr}
.ovp-card .step{grid-template-columns:44px 1fr 44px}
.ovp-card .seg button,.ovp-card .step button{min-height:44px;border:0;background:transparent;
  color:var(--ovp-dim);cursor:pointer}
.ovp-card .seg button{padding:0 10px;font-size:11.5px;font-weight:700;transition:background .18s,color .18s}
.ovp-card .seg button[aria-pressed='true']{background:var(--ovp-blue);color:#fff}
.ovp-card .step button{font-size:20px}
.ovp-card .step button:hover{color:var(--ovp-blue)}
.ovp-card .step span{display:grid;place-items:center;color:var(--ovp-text);font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums}
.ovp-card .tabrow{margin-top:13px}
.ovp-card .rowlab{display:block;margin-bottom:7px}
.ovp-card .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.ovp-card .tab{min-width:0;min-height:44px;padding:8px 7px;border:1px solid var(--ovp-edge2);border-radius:12px;
  background:rgba(255,255,255,.9);color:var(--ovp-dim);cursor:pointer;font-size:11px;font-weight:600;
  line-height:1.25;text-align:center;transition:border-color .18s,background .18s,color .18s}
.ovp-card .tab:hover{border-color:rgba(0,87,255,.42);color:var(--ovp-text)}
.ovp-card .tab[aria-pressed='true']{border-color:var(--ovp-blue);background:var(--ovp-blue);color:#fff;font-weight:700}

/* ---- step 2: income ---- */
.ovp-card .prof.income{padding:15px;border:1px solid var(--ovp-edge);border-radius:16px;background:rgba(255,255,255,.86)}
/* the labels here are conversational questions, so they read as
   sentences, not as uppercase form captions */
.ovp-card .prof.income .pf label{font-family:var(--ovp-sans);font-size:12px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ovp-text);line-height:1.35;text-align:left}
.ovp-card .prof.income .pf.grow{flex:1 1 100%}
.ovp-card .pfhint{color:var(--ovp-dim);font-size:12px}
.ovp-card .pfin{width:84px;padding:3px 5px;border:1px solid transparent;border-radius:7px;background:transparent;
  color:var(--ovp-text);font-size:13px;font-variant-numeric:tabular-nums;font-weight:700;outline:none;text-align:right;
  transition:border-color .18s,background .18s}
.ovp-card .pfin:hover{border-color:var(--ovp-edge2)}
.ovp-card .pfin:focus{border-color:var(--ovp-blue);background:#fff}
.ovp-card .pf input[type='range']{width:100%;height:4px;padding:0;border:0;border-radius:99px;
  -webkit-appearance:none;appearance:none;outline:none;
  background:linear-gradient(90deg,var(--ovp-blue) var(--fill,50%),rgba(15,23,42,.12) var(--fill,50%))}
.ovp-card .pf input[type='range']::-webkit-slider-thumb{width:20px;height:20px;border:2px solid var(--ovp-blue);
  border-radius:50%;-webkit-appearance:none;appearance:none;background:#fff;box-shadow:0 2px 6px rgba(0,87,255,.24);cursor:pointer}
.ovp-card .pf input[type='range']::-moz-range-thumb{width:17px;height:17px;border:2px solid var(--ovp-blue);
  border-radius:50%;background:#fff;cursor:pointer}
.ovp-card .prow{display:flex;flex:1 1 100%;align-items:flex-end;gap:12px;padding-top:2px}
.ovp-card .prow .pf.grow{flex:1 1 0}
.ovp-card .prem{width:34px;height:34px;flex:0 0 34px;margin-bottom:-3px;border:1px solid var(--ovp-edge2);
  border-radius:50%;background:#fff;color:var(--ovp-dim);cursor:pointer;transition:border-color .18s,color .18s}
.ovp-card .prem:hover{border-color:var(--ovp-red);color:var(--ovp-red)}
.ovp-card .padd{min-height:40px;padding:0 13px;border:1px dashed var(--ovp-edge2);border-radius:12px;
  background:#fff;color:var(--ovp-blue);cursor:pointer;font-size:11.5px;font-weight:700;transition:border-color .18s}
.ovp-card .padd:hover{border-color:var(--ovp-blue)}
.ovp-card .pfq{display:inline-grid;width:17px;height:17px;margin-left:4px;padding:0;place-items:center;
  border:1px solid var(--ovp-edge2);border-radius:50%;background:#fff;color:var(--ovp-dim);cursor:help;
  font-family:var(--ovp-sans);font-size:9.5px;font-weight:700;transition:border-color .18s,color .18s}
.ovp-card .pfq:hover{border-color:var(--ovp-blue);color:var(--ovp-blue)}

/* ---- step navigation buttons ---- */
.ovp-card .next,.ovp-card .back,.ovp-card .edit{min-height:46px;border-radius:12px;
  cursor:pointer;font-weight:700}
.ovp-card .next{display:flex;width:100%;align-items:center;justify-content:center;gap:9px;margin-top:18px;
  padding:0 18px;border:1px solid var(--ovp-blue);background:var(--ovp-blue);color:#fff;font-size:13px;
  transition:background .18s,transform .18s}
.ovp-card .next:hover{background:var(--ovp-blue2);transform:translateY(-1px)}
.ovp-card .pane-actions{display:grid;grid-template-columns:92px 1fr;gap:9px;margin-top:18px}
.ovp-card .pane-actions .next{margin-top:0}
.ovp-card .back{border:1px solid var(--ovp-edge2);background:#fff;color:var(--ovp-dim);
  transition:border-color .18s,color .18s}
.ovp-card .back:hover{border-color:var(--ovp-blue);color:var(--ovp-blue)}

/* ---- step 3: result summary ---- */
.ovp-card .result-pane{padding-top:18px}
.ovp-card .result-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:6px}
.ovp-card .result-heading h3{margin-top:5px}
.ovp-card .result-note{margin:0 0 13px;max-width:46ch;color:var(--ovp-dim);font-size:12.5px;line-height:1.55}
.ovp-card .edit{min-height:38px;padding:0 12px;border:1px solid var(--ovp-edge2);background:#fff;
  color:var(--ovp-blue);font-size:11px;white-space:nowrap;transition:border-color .18s}
.ovp-card .edit:hover{border-color:var(--ovp-blue)}
.ovp-card .result-card{padding:14px 18px;border:1px solid rgba(0,87,255,.16);border-radius:16px;
  background:radial-gradient(80% 90% at 90% 0%, rgba(0,87,255,.10), transparent 68%),
    linear-gradient(145deg, rgba(239,246,255,.96), rgba(255,255,255,.95))}
.ovp-card .result-label{color:var(--ovp-dim);font-size:12px;font-weight:600}
/* before the first pick: hide the empty comparison rows, show the nudge */
.ovp-card .result-hint{display:none;margin-top:8px;color:var(--ovp-blue);font-size:12px;font-weight:600}
.ovp-card.nosave .result-hint{display:block}
.ovp-card.nosave .result-baseline,.ovp-card.nosave .result-saved{display:none}
.ovp-card .big{position:relative;display:inline-flex;align-items:baseline;min-height:1em;margin-top:5px;
  color:var(--ovp-blue);font-size:clamp(34px,8vw,44px);font-feature-settings:'tnum';
  font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.03em;line-height:1}
.ovp-card .big .cur{margin-right:.04em;color:var(--ovp-blue);font-size:.62em;transform:translateY(-.12em)}
/* reel cells must be exactly 1em tall: the odometer translates in whole
   em steps, so any other cell height scrambles the digits */
.ovp-card .col{position:relative;width:.61em;height:1em;overflow:hidden;text-align:center;
  transition:width .35s,opacity .35s}
.ovp-card .col .reel{position:absolute;top:0;left:0;width:100%;transition:transform .65s cubic-bezier(.22,.9,.24,1)}
.ovp-card .col .reel span{display:block;height:1em;line-height:1}
.ovp-card .comma{width:.25em;color:rgba(0,87,255,.42);text-align:center;transition:width .35s,opacity .35s}
.ovp-card .col.dead,.ovp-card .comma.dead{width:0;opacity:0}
.ovp-card .big.hurt{animation:ovp-hurt .5s cubic-bezier(.3,.6,.3,1)}
@keyframes ovp-hurt{0%{transform:translateX(0)}20%{transform:translateX(-7px)}45%{transform:translateX(5px)}
  70%{transform:translateX(-2px)}100%{transform:translateX(0)}}
.ovp-card .result-baseline,.ovp-card .result-saved{display:flex;align-items:baseline;justify-content:space-between;
  gap:15px;padding-top:10px;color:var(--ovp-dim);font-size:12px}
.ovp-card .result-baseline s{color:var(--ovp-dim);font-size:14px;font-variant-numeric:tabular-nums;font-weight:600;
  text-decoration-color:rgba(216,64,44,.55)}
.ovp-card .result-saved{margin-top:10px;border-top:1px solid rgba(0,87,255,.12);color:var(--ovp-green);font-weight:600}
.ovp-card .result-saved strong{font-size:20px;font-variant-numeric:tabular-nums;font-weight:800}
.ovp-card .tear{position:absolute;top:-8px;left:50%;color:var(--ovp-blue);font-size:15px;font-weight:700;
  letter-spacing:0;opacity:0;pointer-events:none;white-space:nowrap}
.ovp-card .tear.go{animation:ovp-tear 1s ease-out forwards}
.ovp-card .tear.red{color:var(--ovp-red)}
@keyframes ovp-tear{0%{opacity:0;transform:translate(-50%,8px)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-35px)}}

/* ---- strategy rows ---- */
.ovp-card .strategy-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:13px 1px 8px}
.ovp-card .strategy-heading>div{display:flex;flex-direction:column;gap:3px}
.ovp-card .strategy-heading span{color:var(--ovp-text);font-size:12.5px;font-weight:700}
.ovp-card .strategy-heading small,.ovp-card .strategy-count{color:var(--ovp-dim);font-size:10px;font-weight:500}
/* all strategies visible at once in a compact grid: with opt-in picks,
   the visitor has to be able to see the whole menu */
.ovp-card .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
/* Opt-in visual language: unselected is the neutral default (still shows
   the dollar lure), selected gets the blue emphasis and a filled tick */
.ovp-card .gcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-height:52px;overflow:hidden;padding:7px 26px 7px 10px;border:1px solid var(--ovp-edge2);border-radius:11px;
  background:#fff;color:var(--ovp-text);cursor:pointer;text-align:left;
  transition:border-color .18s,background .18s,transform .18s}
.ovp-card .gcard:hover{border-color:var(--ovp-blue);transform:translateY(-1px)}
.ovp-card .gcard b{min-width:0;font-size:10.5px;font-weight:700;line-height:1.25}
.ovp-card .gamt{color:var(--ovp-blue);font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}
.ovp-card .gtick{position:absolute;top:6px;right:7px;display:grid;width:17px;height:17px;place-items:center;
  border-radius:50%;background:var(--ovp-blue);color:#fff;font-size:8px;transition:background .18s,color .18s}
.ovp-card .gart{position:absolute;right:-10px;bottom:-16px;width:52px;height:52px;opacity:.05;pointer-events:none}
.ovp-card .gart path,.ovp-card .gart circle,.ovp-card .gart ellipse{fill:none;stroke:var(--ovp-blue);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ovp-card .gcard:not(.off){border-color:var(--ovp-blue);background:rgba(0,87,255,.07)}
.ovp-card .gcard.off .gtick{border:1px solid var(--ovp-edge2);background:#fff;color:transparent}
.ovp-card .gcard.gate:not(.off){border-color:rgba(17,138,95,.45);background:rgba(17,138,95,.06)}
.ovp-card .gcard.gate .gamt{color:var(--ovp-green);font-size:10px;letter-spacing:.05em;text-transform:uppercase}
.ovp-card .gcard.gate:not(.off) .gtick{background:var(--ovp-green)}
.ovp-card .gcard.gate .gart path,.ovp-card .gcard.gate .gart circle{stroke:var(--ovp-green)}
.ovp-card .gcard.locked{opacity:.45;cursor:not-allowed}
.ovp-card .gcard.shake{animation:ovp-shake .3s}
@keyframes ovp-shake{30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
.ovp-card .gempty{grid-column:1/-1;padding:16px;border:1px dashed var(--ovp-edge2);border-radius:12px;
  color:var(--ovp-dim);font-size:11.5px;line-height:1.45;text-align:center}

/* ---- conversion + disclosure ---- */
.ovp-card .go{display:flex;width:100%;min-height:57px;flex-direction:column;align-items:center;justify-content:center;
  margin-top:14px;padding:9px 16px;border:0;border-radius:12px;background:var(--ovp-blue);color:#fff;text-align:center;
  font:inherit;cursor:pointer;text-decoration:none;transition:background .18s,transform .18s}
.ovp-card .go:hover{background:var(--ovp-blue2);transform:translateY(-1px)}
.ovp-card .go span{font-size:13px;font-weight:800;letter-spacing:.01em}
.ovp-card .go small{margin-top:3px;color:rgba(255,255,255,.75);font-size:10px;font-weight:500}
.ovp-card .disclaimer{margin:10px 0 0;color:var(--ovp-dim);font-size:9.5px;line-height:1.45;text-align:center}
.ovp-card .method{margin-top:4px;color:var(--ovp-dim);font-size:9.5px;text-align:center}
.ovp-card .method summary{display:inline-block;color:var(--ovp-blue);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.ovp-card .method summary::marker{content:''}
.ovp-card .fine{margin:8px 0 0;padding:10px;border-radius:10px;background:rgba(241,245,249,.8);
  color:var(--ovp-dim);font-size:9.5px;line-height:1.55;text-align:left}

/* ---- shared tooltip, positioned by the component ---- */
.ovp-card .tip{position:absolute;z-index:8;display:none;max-width:260px;padding:10px 12px;border-radius:10px;
  background:#0f172a;box-shadow:0 14px 30px -12px rgba(15,23,42,.55);color:#e2e8f0;font-size:10.5px;line-height:1.5;
  opacity:0;pointer-events:none;transform:translateY(3px);transition:opacity .16s,transform .16s}
.ovp-card .tip.show{opacity:1;transform:none}
.ovp-card .tip b{display:block;margin-bottom:3px;color:#fff;font-size:11.5px;line-height:1.3}

/* ---- breakpoints ---- */
@media (min-width:640px){
  .ovp-card{min-height:520px}
  .ovp-card .tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ovp-card .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* two questions per row on desktop so step 2 stays one screen */
  .ovp-card .prof.income .pf.grow{flex:1 1 44%}
  .ovp-card .prof.income .prow .pf.grow{flex:1 1 0}
}
@media (max-width:420px){
  .ovp-card{border-radius:20px}
  .ovp-card .ovp-head,.ovp-card .pane{padding-left:16px;padding-right:16px}
  .ovp-card .ovp-title{font-size:24px}
  .ovp-card .prof.house{grid-template-columns:1fr}
  .ovp-card .result-heading{align-items:flex-end}
  .ovp-card .result-heading h3{font-size:22px}
  .ovp-card .result-card{padding:13px 15px}
  .ovp-card .big{font-size:clamp(32px,10.5vw,42px)}
  .ovp-card .prow{flex-direction:column;align-items:stretch}
  .ovp-card .prem{align-self:flex-end;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .ovp-card *,.ovp-card *::before,.ovp-card *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}