/* v2: Swiss modernism for the two tools. One typeface, flush left, a 12-column grid, hairline rules,
   square corners, big plain figures. Red is for "you" and the one action; everything else is ink and grey.
   Scale: 12 / 14 / 16 / 20 / 32 and the display figure. Space: 8px steps. Hero and advisor banner are untouched. */

#panel-space.v2-on > :not(.v2-shell),
#panel-lease.v2-on > :not(.v2-shell) { display: none !important; }

.v2-shell { background: #fff; padding: 32px 0 80px; }
.v2 {
  --v2-ink: #1A1A1A; --v2-mute: #5E5D57; --v2-rule: #DBD9D5; --v2-red: var(--kf-red, #a6192e);
  max-width: 1240px; margin: 0 auto; padding-inline: 16px;
  font-family: var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 16px; line-height: 1.5; color: var(--v2-ink);
  font-variant-numeric: tabular-nums;
}
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 :focus-visible { outline: 2px solid var(--v2-red); outline-offset: 2px; }
.v2 b { font-weight: 500; }
@media (min-width: 640px) { .v2 { padding-inline: 24px; } }
@media (min-width: 1100px) { .v2 { padding-inline: 32px; } }

/* On a phone the links go under the heading, in one row, so the heading keeps the full width */

/* Grid: a rail and a column of reading, one column on a phone */

/* Section label: a heavy rule, a red number, a plain name */
.v2 .v2-sec { display: flex; align-items: baseline; gap: 16px; margin: 0 0 24px; padding-top: 12px; border-top: 2px solid var(--v2-ink); font: 500 14px/1.2 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); letter-spacing: 0; color: var(--v2-ink); }
.v2-sec i { font-style: normal; color: var(--v2-red); }

/* Type */
.v2-tag { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--v2-rule); font-size: 12px; color: var(--v2-mute); }
.v2-note { margin: 12px 0 0; font-size: 14px; color: var(--v2-mute); }
.v2-note b { color: var(--v2-ink); }
.v2-lab { display: block; margin: 0 0 8px; font-size: 12px; color: var(--v2-mute); }
.v2-empty { margin: 0; padding: 24px 0; border-top: 1px solid var(--v2-rule); font-size: 16px; color: var(--v2-mute); }
.v2-empty b { color: var(--v2-ink); }

/* Facts: three figures on one hairline */
.v2-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 32px 0 0; border-top: 1px solid var(--v2-ink); }
.v2-facts div { padding: 12px 0 0; }
.v2-facts dt { font-size: 12px; color: var(--v2-mute); }
.v2-facts dd { margin: 4px 0 0; font: 400 clamp(20px, 3vw, 32px)/1.1 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); letter-spacing: -0.02em; }

/* Buttons: one solid (the action), one outlined */
.v2-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
.v2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 2px solid var(--v2-red); border-radius: 0; background: var(--v2-red); color: #fff; font: 500 16px/1 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); cursor: pointer; }
.v2-btn:hover { background: #7D1322; border-color: #7D1322; }
.v2-btn--ghost { background: transparent; color: var(--v2-ink); border-color: var(--v2-ink); }
.v2-btn--ghost:hover { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }
@media (max-width: 640px) { .v2-cta .v2-btn { width: 100%; } }

/* Where it goes */
.v2-bar { display: flex; height: 32px; gap: 2px; }
.v2-bar i { display: block; min-width: 2px; }
.v2-legend { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--v2-rule); }
.v2-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 48px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--v2-rule); font-size: 14px; }
.v2-sw { width: 12px; height: 12px; display: block; }
.v2-pct { text-align: right; color: var(--v2-mute); }

