/*
 * Landing page, tablet and desktop only (700px and up). Split out of
 * home.css in round 3 so phones do not download it before first paint:
 * index.html loads it with media="(min-width: 700px)", right after
 * home.css, so every rule here keeps its place after the rules it
 * overrides. Every block here sits inside a min-width media query; the
 * order of the blocks is the order they had in home.css.
 */
@media (min-width: 700px) {
  .home {
    --home-body: 18px;
    --home-lede: 20px;
    --home-card-title: 19px;
    --home-btn: 17px;
    --home-h1: clamp(36px, 5.2vw, 76px);
    --home-h2: clamp(32px, 4.4vw, 44px);
    --home-top: 40px;
    --home-gutter: 66px; }
}

@media (min-width: 1000px) {
  .home {
    --home-body: 20px;
    --home-lede: 22px;
    --home-card: 17px;
    --home-card-title: 21px;
    --home-btn: 18px;
    --home-h2: clamp(40px, 3.6vw, 54px);
    --home-top: clamp(40px, 4.6vh, 48px); }
}

/* Short laptops (1280x720, 1366x768) give up heading size, never body size. */
@media (min-width: 1000px) and (max-height: 820px) {
  .home {
    --home-h1: clamp(36px, 4.2vw, 60px);
    --home-h2: clamp(34px, 3vw, 44px);
    --home-top: 40px; }
}

@media (min-width: 700px) {
  .home .home-aha-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .home .home-struck,
  .home .home-aha-pay { grid-column: 1 / -1; }

  .home .home-struck { grid-template-columns: subgrid; }

  .home .home-struck li {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: clamp(28px, 4vw, 64px); }
}

@media (min-width: 1000px) {
  .home .home-records {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy flow" "keep keep"; }

  .home .home-records-copy { grid-area: copy; }
  .home .home-records-flow { grid-area: flow; }
  .home .home-part--keep > .home-keep { grid-area: keep; }
}

@media (min-width: 700px) {
  .home .home-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* Tablet: number | name, description | price and buttons. */
@media (min-width: 700px) {

  .home .home-row { column-gap: 24px; row-gap: 6px; padding: 13px 0; }

  .home .home-row h3 { font-size: 28px; }

  .home .home-reg-head { margin-bottom: 10px; }

  .home .home-reg-head h2 { margin-bottom: 0.3em; }

  .home .home-row > .when { font-size: var(--home-card); line-height: 1.45; }

  .home .home-row > .price { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }

  .home .home-row > .home-row-id { grid-row: 1 / span 2; }

  .home .home-row > .home-row-name { grid-column: name / side; grid-row: 1; }

  .home .home-row > .when { grid-column: name / side; grid-row: 2; }

  /* Price and actions share the side column from the row's top, so Start free
     sits the same distance under every row's top edge, whatever the name and
     description heights. The price is one line at these widths (26px). */
  .home .home-row > .price { grid-column: side / end; grid-row: 1 / span 2; align-self: start; }

  .home .home-row > .srk-row-actions {
    grid-column: side / end;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 48px;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px; }

  .home .srk-row-actions .srk-btn { width: 100%; }

  .home .srk-row-actions .srk-arrow { align-self: flex-start; }

  .home .home-row > .when { margin-top: 8px; }
}

/* Desktop: number | name | description | price | buttons, all on one line. */
@media (min-width: 1000px) {

  .home .home-reg-head .srk-lede { max-width: none; }

  .home .home-row { column-gap: 26px; }

  .home .home-row h3 { font-size: clamp(26px, 2.1vw, 30px); }

  .home .home-row > .when { font-size: 18px; line-height: 1.5; }

  .home .srk-row-actions { gap: 10px; }

  /* Bonus, then the roadmap line, full width under the rows. */
  .home .home-reg > .home-part:last-child { display: contents; }
  .home .srk-bonus { grid-column: 1 / -1; align-self: start; max-width: none; }
  .home .srk-later { grid-column: 1 / -1; align-self: start; max-width: none; margin-top: 12px; }

  .home .home-row > .home-row-id { grid-row: 1; }

  .home .home-row > .home-row-name { grid-column: name / when; grid-row: 1; }

  .home .home-row > .when { grid-column: when / price; grid-row: 1; }

  .home .home-row > .price { grid-column: price / side; grid-row: 1; }

  .home .home-row > .srk-row-actions { grid-column: side / end; grid-row: 1; margin-top: 0; }

  .home .home-row > .when { margin-top: 0; }
}

/* Desktop, last screen: the chevron's last move goes to the bottom of the
   page. home-motion.js measures the footer; when the portal card still fits
   above it, the portal scene is shortened by the footer's height (is-fit-last),
   so the portal card and the footer share the last screen. When it does not
   fit (short laptops), the footer fills a screen of its own (is-last-screen),
   so that move shows only the footer. Either way nothing is cut under the
   header. With JS off there is no chevron and the scene keeps its height. */
@media (min-width: 1000px) {
  .home .srk-flow .srk-scene#portal-address.is-fit-last {
    min-height: calc(var(--home-scene) - var(--home-footer-h, 0px));
    padding-block: 32px 40px; }

  .home .sr-footer.is-last-screen {
    min-height: var(--home-scene);
    display: flex;
    flex-direction: column;
    justify-content: center; }
}

/* ---------- Short laptops (1280x720, 1366x768) ---------- */
/* The records scene becomes two screens, and the long heads put the lede
   beside the heading, so no scene runs past the fold. */
@media (min-width: 1000px) and (max-height: 820px) {
  .home .srk-flow .srk-scene.home-records-scene { display: block; padding-block: 0; }

  .home .home-records-scene > .home-records { display: block; }

  .home .home-records > .home-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--home-scene);
    padding: var(--home-top) 0 var(--home-gutter); }

  .home .home-records > .home-part:first-child > * { grid-area: auto; }

  .home .home-records > .home-part:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: clamp(32px, 5vw, 72px); }

  .home .home-reg-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: end; }

  .home .home-reg-head .srk-eyebrow { grid-column: 1 / -1; }

  .home .home-reg-head h2 { margin-bottom: 0; }

  .home .home-row { padding: 10px 0; }

}

