/*
 * Cashflow Unlock / ROI calculator.
 * Every rule is scoped under .roi-calc - the source stylesheet styled bare
 * body/html/input selectors and would otherwise bleed into the rest of the site.
 * Generated from Orbrick_ROI_Calculator.html by scripts/build-calculator-assets.py
 */

.roi-calc *, .roi-calc *::before, .roi-calc *::after { box-sizing: border-box; margin: 0; padding: 0;
}

.roi-calc {
      --dark:    #141413;
      --light:   #faf9f5;
      --lightbg: #c7c3be;
      --orange:  #f08519;
      --purple:  #5B2A86;
      --mauve:   #DFB2F4;
      --grandis: #FFCD70;
      --white:   #ffffff;
      --muted:   #5a5a54;
}

.roi-calc { scroll-behavior: smooth;
}

.roi-calc { font-family: 'PT Sans', Tahoma, sans-serif; background: var(--light); color: var(--dark); -webkit-font-smoothing: antialiased;
}

.roi-calc /* NAV */ nav { background: var(--dark); height: 58px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100;
}

.roi-calc .logo-svg { width: 108px; height: 26px;
}

.roi-calc nav a { color: rgba(255,255,255,0.45); font-size: 13px; text-decoration: none; transition: color .2s;
}

.roi-calc nav a:hover { color: var(--orange);
}

.roi-calc /* HERO */ .hero { text-align: center; padding: 64px 24px 44px; max-width: 720px; margin: 0 auto;
}

.roi-calc .pill { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--orange); background: rgba(240,133,25,0.1); padding: 5px 14px; border-radius: 20px; margin-bottom: 18px;
}

.roi-calc .hero h1 { font-family: 'Solway', Georgia, serif; font-size: clamp(28px, 4vw, 46px); font-weight: 700; line-height: 1.12; margin-bottom: 16px;
}

.roi-calc .hero h1 em { font-style: normal; color: var(--orange);
}

.roi-calc .hero p { font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 540px; margin: 0 auto;
}

.roi-calc /* FORMULA BADGE */ .formula-badge { display: flex; justify-content: center; padding: 0 24px 40px;
}

.roi-calc .formula-badge-inner { background: var(--white); border: 1.5px solid #e8e4de; border-radius: 12px; padding: 14px 28px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--muted); flex-wrap: wrap; justify-content: center;
}

.roi-calc .fbi-eq { color: var(--orange); font-family: 'Solway', Georgia, serif; font-size: 15px;
}

.roi-calc .fbi-x { color: var(--lightbg); font-size: 20px; font-weight: 400;
}

.roi-calc /* TABS */ .tabs { display: flex; justify-content: center; gap: 8px; padding: 0 24px 36px; flex-wrap: wrap;
}

.roi-calc .tab { padding: 8px 20px; border: 2px solid var(--lightbg); border-radius: 40px; background: transparent; cursor: pointer; font-family: 'PT Sans', Tahoma, sans-serif; font-size: 13px; font-weight: 700; color: #888; transition: all .2s;
}

.roi-calc .tab:hover { border-color: var(--orange); color: var(--orange);
}

.roi-calc .tab.active { background: var(--orange); border-color: var(--orange); color: white;
}

.roi-calc /* MAIN GRID */ .wrapper { max-width: 1140px; margin: 0 auto; padding: 0 32px 80px;
}

.roi-calc .grid { display: grid; grid-template-columns: 1fr 420px; gap: 28px; align-items: start;
}

.roi-calc .panel { display: none;
}

.roi-calc .panel.active { display: block;
}

.roi-calc .card { background: var(--white); border-radius: 18px; padding: 36px; box-shadow: 0 2px 20px rgba(0,0,0,0.07);
}

.roi-calc .card-title { font-family: 'Solway', Georgia, serif; font-size: 22px; font-weight: 700; margin-bottom: 4px;
}

.roi-calc .card-sub { font-size: 13px; color: #999; margin-bottom: 20px; line-height: 1.4;
}

.roi-calc .gap-type-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 3px 10px; border-radius: 4px; margin-bottom: 24px;
}

.roi-calc .gap-type-badge.touch { background: rgba(91,42,134,0.1); color: var(--purple);
}

