/* Corecut financing extension, built from the existing walnut, sand, cream and Manrope system. */

.desktop-nav [aria-current="page"],
.mobile-nav [aria-current="page"] {
  color: var(--coffee);
  font-weight: 750;
}

.financing-hub-hero {
  padding: clamp(48px, 7vw, 86px) 0 clamp(38px, 5vw, 62px);
  background:
    linear-gradient(90deg, rgba(253, 252, 250, 0.98), rgba(253, 252, 250, 0.8)),
    url("./assets/gallery-grey-cabinetry.jpg") center 58% / cover;
}

.financing-hub-intro {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}

.financing-hub-intro h1 {
  max-width: 880px;
  margin-inline: auto;
  font-size: clamp(2.55rem, 5.2vw, 5.1rem);
  text-wrap: balance;
}

.financing-hub-intro > p:last-child {
  max-width: 720px;
  margin: 22px auto 0;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
}

.financing-choice-section {
  padding-block: clamp(42px, 5vw, 68px);
  background: #fff;
}

.financing-choice-heading {
  text-align: center;
}

.financing-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3.5vw, 42px);
}

.financing-choice-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

.financing-choice-card .media {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.financing-choice-copy {
  display: grid;
  align-content: start;
  min-height: 280px;
  padding: clamp(24px, 3.4vw, 38px);
}

.financing-choice-copy h3 {
  margin-bottom: 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.45rem);
}

.financing-choice-copy > p:not(.eyebrow) {
  margin-bottom: 28px;
  color: var(--ink-soft);
}

.financing-choice-copy .button {
  justify-self: start;
  margin-top: auto;
}

.financing-crosslink-section {
  background: var(--sand);
}

.financing-crosslink-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(75, 46, 25, 0.16);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.financing-crosslink-panel h2 {
  max-width: 760px;
  margin-bottom: 12px;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
}

.financing-section-intro {
  max-width: 840px;
}

.financing-why-section {
  padding-block: clamp(36px, 4.5vw, 58px);
  background: var(--sand);
}

.financing-why-heading {
  margin-bottom: clamp(18px, 3vw, 30px);
}

.financing-why-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.financing-why-card {
  display: grid;
  gap: 4px;
  min-height: 104px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--walnut);
  text-align: left;
  cursor: pointer;
  transition:
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.financing-why-card:hover {
  border-color: rgba(197, 160, 113, 0.55);
  transform: translateY(-1px);
}

.financing-why-card:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 2px;
}

.financing-why-card.is-active {
  background: var(--walnut);
  border-color: var(--walnut);
  color: var(--cream);
  box-shadow: var(--shadow-soft);
}

.financing-why-card strong {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.financing-why-card span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.35;
}

.financing-why-card.is-active span {
  color: rgba(253, 252, 250, 0.76);
}

.financing-why-panel {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 128px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(
      circle at 86% 8%,
      rgba(197, 160, 113, 0.12),
      transparent 46%
    ),
    var(--cream);
  box-shadow: var(--shadow-soft);
}

.financing-why-panel h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
}

.financing-why-panel p {
  max-width: 640px;
  margin: 0;
  color: var(--ink-soft);
}

.financing-why-panel[hidden] {
  display: none;
}

.financing-why-panel.is-active {
  display: grid;
  animation: financing-why-in 420ms ease both;
}

@keyframes financing-why-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.financing-form-points {
  display: grid;
  gap: 12px;
  margin: 26px 0 32px;
  padding: 0;
  list-style: none;
}

.financing-form-points li {
  position: relative;
  padding-left: 28px;
}

.financing-form-points li::before {
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 14px;
  height: 8px;
  border-bottom: 2px solid var(--coffee);
  border-left: 2px solid var(--coffee);
  content: "";
  transform: rotate(-45deg);
}

.text-link {
  color: var(--coffee);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.text-link:hover {
  color: var(--walnut);
}

.financing-calculator-section {
  padding-block: clamp(42px, 5vw, 70px);
  scroll-margin-top: 90px;
  background: #fff;
}

.financing-section-intro {
  width: min(100% - clamp(28px, 5vw, 80px), 1240px);
  margin: 0 auto 44px;
  transform: translateY(-22px);
  text-align: center;
}

.financing-section-intro > p:not(.eyebrow) {
  max-width: 760px;
  margin-inline: auto;
  color: var(--ink-soft);
}

.financing-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(75, 46, 25, 0.16);
  border-radius: calc(var(--radius) + 4px);
  background: var(--cream);
  box-shadow: var(--shadow);
}

.financing-calculator-inputs {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: clamp(26px, 4vw, 48px);
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(197, 160, 113, 0.12),
      transparent 34%
    ),
    var(--cream);
}

.calculator-field {
  display: grid;
  gap: 9px;
}

.calculator-field > label {
  color: var(--walnut);
  font-weight: 750;
}

.calculator-field input[type="number"],
.calculator-field select {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(75, 46, 25, 0.24);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  color: var(--ink);
}

.calculator-field select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--coffee) 50%),
    linear-gradient(135deg, var(--coffee) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px;
}

.money-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border: 1px solid rgba(75, 46, 25, 0.24);
  border-radius: 10px;
  background: #fff;
  transition:
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.percentage-input,
.term-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(75, 46, 25, 0.24);
  border-radius: 10px;
  background: #fff;
  transition:
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.money-input:focus-within,
.percentage-input:focus-within,
.term-input:focus-within,
.calculator-field select:focus-visible {
  border-color: var(--tan);
  outline: none;
  box-shadow: 0 0 0 4px rgba(197, 160, 113, 0.22);
}

