/* ============================================================
   RIEL Compliance Suite — ROI calculator (roi.html only)

   Loaded after css/site.css and used by exactly one page. The
   wizard, the payer table, the ladder and the print sheet live
   here rather than in site.css because site.css is downloaded on
   every page of the site and the home page uses none of this.

   What is deliberately NOT redefined here: .wrap, .band,
   .band--navy, .band--offwhite, .btn, .btn--primary, .btn--ghost,
   .eyebrow, .lede, .sr-only, and .stat-row / .stat / .stat__num /
   .stat__label / .stat__sub. Those come from site.css unchanged;
   the KPI strip is the reason the .stat* family stayed in site.css
   when the home page's cost-of-delay section was removed.

   Colour rules inherited from the site and not negotiable here:
     - var(--teal) #18A999 is 2.92:1 on white. It is never a text
       colour on a light background. --teal-deep is, at 4.88:1.
     - red is only ever permanent loss; green is only ever
       recovered value. Nothing else on this page carries colour.
   ============================================================ */

:root{
  /* On white / --offwhite. #B3261E = 6.5:1, --teal-deep = 4.9:1. */
  --roi-loss:#B3261E;
  --roi-gain:var(--teal-deep);
  /* On --navy-band (#0A1E38). 8.9:1 and 10.7:1 respectively — the
     light-background pair would be far too dark to read there. */
  --roi-loss-dark:#FFA79C;
  --roi-gain-dark:#7FE0D2;
  --roi-line:#DBE3EB;
  /* Input borders are held to a higher bar than the decorative
     dividers above. Every field on this page is white-on-white:
     the border is the ONLY thing that identifies the control, so
     it has to clear 3:1 (WCAG 1.4.11). --roi-line is 1.3:1 and is
     correct for a divider and wrong for a field edge. */
  --roi-input-line:#818F9F;
  --roi-ink:#1F3550;      /* 10.9:1 on white — table figures and field values */
  /* Offset the sticky KPI strip parks at: the height of the fixed
     header. This is the fallback value (measured: 75px, driven by
     the 40px nav CTA, not the 32px logo). roi.js overwrites it with
     the real measurement on load and on resize, so a future change
     to the nav cannot silently leave a strip of page showing through
     the gap. Matches site.css's section[id] scroll-margin-top:76px. */
  --roi-header:75px;
}

/* ---- Intro ------------------------------------------------- */
.roi-intro{
  padding-bottom:64px;
}

.roi-intro h1{
  max-width:900px;
  margin:0 0 24px;
  color:var(--white);
  font-size:var(--fs-6);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
}

.roi-intro .lede{
  max-width:680px;
  margin-bottom:32px;
}

.roi-intro__actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

@media (max-width:767px){
  .roi-intro{ padding-bottom:40px; }
  .roi-intro h1{ font-size:var(--fs-5); }
}

/* ---- Live KPI strip ----------------------------------------
   Sticky under the fixed header. This is what makes a stepped
   form honest: the totals stay on screen while the visitor is
   still entering assumptions, so the number is never revealed
   only at the end.
   ------------------------------------------------------------ */
