/* Features: Showroom screens, Pay runs, Window sheets and Tours on the Dealerships page (features_finish.py).
   Stylised drawings with sample content only. Newsreader only at 28 px and up; 12 px floor for any text inside
   the TV and the panels; no italic. Ember is not used here except the Rooftop wordmark dot the site's stylised
   Rooftop screen already carries. Motion is opacity and transform only. */
#rooftop-features {
  --ft-ink: #0b0d0e; --ft-body: #191d1e; --ft-muted: #59615d; --ft-wall: #e9e4da;
  --ft-scr: #f3f4ef; --ft-sink: #24312c; --ft-sdim: #4f5e52; --ft-tile: #e5e9df; --ft-line: #d7ded1;
  --ft-sage: #7a9271; --ft-track: #c7d2bf; --ft-bezel: #151718; --ft-paper: #fdfcf9;
  --ft-ph-wall: #e3e5df; --ft-ph-floor: #cfd4cb; --ft-ph-ink: #3d4a43;
  --ft-ease: cubic-bezier(.16, 1, .3, 1);
  background: #f5f2ec; color: var(--ft-body); font-family: Manrope, sans-serif;
  padding: clamp(56px, 7vw, 104px) 0; overflow: clip;
}
#rooftop-features *, #rooftop-features *::before, #rooftop-features *::after { box-sizing: border-box; font-style: normal; }
#rooftop-features .ft-wrap { position: relative; }
#rooftop-features figure, #rooftop-features p, #rooftop-features h2, #rooftop-features h3, #rooftop-features ul, #rooftop-features table { margin: 0; padding: 0; }
#rooftop-features ul { list-style: none; }

/* Head */
#rooftop-features .ft-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
#rooftop-features .ft-h2 { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.08; letter-spacing: -.015em; color: var(--ft-ink); max-width: 13em; text-wrap: balance; }
#rooftop-features .ft-lede { font-size: 17px; line-height: 1.6; color: var(--ft-muted); max-width: 30em; margin-bottom: 14px; }
#rooftop-features .ft-h3 { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(28px, 2.3vw, 32px); line-height: 1.08; letter-spacing: -.015em; color: var(--ft-ink); }
#rooftop-features .ft-p { font-size: 16px; line-height: 1.6; color: var(--ft-muted); max-width: 32em; }
#rooftop-features .ft-note { display: block; font-size: 12px; line-height: 1.5; color: var(--ft-muted); margin-top: 12px; }

/* Shared stage: the wall a screen or a sheet sits on. */
#rooftop-features .ft-stage { position: relative; background: var(--ft-wall); border-radius: 6px; }

