/* ============================================================================
   SDR CONSULTING INC. - CALCULATORS
   Page-specific layer for /calculators/. Extends main.css; never overrides
   the palette. All text stays navy (--ink) or a navy tint - never black.
   ========================================================================== */

/* ---- 0. LOCAL TOKENS ------------------------------------------------------ */
.calc-scope{
  /* blue → purple ramp used by every bar, chart and legend on the page */
  --c1:#3891FE;
  --c2:#5680F5;
  --c3:#7A63E4;
  --c4:#8F4CC9;
  --c5:#602495;
  --c6:#4A1C73;
  --c7:#331350;
  --calc-radius:1.15rem;
}

/* ============================================================================
   1a. HUB - INLINE CALCULATOR TABS
   Six calculators live on one hub page. Each page keeps fixed element ids
   (calc-form, calc-results, r-tax …) so the markup cannot simply be copied
   side by side - every id would collide. Instead each panel frames the real
   calculator page with ?embed=1, lazily, and is sized to its content by
   assets/js/calc-embed.js so there is never an inner scrollbar.
   Visual language mirrors .ep-tabs on the podcast page.
   ========================================================================== */
.calc-hub{min-width:0}
.calc-hub .calc-feature{margin-top:2.8rem}
.calc-tabs{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-bottom:1.8rem;padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.calc-tab{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.1rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line-strong);
  font-size:var(--fs-small);font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:all var(--t-fast);
  max-width:100%;
}
.calc-tab svg{width:16px;height:16px;flex:none;opacity:.7}
.calc-tab:hover{border-color:var(--purple);color:var(--purple)}
@media(prefers-reduced-motion:no-preference){
  .calc-tab:hover{transform:translateY(-2px)}
}
.calc-tab:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.calc-tab.is-active{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 5px 16px rgba(96,36,149,.26);
}
.calc-tab.is-active svg{opacity:1}
.calc-tab-tag{
  display:none;
  padding:0 .5rem;height:20px;line-height:20px;
  border-radius:var(--r-pill);background:var(--bg-soft);
  font-size:.7rem;font-weight:700;color:var(--ink-faint);
  letter-spacing:.02em;
}
@media(min-width:1080px){.calc-tab-tag{display:inline-block}}
.calc-tab.is-active .calc-tab-tag{background:rgba(255,255,255,.24);color:#fff}

.calc-panel{min-width:0}
@media(prefers-reduced-motion:no-preference){
  .calc-panel:not([hidden]){animation:calcfade .4s var(--ease)}
}
@keyframes calcfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.calc-panel-head{margin-bottom:1.1rem;max-width:66ch}
.calc-panel-head h3{font-size:var(--fs-h3);margin-bottom:.3rem}
.calc-panel-head p{font-size:var(--fs-small);color:var(--ink-soft)}

/* The frame itself. Height is driven entirely by JS; the min-height only
   covers the moment between "tab opened" and "document measured". */
.calc-embed{position:relative;min-height:22rem}
.calc-embed-frame{
  width:100%;border:0;display:block;
  min-height:22rem;opacity:0;
  transition:opacity .35s var(--ease);
}
.calc-embed.is-ready .calc-embed-frame{min-height:0;opacity:1}
@media(prefers-reduced-motion:reduce){.calc-embed-frame{transition:none}}
.calc-embed-loading{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:var(--fs-small);color:var(--ink-faint);
}
.calc-embed.is-ready .calc-embed-loading{display:none}

.calc-panel-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;
  margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:var(--fs-small);color:var(--ink-soft);
}
.calc-panel-foot a{font-weight:600;color:var(--purple)}
.calc-panel-foot a:hover{text-decoration:underline}

.calc-noscript{display:grid;gap:.5rem;margin-top:1rem}

/* ============================================================================
   1b. EMBEDDED MODE (?embed=1)
   Only ever active inside an iframe on the hub. The standalone calculator
   pages are loaded without the query and keep every section, so they stay
   whole for search engines and for anyone who bookmarks them.
   ========================================================================== */