/* Desktop and tablet: three full-height photo columns over rows 1 and 2,
   the band in row 3. Each panel is a subgrid of rows 1 and 2, its text in
   row 2. */
@media (min-width: 700px) {
  .home .home-tri-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: var(--home-scene); }
  .home .home-panels { display: contents; }
  .home .home-panel {
    position: relative;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: subgrid;
    container-type: inline-size; }
  .home .home-panel.is-accountants { grid-column: 1; }
  .home .home-panel.is-realestate { grid-column: 2; }
  .home .home-panel.is-bookmakers { grid-column: 3; }
  .home .home-panel + .home-panel::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(234, 240, 255, 0.22);
    transition: opacity 300ms var(--srk-ease); }

  /* The photo layer is wider than its column and clipped to it, so a panel
     opens over its neighbours without any box changing size. */
  .home .home-panel-media {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transition: clip-path 520ms var(--srk-ease); }
  .home .home-panel.is-accountants .home-panel-media { left: 0; right: -36%; clip-path: inset(0 26.47% 0 0); }
  .home .home-panel.is-realestate .home-panel-media { left: -18%; right: -18%; clip-path: inset(0 13.235%); }
  .home .home-panel.is-bookmakers .home-panel-media { left: -36%; right: 0; clip-path: inset(0 0 0 26.47%); }

  /* The copy over the photos lets the pointer through to the panels. */
  .home .home-tri-copy {
    position: relative;
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 1;
    padding: clamp(28px, 4.6vh, 48px) var(--edge) 0;
    pointer-events: none; }
  /* A top gradient only as tall as the copy (it fades out just under it). */
  .home .home-tri-scrim {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: -96px;
    pointer-events: none; }

  /* Each panel's text on its own bottom gradient. */
  .home .home-panel-body {
    position: relative;
    z-index: 3;
    grid-row: 2;
    align-self: end;
    display: flex;
    flex-direction: column;
    padding: 84px clamp(20px, 2.4vw, 36px) clamp(16px, 2.4vh, 24px);
    background: linear-gradient(to top,
      color-mix(in srgb, var(--srk-ground-live) 90%, transparent) 0,
      color-mix(in srgb, var(--srk-ground-live) 72%, transparent) calc(100% - 84px),
      color-mix(in srgb, var(--srk-ground-live) 0%, transparent) 100%);
    transition: margin 0s, padding 0s; }
  .home .home-panel.is-accountants .home-panel-body { padding-left: var(--edge); }
  .home .home-panel.is-bookmakers .home-panel-body { padding-right: var(--edge); }
  /* The promise always keeps two lines of room, so nothing below it moves
     when a panel opens and its text column widens. */

  /* The band under the photos: lede left, buttons and address right. */
  .home .home-tri-lede {
    position: relative;
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(28px, 4vw, 64px);
    row-gap: 12px;
    align-items: start;
    padding: clamp(16px, 2.4vh, 26px) var(--edge) clamp(54px, 7vh, 64px);
    border-top: 1px solid var(--srh-hairline-soft);
    background: color-mix(in srgb, var(--srk-ground-live) 94%, transparent); }
  .home .home-tri-lede .srk-lede { font-size: var(--home-body); line-height: 1.45; }
  .home .home-tri-actions { display: contents; }
  .home .home-tri-actions .srk-actions { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
  .home .home-tri-actions .srk-hero-addr { grid-column: 1; grid-row: 2; justify-self: start; }
  .home .home-tri-lede .srk-lede { grid-column: 1; grid-row: 1; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .home .home-tri-lede { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .home .home-tri-actions .srk-actions { grid-column: 1; grid-row: 2; }
  .home .home-tri-actions .srk-hero-addr { grid-row: 3; }
}

/* Mouse and trackpad, with motion allowed and JS on: Start free and See how
   wait for hover or focus; the open panel's photo and text column widen over
   its neighbours, whose details step back. No box moves: the photo widens by
   clip-path, the text column grows to the right from a fixed left edge, and
   every line keeps its reserved height. */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  .home .home-panel:is(:hover, :focus-within) .home-panel-media { clip-path: inset(0); z-index: 1; }
  .home .home-tri:has(.home-panel:is(:hover, :focus-within)) .home-panel:not(:hover):not(:focus-within) .home-panel-media img { filter: brightness(0.5); }
  .home .home-tri:has(.home-panel:is(:hover, :focus-within)) .home-panel::before { opacity: 0; }
  .home .home-panel:is(:hover, :focus-within) .home-panel-body { z-index: 4; }
  .home .home-panel.is-accountants:is(:hover, :focus-within) .home-panel-more,
  .home .home-panel.is-realestate:is(:hover, :focus-within) .home-panel-more { margin-right: -36cqw; }

  .home .home-panel-more,
  .home .home-panel-name { transition: opacity 300ms var(--srk-ease); }
  .home .home-tri:has(.home-panel:is(:hover, :focus-within)) .home-panel:not(:hover):not(:focus-within) .home-panel-more { opacity: 0; }
  .home .home-tri:has(.home-panel:is(:hover, :focus-within)) .home-panel:not(:hover):not(:focus-within) .home-panel-name { opacity: 0.6; }
  .home .home-panel-media img { transition: filter 420ms var(--srk-ease); }
}
@media (min-width: 700px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .home .home-panel-actions {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 320ms var(--srk-ease), transform 320ms var(--srk-ease); }
  .js .home .home-panel:is(:hover, :focus-within) .home-panel-actions { opacity: 1; transform: none; transition-delay: 80ms; }
}

/* Short desktops and tablets on their side (under 821 px tall): the photos
   fill the first screen and the band is the next stop. */
@media (min-width: 700px) and (max-height: 820px) {
  .home .home-panel { min-height: var(--home-scene); }
  .home .home-tri .home-part--intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: var(--home-scene);
    padding: var(--home-top) var(--edge) var(--home-gutter); }
  .home .home-tri .home-part--intro .home-tri-lede {
    padding: 0;
    border: 0;
    background: none;
    row-gap: 20px; }
  .home .home-tri .home-part--intro .home-tri-lede .srk-lede { font-size: var(--home-lede); }
  .home .home-panel-body { padding-bottom: clamp(52px, 8vh, 64px); }
}
@media (min-width: 700px) {
  .home .home-aha-eb.is-new { display: flex; align-items: center; gap: 0.6em; padding-left: 17px; }
  .home .home-aha-eb .home-sol { --cap: calc(var(--home-card) * 0.727); }
}
@media (min-width: 1000px) {
  .home .home-desk-copy { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (min-width: 700px) { .home .home-dialog-hint { display: none; } }
@media (min-width: 700px) and (max-width: 999px) {
  .home .home-tl-scene .home-part { justify-content: center; }
  .home .home-tl-grid { --tl-label: 28px; --tl-gap: 12px; }
  .home .home-tl-sr,
  .home .home-tl-you { padding: 10px 12px; }
}

/* Wide screens: the heading and the calls to action on the left, the whole
   timeline on the right, one screen. Each step is one row: its name beside
   its two lanes. */
@media (min-width: 1000px) {

  .home .home-tl-grid {
    --tl-gap: 12px;
    display: grid;
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start; }
  .home .home-tl-head { grid-column: 1; }
  .home .home-tl-head .srk-lede { font-size: var(--home-body); }
  .home .home-tl-foot { grid-column: 1; }
  .home .home-tl-lanes { grid-column: 2; grid-row: 1; }
  .home .home-tl-lanes.is-repeat { display: none; }
  .home .home-tl { grid-column: 2; }
  .home .home-part:first-child > .home-tl { grid-row: 2; }
  .home .home-part:nth-child(2) > .home-tl { grid-row: 3; }
  .home .home-part:nth-child(3) > .home-tl { grid-row: 4; }

  .home .home-part:nth-child(3) .home-tl-step:last-child { padding-bottom: 0; }
  .home .home-tl-mid { grid-column: 1; align-items: flex-start; align-content: flex-start; }

  .home .home-tl-sr,
  .home .home-tl-you { grid-row: 1; }
  .home .home-tl-step::before { bottom: -6px; }
  .home .home-tl-ctas { flex-direction: column; align-items: stretch; }
}

/* Records: chips and the next link fit the one screen on desktop. */
@media (min-width: 1000px) {
  .home .home-records-copy .srk-lede { margin-bottom: 0; }
  .home .home-chips { margin-top: 12px; }
  .home .home-records-copy .home-chips + p { margin-top: 12px; }
  .home .home-keep-title { margin-bottom: 10px; }
  .home .home-keep .home-card { padding: 16px 20px 18px; gap: 6px; }
  .home .home-keep .home-next { margin-top: 12px; }
}

/* Tablets: the records scene is two stops, as on phones and short laptops. */
@media (min-width: 700px) and (max-width: 999px) {
  .home .srk-flow .srk-scene.home-records-scene { display: block; padding-block: 0; }
  .home .home-records-scene > .home-records { display: block; }
  .home .home-records > .home-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 3vh, 40px);
    min-height: var(--home-scene);
    padding: var(--home-top) 0 var(--home-gutter); }
}