/* Showroom screens */
#rooftop-features .ft-stage-wall { padding: clamp(24px, 4.4vw, 64px) clamp(16px, 6vw, 96px); }
#rooftop-features .ft-tv { width: min(100%, 880px, calc((100svh - 330px) * 16 / 9)); min-width: min(100%, 560px); margin: 0 auto; background: var(--ft-bezel); padding: clamp(6px, .8vw, 11px); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 34px 60px -34px rgba(20, 22, 24, .55); }
#rooftop-features .ft-tv-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ft-scr); border-radius: 2px; container: fttv / inline-size; color: var(--ft-sink); }
#rooftop-features .ft-board { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.2cqw; padding: 3cqw 3.4cqw 3.6cqw; opacity: 0; }
#rooftop-features .ft-board:first-child { opacity: 1; }
#rooftop-features [data-ft-js] .ft-board { opacity: 0; transition: opacity .7s ease; }
#rooftop-features [data-ft-js] .ft-board[data-ft-on] { opacity: 1; }
#rooftop-features .ft-bhead { display: flex; align-items: baseline; gap: 12px; font-size: max(12px, 1.45cqw); line-height: 1.3; color: var(--ft-sdim); padding-bottom: 1.4cqw; border-bottom: 1px solid var(--ft-line); }
#rooftop-features .ft-rt { font-weight: 650; color: var(--ft-sink); font-size: max(14px, 1.9cqw); letter-spacing: -.03em; }
#rooftop-features .ft-rt em { color: #b44a19; }
#rooftop-features .ft-crumb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rooftop-features .ft-tag { font-size: 12px; font-weight: 600; color: var(--ft-sdim); border: 1px solid var(--ft-line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
#rooftop-features .ft-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; }
#rooftop-features .ft-tiles > div { background: var(--ft-tile); border: 1px solid var(--ft-line); padding: 1.4cqw 1.6cqw; display: flex; flex-direction: column; justify-content: space-between; gap: .6cqw; }
#rooftop-features .ft-tiles small { font-size: max(12px, 1.3cqw); font-weight: 600; line-height: 1.25; color: var(--ft-sdim); }
#rooftop-features .ft-tiles b { font-size: max(20px, 4.2cqw); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--ft-sink); }
#rooftop-features .ft-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1cqw; }
#rooftop-features .ft-chart small { font-size: max(12px, 1.25cqw); font-weight: 600; color: var(--ft-sdim); }
#rooftop-features .ft-bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 2.6cqw; padding-top: 1cqw; border-bottom: 1px solid var(--ft-line); }
#rooftop-features .ft-bars i { flex: 1; height: var(--h); background: var(--ft-sage); transform-origin: 50% 100%; transition: transform .9s var(--ft-ease) .15s; }
#rooftop-features .ft-bars i:last-child { background: var(--ft-sink); }
#rooftop-features [data-ft-moving] .ft-board:not([data-ft-on]) .ft-bars i { transform: scaleY(.3); }
#rooftop-features .ft-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#rooftop-features .ft-rows li { display: grid; align-items: center; gap: 1.6cqw; font-size: max(12px, 1.45cqw); line-height: 1.2; padding: 1.55cqw 0; border-bottom: 1px solid var(--ft-line); white-space: nowrap; }
#rooftop-features .ft-rows li > * { overflow: hidden; text-overflow: ellipsis; }
#rooftop-features .ft-stock li { grid-template-columns: 9em 1fr 8em 7em; }
#rooftop-features .ft-day li { grid-template-columns: 6em 1fr 6em 10em 7em; }
#rooftop-features .ft-rows b { font-weight: 600; color: var(--ft-sink); }
#rooftop-features .ft-rows time { font-weight: 600; color: var(--ft-sink); }
#rooftop-features .ft-dim { color: var(--ft-sdim); }
#rooftop-features .ft-rows em { justify-self: start; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ft-line); color: var(--ft-sink); }
#rooftop-features .ft-rows em[data-s="delivered"], #rooftop-features .ft-rows em[data-s="in-stock"] { background: #dde6d6; border-color: #dde6d6; color: #2a4630; }
#rooftop-features .ft-rows em[data-s="sold"] { background: #efe5d8; border-color: #efe5d8; color: #5b4128; }
#rooftop-features .ft-tv-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(36, 49, 44, .1); }
#rooftop-features .ft-tv-line span { display: block; height: 100%; background: var(--ft-sink); transform: scaleX(0); transform-origin: 0 50%; }
/* The TV on a phone: fewer columns and rows, the same 12 px floor. */
@container fttv (max-width: 560px) {
  #rooftop-features .ft-board { gap: 6px; padding: 8px 10px 10px; }
  #rooftop-features .ft-bhead { padding-bottom: 5px; gap: 8px; }
  #rooftop-features .ft-tiles { gap: 5px; }
  #rooftop-features .ft-tiles > div { padding: 4px 6px; gap: 2px; }
  #rooftop-features .ft-tag { display: none; }
  #rooftop-features .ft-rows li { padding: 3px 0; gap: 8px; }
  #rooftop-features .ft-stock li { grid-template-columns: 5.6em 1fr auto; }
  #rooftop-features .ft-stock li > .ft-dim { display: none; }
  #rooftop-features .ft-day li { grid-template-columns: 4.6em 1fr auto; }
  #rooftop-features .ft-day li > .ft-dim { display: none; }
  #rooftop-features .ft-rows li:nth-child(n+4) { display: none; }
  #rooftop-features .ft-bars { gap: 4px; }
}
@container fttv (max-width: 320px) {
  #rooftop-features .ft-rows li:nth-child(n+3) { display: none; }
}
#rooftop-features .ft-wall-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: 6px; }
#rooftop-features .ft-wall-foot .ft-note { margin-top: 0; }
#rooftop-features .ft-boardnav { display: flex; gap: 4px; margin-left: -12px; }
#rooftop-features .ft-boardnav button { appearance: none; background: none; border: 0; border-radius: 0; margin: 0; min-height: 44px; min-width: 44px; padding: 0 12px; font: 600 14px/1 Manrope, sans-serif; color: var(--ft-muted); cursor: pointer; position: relative; }
#rooftop-features .ft-boardnav button::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--ft-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ft-ease); }
#rooftop-features .ft-boardnav button[aria-pressed="true"] { color: var(--ft-ink); }
#rooftop-features .ft-boardnav button[aria-pressed="true"]::after { transform: scaleX(1); }
#rooftop-features .ft-boardnav button:disabled { cursor: default; }
#rooftop-features .ft-boardnav button:focus-visible { outline: 2px solid var(--ft-ink); outline-offset: -4px; }
#rooftop-features .ft-screens-copy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 64px; align-items: baseline; margin-top: 20px; }