.is-embedded .topbar,
.is-embedded .site-header,
.is-embedded .mobile-nav,
.is-embedded .site-footer,
.is-embedded .to-top,
.is-embedded .skip-link,
.is-embedded .breadcrumb,
.is-embedded .page-hero,
.is-embedded .cta-banner,
.is-embedded .calc-cta,
.is-embedded .rel-grid,
.is-embedded .faq,
.is-embedded .embed-hide{display:none!important}

.is-embedded body{background:transparent}
/* Sit flush inside the frame - the hub already supplies the surrounding
   rhythm, so the page's own section padding would double it up. */
.is-embedded .embed-keep{padding-block:0!important}
.is-embedded .embed-keep>.container{padding-inline:0;max-width:none}
/* No inner scrollbar: the frame is sized to the document. */
.is-embedded,.is-embedded body{overflow-x:hidden}
.is-embedded .calc-inputs{position:static!important}
/* Reveal animations depend on a scrolling viewport, which an auto-sized frame
   does not have. Show everything immediately instead of risking blank cards. */
.is-embedded .reveal{opacity:1!important;transform:none!important;filter:none!important}

/* ============================================================================
   2. CALCULATOR LAYOUT - sticky inputs left, results right
   ========================================================================== */
.calc-layout{display:grid;gap:1.6rem;align-items:start}
@media(min-width:1000px){
  .calc-layout{grid-template-columns:minmax(340px,25.5rem) 1fr;gap:2.2rem}
  .calc-inputs{position:sticky;top:6.5rem}
}
@media(min-width:1000px) and (max-height:820px){
  .calc-inputs{position:static}
}

.calc-form{display:grid;gap:1.15rem;padding:1.6rem}
@media(min-width:520px){.calc-form{padding:1.9rem}}
.calc-form-head{display:grid;gap:.55rem;padding-bottom:.35rem}
.calc-form-head h2{font-size:1.35rem}
.calc-form-head p{font-size:var(--fs-tiny);color:var(--ink-faint);line-height:1.55}
.calc-rule{height:1px;background:linear-gradient(90deg,var(--line-strong),transparent);border:0;margin:.2rem 0}

/* ---- input groups -------------------------------------------------------- */
/* `display:grid`/`flex` on these components would otherwise beat the user-agent
   [hidden] rule, so conditional fields must be forced closed. */
.calc-scope [hidden]{display:none !important}
.cg{display:grid;gap:.45rem}
.cg>label,.cg-label{
  font-size:var(--fs-small);font-weight:600;color:var(--ink);
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
}
.cg-label .cg-opt{font-size:var(--fs-tiny);font-weight:500;color:var(--ink-faint);text-transform:none;letter-spacing:0}
.cg-help{font-size:var(--fs-tiny);color:var(--ink-faint);line-height:1.5}
.cg-help b{color:var(--ink-soft);font-weight:600}

.ci{position:relative;display:block}
.ci input,.ci select{
  width:100%;padding:.82rem 1.05rem;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  font-size:1rem;font-weight:550;color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background-color var(--t-fast);
}
.ci select{
  cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5170' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:15px 15px;
}
.ci input:hover,.ci select:hover{border-color:rgba(25,36,81,.28)}
.ci input:focus,.ci select:focus{
  outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(96,36,149,.12);
}
.ci input::placeholder{color:var(--ink-faint);font-weight:400}
.ci-pre,.ci-post{
  position:absolute;top:50%;transform:translateY(-50%);
  font-weight:650;font-size:.95rem;color:var(--ink-faint);pointer-events:none;
}
.ci-pre{left:1.05rem}
.ci-post{right:1.05rem}
.ci--money input{padding-left:2.15rem}
.ci--pct input,.ci--suffix input{padding-right:2.6rem}

/* two inputs side by side */
.cg-pair{display:grid;gap:.75rem}
@media(min-width:420px){.cg-pair{grid-template-columns:1fr 1fr}}