.roi-kpis{
  position:sticky;
  top:var(--roi-header);
  z-index:50;
  padding-block:16px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.roi-kpis .stat-row{
  margin:0;
}

.roi-kpis .stat{
  padding-inline:24px;
}

.roi-kpis .stat__num{
  margin-bottom:4px;
  font-size:var(--fs-5);
  font-variant-numeric:tabular-nums;
}

.roi-kpis .stat__label{
  margin-bottom:2px;
  font-size:11px;
}

.roi-kpis .stat__sub{
  font-size:var(--fs-1);
}

/* The only two coloured numbers on the page, plus a neutral third.
   Overrides .band--navy .stat__num's teal, which would give three
   near-identical figures where the whole point is that one is a
   loss and one is a gain. */
.roi-kpis .stat__num--loss{ color:var(--roi-loss-dark); }
.roi-kpis .stat__num--gain{ color:var(--roi-gain-dark); }
.roi-kpis .stat__num--neutral{ color:var(--white); }

/* site.css stacks .stat-row to one column at <=768px. Here the
   strip has to stay three-up at every width or it would push the
   wizard entirely off a 375px screen while sticky. */
@media (max-width:768px){
  .roi-kpis .stat-row{
    grid-template-columns:repeat(3, 1fr);
    gap:0;
    margin:0;
  }

  .roi-kpis .stat{
    padding-top:0;
    padding-inline:10px;
    border-top:none;
    border-left:1px solid rgba(255,255,255,.15);
  }

  .roi-kpis .stat:first-child{
    padding-left:0;
    border-left:none;
  }

  .roi-kpis .stat__num{ font-size:var(--fs-4); }
  .roi-kpis .stat__label{ font-size:9px; letter-spacing:.04em; }
  .roi-kpis .stat__sub{ font-size:11px; }
}

/* ---- Calculator band --------------------------------------- */
.roi-calc{
  padding-block:56px;
}

/* site.css's generic `a:focus-visible, button:focus-visible` ring is
   var(--teal), which is 5.7:1 over the navy bands it was written for
   and 2.92:1 on white — under the 3:1 a focus indicator needs. Every
   button the calculator adds sits on this light band, so they all get
   --teal-deep (4.9:1) instead. Same substitution site.css already
   makes for the carousel arrows and dots. The two buttons in the navy
   intro keep the inherited teal ring, where it measures fine.
   Inputs, the advanced <summary> and the panel headings set their own
   ring below; this covers the wizard tabs, Back/Next, Add payer and
   the row delete buttons. */
.roi-calc button:focus-visible{
  outline:3px solid var(--teal-deep);
  outline-offset:2px;
}

/* ---- Wizard ------------------------------------------------ */
.wiz{
  border:1px solid var(--roi-line);
  border-radius:var(--radius);
  background:var(--white);
  overflow:hidden;
}

.wiz__progress{
  padding:24px 28px 0;
  border-bottom:1px solid var(--roi-line);
}

.wiz__track{
  height:4px;
  border-radius:2px;
  background:var(--sky);
  overflow:hidden;
}

.wiz__track i{
  display:block;
  height:100%;
  border-radius:2px;
  background:var(--teal-deep);
  transition:width .25s ease;
}

.wiz__steps{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:0;
  padding:8px 0 0;
}

.wiz__steps li{
  flex:1 1 0;
  min-width:0;
}

.wiz__step{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:14px 8px;
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  color:var(--slate);
  font:inherit;
  font-size:var(--fs-2);
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}

.wiz__step-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--sky);
  color:var(--navy);
  font-size:var(--fs-1);
  font-weight:700;
}

.wiz__step-t{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.wiz__step:hover{
  color:var(--navy);
}

.wiz__step.is-done .wiz__step-n{
  background:var(--teal-deep);
  color:var(--white);
}

.wiz__step[aria-current="step"]{
  color:var(--navy);
  border-bottom-color:var(--navy);
}

.wiz__step[aria-current="step"] .wiz__step-n{
  background:var(--navy);
  color:var(--white);
}

.wiz__panel{
  padding:28px;
}

.wiz__panel[hidden]{
  display:none;
}

.wiz__panel-title{
  margin:0 0 8px;
  color:var(--navy);
  font-size:var(--fs-5);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
}

/* The heading receives focus on every step change (tabindex="-1"),
   so it needs a ring of its own — otherwise the focus lands on an
   element with no visible indicator. */
.wiz__panel-title:focus-visible{
  outline:3px solid var(--teal-deep);
  outline-offset:4px;
  border-radius:4px;
}

.wiz__panel-note{
  max-width:76ch;
  margin:0 0 24px;
  font-size:var(--fs-2);
  line-height:1.6;
  color:var(--slate);
}

.wiz__nav{
  display:flex;
  gap:12px;
  padding:0 28px 28px;
}

.wiz__btn{
  padding:12px 28px;
  font-size:var(--fs-2);
}

.wiz__btn[disabled]{
  opacity:.35;
  cursor:default;
}

.wiz__nav .btn--primary{
  margin-left:auto;
}

@media (prefers-reduced-motion: reduce){
  .wiz__track i,
  .wiz__step{ transition:none; }
}

@media (max-width:767px){
  .wiz__progress{ padding:18px 18px 0; }
  .wiz__panel{ padding:20px 18px; }
  .wiz__nav{ padding:0 18px 20px; }
  /* Four labelled tabs do not fit on a 375px row; the numbers alone
     still carry position, and #wiz-status announces the step name. */
  .wiz__step-t{ display:none; }
  .wiz__step{ justify-content:center; padding:12px 4px; }
}

/* ---- Fields ------------------------------------------------- */
.roi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px 24px;
}