/* Sizes */
@media (max-width: 760px) {
  #rooftop-features .ft-head, #rooftop-features .ft-screens-copy { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #rooftop-features .ft-lede { font-size: 16px; }
  #rooftop-features .ft-stage-wall { margin: 0 -20px; border-radius: 0; padding: 22px 12px; }
  #rooftop-features .ft-tv { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #rooftop-features [data-ft-js] .ft-board, #rooftop-features .ft-bars i, #rooftop-features .ft-boardnav button::after { transition: none; }
  #rooftop-features .ft-tv-line { display: none; }
}

/* With the real wall block kept (Mark, 14 Oct), it carries the Showroom screens name and line. */
#wall-screens .ft-eyebrow { margin: 0 0 14px; font: 600 12px/1.4 Manrope, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #4f5a54; }
#wall-screens .ft-wall-line { margin: 10px 0 0; max-width: 477px; font: 400 17px/1.6 Manrope, sans-serif; color: #59615d; }
#wall-screens .ft-wall-line + .de-link, #wall-screens .ft-wall-line ~ a { margin-top: 14px; }
@media (max-width: 760px) {
  #wall-screens .ft-wall-line { font-size: 16px; }
}

/* Pay runs tab in "Beyond the sale.": the site's stylised Rooftop frame (ra-scene) with a pay run inside.
   Sample roles and amounts. 12 px floor for everything inside the screen. */
#rooftop-pay-runs .ft-payscreen .ra-kicker span, #rooftop-pay-runs .ft-payscreen .ra-tabs > *,
#rooftop-pay-runs .ft-payscreen .ra-bottom, #rooftop-pay-runs .ft-payscreen .ra-head span { font-size: 12px; }
#rooftop-pay-runs .ft-pay-title { margin: 4px 0 12px; font: 400 clamp(24px, 2.4vw, 34px)/1.12 Manrope, sans-serif; letter-spacing: -.035em; color: #24312c; max-width: none; }
#rooftop-pay-runs .ft-paytable { width: 100%; border-collapse: collapse; margin: 16px 0 4px; font: 400 13px/1.3 Manrope, sans-serif; font-variant-numeric: tabular-nums; color: #24312c; }
#rooftop-pay-runs .ft-paytable th, #rooftop-pay-runs .ft-paytable td { text-align: right; padding: 8px 0 8px 12px; border-bottom: 1px solid #d7ded1; font-weight: 400; white-space: nowrap; vertical-align: top; }
#rooftop-pay-runs .ft-paytable th:first-child { text-align: left; padding-left: 0; font-weight: 600; }
#rooftop-pay-runs .ft-paytable thead th { font-size: 12px; font-weight: 600; color: #4f5e52; padding-top: 0; }
#rooftop-pay-runs .ft-paytable tbody th small { display: block; font-size: 12px; font-weight: 400; color: #4f5e52; margin-top: 2px; }
#rooftop-pay-runs .ft-paytable b { font-weight: 650; }
#rooftop-pay-runs .ft-paytable tbody tr:nth-child(odd) { background: #e5e9df; }
#rooftop-pay-runs .ft-paytable tbody th, #rooftop-pay-runs .ft-paytable tbody td:last-child { padding-left: 10px; padding-right: 10px; }
#rooftop-pay-runs .ft-paytable thead th:first-child, #rooftop-pay-runs .ft-paytable tfoot th { padding-left: 10px; }
#rooftop-pay-runs .ft-paytable thead th:last-child, #rooftop-pay-runs .ft-paytable tfoot td:last-child { padding-right: 10px; }
#rooftop-pay-runs .ft-paytable tfoot th, #rooftop-pay-runs .ft-paytable tfoot td { border-bottom: 0; padding-top: 12px; font-size: 14px; }
@media (max-width: 480px) {
  #rooftop-pay-runs .ft-paytable { font-size: 12px; }
  #rooftop-pay-runs .ft-paytable th, #rooftop-pay-runs .ft-paytable td { padding-left: 8px; }
  #rooftop-pay-runs .ft-paytable th:first-child { white-space: normal; }
  #rooftop-pay-runs .ft-payscreen .ra-tabs > :nth-child(3) { display: none; }
}