/* ---- segmented radio control --------------------------------------------- */
.seg{
  display:flex;gap:.25rem;padding:.28rem;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-pill);
}
.seg label{flex:1;position:relative;display:block;margin:0}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg span{
  display:block;text-align:center;cursor:pointer;
  padding:.55rem .5rem;border-radius:var(--r-pill);
  font-size:var(--fs-small);font-weight:600;color:var(--ink-soft);
  transition:background-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
}
.seg span:hover{color:var(--purple)}
.seg input:checked+span{background:#fff;color:var(--purple);box-shadow:var(--shadow-sm)}
.seg input:focus-visible+span{outline:2.5px solid var(--blue);outline-offset:2px}

/* ---- actions & warnings --------------------------------------------------- */
.calc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:.3rem}
.calc-actions .btn--grad{flex:1;justify-content:center;min-width:11rem}
.calc-warn{
  display:flex;gap:.65rem;align-items:flex-start;
  background:#FDF6E8;border:1px solid rgba(183,121,31,.28);
  border-radius:var(--r-sm);padding:.8rem 1rem;
  font-size:var(--fs-tiny);line-height:1.55;color:#7A5310;
}
.calc-warn svg{width:16px;height:16px;flex:none;margin-top:.15rem;color:var(--warn)}
.calc-warn[hidden]{display:none}

/* ============================================================================
   3. RESULTS
   ========================================================================== */
.calc-results{display:grid;gap:1.2rem;scroll-margin-top:6rem}

