/* Warm noise overlay used behind the whole page */
    .grain-warm {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14  0 0 0 0 0.14  0 0 0 0 0.14  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }

    /* Override shared nav-scrolled with cream tint for bg-base body */
    .nav-scrolled { background: rgba(248,248,247,0.78); }
    /* Phones have no backdrop blur (mobile.css) — near-opaque so text can't bleed through */
    @media (max-width: 767.98px) {
      .nav-scrolled { background: rgba(248,248,247,0.96); }
    }

    .lum {
      box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 30px 80px -40px rgba(36,36,36,0.18),
        0 4px 16px -8px rgba(36,36,36,0.06);
    }

    @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    .rise { animation: rise 900ms cubic-bezier(.2,.7,.2,1) both; }
    .rise-1 { animation-delay: 60ms; }
    .rise-2 { animation-delay: 160ms; }
    .rise-3 { animation-delay: 260ms; }

    /* ---- Input card (single card, hairline-separated groups) ---- */
    .calc-card {
      background: #FFFFFF;
      border: 1px solid #ECECE9;
      border-radius: 22px;
      padding: 6px 22px 24px;
    }
    @media (min-width: 768px) {
      .calc-card { border-radius: 26px; padding: 8px 28px 28px; }
    }
    .calc-group { padding-top: 20px; }
    .calc-group + .calc-group { margin-top: 22px; border-top: 1px solid #F2F1EE; }
    .calc-group-title {
      font-size: 12px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #6B7280;
      margin-bottom: 12px;
    }

    /* Team rows */
    .role-row + .role-row { margin-top: 14px; }
    .role-tag {
      font-size: 12.5px;
      font-weight: 400;
      color: #6B7280;
      margin-bottom: 6px;
    }
    .role-fields {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 88px;
      gap: 10px;
    }

    /* Fields */
    .calc-field + .calc-field { margin-top: 14px; }
    .field {
      width: 100%;
      background: #ffffff;
      border: 1px solid #E4E4E2;
      border-radius: 12px;
      padding: 11px 14px;
      font-size: 15px;
      color: #242424;
      font-variant-numeric: tabular-nums;
      transition: border-color 160ms, box-shadow 160ms;
    }
    .field::placeholder { color: #6B7280; font-weight: 400; }
    .field:hover { border-color: #d2d2cf; }
    .field:focus {
      outline: none;
      border-color: #0000EE;
      box-shadow: 0 0 0 3px rgba(0,87,255,0.10);
    }
    .label {
      display: block;
      font-size: 13px;
      color: #4D4B48;
      font-weight: 400;
      margin-bottom: 6px;
    }
    .hint {
      margin-top: 6px;
      font-size: 12.5px;
      line-height: 1.5;
      color: #6B7280;
      font-weight: 400;
    }
    .hint-warn { color: #B00020; }

    /* $ / % adornments */
    .input-wrap { position: relative; }
    .input-wrap .affix {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14.5px;
      color: #6B7280;
      pointer-events: none;
    }
    .input-wrap .affix.pre { left: 14px; }
    .input-wrap .affix.suf { right: 14px; }
    .field.has-pre { padding-left: 30px; }
    .field.has-suf { padding-right: 36px; }
    .field-count { padding-right: 8px; }

    /* ---- Results card ---- */
    .res-actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
    .pill-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 9999px;
      border: 1px solid #E4E4E2;
      background: transparent;
      font-size: 12.5px;
      font-weight: 500;
      color: #4D4B48;
      cursor: pointer;
      white-space: nowrap;
      transition: background 160ms, border-color 160ms, color 160ms;
    }
    .pill-btn:hover { background: #F2F1EE; border-color: #d2d2cf; color: #242424; }
    .pill-btn-accent {
      border-color: #0000EE;
      color: #0000EE;
    }
    .pill-btn-accent:hover { background: #0000EE; border-color: #0000EE; color: #FFFFFF; }

    /* Hero stat */
    .roi-hero {
      margin-top: 20px;
      background: #0000EE;
      border-radius: 16px;
      padding: 18px 20px;
    }
    .stat-label {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.72);
    }
    .stat-num {
      margin-top: 6px;
      font-size: 38px;
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 1;
      color: #FFFFFF;
      overflow-wrap: anywhere;
    }
    @media (min-width: 640px) { .stat-num { font-size: 44px; } }
    .stat-sub {
      margin-top: 8px;
      font-size: 12.5px;
      line-height: 1.5;
      color: rgba(255,255,255,0.72);
    }
    .stat-sub .tnum { color: #FFFFFF; font-weight: 500; }
    .stat-num.neg { color: #FFD7DC; }

    /* Summary + detail rows */
    .res-summary { margin-top: 14px; }
    .res-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding: 8px 0;
      font-size: 13.5px;
    }
    .res-summary .res-row + .res-row { border-top: 1px solid #F2F1EE; }
    .res-row .k { color: #4D4B48; font-weight: 400; line-height: 1.45; }
    .res-row .v { font-weight: 500; color: #242424; white-space: nowrap; }
    .neg { color: #B00020 !important; }

    /* Collapsible full math */
    .res-details { margin-top: 6px; border-top: 1px solid #ECECE9; }
    .res-details summary {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 12px 0;
      font-size: 13px;
      font-weight: 500;
      color: #0000EE;
      cursor: pointer;
      list-style: none;
      -webkit-user-select: none;
      user-select: none;
    }
    .res-details summary::-webkit-details-marker { display: none; }
    .res-details summary .material-symbols-rounded { transition: transform 160ms ease; }
    .res-details[open] summary .material-symbols-rounded { transform: rotate(90deg); }
    .res-detail-body { padding-bottom: 6px; }
    .res-group + .res-group { margin-top: 10px; }
    .res-group-title {
      font-size: 12px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #6B7280;
      margin: 6px 0 2px;
    }
    .res-detail-body .res-row { padding: 5px 0; font-size: 13px; }

    .assume-list { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
    .assume-list li {
      position: relative;
      padding-left: 15px;
      font-size: 12px;
      line-height: 1.55;
      color: #6B7280;
      font-weight: 400;
    }
    .assume-list li::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 7px;
      width: 4px;
      height: 4px;
      border-radius: 9999px;
      background: #C9C7C2;
    }

    .share-note {
      margin-top: 12px;
      text-align: center;
      font-size: 12px;
      line-height: 1.5;
      color: #6B7280;
    }

    /* Bottom action bar — the page's takeaways, full-width and loud */
    .roi-actions-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 16px;
    }
    @media (max-width: 480px) {
      .roi-actions-bottom { grid-template-columns: 1fr; }
    }
    .roi-actions-bottom .btn {
      width: 100%;
      font-size: 14.5px;
      padding: 13px 18px;
    }
    .roi-actions-bottom .btn-secondary { background: #FFFFFF; }
    .roi-actions-bottom .btn-secondary:hover { background: var(--c-ink-950); }

    /* ---- Investment vs. return chart ----
       Two horizontal bars on one shared scale. Stack pair #1c5cab/#5598e7
       validated for CVD + normal-vision separation on the white card;
       the invest bar is a deliberate de-emphasis neutral (the return is
       the subject). Values ride the row heads, never the fills. */
    .chart-title {
      font-size: 13px;
      font-weight: 500;
      color: #242424;
    }
    .chart-row { margin-top: 14px; }
    .chart-row-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
    }
    .chart-row-label { color: #4D4B48; font-weight: 400; }
    .chart-row-note { color: #6B7280; font-size: 11.5px; }
    .chart-row-val { font-weight: 500; color: #242424; white-space: nowrap; }
    .chart-track {
      margin-top: 6px;
      height: 16px;
      background: #F2F1EE;
      border-radius: 4px;
      display: flex;
      gap: 2px; /* surface gap between stacked segments */
      overflow: hidden;
    }
    .chart-fill {
      height: 100%;
      transition: width 350ms cubic-bezier(.2,.7,.2,1);
    }
    .chart-fill:last-child { border-radius: 0 4px 4px 0; } /* rounded data-end, square baseline */
    .fill-invest { background: #A8A29B; }
    .fill-profit { background: #1c5cab; }
    .fill-savings { background: #5598e7; }
    .chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      margin-top: 14px;
      font-size: 12.5px;
      color: #4D4B48;
    }
    .legend-item { display: inline-flex; align-items: center; gap: 6px; }
    .legend-dot { width: 8px; height: 8px; border-radius: 9999px; flex: none; }
    .dot-profit { background: #1c5cab; }
    .dot-savings { background: #5598e7; }
    .legend-val { font-weight: 500; color: #242424; }
    .chart-foot {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid #F2F1EE;
      font-size: 12.5px;
      line-height: 1.5;
      color: #6B7280;
    }
    .chart-foot strong { color: #242424; font-weight: 500; }