/* Ways to save and area rows */
.v2-track { display: block; height: 16px; background: var(--paper-2, #eae9e6); }
.v2-track i { display: block; height: 100%; background: var(--v2-ink); }
.v2-rows--areas li.is-here .v2-track i { background: var(--v2-red); }
.v2-rows--areas li.is-here .v2-rk, .v2-rows--areas li.is-here .v2-rv b { color: var(--v2-red); font-weight: 500; }

/* Folds */
.v2-fold { margin-top: 24px; border-top: 1px solid var(--v2-rule); }
.v2-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 14px; }
.v2-fold > summary::-webkit-details-marker { display: none; }
.v2-fold > summary::after { content: '+'; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--v2-ink); }
.v2-fold[open] > summary::after { content: '\2212'; }
.v2-fold[hidden] { display: none; }

/* Lease result */
.v2-head2 { margin: 0; font: 500 clamp(28px, 4.2vw, 44px)/1.05 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); letter-spacing: -0.03em; }
.v2-steps { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: v2s; border-top: 1px solid var(--v2-ink); }
.v2-steps li { counter-increment: v2s; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--v2-rule); font-size: 18px; line-height: 1.35; }
.v2-steps li::before { content: counter(v2s); color: var(--v2-red); font-weight: 500; }
.v2-table { width: 100%; margin: 32px 0 0; border-collapse: collapse; font-size: 14px; }
.v2-table th, .v2-table td { padding: 10px 0; border-bottom: 1px solid var(--v2-rule); text-align: right; font-weight: 400; }
.v2-table th[scope=row], .v2-table thead th:first-child { text-align: left; }
.v2-table thead th { font-size: 12px; color: var(--v2-mute); border-bottom: 1px solid var(--v2-ink); }
.v2-table td.is-you { color: var(--v2-red); font-weight: 500; }

