/* ==========================================================================
   4:8 Financial — calculators + resources hub (round 8, rebuilt in the site's
   own language). Loaded only on resources.html and calculators/*.html.

   Reuses the site's system instead of inventing one:
   - 2px corners for surfaces, full pills for anything you tap (buttons, chips,
     steppers), the same underline fields as the Contact form.
   - Group labels = the italic "Planning / Investing" labels from the home
     services list; selected pills = the BRI lens tabs; tables open like the FAQ.
   - Hairlines and space separate things. No cards, rails, dots, glows, tags.
   ========================================================================== */

/* ---------- page intro ---------- */
main > section.calc-hero:first-child{ padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }
main > section.calc-hero:first-child h1{ font-size: clamp(2.6rem, 6.4vw, 5.4rem); max-width: 16ch; }
.crumbs{ display:flex; flex-wrap:wrap; gap:.3rem .55rem; align-items:center; font-size:.84rem; color: var(--muted); margin-bottom: 1.4rem; }
.crumbs a{ color: var(--ink-soft); border-bottom:1px solid var(--rule-strong); transition: border-color .3s ease, color .3s ease; }
.crumbs a:hover{ color: var(--ink); border-bottom-color: var(--ink); }
.crumbs span[aria-hidden]{ color: var(--rule-strong); }
.calc-hero .lede{ margin-top: 1.4rem; }