/* Product rows: a smaller photo with the glyph and number on one line under
   it, so a row is no taller than in round 1. */
@media (min-width: 700px) {
  .home .home-reg { grid-template-columns: [id] 96px [name] minmax(0, 1fr) [side] 15.5rem [end]; }
  .home .home-row-tag .home-row-glyph { width: 22px; height: 22px; }
  .home .home-row-id { gap: 6px; }
}

/* Timeline, wide screens: tighter rows so all seven steps and the calls to
   action share one screen. */
@media (min-width: 1000px) {

  .home .home-tl-lanes { margin-bottom: 4px; }
  .home .home-tl-step,
  .home .home-tl-step:last-child { padding-bottom: 6px; }
  .home .home-tl-sr,
  .home .home-tl-you { padding: 5px 11px; }
  .home .home-tl-mid { padding-top: 4px; }
  .home .home-tl-step::before { top: 20px; }
}

/* Products, wide screens: a slightly smaller photo and tighter rows. */
@media (min-width: 1000px) {

  .home .home-reg-head { margin-bottom: 8px; }
}

/* Tablet product rows. */
@media (min-width: 700px) and (max-width: 999px) {
  .home .home-reg { grid-template-columns: [id] 80px [name] minmax(0, 1fr) [side] 15.5rem [end]; }

}

