@font-face {
  font-family: "Proforma Cinzel";
  src: url("../../fonts/Cinzel-Bold.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

.proforma-page {
  --teal: #005775;
  --aqua: #38c3e3;
  --orange: #ff9600;
  --sand: #f7f3e4;
  --sand-deep: #eee7d4;
  --paper: #fff;
  --ink: #333;
  --muted: #6f6f6e;
  --line: #ddd9cd;
  --positive: #005775;
  --negative: #9b493e;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--sand);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 8px);
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
}

.proforma-page, .proforma-page * { box-sizing: border-box; }
.proforma-page button, .proforma-page input { font: inherit; }
.proforma-page button, .proforma-page input[type="range"] { cursor: pointer; }

.proforma-page .kicker, .proforma-page .step, .proforma-page legend { letter-spacing: .14em; text-transform: uppercase; }

.proforma-page main { max-width: 1540px; margin: auto; padding: 0 clamp(18px, 4vw, 64px) 64px; }
.proforma-page .hero { position: static; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; justify-content: normal; min-height: 0; padding: clamp(42px, 7vw, 92px) 0 40px; color: inherit; background-image: none; text-align: left; }
.proforma-page .kicker { margin: 0 0 11px; color: var(--orange); font-size: .75em; font-weight: 700; }
.proforma-page h1 { max-width: 820px; margin: 0; color: var(--ink); font-family: "Proforma Cinzel", Georgia, serif; font-size: clamp(2.45em, 4.7vw, 5em); font-weight: 400; line-height: 1; letter-spacing: -.025em; }
.proforma-page h2 { margin: 0; color: var(--teal); font-family: Georgia, Times, "Times New Roman", serif; font-size: clamp(1.65em, 2.5vw, 2.3em); font-style: italic; font-weight: 400; }
.proforma-page .intro { max-width: 540px; margin: 0 0 7px; color: var(--muted); font-size: clamp(1.05em, 1.5vw, 1.3em); line-height: 1.6; }

.proforma-page .workspace { display: grid; grid-template-columns: minmax(305px, 385px) minmax(0, 1fr); gap: 28px; align-items: start; }
.proforma-page .assumptions, .proforma-page .projection { border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(70, 65, 50, .1); }
.proforma-page .assumptions { position: sticky; top: 18px; min-width: 0; background: var(--paper); }
.proforma-page .projection { min-width: 0; background: var(--paper); }
.proforma-page .panel-heading, .proforma-page .projection-heading { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.proforma-page .projection-heading { border-top: 4px solid var(--orange); }
.proforma-page .step { margin: 0 0 4px; color: var(--orange); font-size: .75em; font-weight: 700; }
.proforma-page .text-button { padding: 6px 0; color: var(--teal); background: none; border: 0; border-bottom: 1px solid currentColor; font-size: .9em; font-weight: 700; }

.proforma-page form { padding: 0 24px 24px; }
.proforma-page fieldset { display: grid; gap: 11px; margin: 0; padding: 21px 0 18px; border: 0; border-bottom: 1px solid var(--line); }
.proforma-page fieldset:last-child { border: 0; padding-bottom: 0; }
.proforma-page legend { float: left; width: 100%; margin-bottom: 13px; color: var(--teal); font-size: .75em; font-weight: 700; }
.proforma-page fieldset > label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 1em; font-weight: 600; }
.proforma-page .input-shell, .proforma-page .paired input { min-height: 40px; border: 1px solid #c9c3b4; border-radius: 2px; background: var(--paper); color: var(--teal); }
.proforma-page .input-shell { display: flex; align-items: center; width: 148px; padding: 0 9px; color: var(--muted); }
.proforma-page .input-shell input { min-width: 0; width: 100%; padding: 0 5px; border: 0; outline: 0; color: var(--ink); background: transparent; text-align: right; font-weight: 700; }
.proforma-page .input-shell.suffix input { text-align: right; }
.proforma-page .paired { display: flex; width: 148px; gap: 7px; }
.proforma-page .paired input { width: calc(50% - 3px); padding: 0 8px; text-align: right; font-weight: 700; }
.proforma-page input:focus { outline: 2px solid var(--teal); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 150, 0, .22); }

.proforma-page .slider-field { display: grid; gap: 7px; margin-bottom: 13px; }
.proforma-page .slider-label { display: flex; justify-content: space-between; align-items: baseline; }
.proforma-page .slider-label label { color: var(--ink); font-size: 1em; font-weight: 700; }
.proforma-page .slider-label output { color: var(--teal); font-family: Georgia, serif; font-size: 1.25em; font-weight: 700; }
.proforma-page input[type="range"] { width: 100%; accent-color: var(--orange); }
.proforma-page .rate-ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: .75em; }
.proforma-page .rate-ticks span.active { color: var(--teal); font-weight: 800; }
.proforma-page .slider-field a { width: fit-content; color: var(--teal); font-size: .78em; text-decoration-color: var(--aqua); text-underline-offset: 3px; }
.proforma-page .depreciation-schedule { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.proforma-page .depreciation-schedule summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); cursor: pointer; list-style: none; }
.proforma-page .depreciation-schedule summary::-webkit-details-marker { display: none; }
.proforma-page .depreciation-schedule summary small { display: block; margin-top: 3px; color: var(--muted); font-size: .78em; font-weight: 400; }
.proforma-page .depreciation-schedule[open] .disclosure { transform: rotate(45deg); }
.proforma-page .depreciation-schedule-body { margin-top: 14px; padding: 12px; background: var(--sand); }
.proforma-page .depreciation-schedule table { width: 100%; border-collapse: collapse; font-size: .8em; font-variant-numeric: tabular-nums; }
.proforma-page .depreciation-schedule th, .proforma-page .depreciation-schedule td { padding: 4px; text-align: right; }
.proforma-page .depreciation-schedule th:first-child { width: 34px; text-align: center; }
.proforma-page .depreciation-schedule thead th { color: var(--teal); font-size: .86em; letter-spacing: .06em; text-transform: uppercase; }
.proforma-page .depreciation-schedule tbody th { color: var(--muted); font-weight: 600; }
.proforma-page .depreciation-input { display: inline-flex; align-items: center; width: 82px; min-height: 30px; padding: 0 7px; color: var(--muted); background: var(--paper); border: 1px solid #c9c3b4; }
.proforma-page .depreciation-input input { min-width: 0; width: 100%; padding: 0 4px 0 0; color: var(--ink); background: transparent; border: 0; outline: 0; text-align: right; font-weight: 700; }
.proforma-page .depreciation-reset { width: 100%; margin-top: 12px; padding: 8px 10px; color: var(--teal); background: var(--paper); border: 1px solid var(--teal); border-radius: 20px; font-size: .85em; font-weight: 700; }

.proforma-page .projection-heading h2 { color: var(--teal); }
.proforma-page .projection-heading #projection-year { margin: 0; color: var(--teal); font-family: Georgia, serif; font-size: 1.3em; }
.proforma-page .headline-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.proforma-page .headline-card { padding: 22px; background: var(--sand); }
.proforma-page .headline-card p { margin: 0 0 8px; color: var(--muted); font-size: .75em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.proforma-page .headline-card strong { display: block; color: var(--teal); font-family: Georgia, serif; font-size: clamp(1.4em, 2.5vw, 2.15em); }
.proforma-page .headline-card small { color: var(--muted); }

.proforma-page .table-wrap { overflow-x: auto; }
.proforma-page .projection-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 1em; font-variant-numeric: tabular-nums; }
.proforma-page .projection-table th, .proforma-page .projection-table td { padding: 11px 16px; border-bottom: 1px solid #e8e3d7; font-size: 1em; text-align: right; }
.proforma-page .projection-table thead th { color: var(--teal); background: var(--sand-deep); font-family: Georgia, serif; font-size: .9em; }
.proforma-page .projection-table th:first-child, .proforma-page .projection-table td:first-child { width: 39%; text-align: left; }
.proforma-page .projection-table .section-row th { padding-top: 24px; padding-bottom: 8px; color: var(--orange); background: var(--paper); font-size: .75em; letter-spacing: .14em; text-transform: uppercase; }
.proforma-page .projection-table tbody tr.total td { color: var(--teal); background: var(--sand); border-top: 2px solid var(--teal); font-weight: 800; }
.proforma-page .projection-table td:first-child small { display: block; margin-top: 3px; color: #888; font-size: .78em; font-weight: 400; }
.proforma-page .negative { color: var(--negative); }
.proforma-page .positive { color: var(--positive); }
.proforma-page .mobile-scenario-nav, .proforma-page .mobile-scenario { display: none; }

.proforma-page .accounting-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proforma-page .accounting-details summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 24px; color: var(--teal); cursor: pointer; list-style: none; }
.proforma-page .accounting-details summary::-webkit-details-marker { display: none; }
.proforma-page .accounting-details summary small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; }
.proforma-page .disclosure { color: var(--aqua); font-family: Georgia, serif; font-size: 1.8em; transition: transform .2s ease; }
.proforma-page .accounting-details[open] .disclosure { transform: rotate(45deg); }
.proforma-page .accounting-details[open] summary { border-bottom: 1px solid var(--line); }
.proforma-page .disclaimer { margin: 24px; padding: 16px 18px; color: #625b4d; background: var(--sand); border-left: 3px solid var(--orange); font-family: Georgia, serif; font-size: .9em; line-height: 1.55; }
.proforma-page .year-switcher { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 24px; color: var(--ink); background: var(--sand); }
.proforma-page .year-switcher > span { color: var(--muted); font-size: .75em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.proforma-page .year-switcher div { display: flex; gap: 7px; }
.proforma-page .year-switcher button { min-width: 76px; padding: 9px 14px; color: var(--teal); background: var(--paper); border: 1px solid var(--teal); border-radius: 22px; font-weight: 700; }
.proforma-page .year-switcher button:hover { border-color: var(--aqua); }
.proforma-page .year-switcher button[aria-pressed="true"] { color: var(--ink); background: var(--orange); border-color: var(--orange); }
.proforma-page .error { margin: 20px; padding: 14px; color: #742e27; background: #f4dcda; border: 1px solid #d7a9a3; }
@media (max-width: 1020px) {
  .proforma-page .workspace { grid-template-columns: 1fr; }
  .proforma-page .assumptions { position: static; }
  .proforma-page form { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 30px; }
  .proforma-page .tax-rates { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .proforma-page .hero { grid-template-columns: 1fr; gap: 22px; padding-top: 48px; }
  .proforma-page h1 { font-size: clamp(2.35em, 12vw, 3.2em); }
  .proforma-page form { display: block; }
  .proforma-page .headline-cards { display: none; }
  .proforma-page .mobile-scenario-nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; min-height: 82px; color: white; background: var(--ink); border-top: 1px solid #575757; border-bottom: 3px solid var(--orange); box-shadow: 0 8px 18px rgba(51, 51, 51, .22); }
  .proforma-page .mobile-scenario-nav > button { display: grid; width: 44px; height: 44px; margin: auto; place-items: center; color: var(--aqua); background: transparent; border: 1px solid #777; border-radius: 50%; font-family: Georgia, serif; font-size: 1.8em; line-height: 1; }
  .proforma-page .mobile-scenario-nav > button:focus-visible, .proforma-page .scenario-dots button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .proforma-page .scenario-current { min-width: 0; text-align: center; }
  .proforma-page .scenario-current strong, .proforma-page .scenario-label > span { display: block; }
  .proforma-page .scenario-current strong { overflow: hidden; font-family: Georgia, serif; font-size: 1.05em; text-overflow: ellipsis; white-space: nowrap; }
  .proforma-page .scenario-label > span { margin-top: 2px; color: var(--sand); font-size: .8em; font-weight: 700; }
  .proforma-page .scenario-dots { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
  .proforma-page .scenario-dots button { display: grid; width: 20px; height: 16px; padding: 0; place-items: center; background: transparent; border: 0; }
  .proforma-page .scenario-dots span { width: 5px; height: 5px; background: #777; border-radius: 50%; }
  .proforma-page .scenario-dots button[aria-pressed="true"] span { width: 14px; background: var(--aqua); border-radius: 4px; }
  .proforma-page .table-wrap { overflow: visible; }
  .proforma-page .projection-table { display: none; }
  .proforma-page .mobile-scenario { display: block; background: var(--paper); touch-action: pan-y; }
  .proforma-page .mobile-section h4 { margin: 0; padding: 18px 18px 7px; color: var(--orange); font-size: .75em; letter-spacing: .14em; text-transform: uppercase; }
  .proforma-page .mobile-section dl { margin: 0; }
  .proforma-page .mobile-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 54px; margin: 0; padding: 10px 18px; border-bottom: 1px solid #e8e3d7; }
  .proforma-page .mobile-row dt { min-width: 0; font-size: 1em; }
  .proforma-page .mobile-row dt small { display: block; margin-top: 3px; color: #888; font-size: .78em; line-height: 1.25; }
  .proforma-page .mobile-row dd { margin: 0; font-size: 1em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .proforma-page .mobile-row.total { color: var(--teal); background: var(--sand); border-top: 2px solid var(--teal); font-weight: 800; }
  .proforma-page .year-switcher { align-items: flex-start; flex-direction: column; }
  .proforma-page .year-switcher div { width: 100%; }
  .proforma-page .year-switcher button { flex: 1; min-width: 0; }
  .proforma-page .compact span:nth-child(even) { display: none; }
}