.roi-calc .gap-type-badge.dollar { background: rgba(240,133,25,0.1); color: var(--orange);
}

.roi-calc .gap-type-badge.wait { background: rgba(0,0,0,0.06); color: #888;
}

.roi-calc /* INPUTS */ .input-group { margin-bottom: 20px;
}

.roi-calc .input-group:last-child { margin-bottom: 0;
}

.roi-calc .input-label { font-size: 12px; font-weight: 700; color: #777; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 7px; display: block;
}

.roi-calc .input-hint-sm { font-size: 11px; color: #bbb; font-style: italic; margin-top: 5px; line-height: 1.45;
}

.roi-calc .input-row { display: flex; align-items: center; gap: 10px;
}

.roi-calc input[type="range"] {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      background: #ece9e4;
      border-radius: 2px;
      outline: none;
      cursor: pointer;
}

.roi-calc input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px; height: 20px;
      background: var(--orange);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(240,133,25,0.4);
      transition: transform .1s;
}

.roi-calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15);
}

.roi-calc input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--orange); border-radius: 50%; cursor: pointer; border: none;
}

.roi-calc input[type="number"] {
      width: 120px;
      padding: 7px 10px;
      border: 1.5px solid #e0ddd8;
      border-radius: 8px;
      font-family: 'Solway', Georgia, serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--orange);
      text-align: right;
      background: var(--light);
      transition: border-color .15s;
      -moz-appearance: textfield;
}

.roi-calc input[type="number"]::-webkit-outer-spin-button, .roi-calc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none;
}

.roi-calc input[type="number"]:focus { border-color: var(--orange); outline: none; background: white;
}

.roi-calc .section-divider { height: 1px; background: #f0ede8; margin: 18px 0 20px;
}

.roi-calc .gap-display { background: #f7f4ef; border-radius: 10px; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}

.roi-calc .gap-display-label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 1px;
}

.roi-calc .gap-display-value { font-family: 'Solway', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--purple);
}

.roi-calc /* RESULTS COL */ .results-col { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 16px;
}

.roi-calc .result-card { background: var(--dark); border-radius: 18px; padding: 30px; color: white;
}

.roi-calc .result-card-title { font-family: 'Solway', Georgia, serif; font-size: 15px; font-weight: 700; color: white; margin-bottom: 18px;
}

.roi-calc /* FORMULA BREAKDOWN */ .formula-breakdown { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 16px; margin-bottom: 18px;
}

.roi-calc .fb-abstract {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: rgba(255,255,255,0.3);
      margin-bottom: 10px;
}

.roi-calc .fb-line {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      line-height: 1.8;
      font-family: 'PT Sans', Tahoma, sans-serif;
}

.roi-calc .fb-line .val { color: white; font-weight: 700; font-family: 'Solway', Georgia, serif;
}

.roi-calc .fb-line .op { color: rgba(255,255,255,0.25); margin: 0 3px;
}

.roi-calc .fb-result {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.08);
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
}

.roi-calc .fb-result-val {
      font-family: 'Solway', Georgia, serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--orange);
}

.roi-calc .fb-result-val.gold { color: var(--grandis);
}

.roi-calc .fb-result-val.hrs { color: var(--grandis); font-size: 18px;
}

.roi-calc .result-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 18px 0;
}

.roi-calc .result-total-label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.35); margin-bottom: 4px;
}

.roi-calc .result-total-val {
      font-family: 'Solway', Georgia, serif;
      font-size: 44px;
      font-weight: 700;
      color: var(--orange);
      line-height: 1;
}

.roi-calc .result-total-sub { font-size: 11px; color: rgba(255,255,255,0.25); margin-top: 4px;
}

.roi-calc .hours-block { margin-top: 16px;
}

.roi-calc .hours-block .result-total-val { font-size: 28px; color: var(--grandis);
}

.roi-calc .wait-note { font-size: 12px; color: rgba(255,255,255,0.25); font-style: italic; margin-top: 4px; line-height: 1.5;
}

.roi-calc /* GRAND CARD */ .grand-card { background: var(--purple); border-radius: 18px; padding: 28px 30px;
}

.roi-calc .grand-label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--mauve); margin-bottom: 6px;
}