/* Wide screens: a few pixels back on the timeline and the products. */
@media (min-width: 1000px) {
  .home .home-tl-head h2 { margin-bottom: 0.25em; }
  .home .home-tl-foot { gap: 10px; }
  .home .home-row { padding: 8px 0; }
}

/* Short laptops (1280x720, 1366x768). */
@media (min-width: 1000px) and (max-height: 820px) {
  /* Products: the row photos give way to the glyph and number (round 1),
     so the three rows and the bonus still share one screen. */
  .home .home-row-photo { display: none; }
  .home .home-reg { grid-template-columns: [id] 52px [name] minmax(0, 14rem) [when] minmax(0, 1fr) [price] 8rem [side] 16rem [end]; }

  /* Timeline: three stops, as on tablets. */
  .home .srk-flow .srk-scene.home-tl-scene { display: block; padding-block: 0; }
  .home .home-tl-scene > .home-tl-grid { display: block; max-width: var(--home-max); }
  .home .home-tl-scene .home-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-height: var(--home-scene);
    padding: var(--home-top) 0 var(--home-gutter); }
  .home .home-tl-lanes.is-repeat { display: grid; }
  .home .home-tl-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 48px; align-items: end; }
  .home .home-tl-head .srk-eyebrow { grid-column: 1 / -1; }
  .home .home-tl-ctas { flex-direction: row; }
}

/* Fit pass 5: the last few pixels. */
@media (min-width: 1000px) { .home .home-tl-grid { row-gap: 4px; } .home .home-tl-step, .home .home-tl-step:last-child { padding-bottom: 5px; } }
@media (min-width: 700px) and (max-width: 999px) { .home .home-row { padding: 6px 0; } .home .home-reg-head { margin-bottom: 4px; } }
/* The Keep chip sits under its step name, never squeezed beside it. */
@media (min-width: 1000px) { .home .home-tl-mid .home-tl-chip { margin-left: 26px; font-size: 15px; line-height: 1.3; padding: 2px 8px; } }
@media (min-width: 1000px) { .home .home-desk { --desk-copy: 206px; } }

/* Hero, wide screens: a tighter text block under each photo, so the real
   estate sign and QR code sit in the clear band between the headline and
   the panel name. */
@media (min-width: 700px) {
  .home .home-panel.is-realestate img { object-position: 40% 0%; }
  .home .home-panel-name { line-height: 1.04; }
  .home .home-panel-promise { margin-top: 4px; line-height: 1.35; }
  .home .home-panel-price { margin-top: 2px; }
  .home .home-panel-actions { margin-top: 10px; }
  .home .home-panel-body { padding-bottom: clamp(12px, 1.8vh, 16px); }
}
@media (min-width: 700px) { .home .home-panel.is-realestate .home-panel-media img { transform-origin: 50% 92%; } }

/* ======================================================================
 * Fix pass 1 (after the visual and function checks).
 * ====================================================================== */

/* Fault 17: type floors. Card text is 17 px from 700 px up (15 px on
   phones); chips and pills are card text too. */