.roi-grid--tight{
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:14px 20px;
  margin-bottom:8px;
}

/* Column + margin-top:auto on the input (below) bottom-aligns every
   field box in a grid row. Without it, a one-line label next to a
   two-line one leaves their inputs on different baselines — which is
   exactly what happened when the model symbols came out of the hints
   and half of them lost their second line. Grid items stretch to the
   row height by default, so this holds for any mix of label lengths
   at any column count. */
.roi-field{
  display:flex;
  flex-direction:column;
}

.roi-field label{
  display:block;
  margin-bottom:6px;
  font-size:var(--fs-2);
  font-weight:600;
  color:var(--navy);
  line-height:1.35;
}

.roi-field__hint{
  display:block;
  font-weight:400;
  font-size:var(--fs-1);
  color:var(--slate);
}

.roi-field input{
  width:100%;
  margin-top:auto;
  padding:11px 14px;
  font:inherit;
  font-size:var(--fs-3);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--roi-ink);
  background:var(--white);
  border:1px solid var(--roi-input-line);
  border-radius:10px;
}

.roi-field input:hover{
  border-color:var(--navy);
}

.roi-field input:focus-visible{
  outline:2px solid var(--teal-deep);
  outline-offset:1px;
  border-color:var(--teal-deep);
}

/* ---- Payer table -------------------------------------------
   .roi-scroll is a scroll container of its own so a six-column
   table cannot give the *page* a horizontal scrollbar at 375px.
   ------------------------------------------------------------ */
.roi-scroll{
  overflow-x:auto;
  margin-bottom:16px;
  /* Room for the input focus ring, which overflow:auto would clip. */
  padding:3px;
  margin-inline:-3px;
}

.roi-payers{
  width:100%;
  min-width:660px;
  border-collapse:collapse;
}

.roi-payers th{
  padding:0 8px 8px;
  border-bottom:2px solid var(--navy);
  color:var(--slate);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:left;
}

.roi-payers__name{
  width:26%;
}

.roi-payers td{
  padding:6px 8px;
  border-bottom:1px solid var(--roi-line);
}

.roi-payers input{
  width:100%;
  padding:8px 10px;
  font:inherit;
  font-size:var(--fs-2);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--roi-ink);
  background:var(--white);
  border:1px solid var(--roi-input-line);
  border-radius:8px;
}

.roi-payers input:hover{
  border-color:var(--navy);
}

.roi-payers input:focus-visible{
  outline:2px solid var(--teal-deep);
  outline-offset:1px;
  border-color:var(--teal-deep);
}

.roi-payer__name{
  font-weight:600;
}

.roi-payer__x{
  width:44px;
  text-align:center;
}

.roi-payer__del{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  background:none;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--slate);
  cursor:pointer;
}

.roi-payer__del:hover:not([disabled]){
  border-color:var(--roi-loss);
  color:var(--roi-loss);
}

.roi-payer__del[disabled]{
  opacity:.3;
  cursor:default;
}

.roi-addrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  background:var(--white);
  border:1px solid var(--navy);
  border-radius:999px;
  color:var(--navy);
  font:inherit;
  font-size:var(--fs-2);
  font-weight:600;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}

.roi-addrow:hover{
  background:var(--navy);
  color:var(--white);
}

@media (prefers-reduced-motion: reduce){
  .roi-addrow{ transition:none; }
}