/* Rent strip: the market band, you, and where the market is expected to be */
.v2-strip-wrap { margin-top: 40px; }
.v2-strip { position: relative; height: 156px; margin-top: 8px; }
.v2-st-rail { position: absolute; left: 0; right: 0; top: 80px; height: 2px; background: var(--v2-ink); }
.v2-st-band { position: absolute; top: -10px; height: 22px; background: var(--line, #dbd9d5); }
.v2-st-dot { position: absolute; top: -7px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--v2-red); }
.v2-st-dot.is-exp { background: #fff; box-shadow: inset 0 0 0 2px var(--v2-ink); }
/* --x (0-100) slides a label over its point so it never runs past the chart's edges */
.v2-st-lab { position: absolute; top: calc(var(--row) * -4px); transform: translateX(calc(var(--x, 50) * -1%)); width: max-content; max-width: 160px; font-size: 12px; line-height: 1.25; text-align: center; color: var(--v2-mute); }
.v2-st-lab b { font-size: 14px; color: var(--v2-ink); }
.v2-st-lab.is-you b { color: var(--v2-red); }
.v2-st-lab.is-exp { top: 34px; }
/* Each range figure centred under its band edge, as an axis label */
.v2-st-edge { position: absolute; top: 100px; transform: translateX(-50%); font-size: 12px; color: var(--v2-mute); white-space: nowrap; }
.v2-st-cap { position: absolute; left: 0; bottom: 0; font-size: 12px; color: var(--v2-mute); }

/* Timeline */
.v2-tl { position: relative; height: 150px; margin: 8px 0 8px; }
.v2-tl-rail { position: absolute; left: 0; right: 0; top: 70px; height: 2px; background: var(--v2-ink); }
.v2-tl-win { position: absolute; top: -6px; height: 14px; background: var(--line, #dbd9d5); }
.v2-tl-dot { position: absolute; top: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--v2-ink); }
.v2-tl-dot.is-today { background: var(--v2-red); box-shadow: none; }
.v2-tl-lab { position: absolute; transform: translateX(calc(var(--x, 50) * -1%)); width: 120px; font-size: 12px; line-height: 1.25; text-align: center; color: var(--v2-mute); }
.v2-tl-lab { top: calc(70px + 20px); }
.v2-tl-lab[style*='--row:0'] { top: 4px; }
.v2-tl-lab b { color: var(--v2-ink); font-size: 14px; }
.v2-tl-lab.is-today b { color: var(--v2-red); }
@media (max-width: 640px) { .v2-tl-lab { width: 84px; } }

/* Points, checks */
.v2-points { margin: 0; padding: 0; list-style: none; counter-reset: v2p; border-top: 1px solid var(--v2-ink); }
.v2-points li { counter-increment: v2p; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 8px; padding: 16px 0; border-bottom: 1px solid var(--v2-rule); }
.v2-points li::before { content: counter(v2p); grid-row: 1 / span 2; color: var(--v2-red); font-weight: 500; }
.v2-points b { font-size: 18px; }
.v2-points p { margin: 4px 0 0; font-size: 14px; color: var(--v2-mute); }
.v2-sub { margin-top: 40px; }
.v2-sub:first-child { margin-top: 0; }
.v2-head3 { margin: 0 0 12px; font: 500 14px/1.2 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); }
.v2-two { display: grid; grid-template-columns: 140px minmax(0, 1fr) 100px; gap: 12px 16px; align-items: center; font-size: 14px; }
.v2-two .v2-track i.is-you { background: var(--v2-red); }
.v2-two .v2-track i.is-grey { background: #8a8880; }
.v2-two b { text-align: right; }
.v2-checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--v2-rule); }
.v2-checks li { padding: 10px 0; border-bottom: 1px solid var(--v2-rule); font-size: 14px; }
@media (max-width: 640px) { .v2-two { grid-template-columns: 1fr auto; } .v2-two .v2-track { grid-column: 1 / -1; } }

/* The existing blocks, quietened to sit in this grid */
.v2 .sp-team, .v2 #leaseBar { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.v2 .sp-team > .sp-step, .v2 #spTeamTitle { display: none; }
.v2 .field-label, .v2 .lc-label { font-size: 14px; color: var(--v2-ink); }
.v2 .caption, .v2 .sp-note { font-size: 12px; color: var(--v2-mute); }
.v2 input[type=text], .v2 input[type=number], .v2 input[type=date], .v2 select.standard-select, .v2 #leaseBar select, .v2 #leaseBar input {
  border: 1px solid var(--v2-ink); border-radius: 0; background: #fff; font-size: 16px; color: var(--v2-ink); min-height: 48px;
}
.v2 .btn-icon { border-radius: 0; border-color: var(--v2-ink); }
.v2 .amen-opt, .v2 .rd-inputs-wk-chip, .v2 .sp-tab { border: 1px solid var(--v2-ink); background: #fff; color: var(--v2-ink); }
.v2 .amen-opt[aria-pressed="true"], .v2 .rd-inputs-wk-chip[aria-pressed="true"] { background: var(--v2-ink); color: #fff; }
.v2 #spMore{ border-radius: 0; box-shadow: none; }
.v2 #spMore { border: 0; border-top: 1px solid var(--v2-rule); background: transparent; padding: 0; }

.v2 #nextStepSlot-space, .v2 #lcOfferBand { margin: 0; }
.v2 #lcOfferBand { background: transparent; padding: 0; }

@media (prefers-reduced-motion: reduce) { .v2 * { transition: none !important; animation: none !important; } }

/* How to pay less: the track is today's rent; ink is what you pay, red is what you save. */

/* The lease form sits in the same grey card as the team form. */
#v2l-res .v2-facts { margin-top: 24px; }
#v2l-res .v2-facts dd { font-size: clamp(18px, 2.4vw, 26px); }
/* Three figures a row fit a small phone only a size down */
@media (max-width: 400px) { .v2-facts dd, #v2l-res .v2-facts dd { font-size: 17px; } .v2-facts { column-gap: 16px; } }

/* A short window: the step bar scrolls with the page instead of taking a third of the screen. */

/* Each saving row shows its Mon-Fri week: who is in on which day, and the busiest day that sets the desks. */
.v2-wk-d.is-peak b, .v2-wk-d.is-peak span { color: var(--v2-red); font-weight: 500; }
.v2-wk-d.is-peak .v2-wk-col { outline: 1.5px solid var(--v2-red); outline-offset: 1px; }