@media (min-width: 700px) { .home { --home-card: 17px; } }
@media (min-width: 1000px) and (max-width: 1199px) {
  .home .home-card.has-thumb { grid-template-columns: 72px minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .home .srk-flow .srk-scene.home-tl-scene > .home-tl-grid { max-width: var(--home-max); }
  .home .home-tl-grid { --tl-label: 7rem; }
  .home .home-tl-step.is-keep .home-tl-chiprow { justify-self: start; }
  .home .home-tl-step.is-keep { grid-template-rows: auto auto; }

  .home .home-tl-step.is-keep .home-tl-sr,
  .home .home-tl-step.is-keep .home-tl-you { grid-row: 2; }
  .home .home-tl-step.is-keep .home-tl-chiprow { margin-bottom: 6px; }
  /* The copy and the calls to action read as one group, centred. */

}
@media (min-width: 1000px) {
  .home .home-reg { grid-template-columns: [id] 96px [name] minmax(0, 13rem) [when] minmax(0, 1fr) [price] 9.5rem [side] 16.5rem [end]; }
  .home .home-row > .price { flex-direction: column; white-space: nowrap; }
}

/* Timeline, wide screens: the heading and the calls to action share the
   left column's full height (heading at the top, actions at the bottom), so
   they never stretch the timeline's rows; the Keep chip sits under the You
   text, beside the taller ShareRing cell. */
@media (min-width: 1000px) {
  .home .home-tl-head { grid-row: 1 / -1; align-self: start; }
  .home .home-tl-foot { grid-row: 1 / -1; align-self: end; margin-top: 0; }
  .home .home-tl-step.is-keep .home-tl-mid { grid-row: 1 / span 2; }
  .home .home-tl-step.is-keep .home-tl-sr { grid-row: 1 / span 2; }
  .home .home-tl-step.is-keep .home-tl-you { grid-row: 1; }
  .home .home-tl-step.is-keep .home-tl-chiprow { grid-column: 3; grid-row: 2; margin: 8px 0 0; }
}

/* Tablet products: a few pixels back under the rows. */
@media (min-width: 700px) and (max-width: 999px) {
  .home .srk-bonus { margin-top: 8px; }
  .home .srk-later { margin-top: 8px; }
  .home .home-reg-next { margin-top: 6px; }
}
/* The eyebrow is small text: the copy gradient is a little denser at the top. */
@media (min-width: 700px) {
  .home .home-tri-scrim {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--srk-ground-live) 86%, transparent) 0,
      color-mix(in srgb, var(--srk-ground-live) 70%, transparent) calc(100% - 96px),
      color-mix(in srgb, var(--srk-ground-live) 0%, transparent) 100%); }
  .home .home-tri-eyebrow { text-shadow: 0 1px 10px rgba(1, 4, 15, 0.7); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .home .home-keep-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
  .home .home-card.has-thumb { grid-template-columns: 140px minmax(0, 1fr); }
  .home .home-card-thumb { min-height: 104px; }
}
/* Short screens, where the band below is the next stop: the push-in grows
   upward from the bottom edge, so no photo box reaches into that stop. */
@media (min-width: 700px) and (max-height: 820px) { .home .home-panel-media img, .home .home-panel.is-realestate .home-panel-media img { transform-origin: 50% 100%; } }

/* N1: short laptops: the copy beside the clip, the clip about 60% of the
   width, so its app text stays readable. */
@media (min-width: 1000px) and (max-height: 820px) {
  .home .home-desk {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    column-gap: clamp(28px, 3vw, 48px);
    align-items: center; }
  .home .home-desk-copy { grid-column: 1; grid-template-columns: minmax(0, 1fr); align-self: center; }
  .home .home-desk-copy .srk-lede { font-size: var(--home-body); }
  .home .home-desk .home-desk-fig { grid-column: 2; max-width: none; }
}
@media (min-width: 700px) and (max-height: 820px) {
  .home .home-tri .home-part--intro .home-tri-pick { grid-column: 1 / -1; grid-row: 3; max-width: 760px; }
}

/* N3: the timeline's main call to action on one line. */
@media (min-width: 1000px) {
  .home .home-tl-grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.55fr); }
  .home .home-tl-ctas .srk-btn { white-space: nowrap; padding-inline: 18px; }
}

/* N4: the real estate photo is cut from y 40 of the original and pushes in
   about its middle, so the sign and the QR code stay between the headline
   and the panel name. */

/* N6: the price sits right under the promise. The space for a second
   promise line and the buttons is kept under the whole block instead, so the
   three names still share one line. The open panel's text column widens
   only where every promise is already one line (1360 px and up), so nothing
   reflows on hover; the right-hand panel's column no longer widens. */
@media (min-width: 700px) {
  .home .home-panel-promise { min-height: 0; }
  .home .home-panel-more { min-height: calc(var(--home-card) * 4.15 + 62px); }
}
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  .home .home-panel.is-bookmakers:is(:hover, :focus-within) .home-panel-body { padding-right: var(--edge); }
}
@media (min-width: 700px) and (max-width: 1359px) and (hover: hover) and (pointer: fine) {
  .home .home-panel.is-accountants:is(:hover, :focus-within) .home-panel-more,
  .home .home-panel.is-realestate:is(:hover, :focus-within) .home-panel-more { margin-right: 0; }
}
/* N4 and N6, 1360 px and up: every promise is one line here (the right-hand
   panel's text may run 24 px into the page margin), so only one promise line
   is reserved and the names sit lower, clear of the real estate sign. */
@media (min-width: 1360px) {
  .home .home-panel.is-bookmakers .home-panel-body,
  .home .home-panel.is-bookmakers:is(:hover, :focus-within) .home-panel-body { padding-right: calc(var(--edge) - 24px); }
  .home .home-panel-more { min-height: calc(var(--home-card) * 2.75 + 62px); }
  .home .home-panel-promise { white-space: nowrap; }
}
@media (min-width: 700px) and (min-height: 821px) { .home .home-panel.is-realestate .home-panel-media img { transform-origin: 50% 64%; } }

/* ======================================================================
 * Round 3 (8 Oct 2026): hero titles, larger industry photos, red straight
 * strikes, the payoff beats, the regulation moment, brand sweeps and the
 * synced sandbox. Appended last, so it wins over the round 2 passes.
 * ====================================================================== */

/* R3 point 1: each panel title fits its own panel at every width.
   The names are h2s, so ".home .srk-scene h2" (0,2,1) was beating
   ".home .home-panel-name" (0,2,0) and set them at the scene h2 size
   (up to 54px), while the left panel's text starts at the page edge
   ((viewport - 1180px) / 2, 370px at 1920). From about 1850px the name ran
   past its panel into "Real estate". Now:
   - the panel is a one-column grid that never grows to fit its text;
   - the name size is bound to the panel's own width (cqi of .home-panel),
     never wider than its text box, and may wrap between words (never inside one);
   - the outer panels keep the page edge only while the text still fits,
     then step in, so the gutter between two panels' text is always at least
     both inner paddings (40px at 700px, 72px from 1500px);
   - nothing changes on hover: no size depends on :hover, so no layout shift. */