/* headline card */
.res-hero{
  position:relative;overflow:hidden;
  background:var(--navy);color:#fff;
  border-radius:var(--r-xl);
  padding:clamp(1.7rem,3.6vw,2.4rem);
}
.res-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(62% 100% at 6% 108%,rgba(96,36,149,.62),transparent 62%),
    radial-gradient(55% 88% at 96% -14%,rgba(56,145,254,.44),transparent 60%);
}
.res-hero>*{position:relative;z-index:1}
.res-hero .eyebrow{color:#CBB7E6;margin-bottom:.7rem}
.res-hero .eyebrow::before{background:linear-gradient(135deg,#B78BE0,#7FB8FF)}
.res-num{
  display:block;font-family:var(--font-display);font-weight:560;
  font-size:clamp(2.6rem,6.2vw,3.9rem);line-height:1;letter-spacing:-.02em;
  color:#fff;font-variant-numeric:tabular-nums;
}
.res-num--good{color:#8FE3B8}
.res-num--due{color:#FFC6BC}
.res-sub{color:rgba(255,255,255,.76);font-size:var(--fs-small);margin-top:.85rem;max-width:44ch;line-height:1.6}
.res-sub b{color:#fff}
.res-hero-split{
  display:grid;gap:1rem;margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.14);
}
@media(min-width:560px){.res-hero-split{grid-template-columns:repeat(3,1fr)}}
.res-hero-split.is-2{grid-template-columns:1fr}
@media(min-width:560px){.res-hero-split.is-2{grid-template-columns:repeat(2,1fr)}}
.rhs-item span{display:block;font-size:var(--fs-tiny);color:rgba(255,255,255,.6);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.rhs-item b{display:block;font-size:1.4rem;font-weight:600;color:#fff;margin-top:.3rem;font-variant-numeric:tabular-nums}

/* result panels */
.res-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);padding:clamp(1.4rem,3vw,1.9rem);
}
.res-panel--soft{background:var(--bg-soft);box-shadow:none}
.res-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.res-panel-head h3{font-size:1.15rem}
.res-panel-head p{font-size:var(--fs-tiny);color:var(--ink-faint);max-width:38ch;line-height:1.55}
.res-note{font-size:var(--fs-small);line-height:1.7;color:var(--ink-soft)}
.res-note b{color:var(--ink)}
.pill-note a{color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* label / value rows */
.res-rows{display:grid}
.res-rows--spaced{margin-top:1.4rem}
.res-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.78rem 0;border-bottom:1px dashed var(--line);
}
.res-row:last-child{border-bottom:0}
.res-row .rr-label{font-size:var(--fs-small);color:var(--ink-soft)}
.res-row .rr-label em{display:block;font-style:normal;font-size:var(--fs-tiny);color:var(--ink-faint);margin-top:.12rem}
.res-row .rr-val{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.res-row--sub .rr-label{padding-left:1.1rem;position:relative}
.res-row--sub .rr-label::before{
  content:"";position:absolute;left:.15rem;top:.55em;width:6px;height:6px;border-radius:50%;
  background:var(--line-strong);
}
.res-row--minus .rr-val{color:var(--success)}
.res-row--total{
  border-top:1.5px solid var(--line-strong);border-bottom:0;margin-top:.35rem;padding-top:1rem;
}
.res-row--total .rr-label{font-weight:650;color:var(--ink);font-size:1rem}
.res-row--total .rr-val{font-size:1.28rem;font-weight:650}
.res-row--accent .rr-val{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* mini stat tiles */
.res-minis{display:grid;gap:.9rem}
@media(min-width:560px){.res-minis{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.res-minis--3{grid-template-columns:repeat(3,1fr)}}
.res-mini{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.15rem 1.25rem;box-shadow:var(--shadow-sm);
}
.res-mini span{display:block;font-size:var(--fs-tiny);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.res-mini b{
  display:block;margin-top:.45rem;font-family:var(--font-display);font-weight:560;
  font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.1;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.res-mini em{display:block;font-style:normal;font-size:var(--fs-tiny);color:var(--ink-faint);margin-top:.4rem;line-height:1.5}

/* ============================================================================
   4. BAR VISUALISATIONS
   ========================================================================== */
.bars{display:grid;gap:1.1rem}
.bar-track{
  display:flex;width:100%;height:22px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--line);
}
.bar-seg{
  display:block;height:100%;width:var(--w);background:var(--tone,var(--purple));
  transition:width .55s var(--ease);
}
.bar-seg+.bar-seg{box-shadow:inset 1px 0 0 rgba(255,255,255,.55)}
@media(prefers-reduced-motion:reduce){.bar-seg{transition:none}}

.bar-legend{display:grid;gap:.1rem}
.bar-legend li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.7rem;
  padding:.58rem 0;border-bottom:1px dashed var(--line);
}
.bar-legend li:last-child{border-bottom:0}
.bl-dot{width:10px;height:10px;border-radius:3px;background:var(--tone,var(--purple));transform:translateY(1px)}
.bl-label{font-size:var(--fs-small);color:var(--ink);font-weight:550}
.bl-label em{display:block;font-style:normal;font-size:var(--fs-tiny);color:var(--ink-faint);font-weight:400;margin-top:.1rem}
.bl-val{font-weight:650;color:var(--ink);text-align:right;white-space:nowrap}
.bl-val em{display:block;font-style:normal;font-size:var(--fs-tiny);color:var(--ink-faint);font-weight:500;margin-top:.1rem}
.bl-total{border-top:1.5px solid var(--line-strong);margin-top:.3rem;padding-top:.85rem;grid-template-columns:1fr auto}
.bl-total .bl-label{font-weight:650}
.bl-total .bl-val{font-size:1.1rem}
.bar-empty{font-size:var(--fs-small);color:var(--ink-faint)}

/* comparison bars */
.cmp-bars{display:grid;gap:1rem}
.cmp-row{display:grid;grid-template-columns:1fr;gap:.4rem}
@media(min-width:560px){
  .cmp-row{grid-template-columns:9.5rem 1fr auto;align-items:center;gap:.9rem}
}
.cmp-label{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.cmp-track{display:block;height:16px;border-radius:var(--r-pill);background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.cmp-track i{
  display:block;height:100%;width:var(--w);border-radius:var(--r-pill);
  background:linear-gradient(90deg,#7A63E4,#602495);
  transition:width .55s var(--ease);
}
.cmp-row--good .cmp-track i{background:linear-gradient(90deg,#3891FE,#1B8A5A)}
.cmp-val{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
@media(prefers-reduced-motion:reduce){.cmp-track i{transition:none}}

/* waterfall / step breakdown */
.wf{display:grid;gap:.55rem}
.wf-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  padding:.7rem .95rem;border-radius:var(--r-sm);background:var(--bg-soft);
}
.wf-row .wf-label{font-size:var(--fs-small);color:var(--ink-soft)}
.wf-row .wf-val{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.wf-row--add{background:var(--blue-tint)}
.wf-row--sub{background:var(--purple-tint)}
.wf-row--sub .wf-val{color:var(--purple)}
.wf-row--result{background:var(--navy);color:#fff}
.wf-row--result .wf-label{color:rgba(255,255,255,.78);font-weight:600}
.wf-row--result .wf-val{color:#fff;font-size:1.15rem}

/* growth-by-decade columns */
.growth{display:grid;gap:1rem}
.growth-cols{display:flex;align-items:flex-end;gap:.55rem;min-height:190px;padding-top:.5rem}
.growth-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;text-align:center;min-width:0}
.growth-col i{
  display:block;width:100%;height:var(--h);min-height:5px;border-radius:.55rem .55rem .2rem .2rem;
  background:linear-gradient(180deg,#3891FE,#602495);
  transition:height .6s var(--ease);
}
.growth-col b{font-size:var(--fs-tiny);font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.growth-col span{font-size:var(--fs-tiny);color:var(--ink-faint);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.growth-col i{transition:none}}

/* side-by-side scenario cards (S-corp) */
.scenarios{display:grid;gap:1.1rem}
@media(min-width:700px){.scenarios{grid-template-columns:repeat(2,1fr)}}
.scenario{
  position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-xl);
  padding:1.5rem;box-shadow:var(--shadow-sm);
}
.scenario--win{border-color:rgba(96,36,149,.3);box-shadow:var(--shadow-md)}
.scenario-tag{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.75rem;
}
.scenario--win .scenario-tag{color:var(--purple)}
.scenario h4{font-family:var(--font-display);font-weight:560;font-size:1.25rem;margin-bottom:.2rem}
.scenario .sc-total{
  display:block;font-family:var(--font-display);font-weight:560;
  font-size:clamp(1.8rem,3.4vw,2.3rem);line-height:1.1;margin:.9rem 0 .25rem;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.scenario--win .sc-total{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.scenario .sc-note{font-size:var(--fs-tiny);color:var(--ink-faint);line-height:1.55}
.scenario .res-rows{margin-top:1.1rem}

/* ============================================================================
   5. ASSUMPTIONS ACCORDION
   ========================================================================== */
.calc-assume{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:border-color var(--t-fast),box-shadow var(--t-med);
}
.calc-assume[open]{border-color:rgba(96,36,149,.25);box-shadow:var(--shadow-md)}
.calc-assume>summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.4rem;cursor:pointer;list-style:none;
  font-weight:600;color:var(--ink);font-size:1rem;
}
.calc-assume>summary::-webkit-details-marker{display:none}
.calc-assume .ca-ic{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--purple-tint);color:var(--purple);
  transition:transform var(--t-med),background-color var(--t-fast),color var(--t-fast);
}
.calc-assume .ca-ic svg{width:14px;height:14px}
.calc-assume[open] .ca-ic{transform:rotate(45deg);background:var(--grad);color:#fff}
.ca-body{padding:0 1.4rem 1.5rem}
.ca-body p{font-size:var(--fs-small);line-height:1.7;margin-bottom:1rem}
.ca-grid{display:grid;gap:.1rem}
@media(min-width:760px){.ca-grid{grid-template-columns:1fr 1fr;column-gap:2.2rem}}
.ca-grid li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.55rem 0;border-bottom:1px dashed var(--line);
  font-size:var(--fs-small);color:var(--ink-soft);
}
.ca-grid li b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
@media(max-width:559px){
  /* Label above value: a six-threshold row cannot share a line with its label
     on a phone, and the enclosing <details> clips rather than scrolls, so the
     figures were being cut off entirely. */
  .ca-grid li{flex-direction:column;align-items:flex-start;gap:.15rem}
}
.ca-note{
  margin-top:1.2rem;font-size:var(--fs-tiny);color:var(--ink-faint);line-height:1.65;
}
.ca-note a{color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============================================================================
   6. DISCLAIMER STRIP
   ========================================================================== */
.disclaimer-strip{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--bg-lavender);
  border:1px solid rgba(96,36,149,.16);
  border-left:3px solid var(--purple);
  border-radius:var(--r-md);
  padding:1.05rem 1.3rem;
  font-size:var(--fs-small);line-height:1.65;color:var(--ink-soft);
}
.disclaimer-strip svg{width:19px;height:19px;flex:none;margin-top:.18rem;color:var(--purple)}
.disclaimer-strip b{color:var(--ink)}
.disclaimer-strip a{color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.disclaimer-strip--extra{background:#FDF6E8;border-color:rgba(183,121,31,.24);border-left-color:var(--warn)}
.disclaimer-strip--extra svg{color:var(--warn)}

/* ============================================================================
   7. CONTEXTUAL CTA CARD
   ========================================================================== */
.calc-cta{
  display:grid;gap:1.5rem;align-items:center;
  background:linear-gradient(135deg,rgba(96,36,149,.06),rgba(56,145,254,.06));
  border:1px solid rgba(96,36,149,.14);
  border-radius:var(--r-xl);
  padding:clamp(1.6rem,4vw,2.5rem);
}
@media(min-width:840px){.calc-cta{grid-template-columns:1.5fr auto}}
.calc-cta .eyebrow{margin-bottom:.8rem}
.calc-cta h2,.calc-cta h3{font-size:clamp(1.35rem,2.4vw,1.75rem);margin-bottom:.6rem}
.calc-cta p{font-size:var(--fs-small);max-width:56ch}
.calc-cta-actions{display:flex;flex-wrap:wrap;gap:.8rem}
@media(min-width:840px){.calc-cta-actions{flex-direction:column;align-items:stretch}
  .calc-cta-actions .btn{justify-content:center}}

/* ============================================================================
   8. RELATED CALCULATORS
   ========================================================================== */
.rel-grid{display:grid;gap:1rem}
@media(min-width:640px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel-card{
  display:flex;align-items:flex-start;gap:.9rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm);
  transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(96,36,149,.22)}
.rel-card .rc-ic{
  flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--purple-tint);color:var(--purple);
  transition:background-color var(--t-med),color var(--t-med);
}
.rel-card:hover .rc-ic{background:var(--grad);color:#fff}
.rel-card .rc-ic svg{width:19px;height:19px}
.rel-card b{display:block;font-weight:600;font-size:.98rem;line-height:1.3;color:var(--ink)}
.rel-card span{display:block;font-size:var(--fs-tiny);color:var(--ink-faint);line-height:1.5;margin-top:.2rem}

/* ============================================================================
   9. HOW-IT-WORKS / EXPLAINER STRIPS
   ========================================================================== */
.calc-explain{display:grid;gap:1.5rem}
@media(min-width:860px){.calc-explain{grid-template-columns:repeat(3,1fr)}}
.explain-item{display:grid;gap:.55rem;align-content:start}
.explain-item .ei-n{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--purple-tint);color:var(--purple);font-weight:700;font-size:.9rem;
}
.explain-item h3{font-size:1.1rem}
.explain-item p{font-size:var(--fs-small)}

/* print - keep the results readable if someone prints the page */
@media print{
  .calc-inputs,.site-header,.topbar,.to-top,.cta-banner,.calc-cta{display:none!important}
  .calc-layout{display:block}
  .res-hero{background:#fff;color:var(--ink);border:1px solid var(--line)}
  .res-hero::before{display:none}
  .res-num,.rhs-item b{color:var(--ink)}
  .res-sub,.rhs-item span{color:var(--ink-soft)}
}