/* Savings results page — everything that is not already in styles.css.
   The hero, nav and footer classes are shared; this file only shortens the hero
   and builds the ROI calculator, the three "not in the sum" cards and the price
   strip. Chart colours: grey is today, green is with us, and they mean the same
   thing in every tile. */

/* ── Header ────────────────────────────────────────────────────────────────── */
/* The nav used to be positioned absolutely over the hero photo. With the hero
   gone it sits in normal flow instead, and the 24px padding keeps the same gap
   to the calculator card that the hero card used to leave. */
.savings-header { padding: 24px; }
.savings-header .nav-wrap { position: static; transform: none; margin: 0 auto; }
.nav-brand-link { text-decoration: none; }

/* ── Calculator shell ──────────────────────────────────────────────────────── */
.roi-section { position: relative; }
.roi-shell { max-width: 1500px; margin: 0 auto; padding: 0 24px 24px; }
.roi-frame { position: relative; overflow: hidden; border: 1px solid rgba(45,42,38,0.08); border-radius: 30px; background: radial-gradient(circle at top center, rgba(168,138,109,0.06), transparent 22%), linear-gradient(180deg, #f2eee8 0%, #e8e2d9 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 24px 60px rgba(0,0,0,0.06); }
.roi-inner { position: relative; z-index: 1; padding: 84px 44px 76px; }
.roi-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.roi-kicker { margin: 0 0 16px; font-size: 11px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze-ink); }
.roi-title { margin: 0; font-size: clamp(2.1rem, 3.8vw, 3.6rem); line-height: 0.98; letter-spacing: -0.05em; color: var(--ink); }
.roi-title .reveal-line { display: block; }
.roi-intro { margin: 22px auto 0; max-width: 560px; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
/* No `overflow: hidden` here on purpose: the tooltips hang outside this box and
   hidden overflow sliced them off at the border. Nothing needed the clip —
   .roi-controls and .roi-output paint no background of their own, so the
   rounded corners come from this element's own background and border. */
.roi-grid { display: grid; grid-template-columns: 380px 1fr; gap: 0; max-width: 1180px; margin: 0 auto; border: 1px solid rgba(45,42,38,0.10); border-radius: 24px; background: rgba(255,255,255,0.40); }

/* ── Sliders and toggles ───────────────────────────────────────────────────── */
.roi-controls { padding: 34px 32px; display: flex; flex-direction: column; gap: 26px; border-right: 1px solid rgba(45,42,38,0.10); }
.roi-ctrl { display: flex; flex-direction: column; gap: 9px; }
.roi-ctrl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.roi-ctrl label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.roi-ctrl output { font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.roi-ctrl input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.roi-ctrl input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: rgba(45,42,38,0.16); }
.roi-ctrl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border-radius: 50%; background: var(--bronze); border: 3px solid var(--paper); box-shadow: 0 2px 8px rgba(45,42,38,0.28); }
.roi-ctrl input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(45,42,38,0.16); }
.roi-ctrl input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--bronze); border: 3px solid var(--paper); box-shadow: 0 2px 8px rgba(45,42,38,0.28); }
.roi-ctrl input[type="range"]:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; border-radius: 4px; }

