/*
 * Shared calculator styling for Orbrick campaign landing pages.
 * Extends the theme's campaign stylesheet (oracle-fusion-cashflow.css) with the
 * value-calculator block used by every campaign page.
 */
.fusion-cash-page {
  --cash-ink: #1e1921;
  --cash-copy: #5f5862;
  --cash-muted: #817984;
  --cash-purple: #5b2a86;
  --cash-purple-dark: #40205c;
  --cash-orange: #f08519;
  --cash-orange-dark: #d86d08;
  --cash-cream: #fdf5e9;
  --cash-paper: #fffdf9;
  --cash-lilac: #f3edf7;
  --cash-line: rgba(48, 34, 55, 0.12);
  --cash-success: #2f7256;
  background: var(--cash-paper);
  color: var(--cash-copy);
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.fusion-cash-page *,
.fusion-cash-page *::before,
.fusion-cash-page *::after {
  box-sizing: border-box;
}
.fusion-cash-page p {
  margin: 0 0 1em;
}
.fusion-cash-page ul,
.fusion-cash-page ol {
  list-style: none;
}
.orb-calc-calc {
  padding: 88px 0 96px;
  background: var(--cash-cream);
}
.orb-calc-calc-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.orb-calc-calc-head h2 {
  margin: 10px 0 14px;
  color: var(--cash-ink);
  font-family: "Solway", Georgia, serif;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
}
.orb-calc-calc-head p {
  color: var(--cash-copy);
  font-size: 17px;
}
.orb-calc-grid {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 28px;
  align-items: start;
}
.orb-calc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid var(--cash-line);
  border-radius: 16px;
  overflow: hidden;
}
.orb-calc-field {
  padding: 22px 24px;
  border-bottom: 1px solid var(--cash-line);
}
.orb-calc-field:nth-child(odd) {
  border-right: 1px solid var(--cash-line);
}
.orb-calc-field label {
  display: block;
  margin-bottom: 10px;
  color: var(--cash-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.orb-calc-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--cash-line);
  border-radius: 9px;
  background: var(--cash-paper);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.orb-calc-input:focus-within {
  border-color: var(--cash-orange);
  box-shadow: 0 0 0 3px rgba(240, 133, 25, 0.16);
}
.orb-calc-input span {
  color: var(--cash-muted);
  font-size: 15px;
}
.orb-calc-input input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cash-ink);
  font-family: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  outline: 0;
  -moz-appearance: textfield;
}
.orb-calc-input input::-webkit-outer-spin-button,
.orb-calc-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.orb-calc-hint {
  margin: 9px 0 0;
  color: var(--cash-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.orb-calc-result {
  position: sticky;
  top: 24px;
  padding: 30px 30px 34px;
  border-radius: 16px;
  background: var(--cash-purple-dark);
  color: #fff;
}
.orb-calc-result-eyebrow {
  margin: 0 0 16px;
  color: var(--cash-orange);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.orb-calc-result-label {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
}
.orb-calc-headline {
  margin: 0 0 26px;
  color: #fff;
  font-family: "Solway", Georgia, serif;
  font-size: clamp(34px, 4.4vw, 46px);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.orb-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.orb-calc-row dt {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
}
.orb-calc-row dd {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.orb-calc-formula {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.orb-calc-formula p:first-child {
  margin: 0 0 7px;
  color: var(--cash-orange);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.orb-calc-formula p:nth-child(2) {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  line-height: 1.5;
}
.orb-calc-disclaimer {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.5;
}
.orb-calc-result .fusion-cash-button {
  width: 100%;
  margin-top: 22px;
  justify-content: center;
}
.orb-calc-worth {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(240, 133, 25, 0.12);
  color: var(--cash-orange-dark);
  font-size: 13.5px;
  font-weight: 700;
}
.orb-calc-worth b {
  font-family: "Solway", Georgia, serif;
  font-size: 16px;
}
.orb-calc-bridge {
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(240, 133, 25, 0.14);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
}
.orb-calc-bridge b {
  color: var(--cash-orange);
  font-family: "Solway", Georgia, serif;
  font-size: 15px;
}
@media (max-width: 960px) {
  .orb-calc-grid {
    grid-template-columns: 1fr;
  }
  .orb-calc-result {
    position: static;
    /* Show the number before the inputs on small screens, so the payoff is
         not buried below ~600px of form fields. */
    order: -1;
  }
}
@media (max-width: 560px) {
  .orb-calc-inputs {
    grid-template-columns: 1fr;
  }
  .orb-calc-field:nth-child(odd) {
    border-right: 0;
  }
  .orb-calc-calc {
    padding: 64px 0 72px;
  }
}

/* Softer kicker mark. The shared theme rule draws a 2px-bordered circle around
   an exclamation, which reads as a warning; this replaces it with a small
   filled diamond in brand orange. Scoped to the modifier class, so only the
   pages that opt in are affected. */
.fusion-cash-kicker-icon--mark {
  width: 10px;
  height: 10px;
  border: 0;
  color: var(--cash-orange);
}

.fusion-cash-kicker-icon--mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   SEER "how the value is delivered" band.
   Answers the 1 Sep note that the pages claim value without explaining how it
   is produced. Sized to sit inside one desktop fold: head block above, four
   stages across. Lives here rather than the theme stylesheet so it ships with
   the plugin zip and needs no separate theme deploy.
   --------------------------------------------------------------------------- */
.fusion-cash-seer {
    padding: 76px 0 84px;
    background: var(--cash-purple-dark);
}

.fusion-cash-seer .orb-seer-head {
    max-width: 760px;
    margin-bottom: 44px;
}

.fusion-cash-seer .fusion-cash-eyebrow {
    color: var(--cash-orange);
}

.fusion-cash-seer h2 {
    margin: 10px 0 14px;
    color: #fff;
    font-size: clamp(30px, 3.1vw, 44px);
    line-height: 1.14;
    letter-spacing: -0.01em;
}

.fusion-cash-seer .orb-seer-lede {
    margin: 0 0 26px;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 17px;
    line-height: 1.6;
}

/* The generic .fusion-cash-text-link is purple-on-purple here, so the CTA is a
   solid orange button instead. */
.fusion-cash-seer .fusion-cash-button {
    margin-top: 4px;
}

.fusion-cash-seer .orb-seer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.fusion-cash-seer .orb-seer-card {
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
}

.fusion-cash-seer .orb-seer-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--cash-orange);
    color: #201307;
    font-size: 14px;
    font-weight: 700;
}

.fusion-cash-seer .orb-seer-card h3 {
    margin: 0;
    color: #fff;
    font-size: 19px;
    line-height: 1.25;
}

.fusion-cash-seer .orb-seer-phase {
    margin: 3px 0 10px;
    color: var(--cash-orange);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fusion-cash-seer .orb-seer-body {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 14.5px;
    line-height: 1.55;
}

.fusion-cash-seer .orb-seer-product {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .fusion-cash-seer .orb-seer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fusion-cash-seer {
        padding: 56px 0 60px;
    }

    .fusion-cash-seer .orb-seer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------------------------------------------------------------------------
   Region switch (US / UK)
   There is no country selector anywhere on orbrick.com, so each campaign page
   links straight to its twin in the other market. Sits above the kicker.
   --------------------------------------------------------------------------- */

.orb-locale-switch {
    margin: 0 0 18px;
}

.orb-locale-switch ul {
    display: inline-flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.orb-locale-switch li {
    margin: 0;
}

.orb-locale-switch a,
.orb-locale-switch span {
    display: block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
    opacity: 0.72;
}

.orb-locale-switch a:hover,
.orb-locale-switch a:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

.orb-locale-switch [aria-current="true"] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------------------------
   Consent statement beneath the UK form
   --------------------------------------------------------------------------- */

.orb-consent {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.75;
}

.orb-consent a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 540px) {
    .orb-locale-switch a,
    .orb-locale-switch span {
        padding: 5px 11px;
        font-size: 12px;
    }
}

/* UK pages (15 Sep feedback): proof context, illustrative values, zero-result
   message and the scope or estimate note under the form. */
.orb-proof-context {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cash-line);
  color: var(--cash-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.orb-proof-context + .fusion-cash-proof {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}
/* Three figures: stack each number over its label so the labels are not squeezed. */
.orb-proof-context + .fusion-cash-proof > div {
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
  width: 33.333%;
}
.orb-calc-illustrative {
  max-width: 720px;
  margin: -24px auto 24px;
  color: var(--cash-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}
.orb-calc-zero {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
}
/* 12px is roughly the 8 to 9 pt the feedback asks for. */
.fusion-cash-form-card .orb-calc-note {
  margin: 10px 0 0;
  color: var(--cash-muted);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  /* The theme reorders the hero on mobile (proof is order 6); keep the proof
     context label directly above the figures it qualifies. */
  .orb-proof-context {
    order: 6;
  }
  /* The theme gives the hero CTA no order, so it jumps above the kicker. */
  main[data-orb-page] .fusion-cash-hero-copy > .fusion-cash-button {
    order: 7;
    margin-top: 24px;
  }
}
@media (max-width: 480px) {
  /* The highlighted h1 phrase cannot wrap (theme: white-space: nowrap under a
     single underline bar). At 32px the longest UK phrase, "Reduce time to hire."
     (~328px), fits the 343px hero column of a 390px phone. */
  main[data-orb-page] .fusion-cash-hero h1 {
    font-size: 32px;
  }
}

/* ---------------------------------------------------------------------------
   Leak cards: hover state (18 Sep feedback)
   The theme gives the four cards no hover feedback, so it lives here with the
   rest of the campaign styles and ships in the plugin zip.
   --------------------------------------------------------------------------- */
.fusion-cash-page .fusion-cash-leak-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.fusion-cash-page .fusion-cash-leak-card:hover,
.fusion-cash-page .fusion-cash-leak-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(91, 42, 134, 0.28);
  box-shadow: 0 14px 30px rgba(48, 34, 55, 0.13);
}
.fusion-cash-page .fusion-cash-leak-card:hover .fusion-cash-card-icon {
  color: var(--cash-purple);
}
@media (prefers-reduced-motion: reduce) {
  .fusion-cash-page .fusion-cash-leak-card {
    transition: none;
  }
  .fusion-cash-page .fusion-cash-leak-card:hover,
  .fusion-cash-page .fusion-cash-leak-card:focus-within {
    transform: none;
  }
}