@media (min-width: 700px) {
  .home .home-panel { grid-template-columns: minmax(0, 1fr); }
  .home .home-panel-body {
    min-width: 0;
    --tri-in: clamp(20px, 2.4vw, 36px);
    --tri-name: clamp(30px, 9cqi, 54px);
    /* Room the widest line needs: the name ("Accountants" is 5.72em in
       Inter Tight at -0.02em tracking; 5.9em leaves 3%). */
    --tri-room: calc(var(--tri-name) * 5.9);
    --tri-padl: var(--tri-in);
    --tri-padr: var(--tri-in);
    padding-left: var(--tri-padl);
    padding-right: var(--tri-padr); }
  /* These two repeat the padding: the older edge rules are more specific. */
  .home .home-panel.is-accountants .home-panel-body {
    --tri-padl: clamp(var(--tri-in), var(--edge), calc(100cqi - var(--tri-in) - var(--tri-room)));
    padding-left: var(--tri-padl); }
  .home .home-panel.is-bookmakers .home-panel-body,
  .home .home-panel.is-bookmakers:is(:hover, :focus-within) .home-panel-body {
    --tri-padr: clamp(var(--tri-in), var(--edge), calc(100cqi - var(--tri-in) - var(--tri-room)));
    padding-right: var(--tri-padr); }
  .home .home-tri .home-panel-name {
    font-size: clamp(26px, min(var(--tri-name), calc((100cqi - var(--tri-padl) - var(--tri-padr)) / 5.9)), 54px);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance; }
}
/* From 1360px every promise is one line (nowrap): the outer panels also keep
   room for the longest promise ("Check clients before regulated work." 266px,
   "Punters checked before the account opens." 318px at 17px). The right-hand
   panel keeps its 24px run into the page margin. */
@media (min-width: 1360px) {
  .home .home-panel.is-accountants .home-panel-body { --tri-room: max(calc(var(--tri-name) * 5.9), 280px); }
  .home .home-panel.is-bookmakers .home-panel-body,
  .home .home-panel.is-bookmakers:is(:hover, :focus-within) .home-panel-body {
    --tri-room: max(calc(var(--tri-name) * 5.9), 330px);
    --tri-padr: clamp(var(--tri-in), calc(var(--edge) - 24px), calc(100cqi - var(--tri-in) - var(--tri-room)));
    padding-right: var(--tri-padr); }
}

/* ======================================================================
 * Round 3, point 7: the industry photos are a major part of every card.
 * Records cards, guide cards and product rows. Append at the END of
 * home.css (it overrides the round 2 fit passes).
 * ====================================================================== */

/* ---------- 7.1 CDD record cards ---------- */
/* Desktop: the cards get the stop of their own that short laptops already
   had (the records scene is two stops at every desktop height), and the
   photo runs full bleed across the top of each card. */
@media (min-width: 1000px) {
  .home .srk-flow .srk-scene.home-records-scene { display: block; padding-block: 0; }
  .home .home-records-scene > .home-records { display: block; }
  .home .home-records > .home-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--home-scene);
    padding: var(--home-top) 0 var(--home-gutter); }
  .home .home-records > .home-part:first-child > * { grid-area: auto; }
  .home .home-records > .home-part:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: clamp(32px, 5vw, 72px); }
  .home .home-keep-title { font-size: var(--home-h2); line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 clamp(16px, 2.6vh, 28px); }
  .home .home-keep .home-card.has-thumb { display: flex; flex-direction: column; gap: 6px; padding: 0 0 20px; }
  .home .home-keep .home-card-thumb {
    align-self: stretch;
    flex: none;
    min-height: 0;
    aspect-ratio: 3 / 2;
    max-height: calc(var(--home-scene) - 330px);
    margin-bottom: 12px; }
  .home .home-keep .home-card.has-thumb h4,
  .home .home-keep .home-card.has-thumb p { padding: 0 22px; }
  .home .home-keep .home-next { margin-top: clamp(14px, 2.4vh, 24px); }
}

/* ---------- 7.2 Guide cards ---------- */
/* Tablet and desktop: the photo across the top, 3:2 (4:3 on tablets),
   giving way only on short screens so the scene still fits. */
