/* GENERATED by tools/export-lp-v4-css.py - DO NOT HAND-EDIT.
   Source: granny-flat-builders.html, its scoped <style> block(s).
   Edit the donor and re-run, or the next rebuild silently reverts you.
   Every rule is scoped to [data-lp="v4"] and is inert without it. */

    /* ============================================================
       Paid landing page v4 - coded 2026-09-09 from the approved canvas
       https://claude.ai/code/artifact/9ef34cdb-e345-4068-adb9-b59502803048
       (phone artboard is the design, desktop is the adaptation).
       Nine sections on the ThrillX order: fold, proof (our work), pain,
       value props, proof (people), differentiators, four steps, proof
       (names on the job), FAQ + FUD, closer with the only form.
       Every CTA scrolls to that form (#lead-form). Page-scoped to
       [data-lp="v4"]; styles.css untouched.
       One accent, highlight pills behind the load-bearing phrase of
       three headlines. 2026-09-09 (Carlo): the beige alternate bands
       and the partner marquee are gone, and the container runs full
       width with the site's own gutter (--pad), like index.html.
       ============================================================ */
    [data-lp="v4"] { --tick: #1F7A4D; --mk-ink: #14110B; }
    [data-lp="v4"] main { overflow-x: clip; }
    [data-lp="v4"] h1, [data-lp="v4"] h2, [data-lp="v4"] h3 { text-wrap: balance; margin: 0; }
    [data-lp="v4"] p { margin: 0; }
    [data-lp="v4"] .wrap { max-width: none; }  /* edge to edge, gutter = --pad, same as the site */
    [data-lp="v4"] .lp-sec { padding: clamp(52px, 7vw, 96px) 0; }
    [data-lp="v4"] .lp-h2 { font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.18; font-weight: 300; letter-spacing: -0.032em; }
    [data-lp="v4"] .lp-line { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.5; color: var(--ink-soft); }
    [data-lp="v4"] .lp-cap { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); line-height: 1.5; color: var(--ink-mute); }
    [data-lp="v4"] .lp-cap strong { font-weight: 500; color: var(--ink-soft); }
    /* A rounded rectangle sitting symmetrically around the word, descenders included.
       It collided with the line above not because the pill was too tall but because
       .lp-h2 ran at line-height 1.04, which is TIGHTER than the inline content box a
       background paints. The fix is the leading, not the pill: 1.18 gives the pill
       room and the headings read better anyway. A gradient band was tried first and
       rejected - it cannot take a border-radius, so it read as a flat marker smear
       and clipped the cap heights (Carlo 2026-09-09). */
    [data-lp="v4"] .hl { border-radius: 0.24em; padding: 0.04em 0.18em; margin: 0 -0.18em; color: inherit;
      background: color-mix(in srgb, var(--clay) 11%, transparent);
      -webkit-box-decoration-break: slice; box-decoration-break: slice; }
    [data-lp="v4"] .em { color: var(--clay); }
    /* A highlight split across two lines reads as two stacked blocks however the
       break is drawn, so on a phone the line is broken BEFORE the pill instead. */
    [data-lp="v4"] .ph-br { display: inline; }
    /* One long button, everywhere: the site's own rounded-rectangle radius (--r-btn, 14px),
       wide enough to read as the thing to press. The house mark is the one from the
       network hub and sits on the HERO button only, so it stays a signature rather
       than furniture repeated seven times (Carlo 2026-09-09). */
    [data-lp="v4"] .lp-cta { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; min-width: 246px; padding: 0 38px; border-radius: 14px;
      background: var(--clay); color: #fff; font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.012em; text-decoration: none;
      transition: transform 120ms var(--ease-out), box-shadow 220ms var(--ease-out); }
    [data-lp="v4"] .fold__cta .lp-cta::before { content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 4l9 6.5'/%3E%3Cpath d='M5.5 9.6V19h13V9.6'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 4l9 6.5'/%3E%3Cpath d='M5.5 9.6V19h13V9.6'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E") center / contain no-repeat; }
    [data-lp="v4"] .lp-cta:hover { box-shadow: 0 10px 24px -10px var(--clay-deep); }
    [data-lp="v4"] .lp-cta:active { transform: scale(0.97); }
    [data-lp="v4"] .lp-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
    [data-lp="v4"] .ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 1rem; line-height: 1.42; color: var(--ink-soft); }
    [data-lp="v4"] .ticks span { display: inline-flex; align-items: center; gap: 6px; }
    [data-lp="v4"] .ticks svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--tick); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    [data-lp="v4"] .chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
      background: rgba(174,27,48,0.08); color: var(--clay); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }

    /* ---------- mini chrome: this page keeps the visitor on the page ---------- */
    [data-lp="v4"] .lp-top { display: flex; align-items: center; justify-content: space-between; height: 56px; }
    [data-lp="v4"] .lp-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em;
      transition: opacity 140ms var(--ease-out); }
    [data-lp="v4"] .lp-brand img { width: 23px; height: 27px; display: block; }
    [data-lp="v4"] .lp-brand:active { opacity: 0.7; }
    [data-lp="v4"] .lp-nav { display: none; }
    [data-lp="v4"] .lp-top__r { display: flex; align-items: center; gap: 10px; }
    [data-lp="v4"] .lp-pill { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 18px; border-radius: var(--r-btn, 14px);
      border: 1px solid var(--line); font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap;
      transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out); }
    [data-lp="v4"] .lp-pill--go { display: none; background: var(--clay); color: #fff; border-color: var(--clay); min-width: 168px; }
    [data-lp="v4"] .lp-pill:active { transform: scale(0.97); }
    [data-lp="v4"] .lp-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
    @media (hover: hover) and (pointer: fine) {
      [data-lp="v4"] .lp-pill:hover { background: rgba(20,17,11,0.045); border-color: rgba(20,17,11,0.22); }
      /* NOT --clay-deep: that token carries an alpha channel (#6E0F1F94) and goes
         translucent when used as a solid fill. It is a shadow colour, not a fill. */
      [data-lp="v4"] .lp-pill--go:hover { background: color-mix(in srgb, var(--clay) 88%, #000); border-color: color-mix(in srgb, var(--clay) 88%, #000); }
    }

    /* ---------- 1. fold ---------- */
    [data-lp="v4"] .fold { display: flex; flex-direction: column; min-height: calc(100svh - 56px); }
    [data-lp="v4"] .fold__copy { display: flex; flex-direction: column; gap: 9px; padding-top: 0; }
    [data-lp="v4"] .eyebrow-proof { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }
    [data-lp="v4"] .eyebrow-proof svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--clay); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    [data-lp="v4"] .fold h1 { font-size: clamp(2.5rem, 2rem + 2.2vw, 4.5rem); line-height: 1.02; font-weight: 300; letter-spacing: -0.035em; }
    [data-lp="v4"] .fold h1 .money { color: var(--clay); }
    [data-lp="v4"] .nb { white-space: nowrap; }
    [data-lp="v4"] .lp-line, [data-lp="v4"] .lp-cap { text-wrap: pretty; }
    [data-lp="v4"] .fold__cta { display: flex; flex-direction: column; gap: 8px; padding: 0; margin-top: auto; }

    /* ---------- 1b. the fold on the PHONE: thinning it out (Carlo 2026-09-09) ----------
       The fold was carrying more than it needed: a Call pill duplicating the sticky
       call FAB, a 64px button, a two-line licence eyebrow, and a FUD row wrapping
       ragged 1/1/2. Every pixel above the fold is expensive ([[Marketing/mobile-landing-pages]]).
       The four ticks STAY - the FUD row is 2-4 items by rule and is the single
       highest-leverage element on the fold ([[Marketing/above-the-fold]]); the density
       problem was the ragged wrap, so it is fixed by composing them on a 2-col grid,
       not by deleting a reassurance. */
    @media (max-width: 879.98px) {
      /* the sticky .lp-fab--call already sits on every phone screen, so the header pill is a duplicate */
      [data-lp="v4"] .lp-top__r { display: none; }
      /* one line, always: 13px + nowrap clears it at 320px */
      [data-lp="v4"] .eyebrow-proof { font-size: clamp(0.6875rem, 3.3vw, 0.8125rem); white-space: nowrap; }
      /* air between the headline and the handwritten model label on the stage */
      [data-lp="v4"] .fold__stage { margin-top: 16px; }
      [data-lp="v4"] .fold__cta { gap: 8px; }
      /* the model tabs were sitting on the button; margin-top:auto on .fold__cta collects the
         space the shorter tick row frees, which lands exactly here */
      /* the tabs belong to the artwork above them, not to the button below: pull them up
         towards the render and push the button away. The 14px comes back off the copy gap,
         the dots margin and the fold's own bottom padding so the fold still ends at 100svh. */
      /* The labelled tab row read as a second control competing with the button under it,
         and each model is already named in handwriting ON its own slide - so the labels were
         saying it twice. Three dots instead: quieter, and the row drops 36px -> 30px.
         aria-label carries the name that font-size:0 removes from the page.
         The dwell is still drawn (the active dot is a pill that fills clay), because a slide
         that changes with no warning is the thing that makes an auto-carousel feel broken. */
      [data-lp="v4"] .fold__stage .dots { margin-top: 2px; gap: 4px; }
      [data-lp="v4"] .fold .dots button { font-size: 0; width: 30px; height: 30px; padding: 0; }
      [data-lp="v4"] .fold .dots button::before { left: 50%; top: 50%; right: auto; bottom: auto;
        transform: translate(-50%, -50%); width: 7px; height: 7px; border-radius: 999px;
        background: rgba(20,17,11,0.20); transition: width 260ms var(--ease-out); }
      [data-lp="v4"] .fold .dots button.is-on::before { width: 24px; }
      [data-lp="v4"] .fold .dots button::after { left: calc(50% - 12px); top: 50%; right: auto; bottom: auto;
        transform: translateY(-50%); width: 0; height: 7px; border-radius: 999px; }
      /* The pill is always its full 24px and the dwell is revealed with a clip, so the shape
         stays a pill for the whole 5s. Animating width could not do that: border-radius clamps
         to half the SMALLER side, so a 7px-tall bar renders as a sharp-cornered sliver until it
         is 14px wide - the rectangle at the start of every cycle. */
      [data-lp="v4"] .fold .dots button.is-on::after { width: 24px; clip-path: inset(0 0 0 0); }
      /* .is-running has to be in the selector, not just .is-on: the base rule further down the
         sheet sets width:0 on the running state at equal specificity, so source order was
         winning and the pill never painted. */
      [data-lp="v4"] .fold .dots button.is-on.is-running::after { width: 24px; animation: dot-fill-pill 5000ms linear forwards; }
      [data-lp="v4"] .fold__stage { margin-bottom: 2px; }
      /* The five trade marks sit under the ticks as the fold's SECOND proof form - until now
         the phone fold carried only the licence eyebrow, and the fold rule asks for two. The
         role labels are dropped: at this size the mark is the message, and the network section
         further down still names every role beside its logo. */
      [data-lp="v4"] .fold .names,
      [data-lp="v4"] .closer__proof .names { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0; padding-top: 0; }
      [data-lp="v4"] .closer__proof { gap: 12px; }
      [data-lp="v4"] .fold .name,
      [data-lp="v4"] .closer__proof .name { gap: 0; }
      /* No size override: the phone uses the desktop hexagon exactly as it is - 56px, the same
         per-logo backdrops (paper / ink / paperwhite / the blurred photo tile for Stella) and
         the same caps, which are absolute px and therefore only correct at 56 (Carlo 2026-09-09).
         The 4.7px that costs is taken off the gaps below, not off the hexagon. */
      [data-lp="v4"] .fold .name b,
      [data-lp="v4"] .closer__proof .name b { display: none; }
      [data-lp="v4"] .fold__copy { gap: 6px; }
      /* one sticky action on the phone, not two: the page already carries seven "Get started"
         buttons, so the corner pill was the eighth. The call FAB stays - it is the only
         non-duplicated action (Carlo 2026-09-09). */
      [data-lp="v4"] .mbar__btn--rep { display: none; }
      /* the CTA block is pinned to the bottom by margin-top:auto, so without this the
         last tick line sits flush on the screen edge */
      [data-lp="v4"] .fold { padding-bottom: 4px; }
      /* 56px, inside the 52-64px mobile band and off the 64px ceiling where it starts reading as an ad */
      [data-lp="v4"] .fold__cta .lp-cta { min-height: 56px; font-size: 1.0625rem; border-radius: 12px; }
      [data-lp="v4"] .fold__cta .lp-cta::before { width: 19px; height: 19px; }
      /* three ticks, left-aligned, wrapping onto one left edge - centred rows read as ragged,
         and four items on a 335px column could not avoid a two-line cell. "No obligation" moves
         to the lead form, where the hesitation it answers actually happens. */
      [data-lp="v4"] .fold .ticks { justify-content: flex-start; gap: 9px 14px; font-size: 0.875rem; line-height: 1.32; }
      [data-lp="v4"] .fold .ticks svg { margin-top: 1px; }
      /* one per row, one left edge. flex-wrap alone is not enough: two short items pair up
         on a row and the next one lands beside a long one, which is the stray-tick-on-the-
         right Carlo called out. Below the fold the vertical space is cheap. */
      [data-lp="v4"] .faq-ticks--phone,
      [data-lp="v4"] .closer .ticks { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 9px; }
    }
    /* the names on the job, static, under the FUD row - replaces the marquee (Carlo 2026-09-09) */
    [data-lp="v4"] .names { display: none; flex-wrap: wrap; align-items: center; gap: 12px 22px; }  /* phone: the fold is full; the network section carries the names */
    [data-lp="v4"] .names img { height: 22px; width: auto; max-width: 96px; object-fit: contain; display: block; opacity: 0.85; }
    /* hero sub-line: desktop only (Carlo 2026-09-09) */
    [data-lp="v4"] .fold__sub { display: none; }
    /* primary + secondary action */
    [data-lp="v4"] .cta-row { display: flex; flex-direction: column; gap: 6px; }
    [data-lp="v4"] .lp-alt { align-self: center; font-size: 1.0625rem; color: var(--ink-soft); text-decoration: underline;
      text-underline-offset: 4px; text-decoration-color: rgba(20,17,11,0.28); padding: 2px; }
    [data-lp="v4"] .lp-alt { transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out); }
    [data-lp="v4"] .lp-alt:hover { color: var(--clay); text-decoration-color: var(--clay); }
    [data-lp="v4"] .lp-alt:active { color: var(--clay-deep); }
    [data-lp="v4"] .lp-foot__links a { transition: color 160ms var(--ease-out); }
    [data-lp="v4"] .lp-foot__links a:hover { color: var(--clay); }

    /* The render carousel is a fixed 390x400 stage (664x620 on desktop) scaled to its
       column by a ResizeObserver, so the hand-drawn callouts keep their exact
       relationship to the render at every width. */
    [data-lp="v4"] .stage-wrap { position: relative; width: 100%; overflow: visible; }
    [data-lp="v4"] .stage { position: relative; transform-origin: top left; }
    [data-lp="v4"] .slides { position: relative; width: 390px; height: 400px; margin-top: 0; }
    /* One slide is on at a time; the switch is driven by the dots (JS), not a keyframe
       loop, so a click lands instantly and the callouts never double up mid-fade. */
    [data-lp="v4"] .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
      transition: opacity 420ms var(--ease-out), visibility 0s linear 420ms; }
    [data-lp="v4"] .slide.is-on { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease-out), visibility 0s; }
    [data-lp="v4"] .slide img { position: absolute; left: 0; top: 118px; width: 390px; height: auto; display: block; }
    [data-lp="v4"] .mk { position: absolute; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; letter-spacing: 0; line-height: 1;
      white-space: nowrap; transform-origin: left center; z-index: 2; color: var(--mk-ink);
      text-shadow: 0 0 8px var(--paper), 0 0 3px var(--paper), 0 0 1px var(--paper); }
    [data-lp="v4"] .mk--accent { color: var(--clay); }
    [data-lp="v4"] .mk-arrow { position: absolute; display: block; overflow: visible; z-index: 2; }
    [data-lp="v4"] .mk-arrow path { fill: none; stroke: var(--mk-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    [data-lp="v4"] .mk-arrow--accent path { stroke: var(--clay); stroke-width: 2.6; }
    /* The switcher: three NAMED tabs under the render, so it reads as a choice rather
       than as decoration. The active label carries a clay rule that fills over the
       dwell, so the auto-advance is visible instead of surprising. */
    [data-lp="v4"] .dots { display: flex; justify-content: center; gap: 18px; margin-top: 2px; }
    [data-lp="v4"] .dots button { position: relative; display: inline-flex; align-items: center; justify-content: center;
      padding: 4px 2px 9px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
      font: inherit; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.012em; white-space: nowrap;
      /* 0.62, not the 0.42 this ran at: the two models you are NOT on came out at
         2.8:1, under the 4.5:1 floor, and these are the only control for a hero
         that advances by itself. Now 5.3:1. The active one is still full ink and
         still carries the clay fill, so which one is live reads the same. */
      color: rgba(20,17,11,0.62); transition: color 200ms var(--ease-out); }
    [data-lp="v4"] .dots button:hover { color: rgba(20,17,11,0.82); }
    [data-lp="v4"] .dots button.is-on { color: var(--ink); }
    [data-lp="v4"] .dots button::before,
    [data-lp="v4"] .dots button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 999px; }
    [data-lp="v4"] .dots button::before { right: 0; background: rgba(20,17,11,0.14); }
    [data-lp="v4"] .dots button::after { width: 0; background: var(--clay); }
    [data-lp="v4"] .dots button.is-on::after { width: 100%; }
    [data-lp="v4"] .dots button.is-on.is-running::after { width: 0; animation: dot-fill 5000ms linear forwards; }
    [data-lp="v4"] .dots.is-paused button.is-on.is-running::after { animation-play-state: paused; }
    @keyframes dot-fill { from { width: 0; } to { width: 100%; } }
    @keyframes dot-fill-pill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    [data-lp="v4"] .dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
    [data-lp="v4"] .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    /* desktop-only callouts inside the stage */
    [data-lp="v4"] .mk--desk { display: none; }


    /* ---------- 2. proof: our work (the homepage filmstrip) ---------- */
    [data-lp="v4"] .ow { position: relative; height: 660px; overflow: hidden; margin-top: 18px; }
    [data-lp="v4"] .ow__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    [data-lp="v4"] .ow__col { position: relative; overflow: hidden; }
    [data-lp="v4"] .ow__col--3 { display: none; }
    [data-lp="v4"] .ow__run { display: flex; flex-direction: column; gap: 12px; animation: ow-up 32s linear infinite; }
    [data-lp="v4"] .ow__col--down .ow__run { animation-name: ow-down; }
    @keyframes ow-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
    @keyframes ow-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
    [data-lp="v4"] .ow__cell { position: relative; flex: 0 0 auto; border-radius: 12px; overflow: hidden; background: var(--paper-2); }
    [data-lp="v4"] .ow__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
    [data-lp="v4"] .ow__cell span { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 500; padding: 5px 10px; border-radius: 8px; }
    [data-lp="v4"] .ow::before, [data-lp="v4"] .ow::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
    [data-lp="v4"] .ow::before { top: 0; height: 26px; background: linear-gradient(180deg, var(--paper), rgba(255,255,255,0)); }
    [data-lp="v4"] .ow::after { bottom: 0; height: 34px; background: linear-gradient(0deg, var(--paper), rgba(255,255,255,0)); }
    [data-lp="v4"] .ow-copy { display: flex; flex-direction: column; gap: 18px; }

    /* ---------- 3. pain, then the number ---------- */
    /* Counting numbers, one place only: this section IS the argument - the gap between what a
       house returns and what a granny flat returns - so watching the gap open is emphasis, not
       decoration. Tabular figures stop the digits jittering mid-count. */
    [data-lp="v4"] .lp-num b { font-variant-numeric: tabular-nums; }
    [data-lp="v4"] .lp-nums { display: flex; gap: 28px; align-items: flex-end; }
    [data-lp="v4"] .lp-num { display: flex; flex-direction: column; gap: 6px; }
    [data-lp="v4"] .lp-num b { font-size: clamp(3.25rem, 2rem + 5vw, 7rem); line-height: 1; font-weight: 300; letter-spacing: -0.04em; white-space: nowrap; }
    [data-lp="v4"] .lp-num--house b { color: rgba(20,17,11,0.3); }
    [data-lp="v4"] .lp-num--gf b { color: var(--clay); }
    /* Phone: the two figures sit in a nowrap flex row, and "two-bed granny flat,
       gross" is wider than half a 430px screen, so the 18-21% block was running
       ~175px off the right edge with the % and the caption cut. min-width:0 lets
       the columns shrink below max-content so the caption wraps instead. Found in
       the 2026-09-09 audit; pre-existing, not from the finance copy. */
    @media (max-width: 879.98px) {
      [data-lp="v4"] .lp-nums { gap: 18px; }
      [data-lp="v4"] .lp-num { min-width: 0; flex: 1 1 0; }
    }
    [data-lp="v4"] .lp-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
    [data-lp="v4"] .lp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.1875rem; line-height: 1.5; }
    [data-lp="v4"] .lp-row .v { font-weight: 500; white-space: nowrap; }

    /* ---------- 4. value props ---------- */
    [data-lp="v4"] .pcards { display: flex; flex-direction: column; gap: 12px; }
    [data-lp="v4"] .pcard { position: relative; height: 400px; border-radius: 18px; overflow: hidden; background: var(--ink); }
    [data-lp="v4"] .pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); }
    [data-lp="v4"] .pcard::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,17,11,0.78) 0%, rgba(20,17,11,0.46) 34%, rgba(20,17,11,0) 62%); }
    [data-lp="v4"] .pcard .t { position: absolute; z-index: 2; left: 18px; right: 18px; top: 18px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.22); }
    [data-lp="v4"] .pcard h3 { font-size: 1.5rem; line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; }
    [data-lp="v4"] .pcard p { font-size: 1rem; line-height: 1.45; color: rgba(255,255,255,0.9); margin-top: 6px; }

    /* ---------- 5. proof: the people ---------- */
    /* The only social proof on the page has no face, so it carries as type and
       as place instead. The card is gone: a bordered box 340px tall around 90px
       of small text was the whole readability problem (Carlo 2026-09-09). Now the
       largest body type on the page, with the suburb doing the work a photo would. */
    [data-lp="v4"] .people-grid { display: flex; flex-direction: column; gap: 36px; }
    [data-lp="v4"] .lp-quote { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 4px 0; }
    /* A real typographic quotation mark, not the outlined icon: at display size
       that icon reads as the number 99 (seen on screen 2026-09-09). The mark opens
       the quote, so the paragraph carries no straight quotes of its own. */
    [data-lp="v4"] .lp-quote__mark { display: block; height: 0.42em; font-size: 4rem; line-height: 1; color: var(--clay); font-weight: 400; user-select: none; }
    [data-lp="v4"] .lp-quote__mark--end { display: inline; height: auto; font-size: 2.25rem; line-height: 0; vertical-align: -0.30em; margin-left: 0.04em; }
    [data-lp="v4"] .lp-quote p { font-size: 1.25rem; line-height: 1.4; font-weight: 300; letter-spacing: -0.015em; color: var(--ink); }
    [data-lp="v4"] .lp-quote__by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 16px; border-top: 1px solid var(--line); }
    [data-lp="v4"] .founder { display: grid; grid-template-columns: 5fr 6fr; gap: 12px; align-items: stretch; }
    [data-lp="v4"] .founder img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; display: block; }
    [data-lp="v4"] .founder__t { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
    [data-lp="v4"] .founder h3 { font-size: 1.25rem; line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; }
    /* Phone: the 5fr/6fr split leaves the quote a ~170px column and 12 lines of it. The
       portrait and the name become an attribution header and the words get the whole width -
       the same block composed for the narrow canvas, not squeezed into it. This block sits
       HERE rather than with the other phone rules at the top of the sheet: same specificity
       as the base rules above, so source order is what decides it. */
    @media (max-width: 879.98px) {
      [data-lp="v4"] .faq-grid > div + div { margin-top: 24px; }
      [data-lp="v4"] .founder { grid-template-columns: 128px minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-items: center; }
      /* keep the source's own 4:5 rather than re-cropping to a square - a square centre-crop
         of this portrait puts the face against the bottom edge */
      [data-lp="v4"] .founder img { aspect-ratio: 4 / 5; border-radius: 12px; }
      [data-lp="v4"] .founder__t { display: contents; }
      [data-lp="v4"] .founder h3 { grid-column: 2; grid-row: 1; align-self: center; font-size: 1.125rem; }
      [data-lp="v4"] .founder__t p { grid-column: 1 / -1; grid-row: 2; font-size: 1rem; line-height: 1.5; }
    }

    /* ---------- 6. differentiators: the split plan ---------- */
    [data-lp="v4"] .plan { position: relative; width: 390px; height: 566px; overflow: hidden; }
    [data-lp="v4"] .plan > img { position: absolute; top: 50%; left: 50%; width: 566px; height: 390px; max-width: none; transform: translate(-50%, -50%) rotate(90deg); display: block; }
    [data-lp="v4"] .plan--desk { display: none; width: 1240px; height: 900px; }
    [data-lp="v4"] .plan--desk > img { position: absolute; top: 72px; left: 0; width: 100%; height: auto; max-width: none; transform: none; }
    [data-lp="v4"] .ptag { position: absolute; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--paper);
      border: 1px solid var(--line); box-shadow: 0 10px 28px -12px rgba(20,17,11,0.28), 0 1px 0 rgba(20,17,11,0.04); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; z-index: 2; }
    [data-lp="v4"] .ptag svg { width: 16px; height: 16px; flex: none; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    [data-lp="v4"] .ptag--no { color: rgba(20,17,11,0.66); } [data-lp="v4"] .ptag--no svg { stroke: rgba(20,17,11,0.5); }
    [data-lp="v4"] .ptag--yes { color: var(--ink); } [data-lp="v4"] .ptag--yes svg { stroke: var(--clay); stroke-width: 2.6; }
    [data-lp="v4"] .ptag img { width: 14px; height: 14px; display: block; flex: none; }
    [data-lp="v4"] .tag-hero { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 10px; background: var(--paper); border: 1px solid var(--clay); color: var(--clay);
      border-radius: 999px; box-shadow: 0 10px 28px -12px rgba(20,17,11,0.28); font-size: 0.875rem; font-weight: 500; white-space: nowrap; z-index: 2; }
    [data-lp="v4"] .tag-hero i { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); flex: none; }
    [data-lp="v4"] .tag-hero small { font-size: 0.9375rem; font-weight: 400; color: var(--ink-soft); margin-left: 2px; }

    /* ---------- 7. four steps: the rail ---------- */
    [data-lp="v4"] .lp-steps { position: relative; display: flex; flex-direction: column; gap: 0; }
    [data-lp="v4"] .lp-step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; padding-bottom: 36px; }
    [data-lp="v4"] .lp-step__rail { position: relative; display: flex; justify-content: center; }
    [data-lp="v4"] .lp-step__rail i { width: 12px; height: 12px; border-radius: 50%; background: var(--clay); margin-top: 8px; z-index: 1; flex: none; }
    [data-lp="v4"] .lp-step__rail::after { content: ""; position: absolute; top: 24px; bottom: -36px; width: 2px; border-radius: 999px; background: var(--clay); }
    [data-lp="v4"] .lp-step:last-child { padding-bottom: 0; }
    [data-lp="v4"] .lp-step:last-child .lp-step__rail::after { display: none; }
    [data-lp="v4"] .lp-step__t, [data-lp="v4"] .lp-step__im, [data-lp="v4"] .lp-step__ms { grid-column: 2; }
    [data-lp="v4"] .lp-step__t h3 { font-size: 1.5rem; line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; }
    [data-lp="v4"] .lp-step__t p { font-size: 1rem; line-height: 1.45; color: var(--ink-soft); margin-top: 8px; max-width: 34ch; }
    [data-lp="v4"] .lp-step__im { margin-top: 16px; border-radius: 12px; overflow: hidden; }
    [data-lp="v4"] .lp-step__im img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
    [data-lp="v4"] .lp-step__im--tall { width: 158px; aspect-ratio: 158 / 223; }
    [data-lp="v4"] .lp-step__im--wide { width: 100%; aspect-ratio: 292 / 196; }
    [data-lp="v4"] .lp-step__im--keys { width: 220px; aspect-ratio: 220 / 293; }
    [data-lp="v4"] .lp-step__ms { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--paper); border: 1px solid rgba(20,17,11,0.4);
      font-size: 1rem; color: rgba(20,17,11,0.7); letter-spacing: -0.01em; margin-top: 16px; align-self: flex-start; justify-self: start; grid-column: 2; white-space: nowrap; }

    /* ---------- 7b. four steps on the PHONE: the centre rail (2026-09-09) ----------
       The stacked left-rail version was the desktop composition rotated - the failure
       [[Marketing/mobile-landing-pages]] names first. This is a phone artboard: the rail
       runs down the CENTRE, text alternates either side of it, and the photographs are
       composed against it rather than parked under it. Two crop the copy from the
       opposite side and overlap it vertically; two cross the rail entirely and bleed off
       the near screen edge. Overlapping planes are how a narrow column reads as depth
       (oilstainlab, [[Marketing/mobile-craft-references]]) - and it is the one thing a
       phone cannot get from width. Reference: samara.com/adus/how-it-works on a phone.
       The line is drawn dot-centre to dot-centre so it cannot break between steps, which
       is what the old top:24/bottom:-36 arithmetic did. Scoped max-width so the 880px
       desktop layout below is untouched. */
    @media (max-width: 879.98px) {
      [data-lp="v4"] .lp-step { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); column-gap: 13px; padding-bottom: 52px; }
      /* span 3, NOT 1 / -1: with no grid-template-rows the rows are implicit, so -1
         resolves to line 1 and the rail collapses to row 1 - which cut the line off
         under every crossing image. */
      [data-lp="v4"] .lp-step__rail { grid-column: 2; grid-row: 1 / span 3; align-items: flex-start; }
      [data-lp="v4"] .lp-step__rail i { width: 11px; height: 11px; margin-top: 7px; z-index: 2; }
      /* dot centre = margin-top 7 + half of 11; the tail reaches 12.5px into the next step */
      [data-lp="v4"] .lp-step__rail::after { left: 50%; transform: translateX(-50%); top: 12.5px; bottom: -64.5px; width: 3px; z-index: 0; }

      [data-lp="v4"] .lp-step__t { grid-row: 1; }
      [data-lp="v4"] .lp-step--r .lp-step__t { grid-column: 3; text-align: left; }
      [data-lp="v4"] .lp-step--l .lp-step__t { grid-column: 1; text-align: right; }
      [data-lp="v4"] .lp-step__t h3 { font-size: 1.375rem; line-height: 1.16; letter-spacing: -0.022em; }
      [data-lp="v4"] .lp-step__t p { font-size: 0.9375rem; line-height: 1.5; margin-top: 10px; max-width: none; }

      [data-lp="v4"] .lp-step__im { position: relative; z-index: 1; margin-top: 0; align-self: start; }
      /* beside: opposite column to the copy, offset so it overlaps the paragraph, bleeding off the outer edge */
      [data-lp="v4"] .lp-step__im.im-beside { grid-row: 1; width: auto; }
      [data-lp="v4"] .lp-step--r .lp-step__im.im-beside { grid-column: 1; margin-left: calc(-1 * var(--pad)); margin-top: 74px; }
      [data-lp="v4"] .lp-step--l .lp-step__im.im-beside { grid-column: 3; margin-right: calc(-1 * var(--pad)); margin-top: -18px; }
      /* cross: spans the rail, pushed away from the copy, bleeding off the near edge */
      [data-lp="v4"] .lp-step__im.im-cross { grid-column: 1 / -1; grid-row: 2; width: auto; margin-top: 26px; }
      [data-lp="v4"] .lp-step--l .lp-step__im.im-cross { margin-left: 44px; margin-right: calc(-1 * var(--pad)); }
      [data-lp="v4"] .lp-step--r .lp-step__im.im-cross { margin-right: 44px; margin-left: calc(-1 * var(--pad)); }

      /* the milestone pill sits ON the line, opaque, breaking it - Samara's own device */
      [data-lp="v4"] .lp-step__ms { grid-column: 1 / -1; grid-row: 3; justify-self: center; align-self: start; margin-top: 26px; z-index: 3; }
    }

    [data-lp="v4"] .closer__proof { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
    [data-lp="v4"] .closer__proof .names { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
    /* marks only next to the form: the roles are named in full one section up, and five
       hexagons plus five labels here would wrap and orphan the last one */
    [data-lp="v4"] .closer__proof .name { gap: 0; }
    [data-lp="v4"] .closer__proof .name b { display: none; }

    /* NO SECTION GROUNDS ON THIS PAGE. Carlo, 2026-09-09, after seeing all three:
       the 2026-09-02 beige band (#EAE6DC, measured 1.246:1 against white - under the
       threshold, so it read as a smudge rather than a section), a warm stone at 1.33:1,
       and full clay with the type reversed out (legible but effortful at body size on a
       phone, and the white section straight after it made the eye re-adjust twice inside
       one scroll). The drawn hairline dividers went the same way: every section already
       carries internal rules, so a boundary rule of the same weight competed with them.
       What separates the sections instead is what was always doing it - each one changes
       content type: photo grid, then figures, then dark cards, then a portrait and a quote,
       then a timeline, then a hexagon map, then a list. Do not re-add a band or a divider
       without a measured reason; three have been tried and rejected on look. */

    /* ---------- 8. proof: every name on the job ---------- */
    [data-lp="v4"] .net { position: relative; width: 350px; height: 484px; }
    [data-lp="v4"] .net--desk { display: none; width: 760px; height: 760px; }
    [data-lp="v4"] .wires { position: absolute; left: 0; top: 0; display: block; fill: none; stroke: rgba(20,17,11,0.24); stroke-width: 1.5; stroke-linecap: round; }
    [data-lp="v4"] .pnode { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    [data-lp="v4"] .phex { position: relative; width: 80px; height: 92.4px; display: flex; align-items: center; justify-content: center; }
    [data-lp="v4"] .net--desk .phex { width: 124px; height: 143.2px; }
    [data-lp="v4"] .phex-edge { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 18px rgba(20,17,11,0.14)); }
    [data-lp="v4"] .phex-edge polygon { fill: var(--paper); stroke: rgba(20,17,11,0.18); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
    [data-lp="v4"] .phex-fill { position: absolute; inset: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); overflow: hidden; background: #555; }
    [data-lp="v4"] .phex-fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
    [data-lp="v4"] .phex-fill .blur { left: -20%; top: -20%; width: 140%; height: 140%; filter: blur(12px); }
    [data-lp="v4"] .phex-fill .logo { object-fit: contain; }
    [data-lp="v4"] .phex > img { position: relative; z-index: 1; max-width: 54px; max-height: 40px; width: auto; height: auto; object-fit: contain; display: block; }
    [data-lp="v4"] .net--desk .phex > img { max-width: 78px; max-height: 58px; }
    [data-lp="v4"] .pwho { display: flex; flex-direction: column; gap: 3px; }
    [data-lp="v4"] .pwho b { font-size: 1.125rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
    [data-lp="v4"] .pwho span { font-size: 0.875rem; line-height: 1.25; color: var(--ink-mute); }
    [data-lp="v4"] .net--desk .pwho span { font-size: 1rem; }
    [data-lp="v4"] .hub { position: absolute; filter: drop-shadow(0 12px 26px rgba(174,27,48,0.34)); }
    [data-lp="v4"] .hub-in { width: 100%; height: 100%; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: var(--clay);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #fff; }
    [data-lp="v4"] .hub-in svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    [data-lp="v4"] .net--desk .hub-in svg { width: 34px; height: 34px; }
    [data-lp="v4"] .hub-in span { font-size: 0.75rem; font-weight: 500; line-height: 1; }
    [data-lp="v4"] .net--desk .hub-in span { font-size: 1rem; }

    /* ---------- 9. FAQ + FUD ---------- */
    [data-lp="v4"] .faq { border-top: 1px solid var(--line); }
    [data-lp="v4"] .faq:last-of-type { border-bottom: 1px solid var(--line); }
    [data-lp="v4"] .faq summary { list-style: none; cursor: pointer; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 14px;
      padding: 18px 0; min-height: 58px; font-size: 1.125rem; line-height: 1.4; letter-spacing: -0.01em; }
    [data-lp="v4"] .faq summary::-webkit-details-marker { display: none; }
    [data-lp="v4"] .faq summary:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
    [data-lp="v4"] .faq .pm { position: relative; flex: none; width: 20px; height: 20px; }
    [data-lp="v4"] .faq .pm::before, [data-lp="v4"] .faq .pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(20,17,11,0.45); transition: transform 200ms var(--ease-out); }
    [data-lp="v4"] .faq .pm::before { width: 13px; height: 1.5px; transform: translate(-50%,-50%); }
    [data-lp="v4"] .faq .pm::after { width: 1.5px; height: 13px; transform: translate(-50%,-50%); }
    [data-lp="v4"] .faq[open] .pm::after { transform: translate(-50%,-50%) scaleY(0); }
    [data-lp="v4"] .faq[open] summary { color: var(--clay); }
    [data-lp="v4"] .faq .a { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); margin: -2px 0 12px; padding-right: 30px; }
    /* The page runs deliberately thin on words, so the detail lives here, collapsed
       (memory feedback-lp-copy-density). Expanded 2026-09-09: a two-line answer was
       too short for someone who has actually opened the question. */
    [data-lp="v4"] .faq .a-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0 0 22px; padding-right: 30px; }
    [data-lp="v4"] .faq .a-list li { position: relative; padding-left: 20px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
    [data-lp="v4"] .faq .a-list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); opacity: 0.55; }
    [data-lp="v4"] .faq .a-list b { font-weight: 500; color: var(--ink); }

    /* ---------- 10. closer: the form ---------- */
    [data-lp="v4"] .closer__img { width: 100%; max-width: 520px; height: auto; display: block; margin: 4px auto; }
    [data-lp="v4"] .lead-form { display: flex; flex-direction: column; gap: 10px; }
    [data-lp="v4"] .lead-form .field { margin: 0; }
    [data-lp="v4"] .lead-form label { display: none; }
    [data-lp="v4"] .lead-form .field input { min-height: 56px; padding: 0 16px; border: 1px solid rgba(20,17,11,0.22); border-radius: 12px; background: var(--paper); font-size: 1.0625rem; }
    [data-lp="v4"] .lead-form__row { display: flex; flex-wrap: wrap; gap: 10px; }
    [data-lp="v4"] .lead-form__row .field { flex: 1 1 220px; }
    /* submit only - this used to match the address field's search button too, which then
       stretched to the full input width and swallowed every click on the field */
    [data-lp="v4"] .lead-form > button[type="submit"] { width: 100%; border: 0; cursor: pointer; font: inherit; }
    [data-lp="v4"] .lp-addr__btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-mute); cursor: pointer; border-radius: 10px; }
    [data-lp="v4"] .lp-addr__btn svg { width: 20px; height: 20px; }
    [data-lp="v4"] .lp-addr__hint { font-size: 0.9375rem; color: var(--ink-mute); margin-top: 6px; }
    [data-lp="v4"] .lp-addr input { padding-right: 56px; }

    /* ---------- footer line ---------- */
    [data-lp="v4"] .lp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-mute); }
    [data-lp="v4"] .lp-foot a { color: inherit; text-decoration: none; }
    [data-lp="v4"] .lp-foot a:hover { color: var(--clay); }
    [data-lp="v4"] .lp-foot__l { display: inline-flex; align-items: center; gap: 8px; }
    [data-lp="v4"] .lp-foot__l img { width: 14px; height: 16px; display: block; }
    [data-lp="v4"] .lp-foot__links { display: inline-flex; gap: 8px; }
    [data-lp="v4"] .lp-foot__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

    /* ---------- reveal (site .reveal is opt-in; keep it soft) ---------- */
    [data-lp="v4"] .lp-in { opacity: 1; transform: none; }

    /* ======================= DESKTOP (the adaptation) ======================= */
    @media (min-width: 880px) {
      [data-lp="v4"] .lp-top { height: 84px; }
      [data-lp="v4"] .lp-brand { font-size: 1.375rem; } [data-lp="v4"] .lp-brand img { width: 27px; height: 31px; }
      [data-lp="v4"] .lp-nav { display: flex; align-items: center; gap: 36px; }
      [data-lp="v4"] .lp-nav a { font-size: 0.9375rem; color: var(--ink-soft); text-decoration: none; } [data-lp="v4"] .lp-nav a:hover { color: var(--clay); }
      [data-lp="v4"] .lp-pill { height: 48px; padding: 0 20px; font-size: 1rem; }
      [data-lp="v4"] .lp-pill--go { display: inline-flex; }
      [data-lp="v4"] .fold { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); grid-template-areas: "copy stage" "cta stage"; grid-template-rows: auto auto; column-gap: 72px; row-gap: 18px; align-content: center; min-height: calc(100svh - 84px); padding: 14px 0 18px; }
      /* Desktop fold rhythm (Carlo 2026-09-09): the column used to run at a flat
         18-22px between every element, which reads as compressed however much air
         sits above and below it. Now grouped - label tight to the headline, the
         headline block held away from the action, the ticks bound to the button,
         the trade logos set apart as their own proof. */
      [data-lp="v4"] .fold__copy { grid-area: copy; align-self: end; justify-content: end; gap: 22px; padding: 0; }
      [data-lp="v4"] .fold__stage { grid-area: stage; align-self: center; }
      [data-lp="v4"] .fold__cta { grid-area: cta; align-self: start; padding: 0; margin-top: 0; gap: 18px; align-items: flex-start; }
      [data-lp="v4"] .fold__cta .lp-cta { display: inline-flex; min-height: 64px; }
      [data-lp="v4"] .cta-row { flex-direction: row; align-items: center; gap: 22px; }
      [data-lp="v4"] .lp-alt { align-self: auto; }
      [data-lp="v4"] .fold .ticks { justify-content: flex-start; gap: 8px 20px; }
      [data-lp="v4"] .fold__stage { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
      /* the render runs into the right gutter, so the whole stage reads right of centre */
      [data-lp="v4"] .fold__stage .stage-wrap { width: calc(100% + 48px); }
      [data-lp="v4"] .slides { width: 664px; height: 620px; margin-top: 0; }
      [data-lp="v4"] .slide img { top: 110px; width: 664px; }
      [data-lp="v4"] .mk--phone { display: none; } [data-lp="v4"] .mk--desk { display: block; }
      /* the render sits right of centre; the switcher stays centred UNDER it (Carlo 2026-09-09) */
      [data-lp="v4"] .dots { justify-content: center; margin-left: var(--stage-x, 0); width: var(--stage-w, calc(100% + 48px)); gap: 30px; margin-top: 2px; }
      [data-lp="v4"] .dots button { font-size: 1.0625rem; padding: 4px 2px 10px; }
      /* the trades on the job: logo + the role it plays, read left to right */
      [data-lp="v4"] .names { display: flex; justify-content: flex-start; gap: 16px 30px; padding-top: 12px; }
      [data-lp="v4"] .name { display: inline-flex; align-items: center; gap: 11px; }
    }

    /* Short desktop screens - 13" laptops at 1280x800 and 1440x900 (Carlo 2026-09-09,
       from his own 1907x900 screenshot: "it does get cut off, I have to scroll down
       a little bit").

       The fold ran 102px past the viewport, so the model switcher under the render
       was cut in half and the hero advanced every 5 seconds with its only control
       off screen. The render was NOT the cause - the left column is the taller of
       the two, and at this width the five trade logos wrap onto a second row that
       alone costs 81px. So the saving is taken across the copy column, the logos
       are pulled onto one line, and the render comes down a notch as well.

       Two tiers, because the fold wants 1007px and the trouble does not start at
       one screen size. Under ~1010px tall it only needs the air taken out of it.
       Under ~880px - a 1280x800 or 1440x900 laptop - the headline and the trade
       logos have to come down as well or the five wrap onto a second row.
       Anything taller than 1010px keeps the composition exactly as approved. */
    @media (min-width: 880px) and (max-height: 1010px) {
      [data-lp="v4"] .fold { padding: 6px 0 10px; row-gap: 12px; }
      [data-lp="v4"] .fold__copy { gap: 15px; }
      [data-lp="v4"] .fold__cta { gap: 12px; }
      [data-lp="v4"] .fold__cta .lp-cta { min-height: 56px; }
      [data-lp="v4"] .fold .ticks { gap: 6px 18px; }
      [data-lp="v4"] .fold .names { padding-top: 6px; }
      [data-lp="v4"] .fold__stage { gap: 4px; padding-top: 0; }
    }
    @media (min-width: 880px) and (max-height: 880px) {
      [data-lp="v4"] .fold h1 { font-size: clamp(2.25rem, 1.5rem + 2vw, 3.375rem); }
    }
    /* One row of trades, not two. This one is keyed to WIDTH, not height, because
       wrapping is a width problem: the copy column is 6/13 of the page, so below
       ~1520px the five logos at full size need more room than the column has and
       the fifth drops to a second line, costing 81px of the fold for nothing. */
    @media (min-width: 880px) and (max-width: 1520px) {
      [data-lp="v4"] .fold .names { gap: 10px 18px; flex-wrap: nowrap; }
      [data-lp="v4"] .fold .name { gap: 8px; }
      [data-lp="v4"] .fold .nhex { width: 42px; height: 48.5px; }
      [data-lp="v4"] .fold .name b { font-size: 0.8125rem; }
    }

    /* Phone: six hexagons on one line above the form.
       Rivela joined this row (Carlo 2026-09-09) and at a fixed 56px the six ran
       386px wide inside a 335px column, so the last one hung off the screen edge.
       The base `gap: 10px` further up also sits AFTER the phone block in source
       order, which is why the phone's own `gap: 0` never applied. Sizing them off
       the row instead of in px keeps all six on one line at any phone width, and
       the 56px cap means none of them grows past what they are on desktop. */
    @media (max-width: 879.98px) {
      [data-lp="v4"] .closer__proof .names { gap: 8px; justify-content: space-between; }
      [data-lp="v4"] .closer__proof .name { flex: 1 1 0; min-width: 0; }
      [data-lp="v4"] .closer__proof .nhex { width: 100%; max-width: 56px; height: auto;
        aspect-ratio: 100 / 115.47; }
    }
    /* The hexagons are lifted OUT of the desktop query so the phone uses the same shape
       and the same per-logo caps rather than a second copy of them. Only the ROW layout
       differs by breakpoint, and that lives in the two blocks either side of this one. */
      /* Each trade logo sits in the same hexagon the network section uses, so the
         five read as one set instead of five differently-shaped tiles (Carlo
         2026-09-09). Caps are per logo rather than shared: a hexagon's usable area
         is widest across its middle, so a wide wordmark like Certicorp can take
         more width than height and still fit inside the shape. */
      [data-lp="v4"] .nhex { position: relative; flex: none; width: 56px; height: 64.7px; display: flex; align-items: center; justify-content: center; }
      /* Backdrop is per logo, because three of the five ship with a baked-in tile.
         A transparent logo gets paper; a flat black or white tile gets that exact
         colour sampled from the file, so the tile edge disappears into the hexagon;
         a photographic tile (Stella) gets a blurred copy of itself, the same trick
         the network section uses at 124px. Without this they read as squares
         sitting inside hexagons (Carlo 2026-09-09). */
      [data-lp="v4"] .nhex-bg { position: absolute; inset: 0; overflow: hidden; background: var(--paper);
        display: flex; align-items: center; justify-content: center;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
      [data-lp="v4"] .nhex-bg > .blur { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; max-width: none; object-fit: cover; filter: blur(9px); }
      [data-lp="v4"] .nhex--ink .nhex-bg { background: #030708; }
      [data-lp="v4"] .nhex--paperwhite .nhex-bg { background: #fff; }
      /* Stella's file is a photographic tile, not a mark on a flat ground, so a
         contained-and-shrunk logo reads as a small picture floating in a hexagon.
         It gets the network section's own treatment instead: the tile fills the
         hexagon and the shape does the cropping, over a blurred copy of itself.
         Same rule as .phex-fill, blur scaled for the smaller hexagon (Carlo 2026-09-09). */
      [data-lp="v4"] .nhex--photo .nhex-bg { background: #555; }
      [data-lp="v4"] .nhex--photo .nhex-bg > .blur { filter: blur(6px); }
      [data-lp="v4"] .nhex--photo .nhex-bg > .logo { position: absolute; inset: 0; width: 100%; height: 100%;
        max-width: none; max-height: none; object-fit: contain; }
      [data-lp="v4"] .nhex-edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
      [data-lp="v4"] .nhex-edge polygon { fill: none; stroke: rgba(20,17,11,0.16); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
      [data-lp="v4"] .nhex-bg > .logo { position: relative; z-index: 1; display: block; width: auto; height: auto;
        max-width: 36px; max-height: 28px; object-fit: contain; }
      [data-lp="v4"] .nhex-bg > .logo[src*="certicorp"] { max-width: 50px; max-height: 34px; }
      [data-lp="v4"] .nhex-bg > .logo[src*="dl-golden"] { max-width: 42px; max-height: 30px; }
      [data-lp="v4"] .nhex-bg > .logo[src*="rk-infra"] { max-width: 44px; max-height: 36px; }
      [data-lp="v4"] .nhex-bg > .logo[src*="rma-built"] { max-width: 38px; max-height: 38px; }
    @media (min-width: 880px) {
      [data-lp="v4"] .name b { font-size: 0.9375rem; font-weight: 500; color: var(--ink-soft); letter-spacing: -0.005em; white-space: nowrap; }
      /* the proof eyebrow and the FUD ticks both carry more weight on desktop (Carlo 2026-09-09) */
      [data-lp="v4"] .eyebrow-proof { font-size: 1.125rem; font-weight: 600; color: var(--ink); gap: 11px; letter-spacing: -0.01em; }
      [data-lp="v4"] .eyebrow-proof svg { width: 30px; height: 30px; stroke-width: 1.7; }
      [data-lp="v4"] .fold .ticks { font-size: 1.125rem; }
      [data-lp="v4"] .fold .ticks svg { width: 21px; height: 21px; stroke-width: 2.4; }
      [data-lp="v4"] .fold .ticks span { gap: 9px; }
      [data-lp="v4"] .fold__sub { display: block; }
      [data-lp="v4"] .ow-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 72px; align-items: center; }
      [data-lp="v4"] .ow-copy { gap: 28px; }
      [data-lp="v4"] .ow { height: 1000px; margin-top: 0; }
      [data-lp="v4"] .ow__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
      [data-lp="v4"] .ow__col--3 { display: block; }
      [data-lp="v4"] .ow__run { gap: 16px; }
      [data-lp="v4"] .pain-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 96px; align-items: center; }
      [data-lp="v4"] .lp-nums { gap: 48px; }
      [data-lp="v4"] .lp-row { padding: 22px 0; font-size: 1.5rem; letter-spacing: -0.015em; }
      [data-lp="v4"] .pain-grid .lp-cap { font-size: 1.125rem; }
      [data-lp="v4"] .vp-head { display: flex; justify-content: space-between; align-items: end; gap: 48px; }
      [data-lp="v4"] .vp-head .lp-cta { display: inline-flex; }
      [data-lp="v4"] .pcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
      [data-lp="v4"] .pcard { height: 440px; border-radius: 20px; }
      [data-lp="v4"] .pcard:hover img { transform: scale(1.03); }
      [data-lp="v4"] .pcard .t { left: 22px; right: 22px; top: 22px; }
      [data-lp="v4"] .pcard h3 { font-size: 1.625rem; } [data-lp="v4"] .pcard p { font-size: 1.0625rem; margin-top: 8px; }
      [data-lp="v4"] .people-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: stretch; }
      [data-lp="v4"] .lp-quote { padding: 8px 0; gap: 24px; }
      [data-lp="v4"] .lp-quote__mark { font-size: 5.25rem; }
      [data-lp="v4"] .lp-quote__mark--end { font-size: 3rem; }
      [data-lp="v4"] .ph-br { display: none; }
      [data-lp="v4"] .lp-quote p { font-size: 1.75rem; line-height: 1.32; }
      [data-lp="v4"] .lp-quote__by { padding-top: 20px; }
      [data-lp="v4"] .founder { grid-template-columns: 1fr 1fr; gap: 16px; }
      [data-lp="v4"] .founder h3 { font-size: 1.5rem; }
      [data-lp="v4"] .plan--phone { display: none; } [data-lp="v4"] .plan--desk { display: block; } [data-lp="v4"] .stage-wrap.plan--desk { width: 100%; height: auto; }
      [data-lp="v4"] .ptag { height: 36px; padding: 0 12px 0 10px; font-size: 1rem; }
      [data-lp="v4"] .tag-hero { gap: 10px; padding: 11px 16px 11px 13px; font-size: 1rem; } [data-lp="v4"] .tag-hero small { font-size: 1.0625rem; }
      [data-lp="v4"] .lp-steps { width: 100%; }
      [data-lp="v4"] .lp-step { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); column-gap: 48px; padding-bottom: 72px; }
      [data-lp="v4"] .lp-step__rail { grid-column: 2; grid-row: 1 / span 2; }
      [data-lp="v4"] .lp-step__rail i { width: 16px; height: 16px; margin-top: 10px; }
      [data-lp="v4"] .lp-step__rail::after { width: 3px; top: 30px; bottom: -72px; }
      [data-lp="v4"] .lp-step__t { grid-row: 1; align-self: start; }
      [data-lp="v4"] .lp-step__t h3 { font-size: 2.125rem; font-weight: 300; letter-spacing: -0.027em; line-height: 1.16; }
      [data-lp="v4"] .lp-step__t p { font-size: 1.125rem; line-height: 1.5; margin-top: 12px; max-width: 36ch; }
      [data-lp="v4"] .lp-step__im { grid-row: 1; margin-top: 0; border-radius: 14px; align-self: start; }
      [data-lp="v4"] .lp-step--r .lp-step__t { grid-column: 3; } [data-lp="v4"] .lp-step--r .lp-step__im { grid-column: 1; justify-self: end; }
      [data-lp="v4"] .lp-step--l .lp-step__t { grid-column: 1; justify-self: end; text-align: left; width: 100%; max-width: 440px; } [data-lp="v4"] .lp-step--l .lp-step__im { grid-column: 3; justify-self: start; }
      [data-lp="v4"] .lp-step__im--tall { width: min(360px, 100%); }
      [data-lp="v4"] .lp-step__im--wide { width: 100%; max-width: 760px; }
      [data-lp="v4"] .lp-step__im--keys { width: min(480px, 100%); }
      [data-lp="v4"] .lp-step__ms { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 28px; height: 44px; padding: 0 16px; white-space: nowrap; }
      [data-lp="v4"] .lp-step--ms { row-gap: 0; }
      [data-lp="v4"] .net-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; align-items: center; }
      [data-lp="v4"] .net-side--desk { display: flex; flex-direction: column; gap: 16px; }
      /* mirror: the left title hugs the graphic from the left, the right one from the
         right, so both sit the same distance off it (Carlo 2026-09-09) */
      [data-lp="v4"] .net-grid > div:first-child { text-align: right; }
      [data-lp="v4"] .net-side--desk { text-align: left; }
      /* the counterweight title: the heading face, a step down from the h2, light not bold
         (memory feedback-typography-light-not-bold) - the emphasis is colour, never weight */
      /* the two titles are one size, set here rather than inherited from .lp-h2, so the
         diagram between them keeps its room at 1440 (Carlo 2026-09-09) */
      [data-lp="v4"] #h-net,
      [data-lp="v4"] .net-title { font-size: clamp(2rem, 1.3rem + 2.05vw, 2.875rem); line-height: 1.06; font-weight: 300; letter-spacing: -0.032em; text-wrap: balance; }
      [data-lp="v4"] .net-title .clay { color: var(--clay); }
      [data-lp="v4"] .net-sub { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.35; font-weight: 300; letter-spacing: -0.02em; color: var(--ink-soft); text-wrap: balance; }
      [data-lp="v4"] .net--phone { display: none; } [data-lp="v4"] .net--desk { display: block; }
      /* .net--desk matches the WRAP as well as the stage; without this the wrap keeps the
         stage's 760px and overflows its grid column into the title beside it */
      [data-lp="v4"] .stage-wrap.net--desk { width: 100%; height: auto; }
      [data-lp="v4"] .faq-grid { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 64px; align-items: start; }
      [data-lp="v4"] .faq-grid .ticks { flex-direction: column; align-items: flex-start; gap: 15px; font-size: 1.1875rem; }
      [data-lp="v4"] .faq-grid .ticks svg { width: 22px; height: 22px; stroke-width: 2.4; }
      [data-lp="v4"] .faq-grid .ticks span { gap: 10px; }
      [data-lp="v4"] .faq summary { padding: 20px 0; min-height: 66px; font-size: 1.1875rem; }
      [data-lp="v4"] .faq .a { font-size: 1.0625rem; }
      [data-lp="v4"] .faq .a-list li { font-size: 1.0625rem; }
      [data-lp="v4"] .closer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; align-items: center; }
      [data-lp="v4"] .closer__img { margin: 0; }
      [data-lp="v4"] .lead-form { max-width: 720px; }
      [data-lp="v4"] .lead-form__row .field { flex: 1 1 0; }
      [data-lp="v4"] .lead-form > button[type="submit"] { width: auto; align-self: flex-start; padding: 0 44px; }
      [data-lp="v4"] .closer .ticks { justify-content: flex-start; }
      [data-lp="v4"] .lp-foot { padding: 24px 0; font-size: 1rem; }
    }

    /* Stillness for anyone who asked for it: the carousel stops auto-advancing (JS
       checks the same query), the crossfade becomes a cut, the strips stop. */
    /* Fold rhythm, wide screens only (Carlo 2026-09-09: "a bit compressed").
       Every gap in the desktop fold ran at a flat 18-22px, so nothing grouped and
       the column read as one dense block with dead air above and below it. Grouped
       instead: label tight to the headline, the headline block held away from the
       action, the ticks bound to the button, the trade logos set apart as their own
       proof. Gated at 1200px because between 880 and 1200 the copy column is narrow
       enough that the headline runs to four lines and the fold has no spare height -
       the extra 44px pushed the trade logos off screen at 1024x820. */
    @media (min-width: 880px) {
      /* Copy column narrowed so the headline always breaks to three lines and the
         render gets the width back. The 17ch cap is the part that actually holds
         it there: ch scales with the font, so the break point is the same on a
         1512 laptop and a 2560 monitor, where a fr-only column keeps widening
         until the headline collapses to two lines (Carlo 2026-09-09). */
      [data-lp="v4"] .fold { grid-template-columns: minmax(0, 11fr) minmax(0, 14fr); row-gap: 44px; }
      [data-lp="v4"] .fold h1 { max-width: 17ch; }
      [data-lp="v4"] .fold__copy { gap: 18px; }
      [data-lp="v4"] .fold__sub { margin-top: 10px; }
      [data-lp="v4"] .fold__cta { gap: 16px; }
      [data-lp="v4"] .names { padding-top: 30px; }
    }

    @media (prefers-reduced-motion: reduce) {
      [data-lp="v4"] .ow__run { animation: none; }
      [data-lp="v4"] .slide { transition: none; }
      [data-lp="v4"] .dots button::before { transition: none; }
      [data-lp="v4"] .dots button.is-on.is-running::after { width: 100%; animation: none; }
      [data-lp="v4"] .lp-pill, [data-lp="v4"] .lp-cta { transition-property: background-color, border-color, box-shadow, color; }
      [data-lp="v4"] .lp-pill:active, [data-lp="v4"] .lp-cta:active { transform: none; }

    }
  

    /* phone/desktop swaps that are cleaner as tiny rules than as duplicated markup */
    [data-lp="v4"] .ow-cap--desk, [data-lp="v4"] .ow-cta--desk, [data-lp="v4"] .vp-cta--desk, [data-lp="v4"] .net-line--desk, [data-lp="v4"] .net-side--desk, [data-lp="v4"] .faq-ticks--desk, [data-lp="v4"] .closer__img--desk, [data-lp="v4"] .ticks .tick--desk { display: none; }
    @media (min-width: 880px) {
      [data-lp="v4"] .ow-cap--desk, [data-lp="v4"] .net-line--desk, [data-lp="v4"] .closer__img--desk { display: block; }
      [data-lp="v4"] .net-side--desk { display: flex; }
      [data-lp="v4"] .ticks .tick--phone { display: none; }
      [data-lp="v4"] .ow-cta--desk { display: flex; } [data-lp="v4"] .vp-cta--desk { display: inline-flex; } [data-lp="v4"] .faq-ticks--desk { display: flex; } [data-lp="v4"] .ticks .tick--desk { display: inline-flex; }
      [data-lp="v4"] .ow-foot--phone, [data-lp="v4"] .vp-cta--phone, [data-lp="v4"] .net-line--phone, [data-lp="v4"] .faq-ticks--phone, [data-lp="v4"] .closer__img--phone { display: none; }
      [data-lp="v4"] .closer__cap { max-width: 60ch; }
    }
  
    /* ---------- tablet band: the phone layout, capped and centred ----------
       The desktop composition switched on at 880px but was only ever composed
       for 1200+ (there is a min-width:1200 block below, and an 880-1520 squeeze
       band). Between the two it ran as a squeezed desktop: the hero's two
       columns fought, the Includes lists ran as three ~110px columns wrapping
       every item over four lines, the trades diagram held three columns, and
       the our-work marquee was clipped off the right (Carlo 2026-09-21: "they
       basically have to fit the desktop version into the thing... everything
       looks squished"). The switch is now 1200, so 880-1199 gets the phone
       layout - which is the DESIGNED artboard, not a fallback - and this caps
       its measure so the headline and body do not run 1000px wide. 720px keeps
       the artboards (390 x 1.5 = 585) comfortably inside the column while the
       text sits at a readable measure. Tablets are 0.6% of sessions, so this
       is deliberately one rule rather than a third composition to maintain. */
    @media (min-width: 700px) and (max-width: 879.98px) {
      [data-lp="v4"] .wrap { max-width: 720px; margin-inline: auto; }
      /* the hero button is deliberately shrunk to 56px/17px for the phone, where a
         64px bar starts reading as an ad. On a tablet that same rule left the page's
         most important button visibly smaller and lighter than the six identical CTAs
         below it - the one button that has to look primary was the weakest on the
         page. Restore the base size across the tablet band. (Carlo 2026-09-21: "the
         CTA renders a bit small... making that larger will help".) */
      [data-lp="v4"] .fold__cta .lp-cta { min-height: 64px; font-size: 1.1875rem; border-radius: 14px; }
      [data-lp="v4"] .fold__cta .lp-cta::before { width: 22px; height: 22px; }
      /* the four-step timeline is the PHONE composition - copy on one side, the photo
         overlapping in from the other, composed against a ~350px column (reference:
         samara.com/adus/how-it-works on a phone). Run at the full 720px tablet measure
         it stretched into two wide columns, so every step left 300-400px of white
         opposite its photo and the left-hand steps read as ragged right-aligned copy.
         Cap it to the measure it was drawn for and centre it, rather than compose a
         third version of a section tablets see 0.6% of the time. */
      [data-lp="v4"] .lp-steps { max-width: 440px; margin-inline: auto; }
      /* the CTA under that timeline was falling back to its 246px min-width while
         every other CTA on the page ran full width - visibly the weakest button on
         the page, at the point the reader has done the most work */
      [data-lp="v4"] #steps .lp-cta { width: 100%; }
      /* the cut-through bands are a 100vw full-bleed strip on the phone, where the
         column IS the screen. Inside the capped tablet column they broke out to the
         full window while every neighbouring section stayed 720px, and the red tab
         ("THE ROOF", "INSIDE", "UNDER IT") landed ~190px left of the heading it
         belongs to, hard against the screen edge. Hold them to the column. */
      [data-lp="v4"] .incl__band { width: 100%; margin-left: 0; transform: none; }
      /* the founder block on the phone puts the name beside a 128px portrait and
         drops the quote underneath. At 720px that left the name marooned with ~500px
         of white beside it and the quote orphaned below. Back to one row: portrait,
         then name and quote together in a column that fills the rest. */
      [data-lp="v4"] .founder { grid-template-columns: 200px minmax(0, 1fr); column-gap: 22px; align-items: center; }
      [data-lp="v4"] .founder__t { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
      [data-lp="v4"] .founder h3 { font-size: 1.25rem; }
      /* the fold fills the viewport, which is right on a phone but on a 1366px-tall
         iPad left ~300px of white between the render and the CTA - it read as a
         rendering fault rather than a pause. Cap the stretch. */
      [data-lp="v4"] .fold { min-height: min(calc(100svh - 56px), 900px); }
    }
  

/* ---------- added for check-your-block: a step that is already done ----------
   The four-step section on the -lp pages starts at step 1. On this page the
   visitor has just checked their block, so step 1 is history, not an
   instruction. Filled GREEN dot with a tick - green is the done colour on this
   page (the fold's reassurance ticks are #1F7A4D) and clay is the ask colour,
   so a clay tick read as another button. Carlo, 2026-09-14. */
[data-lp="v4"] .lp-step--done .lp-step__rail > i { background: #1F7A4D; border-color: #1F7A4D; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
[data-lp="v4"] .lp-step--done .lp-step__rail > i svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
[data-lp="v4"] .lp-step--done .lp-step__t h3 { color: var(--ink-soft); }
[data-lp="v4"] .lp-step--done .lp-step__t h3::after { content: ""; }