.money-input > span {
  padding-left: 15px;
  color: var(--coffee);
  font-weight: 800;
}

.money-input input[type="number"] {
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.percentage-input input[type="number"],
.term-input input[type="number"] {
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.percentage-input > span,
.term-input > span {
  padding-right: 15px;
  color: var(--coffee);
  font-weight: 800;
}

.calculator-field input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 2px 0 -6px;
  accent-color: var(--coffee);
  cursor: pointer;
}

.calculator-range-labels {
  display: flex;
  justify-content: space-between;
  color: rgba(51, 41, 31, 0.58);
  font-size: 0.78rem;
  font-weight: 650;
}

.field-help {
  margin: 0;
  color: rgba(51, 41, 31, 0.62);
  font-size: 0.82rem;
}

.plan-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

.plan-picker legend {
  margin-bottom: 9px;
  padding: 0;
  color: var(--walnut);
  font-weight: 750;
}

/* Five fixed terms sit in one row on a wide calculator column and wrap to
   three, then two, as it narrows. */
.plan-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.plan-card {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 12px 10px;
  border: 1px solid rgba(75, 46, 25, 0.24);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.plan-card input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.plan-card:hover {
  border-color: rgba(197, 160, 113, 0.65);
}

.plan-card.is-selected,
.plan-card:has(input:checked) {
  border-color: var(--walnut);
  background: linear-gradient(160deg, #fff, var(--sand));
  box-shadow: 0 10px 22px -14px rgba(43, 26, 15, 0.45);
}

.plan-card:has(input:focus-visible) {
  border-color: var(--tan);
  box-shadow: 0 0 0 4px rgba(197, 160, 113, 0.22);
}

.plan-card-name {
  color: var(--walnut);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.plan-card-rate {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

.plan-card-price {
  margin-top: 5px;
  color: var(--coffee);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
}

.plan-card-price small {
  display: block;
  color: rgba(51, 41, 31, 0.55);
  font-size: 0.68rem;
  font-weight: 650;
}

.financing-promo-note {
  max-width: 760px;
  width: fit-content;
  margin-inline: auto;
  text-align: left;
  padding-left: 16px;
  border-left: 3px solid var(--tan);
  color: var(--walnut);
  font-weight: 650;
}

.financing-promo-note a {
  color: var(--coffee);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.financing-result-card {
  display: grid;
  align-content: center;
  padding: clamp(28px, 4vw, 50px);
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(197, 160, 113, 0.2),
      transparent 38%
    ),
    linear-gradient(155deg, #352116, var(--walnut) 58%, #65411f);
  color: var(--cream);
}

.financing-result-card .eyebrow {
  color: var(--tan);
}

.calculator-summary {
  display: grid;
  gap: 0;
  margin: 8px 0 24px;
}

.calculator-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.calculator-summary dt {
  color: rgba(255, 255, 255, 0.72);
}

.calculator-summary dd {
  margin: 0;
  color: #fff;
  font-weight: 800;
}

.calculator-result {
  min-height: 130px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
}

.calculator-status {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

.calculator-estimate {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.45rem);
  line-height: 1.15;
}

/* Business panel, laid out like the Tabit breakdown: a centred weekly-payment
   headline, a pair of tiles for total and term, then the fee breakdown. */
.financing-calculator[data-mode="business"] .calculator-result {
  min-height: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 24px 20px;
}

.calculator-estimate-unit {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
}

.financing-calculator.is-inquiry-only .calculator-estimate-unit {
  display: none;
}

.calculator-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.calculator-tile {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 13px 10px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  text-align: center;
}

.calculator-tile-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
}

.calculator-tile strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
}

.calculator-fee-box {
  margin-top: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.calculator-plan-disclosure {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
}

/* Fee breakdown: amount financed, service fee and total. */
.calculator-breakdown-title {
  margin: 0;
  color: var(--tan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.calculator-breakdown {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
}

.calculator-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.calculator-breakdown > div:last-child {
  border-bottom: 0;
}

.calculator-breakdown dt {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
}

.calculator-breakdown dd {
  margin: 0;
  color: #fff;
  font-weight: 800;
}

.calculator-breakdown-sum dt,
.calculator-breakdown-sum dd {
  color: #fff;
  font-size: 1rem;
}

.calculator-print {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.calculator-print:hover {
  color: #fff;
}

.calculator-print:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Moved-in "why" and "how it works" content now lives inside FAQ answers. */
.faq-answer-list,
.faq-answer-steps {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.faq-answer-list li,
.faq-answer-steps li {
  padding-left: 2px;
}

.faq-answer-list strong,
.faq-answer-steps strong {
  color: var(--walnut);
}

.faq-answer-terms {
  gap: 6px;
}

.calculator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.financing-result-card .button.secondary {
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}

.financing-result-card .button.secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.financing-disclosure {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px clamp(22px, 3vw, 34px);
  border-top: 1px solid rgba(75, 46, 25, 0.13);
  background: #fff;
  color: rgba(51, 41, 31, 0.66);
  font-size: 0.8rem;
  line-height: 1.55;
}

.financing-steps-section {
  padding-block: clamp(44px, 5vw, 70px);
  background: var(--sand);
}

.financing-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.financing-steps li {
  position: relative;
  min-height: 210px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-soft);
}

.financing-steps li > span {
  display: block;
  margin-bottom: 24px;
  color: var(--coffee);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.financing-steps h3 {
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.financing-steps p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.financing-form-section {
  padding-block: clamp(44px, 5vw, 70px);
  scroll-margin-top: 90px;
  background: #fff;
}

.financing-form-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: start;
}

.financing-form-copy {
  position: sticky;
  top: 112px;
}

.financing-form-copy > p:not(.eyebrow) {
  color: var(--ink-soft);
}

.financing-form-shell {
  min-width: 0;
}

.financing-inquiry-form {
  gap: 20px;
}

.financing-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-privacy-note {
  max-width: 680px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

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

.financing-form-disclosure {
  grid-column: auto;
  margin-top: 2px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}

.financing-form-success {
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid rgba(75, 46, 25, 0.16);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #fff, var(--sand));
  box-shadow: var(--shadow);
}

.financing-form-success[hidden],
.financing-inquiry-form[hidden] {
  display: none !important;
}

.financing-form-success h3 {
  margin-bottom: 12px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.financing-form-success p:not(.eyebrow) {
  max-width: 590px;
  color: var(--ink-soft);
}

.financing-form-success .button {
  margin-top: 16px;
}

.financing-faq-section {
  padding-block: clamp(44px, 5vw, 70px);
  background: var(--sand);
}

.financing-crosslink-section {
  padding-block: clamp(36px, 4vw, 56px);
}

.financing-faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(34px, 7vw, 94px);
  align-items: start;
}

.financing-faq-layout > div:first-child {
  position: sticky;
  top: 112px;
}

.financing-faq-layout > div:first-child > p:not(.eyebrow) {
  color: var(--ink-soft);
}

.financing-faq-list {
  display: grid;
  gap: 12px;
}

.financing-faq-list details {
  overflow: hidden;
  border: 1px solid rgba(75, 46, 25, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-soft);
}

.financing-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 60px;
  padding: 16px 20px;
  color: var(--walnut);
  cursor: pointer;
  font-weight: 750;
  list-style: none;
}

.financing-faq-list summary::-webkit-details-marker {
  display: none;
}

.financing-faq-list summary::after {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sand);
  content: "+";
  font-size: 1.15rem;
  font-weight: 500;
}

.financing-faq-list details[open] summary::after {
  content: "−";
}

.financing-faq-list [data-faq-answer] {
  padding: 0 20px 20px;
}

.financing-faq-list [data-faq-answer] p {
  margin: 0;
  color: var(--ink-soft);
}

.financing-faq-list summary:focus-visible,
.calculator-field input:focus-visible,
.calculator-field select:focus-visible,
.text-link:focus-visible {
  outline: 2px solid rgba(197, 160, 113, 0.85);
  outline-offset: 3px;
}

.money-input input[type="number"]:focus-visible,
.percentage-input input[type="number"]:focus-visible {
  outline: none;
}

.financing-crosslink-panel h2 {
  margin-bottom: 0;
}

/* Homepage financing band: deliberately secondary to the final cabinetry quote CTA. */
.home-financing-section {
  background: #fff;
}

.home-financing-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(75, 46, 25, 0.14);
  border-radius: var(--radius);
  background:
    radial-gradient(
      circle at 94% 6%,
      rgba(197, 160, 113, 0.18),
      transparent 38%
    ),
    linear-gradient(145deg, var(--cream), var(--sand));
  box-shadow: var(--shadow-soft);
}

.home-financing-copy h2 {
  max-width: 760px;
  margin-bottom: 14px;
}

.home-financing-copy > p:not(.eyebrow) {
  max-width: 740px;
  margin-bottom: 0;
  color: var(--ink-soft);
}

.home-financing-actions {
  display: grid;
  gap: 12px;
}

.home-financing-actions .button {
  width: 100%;
  background: rgba(255, 255, 255, 0.74);
}

.lead-financing-note {
  margin-top: 14px;
  color: var(--coffee) !important;
  font-weight: 700;
}

@media (max-width: 1120px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav,
  .site-header .nav-dropdown {
    display: none;
  }

  .menu-toggle {
    display: inline-grid;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  .financing-calculator,
  .financing-form-layout,
  .financing-faq-layout,
  .home-financing-panel {
    grid-template-columns: 1fr;
  }

  .financing-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .financing-form-copy,
  .financing-faq-layout > div:first-child {
    position: static;
  }

  .financing-form-copy {
    max-width: 760px;
  }

  .financing-crosslink-panel {
    grid-template-columns: 1fr;
  }

  .financing-crosslink-panel .button {
    justify-self: start;
  }

  .home-financing-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .financing-hub-hero {
    padding-block: 54px;
  }

  .financing-hub-intro,
  .financing-choice-heading {
    text-align: left;
  }

  .financing-hub-intro h1,
  .financing-hub-intro > p:last-child {
    margin-inline: 0;
  }

  .financing-steps,
  .financing-form-grid,
  .home-financing-actions {
    grid-template-columns: 1fr;
  }

  .financing-choice-copy {
    min-height: 0;
  }

  .financing-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .financing-choice-card {
    min-width: 0;
  }

  .financing-choice-card .media {
    aspect-ratio: 4 / 3;
  }

  .financing-choice-copy {
    padding: 16px 14px;
  }

  .financing-choice-copy .eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .financing-choice-copy h3 {
    margin-bottom: 10px;
    font-size: clamp(1rem, 4.8vw, 1.35rem);
    overflow-wrap: anywhere;
  }

  .financing-choice-copy > p:not(.eyebrow) {
    margin-bottom: 16px;
    font-size: clamp(0.76rem, 3.2vw, 0.9rem);
    line-height: 1.45;
  }

  .financing-choice-copy .button {
    min-height: 52px;
    justify-content: center;
    padding: 10px 8px;
    font-size: clamp(0.64rem, 2.8vw, 0.76rem);
    line-height: 1.2;
    text-align: center;
  }

  .financing-steps li {
    min-height: 0;
  }

  .financing-steps li > span {
    margin-bottom: 24px;
  }

  .financing-calculator {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .financing-calculator-inputs,
  .financing-result-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .financing-result-card {
    margin-top: 14px;
  }

  .financing-disclosure {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }

  .financing-form-full {
    grid-column: auto;
  }

  .financing-inquiry-form {
    padding: 20px;
  }

  .calculator-actions,
  .calculator-actions .button,
  .financing-choice-copy .button,
  .financing-crosslink-panel .button {
    width: 100%;
  }

  .calculator-summary > div {
    align-items: end;
  }

  .plan-picker-grid {
    grid-template-columns: 1fr;
  }

  .plan-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
  }

  .plan-card-rate {
    grid-column: 1;
  }

  .plan-card-price {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin-top: 0;
    text-align: right;
  }

  .financing-why-panel {
    min-height: 0;
  }
}

/* Second mobile pass: the five business term cards are the tallest remaining
   block in that calculator, so tighten them without dropping any of the term
   details. */
@media (max-width: 640px) {
  .plan-picker-grid {
    gap: 8px;
  }

  .plan-card {
    padding: 11px 13px;
    row-gap: 2px;
  }

  .plan-card-name {
    font-size: 0.97rem;
  }

  .plan-card-rate {
    font-size: 0.73rem;
    line-height: 1.32;
  }

  .plan-card-price {
    font-size: 1rem;
  }

  .plan-card-price small {
    display: inline;
    margin-left: 2px;
  }

  .plan-picker legend {
    margin-bottom: 7px;
  }

  .field-help {
    font-size: 0.78rem;
  }
}

/* Mobile compaction: the financing pages read fine on desktop but ran ~8.5
   screens on a phone. Everything below is phone-only; it tightens spacing and
   trims the tallest blocks (hero image, calculator) without changing any
   layout, wording or behaviour. Desktop rules above are untouched. */
@media (max-width: 640px) {
  /* Hub hero stays compact on a phone. */
  .financing-hub-hero {
    padding-block: 34px 30px;
  }

  /* Section rhythm: the stacked bands don't need desktop-scale padding. */
  .financing-why-section,
  .financing-calculator-section,
  .financing-steps-section,
  .financing-form-section,
  .financing-faq-section {
    padding-block: 32px;
  }

  .financing-section-intro,
  .financing-why-heading {
    margin-bottom: 14px;
  }

  /* Why cards + panel */
  .financing-why-cards {
    gap: 8px;
    margin-bottom: 10px;
  }

  .financing-why-card {
    min-height: 0;
    padding: 13px 15px;
  }

  .financing-why-panel {
    padding: 18px;
  }

  /* Calculator, the tallest block on the page. The range sliders stay; their
     end labels are redundant next to the number field, so they go. */
  .financing-calculator-inputs {
    gap: 14px;
    padding: 20px;
  }

  .calculator-field {
    gap: 6px;
  }

  .calculator-range-labels {
    display: none;
  }

  .calculator-field input[type="range"] {
    min-height: 32px;
    margin: 0;
  }

  .financing-result-card {
    padding: 20px;
  }

  .calculator-summary {
    margin: 4px 0 14px;
  }

  .calculator-summary > div {
    padding: 8px 0;
  }

  .calculator-result {
    min-height: 0;
    padding: 15px;
  }

  .calculator-estimate {
    margin-top: 8px;
    font-size: 1.5rem;
  }

  .calculator-actions {
    gap: 8px;
    margin-top: 14px;
  }

  .calculator-actions .button {
    min-height: 46px;
    padding-block: 11px;
  }

  .calculator-plan-disclosure {
    margin-top: 10px;
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .financing-disclosure {
    padding: 12px 14px;
    font-size: 0.73rem;
  }

  /* Steps: stack the numeral beside the text instead of above it, so each
     step is a compact row rather than a tall card. */
  .financing-steps {
    gap: 8px;
  }

  .financing-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    padding: 14px 16px;
  }

  .financing-steps li > span {
    grid-row: 1 / span 2;
    margin-bottom: 0;
    padding-top: 3px;
  }

  .financing-steps h3 {
    margin-bottom: 4px;
    font-size: 1rem;
  }

  .financing-steps p {
    font-size: 0.88rem;
  }

  /* Inquiry form */
  .financing-form-copy h2 {
    font-size: clamp(1.8rem, 8vw, 2.3rem);
  }

  .financing-form-points {
    gap: 8px;
    margin: 14px 0 16px;
  }

  .financing-form-grid {
    gap: 12px;
  }

  .financing-inquiry-form {
    gap: 14px;
  }

  .form-privacy-note {
    font-size: 0.76rem;
  }

  /* FAQ */
  .financing-faq-list {
    gap: 8px;
  }

  .financing-faq-list summary {
    min-height: 52px;
    padding: 13px 16px;
  }

  .financing-faq-list [data-faq-answer] {
    padding: 0 16px 16px;
  }

  /* Crosslink */
  .financing-crosslink-section {
    padding-block: 30px;
  }

  .financing-crosslink-panel {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .financing-why-panel.is-active {
    animation: none;
  }
}

/* ==========================================================================
   Homeowner financing hero (`finance-hero-*`)
   A centred, full-width composition: oversized headline, a floating cabinet
   form that overlaps it, converging perspective rays and two hint chips.
   Every animated element owns exactly one transform for entry, float, pointer
   parallax and scroll each live on their own wrapper so they never collide.
   ========================================================================== */

.finance-hero {
  --fh-mx: 0; /* pointer offset  -1..1, set by financing.js */
  --fh-my: 0;
  --fh-scroll: 0; /* 0..1 across the first viewport of scrolling */
  position: relative;
  display: grid;
  align-items: center;
  min-height: 86vh;
  overflow: hidden;
  padding-block: clamp(26px, 4vh, 54px);
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 42%,
      rgba(197, 160, 113, 0.16),
      transparent 62%
    ),
    linear-gradient(180deg, var(--sand) 0%, #fff 58%, var(--cream) 100%);
}

.finance-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Rays converging on the centre of the composition. */
.finance-hero-lines {
  position: absolute;
  inset: -10%;
  background: repeating-conic-gradient(
    from 0deg at 50% 46%,
    rgba(111, 66, 27, 0.16) 0deg 0.14deg,
    transparent 0.14deg 7.5deg
  );
  opacity: 0.5;
  transform: scale(calc(1 + var(--fh-scroll) * 0.14));
  transform-origin: 50% 46%;
  -webkit-mask-image: radial-gradient(
    ellipse 62% 58% at 50% 46%,
    transparent 0%,
    #000 34%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 62% 58% at 50% 46%,
    transparent 0%,
    #000 34%,
    transparent 78%
  );
  animation: fh-fade-in 1200ms ease 200ms both;
}

.finance-hero-glow {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(78vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(197, 160, 113, 0.34),
    rgba(197, 160, 113, 0.1) 46%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  filter: blur(6px);
  animation: fh-fade-in 1400ms ease both;
}

.finance-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

.finance-hero-eyebrow {
  margin: 0 0 clamp(14px, 2vw, 22px);
  color: var(--coffee);
  font-size: clamp(0.68rem, 1.1vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  animation: fh-rise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms both;
}

.finance-hero-title {
  max-width: 16ch;
  margin: 0;
  color: var(--walnut);
  font-size: clamp(2.4rem, 6.2vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Each line masks its own slide-up reveal; the padding/margin pair keeps
   descenders from clipping without changing the layout box. */
.finance-hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.finance-hero-line > span {
  display: block;
  animation: fh-line 950ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.finance-hero-line:first-child > span {
  animation-delay: 170ms;
}

.finance-hero-line:last-child > span {
  animation-delay: 300ms;
}

/* Stage: pulled up so the cabinet crosses over the headline. */
.finance-hero-stage {
  position: relative;
  width: min(100%, 1080px);
  /* The cabinet sits just under the headline; the chips above provide the
     overlap, so no letterform is ever covered. */
  margin-top: clamp(4px, 1.2vw, 20px);
  transform: translate3d(0, calc(var(--fh-scroll) * -42px), 0);
  will-change: transform;
}

.finance-hero-object {
  animation: fh-object-in 1150ms cubic-bezier(0.22, 0.61, 0.36, 1) 250ms both;
}

.finance-hero-parallax {
  transform: translate3d(
    calc(var(--fh-mx) * 12px),
    calc(var(--fh-my) * 9px),
    0
  );
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.finance-hero-bob {
  animation: fh-bob 7.5s ease-in-out 1500ms infinite;
}

/* Sized against viewport height as well as width so the whole composition
   still fits a short laptop screen without scrolling. */
.finance-hero-cabinet {
  display: grid;
  gap: clamp(7px, 0.9vw, 12px);
  width: min(84%, 560px, 44vh);
  margin-inline: auto;
  transform: perspective(1400px) rotateX(7deg);
}

.finance-hero-cabinet-door {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(75, 46, 25, 0.16);
  border-radius: calc(var(--radius) + 4px);
  background: var(--sand);
  box-shadow: 0 40px 80px -36px rgba(43, 26, 15, 0.55);
}

.finance-hero-cabinet-door img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Light catching the top edge, the way a real door face would. */
.finance-hero-cabinet-door::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 252, 246, 0.42),
    transparent 26%
  );
  content: "";
  pointer-events: none;
}

.finance-hero-cabinet-drawer {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(34px, 5.2vw, 66px);
  border: 1px solid rgba(75, 46, 25, 0.2);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #8a5a2c, var(--walnut));
  box-shadow: 0 24px 44px -30px rgba(43, 26, 15, 0.7);
}

.finance-hero-pull {
  position: absolute;
  top: 14px;
  left: 50%;
  width: clamp(46px, 7vw, 88px);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(253, 252, 250, 0.95),
    rgba(226, 209, 182, 0.9)
  );
  box-shadow: 0 2px 6px rgba(43, 26, 15, 0.28);
  transform: translateX(-50%);
}

.finance-hero-cabinet-drawer .finance-hero-pull {
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Hint chips flanking the cabinet. */
.finance-hero-chip {
  position: absolute;
  z-index: 2;
  transform: translate3d(
    calc(var(--fh-mx) * -16px),
    calc(var(--fh-my) * -11px),
    0
  );
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Lifted above the stage so they cross the headline band at the margins,
   where the centred headline leaves clear space. */
.finance-hero-chip-start {
  top: -12%;
  left: clamp(-4px, 2vw, 54px);
}

.finance-hero-chip-end {
  right: clamp(-4px, 2vw, 54px);
  bottom: 4%;
}

.finance-hero-chip-inner {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.86);
  backdrop-filter: blur(7px);
  box-shadow: var(--shadow-soft);
  color: var(--walnut);
  font-size: clamp(0.76rem, 1vw, 0.88rem);
  font-weight: 750;
  white-space: nowrap;
}

.finance-hero-chip-start .finance-hero-chip-inner {
  animation: fh-chip-start 850ms cubic-bezier(0.22, 0.61, 0.36, 1) 760ms both;
}

.finance-hero-chip-end .finance-hero-chip-inner {
  animation: fh-chip-end 850ms cubic-bezier(0.22, 0.61, 0.36, 1) 880ms both;
}

.finance-hero-chip-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--coffee);
  font-size: 0.76rem;
  font-weight: 800;
}

.finance-hero-lede {
  max-width: 54ch;
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  animation: fh-rise 760ms cubic-bezier(0.22, 0.61, 0.36, 1) 560ms both;
}

.finance-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(18px, 2.4vw, 28px);
  animation: fh-rise 760ms cubic-bezier(0.22, 0.61, 0.36, 1) 660ms both;
}

.finance-hero-link {
  color: var(--walnut);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(197, 160, 113, 0.7);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.finance-hero-link:hover {
  color: var(--coffee);
  text-decoration-color: var(--coffee);
}

.finance-hero-actions .button:focus-visible,
.finance-hero-link:focus-visible {
  outline: 2px solid var(--coffee);
  outline-offset: 3px;
  border-radius: 999px;
}

.finance-hero-note {
  max-width: 62ch;
  margin: clamp(14px, 2vw, 24px) 0 0;
  color: rgba(51, 41, 31, 0.6);
  font-size: 0.79rem;
  line-height: 1.55;
  animation: fh-rise 760ms cubic-bezier(0.22, 0.61, 0.36, 1) 760ms both;
}

@keyframes fh-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fh-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
}

@keyframes fh-line {
  from {
    opacity: 0;
    transform: translate3d(0, 108%, 0);
  }
}

@keyframes fh-object-in {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0) scale(0.85);
  }
}

@keyframes fh-chip-start {
  from {
    opacity: 0;
    transform: translate3d(-38px, 0, 0);
  }
}

@keyframes fh-chip-end {
  from {
    opacity: 0;
    transform: translate3d(38px, 0, 0);
  }
}

@keyframes fh-bob {
  50% {
    transform: translate3d(0, -14px, 0);
  }
}

/* Short desktop screens (13" laptops): trim type and spacing so the primary
   CTA still lands above the fold. */
@media (min-width: 981px) and (max-height: 880px) {
  .finance-hero {
    padding-block: clamp(18px, 2.4vh, 32px);
  }

  .finance-hero-title {
    font-size: clamp(2.4rem, 5vw, 4rem);
  }

  .finance-hero-cabinet {
    width: min(84%, 560px, 38vh);
  }

  .finance-hero-lede {
    margin-top: 18px;
  }

  .finance-hero-note {
    margin-top: 12px;
  }
}

/* Tablet: same centred composition, smaller type and object. */
@media (max-width: 980px) {
  .finance-hero {
    min-height: 0;
    padding-block: clamp(34px, 6vh, 64px);
  }

  .finance-hero-cabinet {
    width: min(92%, 520px);
  }

  .finance-hero-chip-inner {
    padding: 9px 14px;
  }

  /* The headline runs wider relative to the viewport here, so drop the chips
     below it. They float over the cabinet instead of over the type. */
  .finance-hero-chip-start {
    top: 20%;
  }

  .finance-hero-chip-end {
    bottom: 2%;
  }
}

/* Mobile: stack, drop the absolute chips, keep the CTA close to the fold. */
@media (max-width: 640px) {
  .finance-hero {
    padding-block: 26px 34px;
  }

  .finance-hero-title {
    max-width: 14ch;
    font-size: clamp(2.15rem, 10.5vw, 3rem);
  }

  .finance-hero-stage {
    margin-top: 14px;
    transform: none;
  }

  .finance-hero-cabinet {
    width: 100%;
    transform: none;
  }

  .finance-hero-cabinet-door {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
  }

  .finance-hero-pull {
    top: 10px;
    height: 5px;
  }

  .finance-hero-chip {
    position: static;
    transform: none;
  }

  .finance-hero-chip-inner {
    justify-content: center;
    padding: 8px 13px;
    font-size: 0.76rem;
    white-space: normal;
  }

  /* The two chips sit under the cabinet as a simple pair. */
  .finance-hero-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .finance-hero-object {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  .finance-hero-lede {
    margin-top: 20px;
    font-size: 0.97rem;
  }

  .finance-hero-actions {
    gap: 12px;
    width: 100%;
    margin-top: 18px;
  }

  .finance-hero-actions .button {
    width: 100%;
  }

  .finance-hero-note {
    margin-top: 16px;
    font-size: 0.73rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finance-hero-lines,
  .finance-hero-glow,
  .finance-hero-eyebrow,
  .finance-hero-line > span,
  .finance-hero-object,
  .finance-hero-bob,
  .finance-hero-chip-inner,
  .finance-hero-lede,
  .finance-hero-actions,
  .finance-hero-note {
    animation: none;
  }

  .finance-hero-stage,
  .finance-hero-parallax,
  .finance-hero-chip,
  .finance-hero-lines {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Business calculator: two light cards (Tabit-style)
   The business calculator drops the single walnut-panel shell for two separate
   white cards, icon-led headings, a two-column term grid and a soft fee box.
   Everything is scoped to [data-mode="business"] so the homeowner calculator
   keeps its existing dark result panel.
   ========================================================================== */

.financing-calculator[data-mode="business"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.financing-calculator[data-mode="business"] .financing-calculator-inputs,
.financing-calculator[data-mode="business"] .financing-result-card {
  align-content: start;
  gap: 14px;
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid rgba(75, 46, 25, 0.14);
  border-radius: calc(var(--radius) + 4px);
  background: #fff;
  box-shadow: var(--shadow-soft);
  color: var(--ink);
}

/* ---- Icon-led card headings ---- */

.calculator-card-title {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: var(--walnut);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.calculator-card-title svg,
.financing-calculator[data-mode="business"] .plan-picker legend svg,
.financing-calculator[data-mode="business"] .calculator-status svg,
.financing-calculator[data-mode="business"] .calculator-tile-label svg,
.financing-calculator[data-mode="business"] .calculator-breakdown-title svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--tan);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.financing-calculator[data-mode="business"] .plan-picker legend,
.financing-calculator[data-mode="business"] .calculator-status,
.financing-calculator[data-mode="business"] .calculator-tile-label,
.financing-calculator[data-mode="business"] .calculator-breakdown-title {
  display: flex;
  gap: 8px;
  align-items: center;
}

.financing-calculator[data-mode="business"] .calculator-status,
.financing-calculator[data-mode="business"] .calculator-tile-label {
  justify-content: center;
}

.financing-calculator[data-mode="business"] .calculator-tile-label svg,
.financing-calculator[data-mode="business"] .calculator-breakdown-title svg {
  width: 15px;
  height: 15px;
}

/* ---- Inputs ---- */

.financing-calculator[data-mode="business"] .money-input {
  border-color: rgba(75, 46, 25, 0.16);
  background: var(--sand);
}

.financing-calculator[data-mode="business"] .money-input:focus-within {
  background: #fff;
}

/* ---- Term buttons: two per row, the fifth spanning both ---- */

.financing-calculator[data-mode="business"] .plan-picker-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.financing-calculator[data-mode="business"] .plan-card {
  justify-items: center;
  gap: 1px;
  padding: 9px 10px;
  border-color: rgba(75, 46, 25, 0.16);
  border-radius: 10px;
  background: var(--sand);
  text-align: center;
}

.financing-calculator[data-mode="business"] .plan-card:last-child {
  grid-column: 1 / -1;
}

.financing-calculator[data-mode="business"] .plan-card-name {
  font-size: 0.9rem;
}

.financing-calculator[data-mode="business"] .plan-card-rate {
  font-size: 0.69rem;
}

.financing-calculator[data-mode="business"] .plan-card-price {
  margin-top: 1px;
  font-size: 0.8rem;
}

.financing-calculator[data-mode="business"] .plan-card-price small {
  display: inline;
  margin-left: 3px;
}

.financing-calculator[data-mode="business"] .plan-card.is-selected,
.financing-calculator[data-mode="business"] .plan-card:has(input:checked) {
  border-color: var(--walnut);
  background: var(--walnut);
  box-shadow: var(--shadow-soft);
}

.financing-calculator[data-mode="business"] .plan-card.is-selected .plan-card-name,
.financing-calculator[data-mode="business"] .plan-card.is-selected .plan-card-price,
.financing-calculator[data-mode="business"]
  .plan-card:has(input:checked)
  .plan-card-name,
.financing-calculator[data-mode="business"]
  .plan-card:has(input:checked)
  .plan-card-price {
  color: var(--cream);
}

.financing-calculator[data-mode="business"] .plan-card.is-selected .plan-card-rate,
.financing-calculator[data-mode="business"]
  .plan-card.is-selected
  .plan-card-price
  small,
.financing-calculator[data-mode="business"]
  .plan-card:has(input:checked)
  .plan-card-rate,
.financing-calculator[data-mode="business"]
  .plan-card:has(input:checked)
  .plan-card-price small {
  color: rgba(253, 252, 250, 0.72);
}

/* ---- Result panel ---- */

.financing-calculator[data-mode="business"] .calculator-result {
  gap: 1px;
  padding: 18px 15px;
  border-color: rgba(75, 46, 25, 0.14);
  background: var(--cream);
}

.financing-calculator[data-mode="business"] .calculator-status {
  color: var(--walnut);
  font-weight: 750;
}

.financing-calculator[data-mode="business"] .calculator-estimate {
  margin-top: 4px;
  color: var(--coffee);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
}

.financing-calculator[data-mode="business"] .calculator-estimate-unit {
  color: var(--ink-soft);
}

.financing-calculator[data-mode="business"] .calculator-tile {
  border-color: rgba(75, 46, 25, 0.14);
  background: var(--cream);
}

.financing-calculator[data-mode="business"] .calculator-tile-label {
  color: var(--walnut);
  font-weight: 750;
}

.financing-calculator[data-mode="business"] .calculator-tile strong {
  color: var(--walnut);
  font-size: 1.06rem;
}

.financing-calculator[data-mode="business"]
  .calculator-tile--total
  strong {
  color: var(--coffee);
}

.financing-calculator[data-mode="business"] .calculator-fee-box {
  border-color: rgba(75, 46, 25, 0.12);
  background: var(--sand);
}

.financing-calculator[data-mode="business"] .calculator-breakdown-title {
  color: var(--walnut);
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
}

.financing-calculator[data-mode="business"] .calculator-breakdown > div {
  border-bottom: 0;
  padding: 5px 0;
}

.financing-calculator[data-mode="business"] .calculator-breakdown dt {
  color: var(--ink-soft);
}

.financing-calculator[data-mode="business"] .calculator-breakdown dd {
  color: var(--walnut);
}

.financing-calculator[data-mode="business"] .calculator-breakdown-sum {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(75, 46, 25, 0.16);
}

.financing-calculator[data-mode="business"] .calculator-breakdown-sum dt {
  color: var(--walnut);
  font-weight: 800;
}

.financing-calculator[data-mode="business"] .calculator-plan-disclosure {
  color: var(--ink-soft);
}

.financing-calculator[data-mode="business"] .button.secondary {
  border-color: rgba(75, 46, 25, 0.28);
  color: var(--walnut);
}

.financing-calculator[data-mode="business"] .button.secondary:hover {
  background: var(--sand);
}

.financing-calculator[data-mode="business"] .calculator-print {
  color: var(--coffee);
}

.financing-calculator[data-mode="business"] .financing-disclosure {
  padding-inline: 0;
  border-top: 0;
  background: none;
}

/* Tighter field rhythm so the whole calculator clears a laptop viewport. */
.financing-calculator[data-mode="business"] .calculator-field {
  gap: 6px;
}

.financing-calculator[data-mode="business"] .calculator-field > label,
.financing-calculator[data-mode="business"] .plan-picker legend {
  font-size: 0.92rem;
}

.financing-calculator[data-mode="business"] .money-input input[type="number"] {
  min-height: 40px;
}

.financing-calculator[data-mode="business"] .field-help {
  font-size: 0.76rem;
}

.financing-calculator[data-mode="business"] .calculator-actions {
  margin-top: 16px;
}

.financing-calculator[data-mode="business"] .calculator-plan-disclosure {
  margin-top: 10px;
  font-size: 0.75rem;
}

@media (max-width: 980px) {
  .financing-calculator[data-mode="business"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .financing-calculator[data-mode="business"] .plan-picker-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .financing-calculator[data-mode="business"] .plan-card {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    text-align: left;
  }

  .financing-calculator[data-mode="business"] .plan-card-price {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin-top: 0;
  }
}

/* ==========================================================================
   Print / "Save as PDF"
   The calculator's Save-as-PDF button hands off to the browser's own print
   pipeline, so printing a financing page reduces it to the calculator and its
   disclosure. Scoped to the financing pages so no other page is affected.
   ========================================================================== */

@media print {
  body[data-financing-page] > *:not(main),
  body[data-financing-page] main > *:not(.financing-calculator-section),
  body[data-financing-page] .calculator-actions,
  body[data-financing-page] .financing-promo-note,
  body[data-financing-page] elevenlabs-convai {
    display: none !important;
  }

  body[data-financing-page] .financing-calculator-section {
    padding: 0;
  }

  body[data-financing-page] .financing-calculator {
    display: block;
    border: 0;
    box-shadow: none;
  }

  /* The dark result panel is re-inked for paper. */
  body[data-financing-page] .financing-result-card {
    background: none;
    color: #000;
    padding: 0;
    page-break-inside: avoid;
  }

  body[data-financing-page] .financing-result-card .eyebrow,
  body[data-financing-page] .calculator-status,
  body[data-financing-page] .calculator-estimate,
  body[data-financing-page] .calculator-estimate-unit,
  body[data-financing-page] .calculator-tile-label,
  body[data-financing-page] .calculator-tile strong,
  body[data-financing-page] .calculator-breakdown-title,
  body[data-financing-page] .calculator-breakdown dt,
  body[data-financing-page] .calculator-breakdown dd,
  body[data-financing-page] .calculator-plan-disclosure {
    color: #000;
  }

  body[data-financing-page] .calculator-result,
  body[data-financing-page] .calculator-tile,
  body[data-financing-page] .calculator-fee-box {
    border-color: rgba(0, 0, 0, 0.3);
    background: none;
  }

  body[data-financing-page] .calculator-breakdown > div {
    border-bottom-color: rgba(0, 0, 0, 0.2);
  }
}