@media (min-width: 700px) {
  .home .home-guide-cards .home-card-photo { flex: none; aspect-ratio: 3 / 2; max-height: calc(var(--home-scene) - 456px); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .home .home-guide-cards .home-card-photo { aspect-ratio: 4 / 3; }
}

/* ---------- 7.3 Product rows ---------- */
/* Tablet and desktop: one product per stop, as on phones, so the photo can
   take half the row. Every row uses the same column template, so the
   photo, the text column and Start free sit in the same place on all three
   stops; price and buttons are pinned to the photo's bottom edge. */
@media (min-width: 700px) {
  .home .srk-flow .srk-scene#products { display: block; padding-block: 0; }
  .home #products > .home-reg { display: block; }
  .home #products .home-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 2.4vh, 24px);
    min-height: var(--home-scene);
    padding: var(--home-top) 0 var(--home-gutter); }
  .home #products .home-reg-head { margin: 0; }
  .home #products .home-row {
    display: grid;
    grid-template-columns: [id] minmax(0, 1fr) [name] minmax(0, 1fr) [end];
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    column-gap: clamp(24px, 3.4vw, 48px);
    row-gap: 0;
    padding: 0;
    border: 0; }
  .home #products .home-row > .home-row-id {
    grid-column: id; grid-row: 1 / -1;
    position: relative; display: block; align-self: stretch;
    min-height: clamp(240px, calc(var(--home-scene) - 430px), 440px); }
  .home #products .home-row-photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 18px; }
  .home #products .home-row-tag { position: absolute; left: 16px; bottom: 14px; z-index: 1; gap: 10px; }
  .home #products .home-row-tag .home-row-glyph { width: 34px; height: 34px; stroke: #FFFFFF; }
  .home #products .home-row-tag .srk-row-num { color: #FFFFFF; text-shadow: 0 1px 6px rgba(1, 4, 15, 0.7); }
  .home #products .home-row > .home-row-name { grid-column: name; grid-row: 1; margin: 0; }
  .home #products .home-row h3 { font-size: clamp(30px, 3vw, 44px); }
  .home #products .home-row > .when { grid-column: name; grid-row: 2; margin: 12px 0 0; max-width: 30em; font-size: var(--home-body); line-height: 1.5; }
  .home #products .home-row > .price { grid-column: name; grid-row: 4; align-self: end; margin: 16px 0 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .home #products .home-row > .price b { font-size: clamp(30px, 2.8vw, 40px); }
  .home #products .home-row > .srk-row-actions {
    grid-column: name; grid-row: 5; align-self: end; margin: 12px 0 0;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .home #products .srk-row-actions .srk-btn { width: auto; min-width: 11em; }
  .home #products .srk-row-actions .srk-arrow { align-self: center; }
  .home #products .srk-bonus,
  .home #products .srk-later,
  .home #products .home-reg-next { margin-top: 0; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .home #products .home-row > .when { font-size: var(--home-card); }
  .home #products .home-row > .home-row-id { min-height: clamp(260px, 34vh, 380px); }
}
@media (min-width: 700px) and (max-height: 820px) { .home .home-panel.is-realestate .home-panel-media img { transform-origin: 50% 100%; } }
@media (min-width: 700px) and (min-height: 821px) { .home .home-panel.is-realestate .home-panel-media img { transform-origin: 50% 55%; } }
/* Fit: the two tightest first screens (the aha list and the how-it-works
   head) take a smaller step up on short laptops and phones, so each scene
   stays one screen. */
@media (min-width: 1000px) and (max-height: 820px) {
  .home .home-aha-grid, .home .home-how-head { --lk-scale: 1.1; }
}
/* The regulation moment on tablets: the seal gives way so the copy and the
   brand moment share one screen. */
@media (min-width: 700px) and (max-width: 999px) {
  .home .home-law-art { width: min(100%, 330px); }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .home .home-how-first { --lk-scale: 1.1; }
  .home .home-how-sees { margin-top: 6px; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .home .home-sandbox { grid-template-columns: 1fr; }
  .home .home-sbx { --sbx-phone: 210px; } }
/* The copy keeps its round 2 rhythm; the stage sits to its right from 900px
   (is-wide-stage), under it on tablets, on its own screen on phones. */
@media (min-width: 900px) {
  .home .home-sandbox { align-items: center; }
}
/* Tablets: the sandbox is two stops (copy, then the stage), as on phones, so
   the stage is shown whole at a readable size. */
@media (min-width: 700px) and (max-width: 999px) {
  .home .srk-flow .srk-scene.home-sbx-scene { display: block; padding-block: 0; }
  .home .home-sbx-scene > .home-sandbox { display: block; }
  .home .home-sandbox > .home-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 3vh, 40px);
    min-height: var(--home-scene);
    padding: var(--home-top) 0 var(--home-gutter); }
  .home .home-sbx { --sbx-phone: 250px; }
}
/* Short laptops: the phone is sized from the screen height and the panel
   rows are a little tighter, so the sandbox stays one screen. */
@media (min-width: 1000px) and (max-height: 820px) {
  .home .home-sbx { --sbx-phone: min(clamp(200px, 17vw, 250px), calc((var(--home-scene) - 210px) / 2.25)); }
  .home .sbx-nodes { gap: 10px; }
  .home .sbx-node { padding: 7px 12px; }
  .home .sbx-zone { margin: 8px 2px 6px; }
  .home .home-sbx-head { margin-bottom: 8px; }
  .home .home-sbx-cap { margin-top: 8px; }
}

/* Kept last on purpose. In the single home.css these two rules came after
   the wide rules they override, so they repeat here to keep that order. */
@media (prefers-reduced-motion: reduce) {
  .home .home-panel-media,
  .home .home-panel-media img,
  .home .home-panel-more,
  .home .home-panel-name { transition: none; }
  .home .home-tri-pick a { transition: none; }
  .home .home-tri-pick a:hover { transform: none; }
}
@media (min-width: 700px) {
  .home .home-panel.is-realestate img { object-position: 55% 40%; }
}

