/* ============================================================
   BlueSystm — home-mobile.css
   The home page on phones, ported from Design's Home Mobile.dc.html
   (design_handoff_home_mobile/README.md).

   PORTED MECHANICALLY, NOT BY HAND. Every rule in Design's stylesheet is
   below except an explicit drop list — the page reset and body rules the
   live page already owns, the 430px `.m` review column, the nav and
   curtain (already shipped in mobile-nav.css, and Design's copy here is
   capped to that review column), and the `.dashboard-slot` placeholder,
   which stands in for a demo that is already live. 211 rules across,
   38 dropped. Regenerate with scratchpad port.py if Design revises it.

   EVERY SELECTOR IS TRIPLED on its last class — `.faq-item.faq-item
   .faq-item`. Design authored against a clean document where `.faq-item`
   is enough. This page is not one: it reaches (0,2,1) with selectors like
   `.faq-item.open .faq-q`, which outrank anything shorter no matter what
   order the files load in. Three cascade tiers, deliberately:

     (0,2,0)  the reset below   — clears the desktop box model
     (0,3,0)  the ported rules  — Design's design
     (0,4,0)  the corrections   — the few places Design's own numbers
                                  do not survive contact with this page

   Getting this wrong is why the first attempt at this file only
   half-took: the rules were present and simply losing.

   Everything is inside @media (max-width: 900px). Desktop is untouched.
   Linked after the inline <style>, like mobile-nav.css and touch.css.
   ============================================================ */

@keyframes caret { 50% { opacity: 0; } }

/* The spine is a mobile-only element. Outside the query it does not exist,
   so the desktop timeline keeps its own centre line untouched. */
.timeline-spine { display: none; }