/* ---- Notes and warnings ------------------------------------- */
.roi-note{
  max-width:76ch;
  margin:16px 0 0;
  font-size:var(--fs-2);
  line-height:1.6;
  color:var(--slate);
}

.roi-note--quiet{
  padding-left:14px;
  border-left:2px solid var(--roi-line);
  font-size:var(--fs-1);
}

.roi-note[hidden]{
  display:none;
}

/* Validation rule 1: visible, but never blocking — the figures
   keep updating underneath it. */
.roi-warn{
  max-width:76ch;
  margin:16px 0 0;
  padding:12px 16px;
  border-left:3px solid var(--roi-loss);
  border-radius:0 8px 8px 0;
  background:#FDF0EE;
  color:var(--roi-loss);
  font-size:var(--fs-2);
  font-weight:600;
  line-height:1.5;
}

.roi-warn[hidden]{
  display:none;
}

/* ---- Advanced block ----------------------------------------- */
.roi-adv{
  margin-top:20px;
  border:1px solid var(--roi-line);
  border-radius:var(--radius);
  background:var(--white);
  overflow:hidden;
}

.roi-adv > summary{
  display:block;
  padding:18px 24px;
  cursor:pointer;
  list-style:none;
}

.roi-adv > summary::-webkit-details-marker{ display:none; }

.roi-adv > summary:focus-visible{
  outline:3px solid var(--teal-deep);
  outline-offset:-3px;
}

.roi-adv__title{
  display:block;
  color:var(--navy);
  font-size:var(--fs-3);
  font-weight:700;
}

.roi-adv__title::before{
  content:'+';
  display:inline-block;
  width:1.2em;
  color:var(--teal-deep);
  font-weight:700;
}

.roi-adv[open] .roi-adv__title::before{
  content:'−';
}

.roi-adv__hint{
  display:block;
  margin-top:4px;
  padding-left:1.2em;
  font-size:var(--fs-1);
  color:var(--slate);
}

.roi-adv__body{
  padding:0 24px 24px;
}

.roi-adv__h{
  margin:8px 0 14px;
  color:var(--navy);
  font-size:var(--fs-1);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width:767px){
  .roi-adv > summary{ padding:16px 18px; }
  .roi-adv__body{ padding:0 18px 18px; }
}

/* ---- Results ------------------------------------------------ */
.roi-results .eyebrow{
  color:var(--teal-deep);
}

.roi-lede{
  max-width:70ch;
}

.roi-h3{
  margin:40px 0 16px;
  color:var(--navy);
  font-size:var(--fs-4);
  font-weight:700;
  line-height:1.3;
}

/* ---- Prudence ladder ---------------------------------------- */
.ladder{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-bottom:32px;
}

.ladder__head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:8px;
}

.ladder__name{
  color:var(--navy);
  font-size:var(--fs-3);
  font-weight:700;
}