/* ---------- Fix pass 0 (inbox 17:57): the hero takeover ---------- */
/* Rest: three equal panels, as before. On hover, keyboard focus or a tap
   (home-motion.js sets data-take on the hero and is-on on the panel and its
   layer), that industry's wide photo sweeps across the whole hero from its
   own column (left grows right, middle both ways, right grows left), the
   other two panels' name, promise and price fade out, and the chosen
   panel's text stays exactly where it was. The panels themselves are the
   three hover and tap zones. Only clip-path and opacity change: no box
   moves. */
@media (min-width: 700px) {
  .home .home-takes {
    display: block;
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    pointer-events: none; }
  .home .home-take {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background-color: var(--srk-ground-live);
    background-repeat: no-repeat;
    background-size: cover;
    transition: clip-path 675ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms linear 675ms; }
  /* The same bottom gradient the panel text sits on, across the whole width. */
  .home .home-take::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--srk-ground-live) 90%, transparent) 0,
      color-mix(in srgb, var(--srk-ground-live) 72%, transparent) 24%,
      color-mix(in srgb, var(--srk-ground-live) 0%, transparent) 50%); }
  .home .home-take.is-accountants { clip-path: inset(0 66.667% 0 0); background-position: 55% 60%; }
  .home .home-take.is-realestate { clip-path: inset(0 33.333% 0 33.333%); background-position: 50% 25%; }
  .home .home-take.is-bookmakers { clip-path: inset(0 0 0 66.667%); background-position: 45% 60%; }
  .home .home-take.is-on {
    z-index: 2;
    opacity: 1;
    clip-path: inset(0);
    transition: clip-path 675ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms linear; }

  /* The panel text's own gradient moves to a layer that can fade, so the
     takeover's full-width gradient replaces it without a seam. */
  .home .home-panel-body { background: none; }
  .home .home-panel-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--srk-ground-live) 90%, transparent) 0,
      color-mix(in srgb, var(--srk-ground-live) 72%, transparent) calc(100% - 84px),
      color-mix(in srgb, var(--srk-ground-live) 0%, transparent) 100%);
    transition: opacity 300ms ease-out; }
  .home .home-tri[data-take] .home-panel-body::before { opacity: 0; }
  .home .home-tri[data-take] .home-panel::before { opacity: 0; }

  /* The other two panels step out completely and stay out. */
  .home .home-tri[data-take] .home-part--open .home-panel:not(.is-on) .home-panel-body .home-panel-name,
  .home .home-tri[data-take] .home-part--open .home-panel:not(.is-on) .home-panel-body .home-panel-more {
    opacity: 0;
    transition: opacity 300ms ease-out; }
  .home .home-tri[data-take] .home-panel:not(.is-on) .home-panel-body { pointer-events: none; }
  .home .home-tri[data-take] .home-part--open .home-panel.is-on .home-panel-body .home-panel-name,
  .home .home-tri[data-take] .home-part--open .home-panel.is-on .home-panel-body .home-panel-more {
    opacity: 1;
    transition: opacity 300ms ease-out; }
}
/* Round 2's hover widening is retired: the takeover replaces it, and with
   JS off a hover changes no photo width. */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  .home .home-panel.is-accountants:is(:hover, :focus-within) .home-panel-media { clip-path: inset(0 26.47% 0 0); z-index: 0; }
  .home .home-panel.is-realestate:is(:hover, :focus-within) .home-panel-media { clip-path: inset(0 13.235%); z-index: 0; }
  .home .home-panel.is-bookmakers:is(:hover, :focus-within) .home-panel-media { clip-path: inset(0 0 0 26.47%); z-index: 0; }
  .home .home-panel.is-accountants:is(:hover, :focus-within) .home-panel-more,
  .home .home-panel.is-realestate:is(:hover, :focus-within) .home-panel-more { margin-right: 0; }
}
/* The chosen panel's Start free and See how show, whichever way it was
   chosen. */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .home .home-tri[data-take] .home-panel.is-on .home-panel-actions { opacity: 1; transform: none; transition-delay: 80ms; }
}
/* Reduced motion: no sweep, a short crossfade. */
@media (min-width: 700px) and (prefers-reduced-motion: reduce) {
  .home .home-take,
  .home .home-take.is-on { clip-path: inset(0); transition: opacity 160ms linear; }
  .home .home-panel-body::before,
  .home .home-tri[data-take] .home-part--open .home-panel .home-panel-body .home-panel-name,
  .home .home-tri[data-take] .home-part--open .home-panel .home-panel-body .home-panel-more { transition: opacity 160ms linear; }
}

/* Fix pass 1: the real estate takeover photo is recut with more headroom
   (heads sit below the h1 band from 1280x720 to 2560x1440), and its pale
   right-hand wall is darkened so it does not read as a washed-out band. */
@media (min-width: 700px) {
  .home .home-take.is-realestate::after {
    background:
      linear-gradient(to top,
        color-mix(in srgb, var(--srk-ground-live) 90%, transparent) 0,
        color-mix(in srgb, var(--srk-ground-live) 72%, transparent) 24%,
        color-mix(in srgb, var(--srk-ground-live) 0%, transparent) 50%),
      linear-gradient(to left,
        color-mix(in srgb, var(--srk-ground-live) 62%, transparent) 0,
        color-mix(in srgb, var(--srk-ground-live) 0%, transparent) 26%); }
}