/* =========================================================
       ROI Calculator - page-scoped styles (prefix: roi-)
       ========================================================= */

    /* Hero overrides */
    .main__title {
      font-size: clamp(36px, 5vw, 72px);
      text-transform: none;
      margin-bottom: 20px;
    }

    .roi-trust-line {
      font-size: 13px;
      color: rgb(112, 112, 112);
      max-width: 640px;
      margin: 12px auto 0;
      line-height: 1.55;
    }

    /* в”Ђв”Ђ Shared section helpers в”Ђв”Ђ */
    .roi-section {
      padding: 72px 0;
    }

    .roi-section--alt {
      background: var(--radial-60);
    }

    .roi-section--dark {
      background: var(--blue);
    }

    .roi-section__label {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--purple);
      margin-bottom: 10px;
    }

    .roi-section__title {
      font-family: var(--title-font);
      font-size: clamp(26px, 3.5vw, 42px);
      line-height: 1.2;
      margin-bottom: 12px;
    }

    .roi-section__sub {
      font-size: 17px;
      color: var(--blue-60);
      max-width: 660px;
      margin-bottom: 48px;
      line-height: 1.6;
    }

    /* в”Ђв”Ђ ICP tabs в”Ђв”Ђ */
    .roi-icp-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

    .roi-icp-tab {
      padding: 10px 22px;
      border-radius: 100px;
      border: 2px solid var(--blue-12);
      background: transparent;
      font-family: var(--base-font);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      color: var(--blue);
    }

    .roi-icp-tab.active {
      background: var(--purple);
      color: #fff;
      border-color: var(--purple);
    }

    .roi-icp-tab:hover:not(.active) {
      border-color: var(--purple);
      color: var(--purple);
    }

    /* в”Ђв”Ђ Calculator card в”Ђв”Ђ */
    .roi-calc-card {
      background: #fff;
      border-radius: 28px;
      padding: 40px;
      border: 1px solid var(--blue-12);
      box-shadow: 0 2px 24px rgba(8, 15, 43, .06);
    }

    .roi-fields-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 28px;
    }

    .roi-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }

    .roi-field--full {
      grid-column: 1 / -1;
    }

    .roi-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--blue);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .roi-tooltip-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      background: var(--blue-12);
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
    }

    .roi-tooltip-trigger:hover .roi-tooltip-box {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .roi-tooltip-box {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: var(--blue);
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.5;
      padding: 8px 12px;
      border-radius: 8px;
      min-width: 200px;
      max-width: 260px;
      white-space: normal;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s, transform .2s;
    }

    .roi-tooltip-box::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 16px;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--blue);
    }

    .roi-input {
      border: 1.5px solid var(--blue-12);
      border-radius: 12px;
      padding: 12px 16px;
      font-family: var(--base-font);
      font-size: 15px;
      color: var(--blue);
      background: #fff;
      outline: none;
      transition: border-color .2s;
      width: 100%;
    }

    .roi-input:focus {
      border-color: var(--purple);
    }

    /* в”Ђв”Ђ Scenario selector в”Ђв”Ђ */
    .roi-scenario-wrap {
      margin-bottom: 28px;
    }

    .roi-scenario-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--blue);
      margin-bottom: 10px;
    }

    .roi-scenario-radios {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .roi-scenario-radio {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 10px 18px;
      border-radius: 100px;
      border: 2px solid var(--blue-12);
      transition: all .2s;
      font-size: 14px;
      font-weight: 600;
    }

    .roi-scenario-radio input {
      accent-color: var(--purple);
      cursor: pointer;
    }

    .roi-scenario-radio:has(input:checked) {
      border-color: var(--purple);
      background: var(--purple-extra);
      color: var(--purple);
    }

    /* в”Ђв”Ђ Advanced accordion в”Ђв”Ђ */
    .roi-advanced-wrap {
      margin-bottom: 28px;
      border: 1px solid var(--blue-12);
      border-radius: 16px;
      overflow: hidden;
    }

    .roi-advanced-toggle {
      width: 100%;
      background: none;
      border: none;
      padding: 16px 20px;
      font-family: var(--base-font);
      font-size: 15px;
      font-weight: 600;
      color: var(--blue);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      transition: background .15s;
    }

    .roi-advanced-toggle:hover {
      background: var(--purple-extra);
    }

    .roi-advanced-chevron {
      flex-shrink: 0;
      transition: transform .3s;
    }

    .roi-advanced-toggle.open .roi-advanced-chevron {
      transform: rotate(180deg);
    }

    .roi-advanced-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease;
      padding: 0 20px;
    }

    .roi-advanced-body.open {
      max-height: 600px;
      padding: 4px 20px 20px;
    }

    .roi-agency-fields {
      display: none;
      grid-column: 1 / -1;
    }

    .roi-agency-fields.visible {
      display: contents;
    }

    /* в”Ђв”Ђ Calculate button в”Ђв”Ђ */
    .roi-calc-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--purple);
      color: #fff;
      border: none;
      border-radius: 100px;
      padding: 16px 40px;
      font-family: var(--base-font);
      font-size: 17px;
      font-weight: 700;
      cursor: pointer;
      transition: opacity .2s, transform .2s;
      width: 100%;
      margin-top: 4px;
    }

    .roi-calc-btn:hover {
      opacity: .88;
      transform: translateY(-1px);
    }

    /* в”Ђв”Ђ Results section в”Ђв”Ђ */
    .roi-results-section {
      display: none;
      padding: 64px 0;
      background: var(--radial-60);
    }

    .roi-results-section.visible {
      display: block;
    }

    .roi-results-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 32px;
    }

    .roi-result-card {
      background: #fff;
      border-radius: 20px;
      padding: 32px 28px;
      border: 1px solid var(--blue-12);
      text-align: center;
    }

    .roi-result-card__label {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--blue-60);
      margin-bottom: 12px;
    }

    .roi-result-card__value {
      font-family: var(--title-font);
      font-size: clamp(32px, 4vw, 52px);
      color: var(--purple);
      line-height: 1;
      margin-bottom: 8px;
    }

    .roi-result-card__sub {
      font-size: 13px;
      color: var(--blue-42);
    }

    /* в”Ђв”Ђ Breakdown accordion в”Ђв”Ђ */
    .roi-breakdown-wrap {
      background: #fff;
      border-radius: 20px;
      border: 1px solid var(--blue-12);
      overflow: hidden;
      margin-bottom: 28px;
    }

    .roi-breakdown-toggle {
      width: 100%;
      background: none;
      border: none;
      padding: 18px 24px;
      font-family: var(--base-font);
      font-size: 15px;
      font-weight: 600;
      color: var(--blue);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background .15s;
    }

    .roi-breakdown-toggle:hover {
      background: var(--purple-extra);
    }

    .roi-breakdown-chevron {
      flex-shrink: 0;
      transition: transform .3s;
    }

    .roi-breakdown-toggle.open .roi-breakdown-chevron {
      transform: rotate(180deg);
    }

    .roi-breakdown-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease;
    }

    .roi-breakdown-body.open {
      max-height: 800px;
    }

    .roi-breakdown-inner {
      padding: 4px 24px 24px;
    }

    .roi-breakdown-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid var(--blue-12);
      font-size: 15px;
    }

    .roi-breakdown-row:last-child {
      border-bottom: none;
    }

    .roi-breakdown-row__label {
      color: var(--blue-60);
      line-height: 1.45;
    }

    .roi-breakdown-row__value {
      font-weight: 700;
      color: var(--blue);
      white-space: nowrap;
    }

    .roi-breakdown-row__value--note {
      font-weight: 500;
      font-size: 13px;
      color: var(--blue-42);
    }

    .roi-breakdown-excluded {
      margin-top: 16px;
      padding: 14px 16px;
      background: var(--purple-extra);
      border-radius: 10px;
      font-size: 13px;
      color: var(--blue-60);
      line-height: 1.6;
    }

    /* в”Ђв”Ђ Interpretation copy в”Ђв”Ђ */
    .roi-interpretation {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      border-left: 4px solid var(--purple);
      font-size: 15px;
      color: var(--blue-60);
      line-height: 1.65;
      margin-bottom: 32px;
    }

    /* в”Ђв”Ђ ICP CTAs after results в”Ђв”Ђ */
    .roi-result-ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
    }

    .roi-cta-soft {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 100px;
      border: 2px solid var(--purple);
      color: var(--purple);
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
      transition: all .2s;
      background: transparent;
      cursor: pointer;
    }

    .roi-cta-soft:hover {
      background: var(--purple-extra);
    }

    .roi-cta-hard {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 100px;
      background: var(--purple);
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
      transition: opacity .2s, transform .2s;
    }

    .roi-cta-hard:hover {
      opacity: .88;
      transform: translateY(-1px);
    }

    /* в”Ђв”Ђ Lead form в”Ђв”Ђ */
    .roi-form-section {
      padding: 72px 0;
      background: #fff;
    }

    .roi-form-wrap {
      background: var(--radial);
      border-radius: 28px;
      padding: 52px;
      max-width: 800px;
      margin: 0 auto;
    }

    .roi-form-title {
      font-family: var(--title-font);
      font-size: clamp(24px, 3vw, 36px);
      margin-bottom: 10px;
    }

    .roi-form-sub {
      font-size: 16px;
      color: var(--blue-60);
      line-height: 1.6;
      margin-bottom: 32px;
    }

    .roi-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }

    .roi-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .roi-form-group--full {
      grid-column: 1 / -1;
    }

    .roi-form-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--blue);
    }

    .roi-form-input,
    .roi-form-select {
      border: 1.5px solid var(--blue-12);
      border-radius: 12px;
      padding: 12px 16px;
      font-family: var(--base-font);
      font-size: 15px;
      color: var(--blue);
      background: #fff;
      outline: none;
      transition: border-color .2s;
      width: 100%;
    }

    .roi-form-input:focus,
    .roi-form-select:focus {
      border-color: var(--purple);
    }

    .roi-form-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 24px;
    }

    .roi-form-primary {
      flex: 1;
      min-width: 160px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 28px;
      border-radius: 100px;
      background: var(--purple);
      color: #fff;
      font-family: var(--base-font);
      font-weight: 700;
      font-size: 16px;
      border: none;
      cursor: pointer;
      transition: opacity .2s;
    }

    .roi-form-primary:hover {
      opacity: .88;
    }

    .roi-form-secondary {
      flex: 1;
      min-width: 160px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 28px;
      border-radius: 100px;
      background: transparent;
      color: var(--purple);
      font-family: var(--base-font);
      font-weight: 700;
      font-size: 16px;
      border: 2px solid var(--purple);
      cursor: pointer;
      transition: all .2s;
      text-decoration: none;
    }

    .roi-form-secondary:hover {
      background: var(--purple-extra);
    }

    /* в”Ђв”Ђ Why ATS ROI section в”Ђв”Ђ */
    .roi-why-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .roi-why-card {
      background: #fff;
      border-radius: 20px;
      padding: 28px;
      border: 1px solid var(--blue-12);
    }

    .roi-why-card__icon {
      width: 44px;
      height: 44px;
      background: var(--purple-extra);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .roi-why-card__title {
      font-size: 16px;
      font-weight: 700;
      color: var(--blue);
      margin-bottom: 10px;
    }

    .roi-why-card__body {
      font-size: 14px;
      color: var(--blue-60);
      line-height: 1.65;
    }

    /* в”Ђв”Ђ Value drivers в”Ђв”Ђ */
    .roi-value-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .roi-value-card {
      background: var(--radial);
      border-radius: 20px;
      padding: 28px 24px;
      border: 1px solid var(--blue-12);
    }

    .roi-value-card__icon {
      width: 44px;
      height: 44px;
      background: #fff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .roi-value-card__title {
      font-size: 15px;
      font-weight: 700;
      color: var(--blue);
      margin-bottom: 8px;
    }

    .roi-value-card__tagline {
      font-size: 13px;
      font-weight: 600;
      color: var(--purple);
      margin-bottom: 10px;
    }

    .roi-value-card__body {
      font-size: 13px;
      color: var(--blue-60);
      line-height: 1.6;
    }

    /* в”Ђв”Ђ Process blocks в”Ђв”Ђ */
    .roi-process-blocks {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .roi-process-block {
      padding: 28px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 20px;
    }

    .roi-process-block__num {
      font-family: var(--title-font);
      font-size: 36px;
      color: var(--purple);
      margin-bottom: 12px;
    }

    .roi-process-block__title {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 10px;
    }

    .roi-process-block__body {
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.65;
    }

    /* в”Ђв”Ђ ICP cards в”Ђв”Ђ */
    .roi-icp-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .roi-icp-card {
      background: var(--radial);
      border-radius: 20px;
      padding: 32px;
      border: 1px solid var(--blue-12);
      display: flex;
      flex-direction: column;
    }

    .roi-icp-card__badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 100px;
      background: var(--purple-extra);
      color: var(--purple);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 14px;
      align-self: flex-start;
    }

    .roi-icp-card__title {
      font-size: 18px;
      font-weight: 700;
      color: var(--blue);
      margin-bottom: 10px;
    }

    .roi-icp-card__body {
      font-size: 14px;
      color: var(--blue-60);
      line-height: 1.65;
      margin-bottom: 20px;
      flex: 1;
    }

    .roi-icp-card__cta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      border-radius: 100px;
      background: var(--purple);
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
      transition: opacity .2s;
      align-self: flex-start;
    }

    .roi-icp-card__cta:hover {
      opacity: .88;
    }

    /* в”Ђв”Ђ FAQ в”Ђв”Ђ */
    .roi-faq-list {
      max-width: 800px;
      margin: 0 auto;
    }

    .roi-faq-item {
      border-bottom: 1px solid var(--blue-12);
    }

    .roi-faq-btn {
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 20px 0;
      font-family: var(--base-font);
      font-size: 17px;
      font-weight: 700;
      color: var(--blue);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      transition: color .2s;
    }

    .roi-faq-btn:hover {
      color: var(--purple);
    }

    .roi-faq-chevron {
      flex-shrink: 0;
      transition: transform .3s;
    }

    .roi-faq-btn.open .roi-faq-chevron {
      transform: rotate(180deg);
    }

    .roi-faq-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease;
    }

    .roi-faq-body.open {
      max-height: 400px;
    }

    .roi-faq-body p {
      padding: 0 0 20px;
      font-size: 15px;
      color: var(--blue-60);
      line-height: 1.7;
    }

    /* в”Ђв”Ђ Final CTA section в”Ђв”Ђ */
    .roi-final-ctas {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .roi-final-cta-card {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 20px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .roi-final-cta-card__icon {
      width: 44px;
      height: 44px;
      background: var(--purple);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .roi-final-cta-card__title {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }

    .roi-final-cta-card__body {
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.6;
      flex: 1;
    }

    .roi-final-cta-card__btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 100px;
      background: #fff;
      color: var(--purple);
      font-weight: 700;
      font-size: 14px;
      text-decoration: none;
      transition: opacity .2s;
      align-self: flex-start;
    }

    .roi-final-cta-card__btn:hover {
      opacity: .9;
    }

    /* в”Ђв”Ђ Responsive в”Ђв”Ђ */
    @media (max-width: 1000px) {
      .roi-value-cards {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .roi-section {
        padding: 52px 0;
      }

      .roi-why-cards,
      .roi-process-blocks,
      .roi-icp-cards,
      .roi-final-ctas {
        grid-template-columns: 1fr;
      }

      .roi-results-cards {
        grid-template-columns: 1fr;
      }

      .roi-fields-grid {
        grid-template-columns: 1fr;
      }

      .roi-calc-card {
        padding: 24px 20px;
      }

      .roi-form-wrap {
        padding: 32px 20px;
      }

      .roi-form-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .roi-icp-tabs {
        flex-direction: column;
      }

      .roi-icp-tab {
        text-align: center;
      }

      .roi-scenario-radios {
        flex-direction: column;
      }

      .roi-result-ctas {
        flex-direction: column;
      }

      .roi-form-buttons {
        flex-direction: column;
      }
    }

    @media (max-width: 480px) {
      .roi-value-cards {
        grid-template-columns: 1fr;
      }

      .roi-form-secondary {
        text-align: center;
      }
    }