.roi-calc .grand-gross { font-family: 'Solway', Georgia, serif; font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.35); text-decoration: line-through; display: none; margin-bottom: 2px;
}

.roi-calc .grand-net { font-family: 'Solway', Georgia, serif; font-size: 34px; font-weight: 700; color: white; line-height: 1; transition: all .3s;
}

.roi-calc .grand-sub { font-size: 11px; color: rgba(223,178,244,0.5); margin-top: 4px;
}

.roi-calc .grand-hours { font-family: 'Solway', Georgia, serif; font-size: 18px; color: var(--mauve); margin-top: 10px;
}

.roi-calc /* DISCOUNT */ .discount-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12);
}

.roi-calc .disc-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;
}

.roi-calc .disc-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(223,178,244,0.7);
}

.roi-calc .disc-val-lbl { font-family: 'Solway', Georgia, serif; font-size: 16px; font-weight: 700; color: var(--mauve);
}

.roi-calc .disc-row { display: flex; align-items: center; gap: 8px;
}

.roi-calc .disc-row input[type="range"] { background: rgba(255,255,255,0.15);
}

.roi-calc .disc-row input[type="range"]::-webkit-slider-thumb { background: var(--mauve); box-shadow: 0 2px 6px rgba(223,178,244,0.35);
}

.roi-calc .disc-row input[type="number"] { width: 80px; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--mauve); font-size: 13px;
}

.roi-calc .disc-row input[type="number"]:focus { border-color: var(--mauve); background: rgba(255,255,255,0.12);
}

.roi-calc .disc-hint { font-size: 11px; color: rgba(223,178,244,0.35); margin-top: 6px; font-style: italic;
}

.roi-calc .disc-saving { font-size: 12px; color: rgba(223,178,244,0.55); margin-top: 8px; display: none;
}

.roi-calc .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px;
}

.roi-calc .mini-cell { background: rgba(255,255,255,0.08); border-radius: 8px; padding: 9px 12px;
}

.roi-calc .mini-cell-label { font-size: 9px; color: var(--mauve); opacity: .6; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px;
}

.roi-calc .mini-cell-value { font-family: 'Solway', Georgia, serif; font-size: 14px; font-weight: 700; color: white;
}

.roi-calc /* CTA */ .cta { background: var(--dark); padding: 80px 24px; text-align: center;
}

.roi-calc .cta h2 { font-family: 'Solway', Georgia, serif; font-size: clamp(22px, 3vw, 36px); color: white; margin-bottom: 14px; line-height: 1.2;
}

.roi-calc .cta p { font-size: 15px; color: rgba(255,255,255,0.45); max-width: 500px; margin: 0 auto 32px; line-height: 1.6;
}

.roi-calc .btn-orange { display: inline-block; background: var(--orange); color: white; font-family: 'PT Sans', Tahoma, sans-serif; font-size: 14px; font-weight: 700; padding: 13px 32px; border-radius: 9px; text-decoration: none; margin: 0 6px 8px; transition: background .2s, transform .15s;
}

.roi-calc .btn-orange:hover { background: #d97110; transform: translateY(-1px);
}

.roi-calc .btn-ghost { display: inline-block; background: transparent; color: rgba(255,255,255,0.6); font-family: 'PT Sans', Tahoma, sans-serif; font-size: 14px; font-weight: 700; padding: 11px 28px; border-radius: 9px; text-decoration: none; border: 2px solid rgba(255,255,255,0.18); margin: 0 6px 8px; transition: all .2s;
}

.roi-calc .btn-ghost:hover { border-color: rgba(255,255,255,0.45); color: white;
}

.roi-calc .disclaimer { background: var(--dark); border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 24px; text-align: center;
}

.roi-calc .disclaimer p { font-size: 11px; color: rgba(255,255,255,0.2); max-width: 720px; margin: 0 auto; line-height: 1.7;
}

@media (max-width: 860px) {
  .roi-calc nav { padding: 0 20px;
  }
  .roi-calc .wrapper { padding: 0 16px 60px;
  }
  .roi-calc .grid { grid-template-columns: 1fr;
  }
  .roi-calc .results-col { position: relative; top: auto;
  }
}