/* ---------- layout ---------- */
.calc-app{ padding: clamp(1.4rem, 3vw, 2.6rem) 0 clamp(4rem, 8vw, 7rem); }
.calc-grid{ display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items:start; }
@media (max-width: 960px){ .calc-grid{ grid-template-columns: minmax(0,1fr); gap: 3.2rem; } }
.calc-inputs{ position:sticky; top: 6.5rem; }
@media (max-width: 960px){ .calc-inputs{ position:static; } }
.calc-results{ scroll-margin-top: 5.5rem; }
.calc-panel-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; padding-bottom: 1rem; border-bottom:1px solid var(--rule); }
.calc-panel-head h2{ font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
.calc-reset{ background:none; border:1px solid var(--rule-strong); border-radius:100px; padding:0 1.1em; font-size:.8rem; font-weight:600; min-height:40px; color: var(--ink); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.calc-reset:hover{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.calc-private{ margin-top: 1.4rem; font-size:.82rem; color: var(--muted); }
.calc-noscript{ color: var(--ink-soft); }

/* groups (Option 1 / Option 2, Assets / Liabilities): the services-list group label */
.calc-group{ border:none; margin:0; padding:0; min-width:0; }
.calc-group + .calc-group{ margin-top: 1.8rem; }
.calc-group legend{ display:block; width:100%; float:left; font-family: var(--font-display); font-style:italic; font-size:1.3rem; color: var(--muted); padding: 1.4rem 0 .7rem; border-bottom:1px solid var(--rule); }
.calc-group legend + *{ clear:both; }

/* ---------- fields ---------- */
.cf{ padding: 1.15rem 0 .2rem; clear:both; }
.cf[hidden]{ display:none; }
.cf-label{ display:flex; align-items:flex-start; gap:.55rem; margin-bottom:.35rem; }
.cf-label label{ font-size:.92rem; font-weight:600; color: var(--ink); line-height:1.4; }
.cf-info{ flex:none; position:relative; width:22px; height:22px; margin-top:-1px; border-radius:50%; border:1px solid var(--rule-strong); background: transparent; font-family: var(--font-display); font-style:italic; font-weight:500; font-size:.9rem; line-height:1; color: var(--ink-soft); display:grid; place-items:center; padding:0; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.cf-info::after{ content:""; position:absolute; inset:-11px; }
.cf-info[aria-expanded="true"], .cf-info:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cf-help{ font-size:.86rem; color: var(--ink-soft); line-height:1.6; margin: .1rem 0 .5rem; max-width: 36em; }
.cf-box{ display:flex; align-items:center; gap:.5rem; }
.cf-field{ flex:1; min-width:0; display:flex; align-items:baseline; border-bottom:1px solid var(--rule-strong); min-height:48px; transition: border-color .4s ease; }
.cf-field:focus-within{ border-bottom-color: var(--ink); }
.cf.is-bad .cf-field{ border-bottom-color:#a3361f; }
.cf-field input{ flex:1; min-width:0; width:100%; border:none; background:transparent; font-size: 1.25rem; font-weight:600; color: var(--ink); padding: .55rem 0 .45rem; font-variant-numeric: tabular-nums; border-radius:0; }
.cf-field input:focus{ outline:none; }
.cf-suffix{ font-size:.86rem; color: var(--muted); margin-left:.4rem; white-space:nowrap; }
/* steppers: the round arrow buttons from the team strip */
.cf-step{ flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--rule-strong); background: transparent; font-size:1.2rem; line-height:1; color: var(--ink); display:grid; place-items:center; padding:0; touch-action: manipulation; user-select:none; -webkit-user-select:none; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .2s ease; }
.cf-step:hover{ background: var(--forest); border-color: var(--forest); color: var(--paper); }
.cf-step:active{ transform: scale(.94); }
/* slider */
.cf input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; margin:.4rem 0 0; display:block; touch-action: pan-y; }
.cf input[type=range]::-webkit-slider-runnable-track{ height:2px; background: linear-gradient(90deg, var(--brand-deep) 0 var(--p,50%), var(--rule-strong) var(--p,50%) 100%); }
.cf input[type=range]::-moz-range-track{ height:2px; background: var(--rule-strong); }
.cf input[type=range]::-moz-range-progress{ height:2px; background: var(--brand-deep); }
.cf input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-10px; border-radius:50%; background: var(--paper); border:1px solid var(--ink); }
.cf input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background: var(--paper); border:1px solid var(--ink); }
.cf input[type=range]:focus-visible{ outline:none; }
.cf input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--accent-deep); }
.cf-range-labels{ display:flex; justify-content:space-between; font-size:.74rem; color: var(--muted); margin-top:.05rem; font-variant-numeric: tabular-nums; }
.cf-selectbox{ position:relative; }
.cf-selectbox select{ width:100%; min-height:48px; border:none; border-bottom:1px solid var(--rule-strong); border-radius:0; background: transparent; padding: 0 2rem 0 0; font: inherit; font-size:1.05rem; font-weight:600; color: var(--ink); -webkit-appearance:none; appearance:none; }
.cf-selectbox select:focus{ outline:none; border-bottom-color: var(--ink); }
.cf-selectbox::after{ content:""; position:absolute; right:.3rem; top:50%; width:8px; height:8px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events:none; }
/* segmented choices: the BRI lens tabs */
.cf-seg{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }
.cf-seg button{ min-height:44px; padding:.6em 1.2em; border-radius:100px; border:1px solid var(--rule-strong); background:transparent; font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink); transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.cf-seg button:hover{ border-color: var(--ink); }
.cf-seg button[aria-checked="true"]{ background: var(--forest); border-color: var(--forest); color: var(--paper); }
.cf-toggle .cf-label{ align-items:center; margin:0; }
.cf-switch{ -webkit-appearance:none; appearance:none; width:44px; height:26px; border-radius:26px; background: var(--paper-deep); position:relative; flex:none; cursor:pointer; transition: background .3s ease; border:1px solid var(--rule-strong); margin:0; }
.cf-switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background: var(--white); border:1px solid var(--rule-strong); transition: transform .4s var(--ease); }
.cf-switch:checked{ background: var(--forest); border-color: var(--forest); }
.cf-switch:checked::after{ transform: translateX(18px); border-color: var(--forest); }