@media (max-width: 900px) {

  /* ── Design's starting conditions ─────────────────────────────────
     Design wrote its page against a reset and nothing else: a margin it
     never mentions is zero, a max-width it never sets is none. This page
     arrives with a full desktop layout already applied — .timeline-row
     carrying 96px of margin, .territory-lede capped at 460px, headers
     centred — and Design's stylesheet has no overrides for any of it,
     because on its page there was nothing to override.

     That is what made the first attempt look nothing like the design
     even where the rules had been copied correctly. Clearing the box
     model inside the sections Design owns restores its starting point.
     `*` is (0,0,0), so every ported rule below still wins outright. */
  .hero.hero *,
  .hero-dashboard.hero-dashboard *,
  .industries-section.industries-section *,
  .steps-section.steps-section *,
  .territory-section.territory-section *,
  .cta-section.cta-section *,
  .faq-section.faq-section *,
  .site-footer.site-footer * {
    margin: 0;
    padding: 0;
    max-width: none;
    min-height: 0;
    height: auto;
    /* two jobs: it clears the widths desktop pins (the calculator value is
       held at 110px), and it lets a flex child shrink under its content so
       the ellipsis in the qualify card can actually engage — without it the
       subtitle runs full length and shoves the status badge past the card. */
    min-width: 0;
    border-width: 0;
    /* desktop shouts a lot of small labels in wide-tracked caps; Design's
       page does neither unless it says so, and it says so at (0,3,0) */
    text-transform: none;
    /* inherit, NOT normal: Design's accent spans take their tracking from
       the heading around them. Forcing normal here widened every one. */
    letter-spacing: inherit;
    /* desktop pins widths on things Design lets size themselves */
    width: auto;
    /* the page's own reset sets this, but it does not survive everywhere —
       a content-box .faq-q is 380px wide inside a 350px card, which is the
       overflow that sliced the toggles off */
    box-sizing: border-box;
    gap: normal;
    flex-direction: row;
    line-height: inherit;
    /* back to the user-agent value: block for a div, inline for a span —
       which is exactly what Design's page starts from. Its own rules set
       flex where it wants flex, and they outrank this. */
    display: revert;
  }
  /* Design inherits left alignment from the body; these sections centre
     themselves on desktop, and it inherits down into every child. */
  .steps-section,
  .faq-section,
  .cta-section,
  .territory-section { text-align: left; }
  /* these two centre themselves directly, so inheriting from the section
     above is not enough to undo it */
  .faq-header.faq-header,
  .steps-header.steps-header { text-align: left; }

  /* ── What a single responsive document needs and a standalone page
        does not ────────────────────────────────────────────────────── */

  /* Desktop nests the timeline card, the territory grid and the CTA grid
     inside centring wrappers; mobile is one column. `display: contents`
     dissolves them so their children become direct children of the
     section, without touching the DOM. */
  /* Tripled: the reset above reverts `display`, and at (0,2,0) it would
     otherwise undo these — which is exactly what left the step card
     sitting above its own heading. */
  .container.container.container,
  .cta-container.cta-container.cta-container,
  .cta-grid.cta-grid.cta-grid,
  .faq-container.faq-container.faq-container,
  .territory-grid.territory-grid.territory-grid,
  .territory-left.territory-left.territory-left,
  .territory-card-content.territory-card-content.territory-card-content,
  .timeline-mockup.timeline-mockup.timeline-mockup,
  .tl-mockup-card-wrap.tl-mockup-card-wrap.tl-mockup-card-wrap { display: contents; }

  /* Desktop draws the rail down the CENTRE of the timeline, plus a cap
     across the top. Design's rail is .timeline-row::before at the left
     margin. The page was drawing both — that is the second line. */
  .timeline::before,
  .timeline::after { display: none !important; }

  /* Same story for the curves linking the sections: nothing to span in
     one column. home-behaviors.js already guards on them being present. */
  #territory-connector, #cta-connector { display: none; }

  /* Desktop order is card, number, text. Design's is number, text, card,
     with the number absolute on the rail. */
  .timeline-text.timeline-text.timeline-text.timeline-text { order: 1; }
  .tl-mockup-card.tl-mockup-card.tl-mockup-card.tl-mockup-card { order: 2; }

  /* An anchor must never land under the fixed bar: 56px of pill plus its
     12px offset, rounded up. */
  section { position: relative; scroll-margin-top: 80px; }

  /* The bar's glass lives in mobile-nav.css; this is the padding Design
     tightened for a phone.

     THE LOGO IS NOT OVERRIDDEN HERE, deliberately. Design's home handoff sizes
     it at 118px inside its own 430px review column, and carrying that across
     left this page's mark visibly smaller than the identical bar on every other
     page, which all run the 142px their own sheets set. The bar is shared, so
     the mark is too — this page inherits it like the rest. */
  .navbar { padding: 0 8px 0 6px; }

  /* ── The dashboard, in a phone ─────────────────────────────────────
     Design's `.dashboard-slot` is a labelled placeholder for the demo, and
     the demo is already in that slot. On desktop it renders at a 2080px
     logical viewport inside the page's own browser-window mockup. Squeezing
     that into a portrait box on a phone showed a desktop dashboard at about
     a fifth of its size — legible as a texture, not as a product.

     So on a phone it renders at 402px instead, which is the app's real
     mobile layout, inside Apple's official iPhone 17 Pro bezel. Same
     approach the demo's own frame.html takes for the MacBook, done here
     because the bezel and the mobile width are a marketing-site decision
     and frame.html lives in the Dashboard repo.

     GEOMETRY IS MEASURED, NOT EYEBALLED. The bezel is 1350x2760 with a real
     transparent screen cutout at x72 y69, 1206x2622 — which is 402x874pt at
     3x, the device's native logical resolution. Every number below is that
     rect as a percentage, so the screen tracks the bezel at any size. The
     bezel sits ON TOP, so the Dynamic Island and the rounded display corners
     mask the app for free rather than being faked.

     Percentages, derived once:
       screen   left 5.3333%  top 2.5%  width 89.3333%  height 95%
       status   59pt of 874    -> 95% * 59/874  = 6.41304%
       app      815pt of 874   -> 95% * 815/874 = 88.58696%, top 8.91304%
     cqw units come from the wrapper being an inline-size container: the
     bezel is 100cqw wide, so one screen point is 89.3333/402 = 0.22222cqw
     and the status bar can be specified in the phone's own units. */
  .hero-mockup-wrapper.hero-mockup-wrapper.hero-mockup-wrapper {
    position: relative;
    width: 300px;
    max-width: 100%;
    margin-inline: auto;
    aspect-ratio: 1350 / 2760;
    container-type: inline-size;
  }

  /* The bezel. Above the screen, and never in the way of a touch. */
  .hero-mockup-wrapper.hero-mockup-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: url("../img/iphone-frame.webp") center / 100% 100% no-repeat;
  }

  /* Desktop uses this pseudo-element for a blurred blue glow behind the
     mockup. A phone gets a bezel instead, and a glow leaking out from under
     it reads as a bug. */
  .hero-mockup-wrapper::before { display: none; }

  /* The screen: the whole cutout, clipped to the display's own shape.
     THE ROUNDING IS NOT THE BOUNDING BOX. The cutout's corners curve, and
     the bezel is TRANSPARENT outside them — that is the phone's own rounded
     body, not bezel material — so anything painted to the bounding box leaks
     out past the corners as square white shoulders. Fitting a circle to the
     measured curve (inset 59px at 51px down) gives r = 187.6px @3x = 62.5pt;
     15.5cqw is a shade more, which the opaque part of the bezel covers.
     clip-path rather than overflow + border-radius: Safari has never reliably
     clipped an iframe with the latter, and this is an iframe. */
  .hero-demo.hero-demo.hero-demo,
  [data-demo-frame][data-demo-frame][data-demo-frame] {
    position: absolute;
    left: 5.3333%;
    top: 2.5%;
    width: 89.3333%;
    height: 95%;
    aspect-ratio: auto;
    z-index: 1;
    background: #FFFFFF;
    box-shadow: none;
    border-radius: 15.5cqw;
    overflow: hidden;
    clip-path: inset(0 round 15.5cqw);
  }

  /* iOS status bar. The app draws none of its own, and without it the centred
     logo in its header sits directly under the Dynamic Island. 59pt of the
     874pt screen, the inset the capture pipeline already uses for this phone. */
  .hero-demo.hero-demo.hero-demo::before {
    content: "9:41";
    display: flex;
    align-items: center;
    padding: 1.3333cqw 4.4444cqw 0 6.6667cqw;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 6.7506%;
    z-index: 1;
    /* Longhands, not the shorthand: there is one image layer here, and a
       comma-separated position/size list against a single layer is invalid —
       it silently resets to 0% 0% / auto and the glyphs land under the time. */
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='13' viewBox='0 0 53 13' fill='%23000'%3E%3Crect y='9' width='3' height='4' rx='1'/%3E%3Crect x='5' y='6.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='4' width='3' height='9' rx='1'/%3E%3Crect x='15' y='1' width='3' height='12' rx='1'/%3E%3Crect x='25.5' y='.5' width='24' height='12' rx='3.5' fill='none' stroke='%23000' stroke-opacity='.35'/%3E%3Crect x='27' y='2' width='21' height='9' rx='2.2'/%3E%3Cpath d='M51 3.9v4.2c1.1-.3 1.6-1 1.6-2.1S52.1 4.2 51 3.9z' fill-opacity='.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4.4444cqw center;
    background-size: 11.7778cqw auto;
    font-size: 3.7778cqw;
    font-weight: 600;
    letter-spacing: .2px;
    color: #000;
    line-height: 1;
  }

  /* The app, below the status bar: 815pt of the 874pt screen. */
  .hero-demo__frame.hero-demo__frame.hero-demo__frame {
    position: absolute;
    left: 0;
    top: 6.7506%;
    width: 100%;
    height: 93.2494%;
    aspect-ratio: auto;
    border: 0;
    display: block;
  }

  .ind-header-row.ind-header-row.ind-header-row h2,
  .steps-header.steps-header.steps-header h2 {
    font-size: 32px;
    line-height: 1.06;
    letter-spacing: var(--ls-tight);
    font-weight: 800;
    color: var(--dark);
    text-wrap: pretty;
  }
  .ind-header-row h2 .accent.accent.accent,
  .steps-header h2 .accent.accent.accent {
    color: var(--blue);
  }
  .lede.lede.lede {
    font-size: 16px;
    line-height: 1.55;
    color: var(--body);
    text-wrap: pretty;
  }
  section {
    position: relative; scroll-margin-top: 80px;
  }
  /* .navbar-logo is dropped from the port on purpose — see the note further
     up. The bar ships in mobile-nav.css and every page sizes the mark the
     same; Design's 118px is scaled to its own review column. */
  .hero.hero.hero {
    position: relative;
    /* svh is the viewport with the browser chrome SHOWING, which is what you
       actually see on arrival. Plain vh on iOS is the chrome-hidden height, so
       a 100vh hero starts taller than the screen and the CTA sits under the
       fold until you scroll. vh first, for anything older than iOS 15.4. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
    /* The poster, under the video, same as the desktop rule. The shorthand here
       used to reset background-image to none, so on a phone — the one place
       autoplay actually gets refused — the fallback landed on a flat dark block
       instead of the hero's own first frame. Longhand, so nothing is reset by
       being unmentioned. */
    background-color: var(--dark);
    background-image: url("../video/hero-poster-v2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 26vh 20px 40px;
    padding: 26svh 20px 40px;
  }
  /* THE TYPEWRITER LINES UP WITH THE LINE ABOVE IT.
     .typewriter-slot::before is an invisible "|" with a 2px margin. It exists
     so the line box always has content — without it the line collapses each
     time the typewriter deletes to empty and the subtext below jumps on every
     phrase. Centred, as the hero is on desktop, it also balances the visible
     caret at the end, so the text stays optically centred.

     Left-aligned, as the hero is here, there is nothing to balance: the leading
     caret is simply 14.1px of indent, measured, that pushes every phrase right
     of the "We engineer" above it.

     So on a phone it keeps its glyph and loses its width. An inline-block at
     width 0 with the glyph clipped still contributes its line-height, which is
     the only reason the pseudo-element is there — the line box stays populated
     through an empty phrase, and the text starts exactly where the line above
     starts. */
  .typewriter-slot.typewriter-slot.typewriter-slot::before {
    display: inline-block;
    width: 0;
    margin-right: 0;
    overflow: hidden;
  }

  .hero-video.hero-video.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .hero-overlay.hero-overlay.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
    linear-gradient(180deg,
    rgba(11,16,34,0.35) 0%,
    rgba(11,16,34,0.3) 15%,
    rgba(11,16,34,0.2) 30%,
    rgba(11,16,34,0.1) 45%,
    rgba(100,110,130,0.15) 55%,
    rgba(180,185,200,0.4) 65%,
    rgba(216,220,230,0.7) 75%,
    rgba(216,220,230,0.9) 85%,
    var(--border) 93%
    );
  }
  .hero-content.hero-content.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .hero.hero.hero h1 {
    font-size: 44px;
    line-height: 1.02;
    letter-spacing: var(--ls-tight);
    font-weight: 800;
    color: #FFFFFF;
  }
  .typewriter-slot.typewriter-slot.typewriter-slot.typewriter-slot.typewriter-slot {
    display: block;
    margin-top: 0;
    font-size: 38px;
    line-height: 1.02;
    white-space: nowrap;
    color: var(--blue);
  }
  .typewriter-slot.typewriter-slot.typewriter-slot.typewriter-slot.typewriter-slot::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 0.82em;
    margin-left: 3px;
    background: var(--blue);
    vertical-align: -0.06em;
    animation: caret 1s steps(1) infinite;
  }
  .hero .subtext.subtext.subtext {
    margin-top: 20px;
    max-width: 30ch;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255,255,255,.82);
    text-wrap: pretty;
  }
  .hero-ctas.hero-ctas.hero-ctas {
    margin-top: auto;
  }
  .glow-btn.glow-btn.glow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 16px 24px;
    background: var(--blue);
    border-radius: var(--r-pill);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(37,99,235,.38);
  }
  .glow-btn.glow-btn.glow-btn:active {
    background: var(--blue-hover);
  }
  .glow-btn-arrow.glow-btn-arrow.glow-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
  }
  .hero-proof.hero-proof.hero-proof {
    margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center;
  }
  .hero-dashboard.hero-dashboard.hero-dashboard {
    position: relative;
    background: linear-gradient(180deg, var(--border) 0%, var(--bg) 70%);
    padding: 56px 20px 64px;
    text-align: center;
  }
  .hero-dashboard-headline.hero-dashboard-headline.hero-dashboard-headline {
    font-size: 32px; line-height: 1.06; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark);
  }
  .hero-dashboard-headline .accent.accent.accent {
    color: var(--blue);
    /* 335px of column takes "See everything. Miss" and drops "nothing." on
       its own — a break through the middle of the second sentence. The line
       belongs between the two sentences, so the accent takes the whole of
       the second one. Same shape as the hero headline, which uses a <br> for
       the identical reason. */
    display: block;
  }
  .hero-dashboard-subtext.hero-dashboard-subtext.hero-dashboard-subtext {
    margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty;
  }
  .hero-mockup-wrapper.hero-mockup-wrapper.hero-mockup-wrapper {
    margin-top: 28px;
  }
  .hero-dashboard-fade.hero-dashboard-fade.hero-dashboard-fade {
    display: none;
  }
  .industries-section.industries-section.industries-section {
    padding: 56px 0 0;
  }
  .ind-header-row.ind-header-row.ind-header-row {
    padding: 0 20px;
  }
  .ind-marquee.ind-marquee.ind-marquee {
    margin-top: 24px; overflow: hidden;
  }
  .ind-marquee-track.ind-marquee-track.ind-marquee-track {
    display: flex; gap: 12px; padding: 0 20px; will-change: transform;
  }
  .ind-card.ind-card.ind-card {
    position: relative;
    flex: 0 0 auto;
    width: 232px;
    height: 300px;
    border-radius: var(--r-lg);
    overflow: hidden;
    display: block;
  }
  .ind-card-bg.ind-card-bg.ind-card-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
  }
  .ind-card-overlay.ind-card-overlay.ind-card-overlay {
    position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,16,34,.86) 0%, rgba(11,16,34,.1) 62%);
  }
  .ind-card-body.ind-card-body.ind-card-body {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px;
  }
  /* A phone card carries its trade name and nothing else — David's call.
     display:none, not the desktop's opacity:0: that state is the hover
     payload, and a phone has no hover, so it sat invisible while still
     taking its 56.5px of layout. Every title was being pushed up by copy
     nobody could see, by however much that card's description wrapped to,
     which is what put the titles at two different heights. Taken out of the
     layout entirely, they all sit on the same line with nothing to nudge
     them. Desktop still reveals it on hover, untouched. */
  .ind-card-detail.ind-card-detail.ind-card-detail {
    display: none;
  }
  .ind-card-title.ind-card-title.ind-card-title {
    font-size: 22px; font-weight: 700; letter-spacing: var(--ls-snug); color: #FFFFFF;
  }
  /* Design's phone sizing for the description, kept against the day it comes
     back. Its wrapper is display:none above, so none of this paints. */
  .ind-card-long.ind-card-long.ind-card-long {
    margin-top: 6px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.72);
  }
  .ind-card-cta.ind-card-cta.ind-card-cta {
    display: none;
  }
  .steps-section.steps-section.steps-section {
    padding: 64px 20px 0;
  }
  .steps-header.steps-header.steps-header {
    margin-bottom: 32px;
  }
  .timeline.timeline.timeline {
    position: relative;
  }
  .timeline-row.timeline-row.timeline-row {
    position: relative; padding-left: 52px; padding-bottom: 40px;
  }
  /* Design draws a separate rail per row. One continuous spine replaces
     them so the fill can travel the whole section without restarting at
     each step — see .timeline-spine below. */
  .timeline-row.timeline-row.timeline-row::before { content: none; }
  .timeline-row.timeline-row.timeline-row:last-child {
    padding-bottom: 0;
  }
  .timeline-row.timeline-row.timeline-row:last-child::before {
    display: none;
  }
  .timeline-num.timeline-num.timeline-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blue);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .timeline-text.timeline-text.timeline-text h3 {
    font-size: 26px; line-height: 1.1; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark); padding-top: 4px;
  }
  .timeline-text.timeline-text.timeline-text p {
    margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--body); text-wrap: pretty;
  }
  .tl-mockup-card.tl-mockup-card.tl-mockup-card {
    margin-top: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--e2);
    padding: 14px;
  }
  .cap-row.cap-row.cap-row {
    display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border);
  }
  .cap-row.cap-row.cap-row:last-child {
    border-bottom: 0;
  }
  .cap-source.cap-source.cap-source {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #FFFFFF;
  }
  .cap-source.google.google.google {
    background: #EA4335;
  }
  .cap-source.fb.fb.fb {
    background: #1877F2;
  }
  .cap-source.ha.ha.ha {
    background: #F57C1F; font-size: 10px;
  }
  .cap-source.ref.ref.ref {
    background: var(--dark); font-size: 9px;
  }
  .cap-info.cap-info.cap-info {
    flex: 1; min-width: 0;
  }
  .cap-name.cap-name.cap-name {
    font-size: 14px; font-weight: 600; color: var(--dark);
  }
  .cap-detail.cap-detail.cap-detail {
    font-size: 12px; color: var(--muted);
  }
  .cap-badge.cap-badge.cap-badge {
    font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); background: var(--blue-tint); padding: 4px 8px; border-radius: var(--r-pill);
  }
  .cap-time.cap-time.cap-time {
    font-size: 11px; color: var(--muted); white-space: nowrap;
  }
  .qual-header.qual-header.qual-header {
    display: flex; align-items: center; gap: 11px; min-width: 0; padding-bottom: 13px; border-bottom: 1px solid var(--border);
  }
  .qual-avatar.qual-avatar.qual-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .qual-name.qual-name.qual-name {
    font-size: 14px; font-weight: 600; color: var(--dark);
  }
  .qual-service.qual-service.qual-service {
    font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .qual-status.qual-status.qual-status {
    margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--yellow); background: var(--yellow-tint); padding: 4px 8px; border-radius: var(--r-pill); white-space: nowrap;
  }
  .qual-section-label.qual-section-label.qual-section-label {
    margin: 14px 0 8px; font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted);
  }
  .qual-check-row.qual-check-row.qual-check-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
  }
  .qual-check-icon.qual-check-icon.qual-check-icon {
    width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .qual-check-icon.qual-check-icon.qual-check-icon svg {
    width: 11px; height: 11px;
  }
  .qual-check-icon.pass.pass.pass {
    background: var(--green-tint); color: var(--green);
  }
  .qual-check-text.qual-check-text.qual-check-text {
    font-size: 13px; color: var(--body); flex: 1; min-width: 0;
  }
  .qual-check-detail.qual-check-detail.qual-check-detail {
    font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0;
  }
  .qual-result.qual-result.qual-result {
    margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .qual-result-label.qual-result-label.qual-result-label {
    font-size: 12px; color: var(--muted); white-space: nowrap;
  }
  .qual-result-badge.qual-result-badge.qual-result-badge {
    font-size: 12px; font-weight: 600; color: var(--green); background: var(--green-tint); padding: 5px 10px; border-radius: var(--r-pill);
  }
  .tl-book-confirm-header.tl-book-confirm-header.tl-book-confirm-header {
    display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--border);
  }
  .tl-book-check-circle.tl-book-check-circle.tl-book-check-circle {
    width: 32px; height: 32px; border-radius: 50%; background: var(--green-tint); display: flex; align-items: center; justify-content: center;
  }
  .tl-book-confirm-title.tl-book-confirm-title.tl-book-confirm-title {
    font-size: 15px; font-weight: 700; color: var(--dark); letter-spacing: var(--ls-snug);
  }
  .tl-book-row.tl-book-row.tl-book-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border);
  }
  .tl-book-label.tl-book-label.tl-book-label {
    font-size: 13px; color: var(--muted);
  }
  .tl-book-value.tl-book-value.tl-book-value {
    font-size: 13px; font-weight: 600; color: var(--dark); text-align: right;
  }
  .tl-book-synced.tl-book-synced.tl-book-synced {
    display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted);
  }
  .tl-book-synced-dot.tl-book-synced-dot.tl-book-synced-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  }
  .territory-section.territory-section.territory-section {
    padding: 64px 20px 0;
  }
  .territory-headline.territory-headline.territory-headline {
    font-size: 34px; line-height: 1.04; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark);
  }
  .territory-headline .accent.accent.accent {
    color: var(--blue);
  }
  .territory-lede.territory-lede.territory-lede {
    margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--body); text-wrap: pretty;
  }
  .territory-stat-list.territory-stat-list.territory-stat-list {
    margin-top: 28px; display: flex; flex-direction: column; gap: 20px;
  }
  .territory-stat-row.territory-stat-row.territory-stat-row {
    display: flex; gap: 16px; align-items: flex-start;
  }
  .territory-stat-num.territory-stat-num.territory-stat-num {
    font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--blue); min-width: 62px;
  }
  .territory-stat-num .unit.unit.unit {
    font-size: 18px; opacity: .6;
  }
  .territory-stat-k.territory-stat-k.territory-stat-k {
    font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dark);
  }
  .territory-stat-d.territory-stat-d.territory-stat-d {
    margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--muted);
  }
  .territory-search-card.territory-search-card.territory-search-card {
    margin-top: 32px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--e3);
    padding: 22px 18px;
  }
  .territory-card-label.territory-card-label.territory-card-label {
    font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue);
  }
  .territory-card-title.territory-card-title.territory-card-title {
    margin-top: 8px; font-size: 24px; line-height: 1.12; letter-spacing: var(--ls-snug); font-weight: 800; color: var(--dark);
  }
  .territory-step-group.territory-step-group.territory-step-group {
    margin-top: 22px; transition: opacity var(--dur-base) var(--ease-standard);
  }
  .territory-step-group.locked.locked.locked {
    opacity: .45; pointer-events: none;
  }
  .territory-step-label-row.territory-step-label-row.territory-step-label-row {
    display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
  }
  .territory-step-badge.territory-step-badge.territory-step-badge {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--bg); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--muted);
    transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  }
  .territory-step-badge.done.done.done {
    background: var(--blue); border-color: var(--blue); color: #FFFFFF;
  }
  .territory-trade-row.territory-trade-row.territory-trade-row {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .territory-trade-chip.territory-trade-chip.territory-trade-chip {
    min-height: 44px;
    display: flex; align-items: center;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 14px; font-weight: 600; color: var(--body);
    transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  }
  .territory-trade-chip.active.active.active {
    background: var(--blue); border-color: var(--blue); color: #FFFFFF;
  }
  .territory-search-wrap.territory-search-wrap.territory-search-wrap {
    position: relative;
  }
  .territory-search-box.territory-search-box.territory-search-box {
    display: flex; align-items: center; gap: 10px;
    height: 52px; padding: 0 6px 0 14px;
    border: 1px solid var(--border); border-radius: var(--r-pill);
    background: var(--bg);
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  }
  .territory-search-box.territory-search-box.territory-search-box:focus-within {
    border-color: var(--blue); box-shadow: var(--ring);
  }
  .territory-search-icon.territory-search-icon.territory-search-icon {
    width: 17px; height: 17px; color: var(--muted); flex-shrink: 0;
  }
  .territory-search-input.territory-search-input.territory-search-input {
    flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; color: var(--dark);
  }
  .territory-search-input.territory-search-input.territory-search-input::placeholder {
    color: var(--muted);
  }
  .territory-check-btn.territory-check-btn.territory-check-btn {
    min-height: 40px; padding: 0 18px;
    background: var(--blue); border-radius: var(--r-pill);
    color: #FFFFFF; font-size: 13px; font-weight: 600;
    flex-shrink: 0;
  }
  .territory-check-btn.territory-check-btn.territory-check-btn:disabled {
    background: var(--border); color: var(--muted);
  }
  .territory-autocomplete.territory-autocomplete.territory-autocomplete {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    z-index: 5; max-height: 232px; overflow-y: auto;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--e3); padding: 5px;
  }
  .territory-autocomplete.open.open.open {
    display: block;
  }
  .territory-ac-item.territory-ac-item.territory-ac-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--dark);
  }
  .territory-ac-item.active.active.active {
    background: var(--blue-tint);
  }
  .territory-ac-item.territory-ac-item.territory-ac-item mark {
    background: none; color: var(--blue); font-weight: 700;
  }
  .territory-ac-state.territory-ac-state.territory-ac-state {
    font-size: 12px; color: var(--muted);
  }
  .territory-ac-empty.territory-ac-empty.territory-ac-empty,
  .territory-ac-loading.territory-ac-loading.territory-ac-loading {
    padding: 14px 12px; font-size: 13px; color: var(--muted);
  }
  .dym.dym.dym {
    color: var(--blue); font-weight: 600;
  }
  .territory-suggest.territory-suggest.territory-suggest {
    display: none; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted);
  }
  .territory-suggest.show.show.show {
    display: block;
  }
  .territory-result-slot.territory-result-slot.territory-result-slot {
    margin-top: 20px;
  }
  .territory-empty-state.territory-empty-state.territory-empty-state {
    border: 1.5px dashed var(--border); border-radius: var(--r-md);
    padding: 26px 18px; text-align: center;
  }
  .territory-empty-state.hidden.hidden.hidden {
    display: none;
  }
  .territory-empty-icon.territory-empty-icon.territory-empty-icon {
    width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: flex; align-items: center; justify-content: center;
  }
  .territory-empty-title.territory-empty-title.territory-empty-title {
    font-size: 15px; font-weight: 700; color: var(--dark); letter-spacing: var(--ls-snug);
  }
  .territory-empty-sub.territory-empty-sub.territory-empty-sub {
    margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted);
  }
  .territory-result.territory-result.territory-result {
    display: none; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .territory-result.show.show.show {
    opacity: 1; transform: none;
  }
  .territory-result-top.territory-result-top.territory-result-top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  }
  .territory-result-city.territory-result-city.territory-result-city {
    font-size: 21px; font-weight: 800; letter-spacing: var(--ls-snug); color: var(--dark);
  }
  .territory-result-meta.territory-result-meta.territory-result-meta {
    margin-top: 3px; font-size: 13px; color: var(--muted);
  }
  .territory-status-pill.territory-status-pill.territory-status-pill {
    display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--green); background: var(--green-tint); padding: 6px 11px; border-radius: var(--r-pill); white-space: nowrap;
  }
  .territory-status-pill .dot.dot.dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  }
  .territory-result-stats.territory-result-stats.territory-result-stats {
    margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  }
  .territory-stat-k2.territory-stat-k2.territory-stat-k2 {
    font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted);
  }
  .territory-stat-v2.territory-stat-v2.territory-stat-v2 {
    margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--dark);
  }
  .territory-result-cta.territory-result-cta.territory-result-cta {
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
  }
  .territory-cta-note.territory-cta-note.territory-cta-note {
    font-size: 13px; line-height: 1.5; color: var(--muted);
  }
  .territory-cta-note .hl.hl.hl {
    color: var(--dark); font-weight: 600;
  }
  .territory-lock-btn.territory-lock-btn.territory-lock-btn {
    width: 100%; min-height: 50px; margin-top: 14px; background: var(--blue); border-radius: var(--r-pill); color: #FFFFFF; font-size: 14px; font-weight: 600;
  }
  .territory-lock-btn.territory-lock-btn.territory-lock-btn:active {
    background: var(--blue-hover);
  }
  .cta-section.cta-section.cta-section {
    padding: 64px 20px 0;
  }
  .cta-left.cta-left.cta-left h2 {
    font-size: 32px; line-height: 1.06; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark);
  }
  .cta-left h2 .accent.accent.accent {
    color: var(--blue);
  }
  .cta-left .lede.lede.lede {
    margin-top: 16px;
  }
  .cta-proof-row.cta-proof-row.cta-proof-row {
    margin-top: 28px; display: flex; flex-direction: column; gap: 16px;
  }
  .cta-proof-item.cta-proof-item.cta-proof-item {
    display: flex; align-items: baseline; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  }
  .cta-proof-num.cta-proof-num.cta-proof-num {
    font-size: 22px; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--blue); min-width: 112px; flex-shrink: 0;
  }
  .cta-proof-label.cta-proof-label.cta-proof-label {
    font-size: 13px; line-height: 1.45; color: var(--muted);
  }
  .cta-actions.cta-actions.cta-actions {
    margin-top: 28px;
  }
  .cta-btn.cta-btn.cta-btn {
    display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 16px; background: var(--blue); border-radius: var(--r-pill); color: #FFFFFF; font-size: 15px; font-weight: 600;
  }
  .cta-btn.cta-btn.cta-btn:active {
    background: var(--blue-hover);
  }
  .cta-micro.cta-micro.cta-micro {
    display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted);
  }
  .calc-card.calc-card.calc-card {
    margin-top: 32px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e3); overflow: hidden;
  }
  .calc-topbar.calc-topbar.calc-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .calc-topbar-title.calc-topbar-title.calc-topbar-title {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--dark);
  }
  .calc-topbar-title.calc-topbar-title.calc-topbar-title svg {
    color: var(--blue); flex-shrink: 0;
  }
  .calc-topbar-pill.calc-topbar-pill.calc-topbar-pill {
    font-size: 10px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); background: var(--bg); border: 1px solid var(--border); padding: 4px 9px; border-radius: var(--r-pill);
  }
  .calc-row.calc-row.calc-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .calc-row-label.calc-row-label.calc-row-label {
    font-size: 14px; font-weight: 600; color: var(--dark);
  }
  .calc-row-label .sub.sub.sub {
    display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted);
  }
  .calc-row-value.calc-row-value.calc-row-value {
    font-size: 19px; font-weight: 700; color: var(--dark); white-space: nowrap;
  }
  .calc-row-value .u.u.u {
    font-size: 14px; color: var(--muted);
  }
  .calc-result.calc-result.calc-result {
    padding: 22px 16px; background: var(--blue-tint); text-align: center;
  }
  .calc-result-label.calc-result-label.calc-result-label {
    font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--blue);
  }
  .calc-result-value.calc-result-value.calc-result-value {
    margin-top: 8px; font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--dark);
  }
  .calc-result-value .dollar.dollar.dollar {
    font-size: 24px; vertical-align: 6px; color: var(--blue);
  }
  .calc-result-sub.calc-result-sub.calc-result-sub {
    margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted);
  }
  .calc-hint.calc-hint.calc-hint {
    display: flex; align-items: center; gap: 8px; padding: 13px 16px; font-size: 12px; color: var(--muted);
  }
  .calc-hint.calc-hint.calc-hint svg {
    color: var(--blue); flex-shrink: 0;
  }
  .faq-section.faq-section.faq-section {
    padding: 64px 20px 0;
  }
  .faq-header.faq-header.faq-header h2 {
    font-size: 32px; line-height: 1.06; letter-spacing: var(--ls-tight); font-weight: 800; color: var(--dark);
  }
  .faq-header h2 .accent.accent.accent {
    color: var(--blue);
  }
  .faq-header.faq-header.faq-header p {
    margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty;
  }
  .faq-list.faq-list.faq-list {
    margin-top: 26px; display: flex; flex-direction: column; gap: 10px;
  }
  .faq-item.faq-item.faq-item {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  }
  .faq-item.open.open.open {
    box-shadow: var(--e2);
  }
  .faq-q.faq-q.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 14px 16px; text-align: left; font-size: 15px; font-weight: 600; color: var(--dark); letter-spacing: var(--ls-snug);
  }
  .faq-icon.faq-icon.faq-icon {
    position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); flex-shrink: 0;
  }
  .faq-icon.faq-icon.faq-icon::before,
  .faq-icon.faq-icon.faq-icon::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: var(--blue); border-radius: 1px; transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
  }
  .faq-icon.faq-icon.faq-icon::before {
    width: 10px; height: 1.5px; transform: translate(-50%, -50%);
  }
  .faq-icon.faq-icon.faq-icon::after {
    width: 1.5px; height: 10px; transform: translate(-50%, -50%);
  }
  .faq-item.open .faq-icon.faq-icon.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg); opacity: 0;
  }
  .faq-a-wrap.faq-a-wrap.faq-a-wrap {
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out);
  }
  .faq-item.open .faq-a-wrap.faq-a-wrap.faq-a-wrap {
    grid-template-rows: 1fr;
  }
  .faq-a.faq-a.faq-a {
    overflow: hidden;
  }
  .faq-a-inner.faq-a-inner.faq-a-inner {
    padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px;
  }
  .faq-a-inner.faq-a-inner.faq-a-inner p {
    font-size: 14px; line-height: 1.6; color: var(--body); text-wrap: pretty;
  }
  /* The closing CTA is sized to the navbar here too. The bar sits 16px off
     each edge; .faq-section pads 20px — so 4px of outdent puts the two on the
     same line. Centred, because on one column the text has no second column
     to sit against and left-aligned copy over a full-width button reads as a
     mistake. */
  .faq-footer.faq-footer.faq-footer {
    margin-top: 22px;
    margin-inline: calc(16px - 20px);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 44px 20px;
    text-align: center;
    box-shadow: var(--e3);
  }
  .faq-footer.faq-footer.faq-footer h5 {
    font-size: 17px; font-weight: 700; letter-spacing: var(--ls-snug); color: var(--dark);
  }
  .faq-footer.faq-footer.faq-footer p {
    margin-top: 6px; font-size: 14px; color: var(--muted);
  }
  .faq-cta.faq-cta.faq-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; margin-top: 24px; background: var(--blue); border-radius: var(--r-pill); color: #FFFFFF; font-size: 15px; font-weight: 600;
  }
  .faq-cta.faq-cta.faq-cta:active {
    background: var(--blue-hover);
  }
  .site-footer.site-footer.site-footer {
    padding: 64px 0 28px;
  }
  /* Same as footer.css does for desktop, said again at three classes because
     the ported rule above outranks it: on this page the divider follows the
     closing CTA directly, and 64px on top of the footer's margin left a gap
     the card was floating in. */
  .site-footer--no-band.site-footer--no-band.site-footer--no-band {
    padding-top: 40px;
  }
  .footer-band.footer-band.footer-band {
    overflow: hidden;
  }
  .footer-band-track.footer-band-track.footer-band-track.footer-band-track.footer-band-track {
    display: flex; gap: 12px; width: max-content; animation: footerDrift 46s linear infinite;
  }
  .footer-band-card.footer-band-card.footer-band-card.footer-band-card.footer-band-card {
    position: relative;
    width: 168px; height: 116px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background-size: cover;
    background-position: center;
    display: flex; align-items: flex-end;
    padding: 12px;
  }
  .footer-band-card__label.footer-band-card__label.footer-band-card__label {
    font-size: 13px; font-weight: 600; color: #FFFFFF;
  }
  .footer-lede.footer-lede.footer-lede {
    margin-top: 36px; padding: 0 20px;
  }
  /* The lede belongs to the band — it is the line that says what the strip
     above it is for — and this page has neither. Its rules stay ported and
     intact here because this sheet is a mechanical port; they simply have
     nothing to match on home. The other three pages keep both. */
  .footer-lede.footer-lede.footer-lede h3 {
    font-size: 24px; line-height: 1.12; font-weight: 800; letter-spacing: var(--ls-snug); color: var(--dark);
  }
  .footer-lede.footer-lede.footer-lede a {
    display: inline-block; white-space: nowrap; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--blue); padding-bottom: 4px; border-bottom: 1px solid rgba(37,99,235,.35);
  }
  /* The divider over the logo. The box-model reset at the top of this file
     clears border-width inside .site-footer, which took footer.css's rule off
     — on this page only, since this sheet is home's. The other three kept
     theirs all along, so putting it back is what makes the four footers agree
     again. The border sits on a margin-inset box rather than being pushed in
     by padding, so the line is inset 20px like everything else instead of
     running edge to edge.

     margin-top 0 for the same reason footer.css zeroes it on this page: no
     band, so the footer's own 64px of padding is the whole gap above the
     line. */
  .footer-nav.footer-nav.footer-nav {
    margin: 0 20px; padding: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px;
    border-top: 1px solid var(--border);
  }
  .footer-brand.footer-brand.footer-brand {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start;
  }
  .footer-brand.footer-brand.footer-brand img {
    height: 112px; width: auto; margin: -40px 0 -40px -12px;
  }
  .footer-brand.footer-brand.footer-brand p {
    font-size: 14px; line-height: 1.6; color: var(--body);
  }
  .footer-col.footer-col.footer-col {
    display: flex; flex-direction: column; gap: 12px;
  }
  .footer-col.footer-col.footer-col h4 {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--body); margin-bottom: 2px;
  }
  .footer-col.footer-col.footer-col a {
    font-size: 14px; color: var(--body);
  }
  .footer-legal.footer-legal.footer-legal {
    margin: 36px 20px 0; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px;
  }
  .footer-legal.footer-legal.footer-legal p {
    font-size: 13px; color: var(--muted);
  }

  /* ── Properties Design never writes ───────────────────────────────
     These are all defaults on Design's page — a plain block, static
     position, inherited line-height — so its stylesheet is silent about
     them and there is no ported rule to win. The desktop value simply
     stands. Each one below is a live rule that has to be spoken over,
     found by diffing the two pages property by property. */

  /* desktop lays each step out as a 3-column grid around a centre line;
     mobile is a single column with the card following the text */
  .timeline-row.timeline-row.timeline-row {
    display: flex;
    flex-direction: column;
    /* desktop's grid centres its three columns. Left in place, every flex
       item shrinks to its own content and sits centred — which is why the
       step card came out 272px wide and inset 13px instead of filling the
       298px column like the text beside it. */
    align-items: stretch;
  }
  .tl-mockup-card.tl-mockup-card.tl-mockup-card { overflow: visible; }

  .faq-item.faq-item.faq-item { position: static; }
  .faq-icon.faq-icon.faq-icon { display: block; }
  .faq-footer.faq-footer.faq-footer { display: block; }
  .faq-q.faq-q.faq-q { line-height: var(--lh-body); }
  /* (0,2,1) on the live page — the only rule that outranks a doubled class */
  .faq-item.open .faq-q.faq-q.faq-q { padding-bottom: 14px; }

  /* Desktop spins the whole icon 45 degrees to turn + into x. Design keeps
     the icon still and rotates only the vertical bar inside it, which the
     port already carries — so the outer rotation has to go, or a 26px
     square occupies a 37px box and the row grows with it. */
  .faq-item.open .faq-icon.faq-icon.faq-icon { transform: none; }

  /* the only !important on the live page's side */
  .territory-headline.territory-headline.territory-headline {
    font-size: 34px !important;
    line-height: 1.04 !important;
  }

  /* Design sets a min-height and lets content decide; the live page pins
     an exact height, which its own larger padding needed. */
  .territory-search-input.territory-search-input.territory-search-input,
  .territory-check-btn.territory-check-btn.territory-check-btn { height: auto; }

  /* footer.css reaches (0,3,1) here, past the ported rule */
  .site-footer .footer-brand.footer-brand.footer-brand p { max-width: none; }

  /* ── The spine ────────────────────────────────────────────────────
     Lifted from the About page: an unlit rail and a fill that grows to
     wherever the scroll has reached. Geometry matches the rail it replaces — 1px at left 17px, the
     centre line of the 36px number badges — and it starts at the first
     badge's centre so the line emerges from behind it rather than
     crossing it.

     Driven by home-behaviors.js, which only starts at phone widths. With
     no JS the fill stays at zero and the unlit rail reads as the static
     line it was. */
  .timeline-spine.timeline-spine {
    display: block;
    position: absolute;
    left: 17px;
    width: 1px;
    background: var(--border);
    z-index: 0;
  }
  /* The fill moves on transform, never on height. Growing a height
     invalidates layout on every scroll frame, which is what made this
     stagger on a phone; a scale stays on the compositor. */
  .timeline-spine-fill.timeline-spine-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    transform-origin: top;
    transform: scaleY(0);
    will-change: transform;
    background: linear-gradient(180deg, rgba(37,99,235,.9), var(--blue));
  }

  /* The badges start unlit and take the blue as the line reaches them —
     the same two states Design already uses for .territory-step-badge,
     so the page only has one idea of what a numbered step looks like
     before and after. They sit above the rail, not under it. */
  .timeline-num.timeline-num.timeline-num {
    z-index: 2;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    transition: background var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
  }
  .timeline-num.timeline-num.timeline-num.is-lit {
    background: var(--blue);
    border-color: var(--blue);
    color: #FFFFFF;
    box-shadow: var(--glow);
  }

  /* ── Tap motion ───────────────────────────────────────────────────
     The trade cards had no response to a tap at all. They now use the
     lift established elsewhere in the codebase — translateY(-4px) into
     --e3 — so a card answers the finger the same way whatever section it
     is in. Inside the mobile query, so the desktop page never sees it.

     :active is right for these two and wrong for the rest: an .ind-card is
     a link, so a tap navigates and there is no "after" to stay lifted for.
     The cards that are not links — the step cards among them — are owned
     by card-lift.js and styled in touch.css, which is where the lift now
     lives for anything that stays on the page. The step cards used to be
     in this rule and are deliberately not any more; two systems on one
     card is what made the lift inconsistent in the first place. */
  .ind-card.ind-card.ind-card {
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
  }
  .ind-card.ind-card.ind-card:active {
    transform: translateY(-4px);
    box-shadow: var(--e3);
  }

  /* ── Marquees swipe instead of drifting ───────────────────────────
     Both strips move by transform — the trades band from a rAF loop in
     home-behaviors.js, the footer band from a CSS animation. Neither can
     be grabbed. On a phone the strip should follow the thumb, so the
     drift stops and the rail becomes a real scroll container with iOS
     momentum — and it keeps drifting on its own between swipes, driven
     by assets/js/marquee-drift.js moving scrollLeft rather than
     transform. The duplicate half of each set stays: it is what makes
     the wrap invisible. */
  .ind-marquee.ind-marquee.ind-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ind-marquee.ind-marquee.ind-marquee::-webkit-scrollbar { display: none; }
  /* home-behaviors.js leaves its transform loop alone on touch, and
     marquee-drift.js drives this with its own animation instead — so no
     !important here, or the drift would have nothing to move. */
  .ind-marquee-track.ind-marquee-track.ind-marquee-track {
    animation: none;
  }

  /* ── Corrections to the port ──────────────────────────────────────── */

  /* Design sets the rotating phrase at 38px, on the stated grounds that
     "booked appointments." measures 385px. Measured on this page with
     Satoshi at weight 800, it is 12.34px of width per px of font — 469px
     at 38px, against 350px of column on a 390px phone. It clipped at
     every size, and it is not one bad phrase: "exclusive territories."
     runs 12.0. 38px where it genuinely fits, proportional below.
     The 46px is the 40px of column padding plus the caret's 6px. */
  .typewriter-slot.typewriter-slot.typewriter-slot.typewriter-slot {
    font-size: min(38px, calc((100vw - 46px) / 12.4));
  }

  /* The desktop sheet swaps this band's `gap` for a margin, because a
     -50% keyframe cannot land on a set of twelve cards and eleven gaps.
     There is no keyframe here — marquee-drift.js measures one set
     child-to-child and wraps on that — so Design's 12px gap stands and
     the cards sit at the 180px pitch it drew. */

  /* The button and the proof line sit lower on the screen.
     `.hero-ctas` has `margin-top: auto`, so the pair is already pinned to
     the bottom of the hero and the hero is exactly 100svh — the only thing
     holding them up is this padding. On a 440x956 phone the proof line
     ended 40px above the bottom of the visible page; 16px is as low as it
     goes while still reading as a margin rather than a collision with
     Safari's toolbar. Nothing above moves: the slack all lives in the auto
     margin, which absorbs the 24px. */
  .hero.hero.hero.hero {
    padding-bottom: 16px;
  }

  /* THE BARS STAY WHITE. Leaving the reasoning here because the obvious fix
     is wrong and someone will try it again.

     Safari 26 dropped `theme-color` and tints its forehead and chin from the
     page: a fixed element near the edge if one is genuinely painted and has a
     background-color, otherwise `body`'s background-color. `html` is ignored
     outright. This page's navbar is a floating pill, 408px of a 440px
     viewport, so it never qualifies — which leaves `body`, and body's colour
     is the page's white, so both bars come out #FAFBFF.

     Above a dark hero that looked wrong, and we shipped the sky (#3A5C84,
     measured off the video at y0) on `body`, with a pseudo-element behind the
     content painting the white the page still needed. It worked. It was also
     wrong, for a reason no amount of measuring the hero would have caught:
     `body` colours the bars at EVERY scroll position and in every state, and
     when the nav curtain slides over the page the bars are still sky against
     a near-white curtain. That reads as a rendering bug. David's call, and
     the right one — a status bar that matches one screen out of ten is worse
     than one that never pretends to match at all.

     The chin was investigated separately and rejected too: see
     [[safari-26-browser-ui-tint]] in the session memory for the nine shapes
     that were tested on the device and the 45/33/22 visibility split that
     killed it. Short version — giving the bottom bar its own colour costs 4px
     of real paint along the bottom edge, and it is clearly visible on a fifth
     of the page. */
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .footer-band-track.footer-band-track.footer-band-track.footer-band-track { animation: none; }
  .typewriter-slot.typewriter-slot.typewriter-slot.typewriter-slot::after { animation: none; }
}

/* ── The footer band on touch, again ──────────────────────────────────
   touch.css already turns the band into a scroll strip, and on the other
   three pages that is the last word. Not here: this sheet loads after it
   and the ported rules put the animation and the overflow straight back.
   So the same override is repeated at the specificity this file works at.
   Change one, change the other. */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .site-footer .footer-band.footer-band.footer-band {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .site-footer .footer-band.footer-band.footer-band::-webkit-scrollbar { display: none; }
  /* the CSS animation stops; marquee-drift.js takes over on scrollLeft */
  .footer-band-track.footer-band-track.footer-band-track.footer-band-track.footer-band-track {
    animation: none;
  }
}