.roi-toggles { margin: 4px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid rgba(45,42,38,0.10); display: flex; flex-direction: column; gap: 14px; }
.roi-toggles legend { padding: 0 8px 0 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.roi-toggle { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.roi-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.roi-toggle-box { width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; border: 1px solid rgba(45,42,38,0.28); background: rgba(255,255,255,0.6); position: relative; transition: background 160ms ease, border-color 160ms ease; }
.roi-toggle-box::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0.4); opacity: 0; transition: opacity 160ms ease, transform 160ms ease; }
.roi-toggle input:checked + .roi-toggle-box { background: var(--ink); border-color: var(--ink); }
.roi-toggle input:checked + .roi-toggle-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.roi-toggle input:focus-visible + .roi-toggle-box { outline: 2px solid var(--bronze); outline-offset: 3px; }
.roi-toggle-text { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.roi-toggle-text b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.roi-setup-line { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.roi-setup-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── The answer ────────────────────────────────────────────────────────────── */
.roi-output { padding: 34px 32px; display: flex; flex-direction: column; gap: 26px; }
.roi-result { display: flex; flex-direction: column; gap: 12px; }
.roi-verdict { margin: 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #3f5d4b; }
.roi-result[data-state="time"] .roi-verdict { color: #8f4231; }
.roi-headline { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.08; letter-spacing: -0.04em; color: var(--ink); }
.roi-amount { color: #3f5d4b; }
.roi-sub { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.roi-sub b { color: var(--ink); font-weight: 600; }
.roi-flag { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink); background: rgba(168,138,109,0.14); border-radius: 10px; padding: 11px 14px; }
.roi-flag[hidden], .roi-verdict[hidden] { display: none; }
.roi-takeaways { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.roi-takeaways li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.roi-takeaways li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 4px; background: #3f5d4b; border-radius: 1px; }
.roi-takeaways b { color: var(--ink); font-weight: 600; }

/* ── The four tiles ────────────────────────────────────────────────────────── */
.roi-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.roi-tile { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid rgba(45,42,38,0.10); border-radius: 16px; background: #f4f1ec; }
.roi-tile-label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.roi-tile-note { margin: auto 0 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.roi-tile-note iconify-icon { flex: 0 0 auto; margin-top: 3px; opacity: 0.7; }

.roi-bars { display: flex; flex-direction: column; justify-content: center; gap: 12px; margin: auto 0; }
.roi-bar-row { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 10px; }
.roi-bar-name { font-size: 12.5px; color: var(--ink-soft); }
.roi-bar-track { display: block; height: 14px; border-radius: 4px; background: rgba(45,42,38,0.06); overflow: hidden; }
.roi-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width 220ms ease; }
.roi-bar-fill.is-today { background: #9a9188; }
.roi-bar-fill.is-after { background: #3f5d4b; }
.roi-bar-value { font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.roi-line-chart { width: 100%; height: auto; display: block; overflow: visible; }
.roi-axis { font-family: 'Mona Sans', sans-serif; font-size: 9.5px; fill: rgba(95,88,80,0.75); font-variant-numeric: tabular-nums; }
.roi-point-label { font-family: 'Mona Sans', sans-serif; font-size: 12px; font-weight: 600; fill: #2d2a26; }

.roi-tile--badge { justify-content: flex-start; }
.roi-badge-figure { margin: 0; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -0.05em; color: #3f5d4b; }
.roi-scorecard { width: 100%; border-collapse: collapse; font-size: 13px; }
.roi-scorecard th { padding: 0 0 8px; text-align: left; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid rgba(45,42,38,0.10); }
.roi-scorecard td { padding: 8px 0; color: var(--ink); border-bottom: 1px solid rgba(45,42,38,0.06); font-variant-numeric: tabular-nums; }
.roi-scorecard td:last-child, .roi-scorecard th:last-child { text-align: right; }
.roi-tile--locked .roi-scorecard { opacity: 0.55; }
.roi-example-chip { padding: 3px 8px; border-radius: 999px; background: rgba(168,138,109,0.18); color: var(--bronze-ink); font-size: 9.5px; letter-spacing: 0.1em; }

.roi-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── The working, and the price it is measured against ─────────────────────── */
.roi-working { border-top: 1px solid rgba(45,42,38,0.10); padding-top: 18px; }
.roi-working summary { cursor: pointer; font-size: 13px; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.roi-working summary::-webkit-details-marker { display: none; }
.roi-working summary::before { content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(45,42,38,0.2); font-size: 13px; line-height: 1; }
.roi-working[open] summary::before { content: '–'; }
.roi-working summary:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 4px; }
.roi-working-list { margin: 16px 0 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.roi-working-list li { margin-bottom: 7px; }
.roi-working-list li::marker { color: var(--ink-soft); }
.roi-working-list b { color: var(--ink); }
.roi-terms { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }

/* ── The gate, and what it hides ───────────────────────────────────────────── */
/* Locked is the state in the markup, so the real numbers are never painted before
   an email has been given. Unlocking is a class removal, nothing more. */
.roi-output.is-locked > .roi-result,
.roi-output.is-locked > .roi-tiles,
.roi-output.is-locked > .roi-working,
.roi-output.is-locked > .roi-download { display: none; }
.roi-output:not(.is-locked) > .roi-gate { display: none; }

.roi-gate { display: flex; flex-direction: column; gap: 10px; padding: 30px 28px; border: 1px solid rgba(45,42,38,0.10); border-radius: 18px; background: #f4f1ec; }
.roi-gate-title { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -0.04em; color: var(--ink); }
.roi-gate-sub { margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.roi-gate .roi-capture { border-top: 0; padding-top: 0; }

/* ── The email box ─────────────────────────────────────────────────────────── */
.roi-capture { border-top: 1px solid rgba(45,42,38,0.10); padding-top: 22px; }
.roi-capture-label { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.roi-capture-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.roi-capture input[type="email"] { flex: 1 1 240px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(45,42,38,0.16); background: rgba(255,255,255,0.7); color: var(--ink); font-family: inherit; font-size: 14px; }
.roi-capture input[type="email"]:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.roi-capture-btn { min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: transform 180ms ease, opacity 180ms ease; }
.roi-capture-btn:hover { transform: translateY(-1px); }
.roi-capture-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.roi-capture-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.roi-capture-note a { color: var(--ink); }
.roi-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── The copy to take away ─────────────────────────────────────────────────── */
.roi-download { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border-top: 1px solid rgba(45,42,38,0.10); padding-top: 22px; }
.roi-download-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.roi-download-note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }

/* ── Three things we couldn't price ────────────────────────────────────────── */
.roi-extras-section { padding: 96px 24px 40px; }
.roi-extras-shell { max-width: 1180px; margin: 0 auto; }
.roi-extras-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.roi-extras-head .roi-intro { color: var(--text-soft); }
.roi-extras-title { margin: 0; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -0.05em; color: var(--text); }
.roi-extras-title .reveal-line { display: block; }
.roi-extras-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.roi-extra { padding: 30px 26px; border: 1px solid var(--border-dark); border-radius: 20px; background: linear-gradient(180deg, rgba(23,26,28,0.9), rgba(14,16,17,0.96)); }
.roi-extra iconify-icon { color: var(--bronze); }
.roi-extra h3 { margin: 16px 0 10px; font-size: 18px; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); }
.roi-extra p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-soft); }

/* ── Price strip ───────────────────────────────────────────────────────────── */
.roi-cta-section { padding: 60px 24px 96px; }
.roi-cta-shell { max-width: 1180px; margin: 0 auto; }
.roi-cta-frame { padding: 60px 40px; border: 1px solid var(--border-dark); border-radius: 26px; background: radial-gradient(circle at 50% 0%, rgba(168,138,109,0.10), transparent 40%), linear-gradient(180deg, rgba(23,26,28,0.92), rgba(14,16,17,0.98)); text-align: center; }
.roi-cta-title { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1; letter-spacing: -0.05em; color: var(--text); }
.roi-cta-price { margin: 20px 0 0; font-size: 14px; line-height: 1.8; color: var(--text-soft); }
.roi-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.roi-cta-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid rgba(231,227,218,0.18); background: rgba(231,227,218,0.06); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; transition: transform 180ms ease, background 180ms ease; }
.roi-cta-btn.primary { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.roi-cta-btn:hover { transform: translateY(-1px); }

/* ── Narrower screens ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .roi-grid { grid-template-columns: 1fr; }
  .roi-controls { border-right: 0; border-bottom: 1px solid rgba(45,42,38,0.10); }
  .roi-extras-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Every millimetre of padding here comes out of the chart, which is the
     narrowest thing on the page. Give it the room. */
  .roi-shell { padding: 0 16px 16px; }
  .roi-inner { padding: 60px 16px 56px; }
  .roi-controls, .roi-output { padding: 26px 16px; }
  .roi-tile { padding: 18px 16px; }
  .roi-tiles { grid-template-columns: 1fr; }
  /* SVG text scales with the viewBox, so it needs bigger user units to stay
     readable once the chart is squeezed. */
  .roi-axis { font-size: 13px; }
  .roi-point-label { font-size: 16px; }
  .savings-header { padding: 14px; }
  .roi-extras-section { padding: 72px 20px 32px; }
  .roi-cta-frame { padding: 44px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .roi-bar-fill { transition: none; }
}

/* ── On paper ──────────────────────────────────────────────────────────────── */
/* A stopgap until the designed one-pager exists (HYBRIDA-992). It keeps the
   results and throws away everything that only makes sense on screen: the nav,
   the sliders, the footer, and the button that opened the print box. */
@media print {
  .savings-header,
  .site-footer-v1,
  .roi-controls,
  .roi-gate,
  .roi-download,
  .roi-cta-btns,
  .mobile-menu { display: none !important; }

  .roi-frame, .roi-grid, .roi-tile, .roi-gate { border: 1px solid #ddd; box-shadow: none; background: #fff; }
  .roi-inner { padding: 0; }
  .roi-shell, .roi-extras-section, .roi-cta-section { padding: 0; }
  .roi-grid { grid-template-columns: 1fr; }
  .roi-output { padding: 0; }
  .roi-tiles { grid-template-columns: 1fr 1fr; }
  .roi-working summary { display: none; }

  /* The three benefit cards and the price strip are built for a dark page; on
     white paper they need their own ink. */
  .roi-extra, .roi-cta-frame { background: #fff; border: 1px solid #ddd; color: #2d2a26; }
  .roi-extra h3, .roi-extra p, .roi-extras-title, .roi-cta-title, .roi-cta-price { color: #2d2a26; }

  a[href]::after { content: ''; }
}