/* ---------- results ---------- */
.cr-headline{ padding-bottom: 1.4rem; border-bottom:1px solid var(--rule); }
.cr-hl-label{ font-size:.95rem; color: var(--ink-soft); }
.cr-hl-value{ font-family: var(--font-display); font-weight:500; font-size: clamp(3rem, 8vw, 5.4rem); line-height:.95; letter-spacing:-0.03em; color: var(--ink); margin-top:.4rem; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1; overflow-wrap:anywhere; }
.cr-hl-sub{ margin-top:.7rem; color: var(--ink-soft); }
.cr-stats{ margin:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.3rem 2.4rem; padding-top: 1.4rem; }
.cr-stat{ min-width:0; }
.cr-stat dt{ font-size:.86rem; color: var(--muted); line-height:1.4; }
.cr-stat dd{ margin:.25rem 0 0; font-size:1.25rem; font-weight:600; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap:anywhere; }
.cr-stat.is-em dd, .cr-stat.tone-good dd{ color: var(--brand-deep); }
.cr-stat.tone-warn dd{ color:#a3361f; }
.cr-note{ font-size:.8rem; color: var(--muted); margin-top:.2rem; }
@media (max-width: 400px){ .cr-stats{ grid-template-columns: 1fr; } }
/* the takeaway reads like the site's italic statements, not a boxed callout */
.cr-callout{ margin-top: 2rem; font-family: var(--font-display); font-style:italic; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height:1.3; color: var(--ink); max-width: 30em; }
.cr-warn{ margin-bottom: 1.4rem; color:#a3361f; font-weight:600; font-size:.95rem; line-height:1.55; }
/* side-by-side options: columns divided by hairlines, like the BRI triad */
.cr-compare{ display:grid; margin-top: 1.6rem; border-top:1px solid var(--rule); }
.cr-compare.n2{ grid-template-columns: 1fr 1fr; }
.cr-compare.n3{ grid-template-columns: repeat(3, 1fr); }
.cr-col{ padding: 1.3rem 1.6rem 0 0; min-width:0; }
.cr-col + .cr-col{ padding-left: 1.6rem; border-left:1px solid var(--rule); }
@media (max-width: 560px){
  .cr-compare.n2, .cr-compare.n3{ grid-template-columns: 1fr; }
  .cr-col, .cr-col + .cr-col{ padding: 1.3rem 0; border-left:none; }
  .cr-col + .cr-col{ border-top:1px solid var(--rule); }
}
.cr-col-h{ font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height:1.1; }
.cr-tag{ font-family: var(--font-display); font-style:italic; font-size:1.1rem; color: var(--brand-deep); margin-top:.2rem; }
.cr-col .cr-stats{ grid-template-columns: 1fr; gap: .9rem; padding-top: 1rem; }
.cr-notes{ margin-top:1.4rem; color: var(--ink-soft); font-size:.9rem; }
.cr-notes li{ position:relative; padding-left:1.4rem; margin:.45rem 0; line-height:1.55; }
.cr-notes li::before{ content:""; position:absolute; left:0; top:.72em; width:.7rem; height:1px; background: var(--accent); }
.cr-actions{ display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; align-items:center; margin-top: 2.2rem; }
.btn-outline.cr-share::after{ display:none; }

/* chart */
.cr-chart{ margin-top: 2.4rem; }
.cc{ margin:0; }
.cc-title{ font-size:.95rem; font-weight:600; color: var(--ink); margin-bottom:.7rem; }
.cc-legend{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-bottom:.9rem; font-size:.84rem; color: var(--ink-soft); }
.cc-legend li{ display:flex; align-items:center; gap:.5em; }
.cc-legend i{ width:10px; height:10px; border-radius:1px; flex:none; }
.cc-legend i.ln{ height:2px; width:16px; }
.cc-legend b{ font-weight:600; color: var(--ink); margin-left:.2em; font-variant-numeric: tabular-nums; }
.cc-donut{ display:grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items:center; }
.cc-donut .cc-title{ grid-column: 1 / -1; }
.cc-donut .cc-legend{ order:2; margin:0; flex-direction:column; gap:.6rem; }
.cc-donut .cc-plot{ order:1; }
@media (max-width: 520px){ .cc-donut{ grid-template-columns: 1fr; justify-items:center; } .cc-donut .cc-legend{ justify-self:stretch; } }
.cc-plot{ position:relative; width:100%; }
.cc-plot svg{ display:block; overflow:visible; touch-action: pan-y; }
.cc-grid{ stroke: var(--rule); stroke-width:1; vector-effect: non-scaling-stroke; }
.cc-zero{ stroke: var(--rule-strong); stroke-width:1; vector-effect: non-scaling-stroke; }
.cc-tick{ font-family: var(--font-body); font-size:11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.cc-axis-l{ font-family: var(--font-body); font-size:10px; fill: var(--muted); }
.cc-cross{ stroke: var(--ink); stroke-width:1; stroke-opacity:.35; vector-effect: non-scaling-stroke; }
.cc-band{ fill: var(--ink); fill-opacity:.05; }
.cc-center-v{ font-family: var(--font-display); font-weight:500; font-size:24px; fill: var(--ink); }
.cc-center-l{ font-family: var(--font-body); font-size:11px; fill: var(--muted); }
.cc-tip{ position:absolute; top:0; z-index:5; pointer-events:none; background: var(--forest); color: var(--paper); border-radius: var(--radius); padding:.6rem .75rem; font-size:.8rem; min-width: 150px; }
.cc-tip p{ display:flex; align-items:center; gap:.5em; margin:.15rem 0; white-space:nowrap; }
.cc-tip p span{ flex:1; color: rgba(250,250,247,.75); }
.cc-tip p b{ font-variant-numeric: tabular-nums; font-weight:600; }
.cc-tip i{ width:8px; height:8px; border-radius:1px; flex:none; }
.cc-tip .cc-tip-h{ font-weight:600; color: var(--paper); margin-bottom:.3rem; }
.cc-tip .cc-tip-t{ border-top:1px solid rgba(250,250,247,.2); padding-top:.3rem; margin-top:.3rem; }

/* table: opens like the FAQ */
.cr-table{ margin-top: 2rem; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.cr-table summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding: 1.15rem 0; min-height:44px; font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--ink); transition: color .3s ease; }
.cr-table summary::-webkit-details-marker{ display:none; }
.cr-table summary:hover{ color: var(--brand-deep); }
.cr-table summary em{ display:flex; align-items:center; gap:1rem; font-family: var(--font-body); font-style:normal; font-size:.8rem; color: var(--muted); }
.cr-table summary em::after{ content:""; flex:none; width:14px; height:14px; background: linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat; transition: transform .5s var(--ease); }
.cr-table[open] summary em::after{ transform: rotate(45deg); }
.cr-table-scroll{ max-height: 440px; overflow:auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.2rem; }
.cr-table table{ width:100%; border-collapse:collapse; font-size:.86rem; font-variant-numeric: tabular-nums; }
.cr-table th, .cr-table td{ padding:.55rem .8rem; text-align:right; white-space:nowrap; }
.cr-table thead th{ position:sticky; top:0; background: var(--paper); font-size:.78rem; color: var(--muted); font-weight:600; border-bottom:1px solid var(--rule-strong); }
.cr-table th:first-child, .cr-table td:first-child{ text-align:left; padding-left:0; }
.cr-table tbody th{ font-weight:600; color: var(--ink); }
.cr-table tbody tr + tr > *{ border-top:1px solid var(--rule); }

/* phones: the result follows you while you change numbers (a plain bottom bar) */
.calc-bar{ display:none; }
@media (max-width: 960px){
  .calc-bar{
    display:flex; align-items:center; gap:.9rem; position:fixed; z-index:440; left:0; right:0; bottom:0;
    background: var(--forest); color: var(--paper);
    padding: .75rem max(var(--gutter), env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left));
    transform: translateY(100%); transition: transform .5s var(--ease);
  }
  .calc-bar.is-on{ transform:none; }
  .calc-bar-l{ font-size:.78rem; line-height:1.3; color: rgba(250,250,247,.72); flex: 1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .calc-bar-v{ font-family: var(--font-display); font-weight:500; font-size:1.6rem; white-space:nowrap; font-variant-numeric: lining-nums; }
  .calc-bar-go{ flex:none; font-size:.82rem; font-weight:600; background: var(--accent); color: var(--forest); padding:.65em 1.1em; border-radius:100px; }
}

/* below the calculator */
.calc-after{ padding: 0 0 clamp(4rem, 8vw, 7rem); }
.calc-after-grid{ display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2rem, 6vw, 6rem); align-items:start; padding-top: clamp(2.4rem, 5vw, 3.4rem); border-top:1px solid var(--rule); }
@media (max-width: 860px){ .calc-after-grid{ grid-template-columns:1fr; } }
.calc-disclosure{ font-size:.8rem; color: var(--muted); line-height:1.75; }
.calc-disclosure h2{ font-family: var(--font-body); font-size:.9rem; font-weight:600; color: var(--ink-soft); margin-bottom:.7rem; letter-spacing:0; line-height:1.4; }
.calc-disclosure p + p{ margin-top:.8rem; }
.calc-question p{ color: var(--ink-soft); margin-top:.8rem; max-width: 30em; }
.related{ margin-top: clamp(3.4rem, 7vw, 5.4rem); }
.related h2{ margin-bottom: 1.4rem; }

/* ---------- resources hub ---------- */
.res-jump{ display:flex; flex-wrap:wrap; gap: .8rem 1.6rem; align-items:center; }
@media (max-width: 560px){ .res-jump .btn{ width:100%; } }
.res-tools{ display:flex; flex-wrap:wrap; gap: .8rem 1.4rem; align-items:center; position:sticky; top: calc(var(--header-m, 64px) + env(safe-area-inset-top, 0px)); z-index: 30; background: rgba(250,250,247,.97); padding: .9rem var(--gutter); margin: 0 calc(var(--gutter) * -1) 1.2rem; border-bottom:1px solid var(--rule); transition: top .6s var(--ease); }
.hdr-hidden .res-tools{ top: 0; }
@media (min-width: 1180px){ .res-tools{ top: 0; } }
.res-search{ flex: 1 1 260px; display:flex; align-items:center; gap:.6rem; border-bottom:1px solid var(--rule-strong); min-height:46px; transition: border-color .4s ease; }
.res-search:focus-within{ border-bottom-color: var(--ink); }
.res-search svg{ width:18px; height:18px; flex:none; color: var(--muted); }
.res-search input{ flex:1; min-width:0; border:none; background:transparent; font-size:1rem; padding:.5rem 0; color: var(--ink); border-radius:0; -webkit-appearance:none; appearance:none; }
.res-search input:focus{ outline:none; }
.res-chips{ display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; max-width:100%; }
.res-chips::-webkit-scrollbar{ display:none; }
.res-chip{ flex:none; min-height:42px; padding: .5em 1.1em; border-radius:100px; border:1px solid var(--rule-strong); background: transparent; font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink); white-space:nowrap; transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.res-chip:hover{ border-color: var(--ink); }
.res-chip[aria-pressed="true"]{ background: var(--forest); color: var(--paper); border-color: var(--forest); }
.res-count{ font-size:.86rem; color: var(--muted); }
.calc-cat{ margin-top: clamp(2.6rem, 5vw, 4rem); }
.calc-cat-h{ font-family: var(--font-display); font-style:italic; font-weight:600; font-size:clamp(1.8rem,2.4vw,2.2rem); color: var(--brand-deep); padding-bottom:.8rem; margin-bottom: 1.6rem; border-bottom:1px solid var(--rule); letter-spacing:0; line-height:1.2; }
/* calculator lists: title + one line, like the home services list */
.calc-list{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem 1.1rem; }
@media (max-width: 980px){ .calc-list{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .calc-list{ grid-template-columns: 1fr; gap: .8rem; } }
/* round 21 (Lucas): each calculator sits in a very faint card so they read as separate; hover firms up the edge */
.calc-item{ display:block; padding: 1.15rem 1.25rem 1.25rem; border:1px solid rgba(34,48,26,.07); border-radius: 12px; background: transparent;
  transition: border-color .35s ease, background .35s ease, box-shadow .45s var(--ease), transform .45s var(--ease); }
.calc-item h3{ font-size: clamp(1.45rem, 2vw, 1.75rem); line-height:1.08; margin-bottom:.45rem; transition: color .4s ease; }
.calc-item p{ color: var(--ink-soft); font-size:.94rem; line-height:1.6; }
.calc-item:hover, .calc-item:focus-visible{ border-color: rgba(74,122,28,.32); background: var(--white); transform: translateY(-2px);
  box-shadow: 0 14px 30px -22px rgba(29,41,21,.45); }
.calc-item:hover h3{ color: var(--brand-deep); }
.calc-item[hidden], .calc-cat[hidden]{ display:none; }
.res-empty{ margin-top: 2rem; color: var(--muted); }
/* useful links */
.links-group + .links-group{ margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.links-h{ font-family: var(--font-display); font-style:italic; font-weight:500; font-size:1.35rem; color: var(--muted); padding-bottom:.8rem; margin-bottom: 1.4rem; border-bottom:1px solid var(--rule-strong); letter-spacing:0; line-height:1.2; }
.links-list{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.4rem 2.6rem; }
@media (max-width: 860px){ .links-list{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .links-list{ grid-template-columns: 1fr; gap: 1.1rem; } }
.link-item{ display:block; }
.li-name{ display:inline-flex; align-items:baseline; gap:.4em; font-family: var(--font-display); font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height:1.15; color: var(--ink); background-image: linear-gradient(currentColor,currentColor); background-size: 0% 1px; background-repeat:no-repeat; background-position: 0 100%; transition: background-size .8s var(--ease); }
.li-name svg{ width:.62em; height:.62em; flex:none; color: var(--muted); align-self:center; }
.link-item:hover .li-name{ background-size: 100% 1px; }
.li-src{ display:block; font-size:.84rem; color: var(--muted); margin-top:.25rem; }

/* ---------- print: a clean one-pager of the results ---------- */
.calc-print-summary{ display:none; }
@media print{
  @page{ margin: 14mm 14mm 16mm; }
  body{ background:#fff !important; font-size: 11pt; }
  .site-header, .mobile-menu, .site-footer .footer-cta, .footer-grid, .footer-bar, .calc-inputs, .calc-bar, .cr-actions, .calc-question, .related, .crumbs, .skip-link{ display:none !important; }
  main > section.calc-hero:first-child{ padding: 0 0 6mm !important; background:none !important; }
  .calc-hero h1{ font-size: 26pt !important; }
  .calc-hero::before{ content:""; display:block; height: 14mm; margin-bottom: 4mm; background: url("../img/logo-source.png") left center/auto 100% no-repeat; }
  .calc-grid{ display:block; }
  .calc-print-summary{ display:block; margin: 0 0 6mm; break-inside: avoid; }
  .calc-print-summary .cps-h{ font-size:10pt; font-weight:600; color:#444; margin-bottom:2mm; }
  .calc-print-summary table{ width:100%; border-collapse:collapse; font-size:9.5pt; }
  .calc-print-summary th, .calc-print-summary td{ text-align:left; padding: 1.4mm 0; border-bottom: .3pt solid #ccc; font-weight:400; }
  .calc-print-summary td{ text-align:right; font-weight:600; }
  .calc-app{ display:flex; flex-direction:column; padding:0; }
  .calc-app .calc-print-summary{ order: -1; }
  .cr-table summary em{ display:none; }
  .cr-table-scroll{ max-height:none; overflow:visible; }
  .cr-chart, .cr-compare, .cr-headline{ break-inside: avoid; }
  .site-footer{ background:none !important; color:#444 !important; padding: 6mm 0 0 !important; }
  .footer-legal{ border:none; color:#555 !important; }
  .footer-legal p{ color:#555 !important; }
  .calc-after{ padding:0; }
  .calc-after-grid{ border:none; padding:0; display:block; }
}
.cr-headline + .cr-compare{ border-top:none; margin-top: .4rem; }

/* Paul 2026-10-24: results that are easier to scan (color keys, big numbers, grouped stats) */
.cr-key{ display:inline-block; width: 22px; height: 3px; margin-right: .55em; vertical-align: middle; position:relative; top:-.12em; background: var(--brand-deep); }
.cr-key.orange{ background: var(--accent); }
.cr-key.brown{ background: var(--brown); }
.cr-key.dashed{ background: repeating-linear-gradient(90deg, var(--brand-deep) 0 6px, transparent 6px 10px); }
.cr-stat.is-big dd{ font-family: var(--font-display); font-weight:500; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height:1.05; letter-spacing:-.01em; }
.cr-col.key-green .cr-stat.is-big dd{ color: var(--brand-deep); }
.cr-col.key-orange .cr-stat.is-big dd{ color: var(--accent-deep); }
.cr-col.key-brown .cr-stat.is-big dd{ color: var(--brown); }
.cr-group{ margin-top: 2.2rem; }
.cr-group-h{ font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--muted); padding-bottom: .6rem; border-bottom:1px solid var(--rule); margin-bottom: 1rem; }
.cr-group .cr-stats{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.cr-group.is-band{ background: var(--tint-sage); padding: 1.5rem 1.6rem; border-radius: 2px; }
.cr-group.is-band .cr-stats{ grid-template-columns: repeat(3, minmax(0,1fr)); align-items:end; }
.cr-group.is-band .cr-stat dd{ font-family: var(--font-display); font-weight:500; font-size: clamp(1.7rem, 2.3vw, 2.1rem); }
.cr-group.is-band .cr-stat.is-op dd{ color: var(--muted); }
@media (max-width: 560px){ .cr-group .cr-stats, .cr-group.is-band .cr-stats{ grid-template-columns: 1fr; } }