.ladder__amt{
  margin-left:auto;
  font-size:var(--fs-5);
  font-weight:800;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

.ladder__bar{
  height:14px;
  border-radius:7px;
  background:#E4EAF1;
  overflow:hidden;
}

.ladder__bar i{
  display:block;
  height:100%;
  border-radius:7px;
  transition:width .25s ease;
}

.ladder__desc{
  max-width:76ch;
  margin:8px 0 0;
  font-size:var(--fs-2);
  line-height:1.55;
  color:var(--slate);
}

/* Level 1 is context, not a claim: it carries no accent colour.
   #5D7897 rather than a lighter slate so the fill still clears 3:1
   against the track — the bar carries information, not decoration. */
.ladder__step--1 .ladder__amt{ color:var(--navy); }
.ladder__step--1 .ladder__bar i{ background:#5D7897; }
.ladder__step--2 .ladder__amt{ color:var(--roi-gain); }
.ladder__step--2 .ladder__bar i{ background:var(--roi-gain); }
.ladder__step--3 .ladder__amt{ color:var(--roi-loss); }
.ladder__step--3 .ladder__bar i{ background:var(--roi-loss); }

@media (prefers-reduced-motion: reduce){
  .ladder__bar i{ transition:none; }
}

@media (max-width:479px){
  .ladder__head{
    flex-direction:column;
    gap:2px;
  }
  .ladder__amt{ margin-left:0; }
}

/* ---- Carrying cost (B.16 / B.17) ---------------------------- */
.roi-carry{
  max-width:76ch;
  margin:0;
  padding:18px 22px;
  border-left:3px solid var(--navy);
  background:var(--white);
  border-radius:0 10px 10px 0;
  font-size:var(--fs-2);
  line-height:1.6;
  color:var(--slate);
}

.roi-carry strong{
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}

/* ---- Result tables ------------------------------------------ */
.roi-rt{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
}

.roi-rt th{
  padding:10px 12px;
  background:var(--navy);
  color:var(--white);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:right;
}

.roi-rt thead th:first-child{
  text-align:left;
}

.roi-rt td{
  padding:9px 12px;
  border-bottom:1px solid var(--roi-line);
  font-size:var(--fs-2);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.roi-rt tbody th{
  padding:9px 12px;
  background:none;
  border-bottom:1px solid var(--roi-line);
  color:var(--navy);
  font-size:var(--fs-2);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  text-align:left;
}

.roi-rt__total th,
.roi-rt__total td{
  border-top:2px solid var(--navy);
  border-bottom:none;
  font-weight:700;
  color:var(--navy);
}

.roi-rt .is-loss{ color:var(--roi-loss); font-weight:700; }
.roi-rt .is-gain{ color:var(--roi-gain); font-weight:700; }

.roi-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

@media (max-width:900px){
  .roi-two{
    grid-template-columns:1fr;
    gap:8px;
  }
}

.roi-mini{
  width:100%;
  border-collapse:collapse;
}

.roi-mini th{
  padding:9px 0;
  border-bottom:1px solid var(--roi-line);
  color:var(--slate);
  font-size:var(--fs-2);
  font-weight:500;
  text-align:left;
}

.roi-mini td{
  padding:9px 0;
  border-bottom:1px solid var(--roi-line);
  color:var(--navy);
  font-size:var(--fs-2);
  font-weight:600;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.roi-mini .is-hi th,
.roi-mini .is-hi td{
  color:var(--navy);
  font-weight:700;
}

/* ---- Break-even (C.9) --------------------------------------- */
.roi-threshold{
  margin-top:40px;
  padding:28px 32px;
  border-radius:var(--radius);
  background:var(--navy);
  color:var(--white);
}

.roi-threshold__label{
  margin:0 0 10px;
  font-size:var(--fs-1);
  font-weight:700;
  letter-spacing:.1em;
  color:var(--roi-gain-dark);
}

.roi-threshold__text{
  margin:0;
  max-width:66ch;
  font-size:var(--fs-4);
  font-weight:600;
  line-height:1.45;
}

.roi-threshold__text strong{
  color:var(--roi-gain-dark);
  font-weight:800;
}

@media (max-width:767px){
  .roi-threshold{ padding:22px 20px; }
  .roi-threshold__text{ font-size:var(--fs-3); }
}

/* ---- Methodology -------------------------------------------- */
.roi-method .eyebrow{
  color:var(--teal-deep);
}

.roi-method__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-top:8px;
}

@media (max-width:900px){
  .roi-method__grid{
    grid-template-columns:1fr;
    gap:0;
  }
}

.roi-method__col p{
  max-width:70ch;
  margin:0 0 14px;
  font-size:var(--fs-2);
  line-height:1.65;
}

.roi-method__col strong{
  color:var(--navy);
}

/* There is deliberately no `code` rule here any more. The methodology
   used to print the numbered formulas verbatim; it now states the
   model's three honest claims and the regulatory anchors in prose,
   with no symbols and no code blocks, so nothing on either page is a
   <code> element and the rule that styled them would be dead. */

.roi-disclaimer{
  margin-top:28px !important;
  padding-left:16px;
  border-left:3px solid var(--roi-line);
  font-size:var(--fs-1) !important;
  color:var(--slate);
}

/* ============================================================
   Print — a board handout, not a screenshot of a web page.
   Shows every assumption entered (all four steps at once, plus
   the advanced block) followed by every result, and drops the
   site chrome, the controls and the long methodology prose. The
   disclaimer survives, because a number taken to a Board without
   it is a number taken out of context.
   ============================================================ */
@media print{
  header,
  footer,
  .roi-intro__actions,
  .wiz__progress,
  .wiz__nav,
  .roi-addrow,
  .roi-payer__x,
  .roi-note--quiet,
  .roi-method__col > p,
  .roi-method__col > .roi-h3,
  .roi-method h2{
    display:none !important;
  }

  /* The disclaimer is a <p> inside .roi-method__col and would be
     caught by the rule above. It is the one piece that stays. */
  .roi-method__col > p.roi-disclaimer{
    display:block !important;
    margin-top:8px !important;
    padding-left:12px;
    border-left:2px solid #999;
  }

  body{
    font-size:11px;
    line-height:1.45;
    color:#000;
    background:#fff;
  }

  .band{ padding-block:0 !important; }
  .wrap{ max-width:100%; padding-inline:0; }

  .roi-intro,
  .roi-kpis,
  .roi-threshold,
  .roi-rt th{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  .roi-intro{ padding:12px 0 !important; }
  .roi-intro h1{ font-size:17px; margin-bottom:6px; }
  .roi-intro .lede{ display:none; }

  .roi-kpis{
    position:static;
    padding-block:10px;
    border-bottom:none;
  }
  .roi-kpis .stat__num{ font-size:18px; }

  .roi-calc,
  .roi-results,
  .roi-method{ padding-block:10px !important; }

  /* Every step at once: the printout has to carry the assumptions
     the numbers came from, and on screen three of the four are
     hidden behind the wizard. */
  .wiz__panel[hidden]{ display:block !important; }
  .wiz{ border:none; }
  .wiz__panel{ padding:6px 0; page-break-inside:avoid; }
  .wiz__panel-title{ font-size:13px; margin-bottom:4px; }
  .wiz__panel-note{ display:none; }

  .roi-grid,
  .roi-grid--tight{
    grid-template-columns:repeat(4, 1fr);
    gap:6px 14px;
  }

  .roi-field label{ font-size:9px; margin-bottom:0; }
  .roi-field__hint{ display:none; }
  .roi-field input,
  .roi-payers input{
    padding:0;
    font-size:11px;
    border:none;
    border-bottom:1px solid #CCC;
    border-radius:0;
    background:none;
  }

  .roi-adv{ border:none; margin-top:6px; }
  .roi-adv > summary{ padding:6px 0; }
  .roi-adv__title{ font-size:12px; }
  .roi-adv__title::before{ content:''; width:0; }
  .roi-adv__hint{ display:none; }
  .roi-adv__body{ padding:0; display:block !important; }

  .roi-scroll{ overflow:visible; }
  .roi-payers,
  .roi-rt{ min-width:0; }
  .roi-payers th,
  .roi-rt th{ font-size:8px; padding:3px 4px; }
  .roi-payers td,
  .roi-rt td,
  .roi-rt tbody th,
  .roi-mini th,
  .roi-mini td{ font-size:10px; padding:3px 4px; }

  .ladder{ gap:10px; margin-bottom:12px; page-break-inside:avoid; }
  .ladder__amt{ font-size:15px; }
  .ladder__desc{ font-size:9px; }
  .ladder__bar{ height:8px; }

  .roi-h3{ margin:12px 0 6px; font-size:12px; }
  .roi-carry{ padding:8px 12px; font-size:10px; }
  /* A print sheet is ~7.5in wide, inside the 900px breakpoint that
     stacks these two on screen. Stacked they push the handout past
     two pages; side by side they fit, and both are narrow
     label/value tables that never needed the width. */
  .roi-two{ grid-template-columns:1fr 1fr; gap:24px; page-break-inside:avoid; }
  .roi-threshold{ margin-top:14px; padding:12px 16px; page-break-inside:avoid; }
  .roi-threshold__text{ font-size:12px; }

  .roi-results h2,
  .roi-results .lede{ display:none; }
}