/* ============================================================================
   AI GUYS — landing visual system: "Dispatch"
   ============================================================================

   Loaded AFTER styles.css and ONLY by index.html. Same selectors, later in the
   cascade, so it wins on cascade order rather than specificity tricks — no
   !important anywhere in here. jobs/portal/privacy/terms keep styles.css
   untouched, so this file cannot break them.

   THE IDEA. The company is named like a trade service — "the AI guys", the way
   you say "the AC guys" — and the offer is a service call: book a slot, a van
   drives out, someone works four hours, you get a straight answer. So the page
   borrows the vernacular of a WORK ORDER, not a SaaS landing page: numbered
   jobs, ruled fields, durations and costs as line items, stamped statuses.

   Structure carries meaning, not decoration:
     - the four steps are numbered because they ARE a sequence, and each shows
       its real duration and real cost the way a job ticket line does;
     - the hazard rule appears exactly TWICE (the catch, the final CTA) — it is
       the loudest device here and it stops being special if it repeats.
   ========================================================================== */

:root {
  /* Ink — cool steel rather than navy, so gold reads as brass on metal. */
  --ink:        #0B0D11;
  --ink-2:      #12161C;
  --ink-3:      #191E26;
  --rule:       #252C36;
  --rule-hot:   #39434F;

  /* Brand gold is kept: the badge carries real equity. */
  --amber:      #E8B931;
  --amber-hot:  #FFD34D;
  --amber-soft: rgba(232, 185, 49, 0.10);

  /* Safety orange — the second accent, from the equipment/hazard world.
     Spent ONLY on the free-and-yours moments, which are the hardest claims
     on the page to believe. If it starts appearing elsewhere, it is wrong. */
  --safety:     #FF5A1F;
  --safety-soft: rgba(255, 90, 31, 0.12);

  /* Warm off-white: paint on metal, not screen white. */
  --chalk:      #ECEAE4;
  --chalk-2:    #A9AFB9;
  --chalk-3:    #6E7480;

  --bg: var(--ink);
  --bg-elev: var(--ink-2);
  --bg-card: var(--ink-3);
  --border: var(--rule);
  --border-bright: var(--rule-hot);
  --text: var(--chalk);
  --text-secondary: var(--chalk-2);
  --text-muted: var(--chalk-3);
  --gold: var(--amber);
  --gold-bright: var(--amber-hot);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --data: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --gutter: 24px;
  --measure: 660px;
}

/* --- Base ---------------------------------------------------------------- */

body {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1120px; padding-inline: var(--gutter); }
.lp-narrow { max-width: var(--measure); }

/* Section rhythm. The old page ran ten sections at one padding and one
   background, which is what made it read as a single grey slab. Alternating
   surfaces + a hairline give the eye somewhere to rest. */
.lp-section { padding: 104px 0; border-top: 1px solid var(--rule); }
.lp-alt { background: var(--ink-2); }

@media (max-width: 720px) {
  .lp-section { padding: 68px 0; }
}

/* --- Type ---------------------------------------------------------------- */

.lp-h1 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-size: clamp(40px, 7.2vw, 82px);
  color: var(--chalk);
  text-wrap: balance;
}

.lp-h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-size: clamp(30px, 4.4vw, 50px);
  color: var(--chalk);
  margin: 0 0 24px;
  text-wrap: balance;
}

.lp-h3, .step h3, .lp-card h3, .lp-mod h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 19px;
  line-height: 1.25;
  color: var(--chalk);
}

.accent { color: var(--amber); }

/* The eyebrow is a work-order field label: mono, stamped, ruled off. */
.section-tag {
  font-family: var(--data);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.section-tag::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--amber);
  flex: none;
}

.lp-lede {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.6;
  color: var(--chalk-2);
  max-width: 62ch;
}

.lp-section p { color: var(--chalk-2); line-height: 1.65; max-width: 68ch; }
.lp-section p strong, .lp-card strong, .lp-mod strong { color: var(--chalk); font-weight: 700; }

.mono, .lp-fine, .lp-cta-fine, .lp-price-fine {
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--chalk-3);
}

/* --- Hero ---------------------------------------------------------------- */

/* Bottom padding trimmed 2026-08-08: the hero figure moved down to the
   business-model section, and the space it left read as a dead gap rather than
   breathing room. An offer-led hero wants the next section close behind it. */
.lp-hero {
  position: relative;
  padding: clamp(64px, 10vh, 112px) 0 clamp(44px, 6vh, 72px);
  border-top: 0;
  overflow: hidden;
}

/* Ambient: a faint blueprint grid + one warm pool behind the headline. Static
   on purpose — an animated hero background is the tell of a generated page. */
.lp-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(232,185,49,0.10), transparent 70%),
    linear-gradient(transparent 95%, rgba(255,255,255,0.028) 95%) 0 0 / 100% 34px,
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.028) 95%) 0 0 / 34px 100%;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
/* LEFT-ALIGNED, deliberately. The inherited hero was centred, which is the
   default SaaS posture and fought everything below it — every other section on
   this page is a left-ruled work order. Centred measure also costs readability
   on a 5-line paragraph, and this page is read by someone deciding whether to
   let a stranger into their business. */
.lp-hero-inner { position: relative; text-align: left; max-width: 940px; }
.lp-hero-inner .lp-sub { margin-inline: 0; }
.lp-hero-inner .hero-badge { margin-inline: 0; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--data); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--chalk-2);
  border: 1px solid var(--rule-hot);
  background: rgba(0,0,0,0.35);
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: 26px;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399; flex: none;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.16);
}

.lp-sub {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.62;
  color: var(--chalk-2);
  max-width: 58ch;
  margin-top: 22px;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: 8px;
  transition: transform .12s ease, background .16s ease, box-shadow .16s ease;
}
.btn-primary {
  background: var(--amber);
  color: #16120A;
  border: 1px solid var(--amber-hot);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 24px -12px rgba(232,185,49,0.8);
}
.btn-primary:hover { background: var(--amber-hot); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-large { padding: 15px 28px; font-size: 17px; }
.btn:focus-visible { outline: 3px solid var(--amber-hot); outline-offset: 3px; }

/* --- Signature: the dispatch strip -------------------------------------- */
/*
   The four steps as a job ticket. A ruled line runs behind numbered nodes;
   each step states what it costs and how long it takes, because those two
   facts are the offer. This is the one element the page is meant to be
   remembered by, so everything around it stays quiet.
*/
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 44px;
  position: relative;
}
.steps-grid::before {
  content: "";
  position: absolute;
  top: 21px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--rule) 0%, var(--amber) 12%, var(--amber) 88%, var(--rule) 100%);
  opacity: .55;
}
/* Flex column so the cost chips land on ONE line across all four steps. The
   step paragraphs are different lengths, so without this the chips float at
   four different heights and the row stops reading as a ruled ticket. */
.step {
  position: relative;
  padding: 0 22px 0 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.step p { flex: 1 0 auto; }
.step .step-meta { margin-top: auto; }
.step-num {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--amber);
  color: var(--amber);
  font-family: var(--data);
  font-weight: 700; font-size: 15px;
  margin-bottom: 20px;
  box-shadow: 0 0 0 6px var(--ink);
}
.step h3 { margin: 0 0 8px; }
.step p { font-size: 15px; line-height: 1.55; color: var(--chalk-2); margin: 0 0 14px; }

/* The line item: cost and duration, the way a work order states them. */
.step-meta {
  font-family: var(--data);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber);
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid var(--amber-soft);
  background: var(--amber-soft);
  border-radius: 4px;
}
/* "your call" is the one step that costs a decision rather than nothing. */
.step:last-child .step-meta { color: var(--safety); border-color: var(--safety-soft); background: var(--safety-soft); }

@media (max-width: 860px) {
  .steps-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps-grid::before { display: none; }
}
@media (max-width: 520px) {
  .steps-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .step { padding-right: 0; }
}

/* --- Diagrams ------------------------------------------------------------ */

.dgm {
  margin: 40px 0 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), transparent 60%),
    var(--ink-2);
  padding: 26px 22px 20px;
}
.dgm svg { width: 100%; height: auto; display: block; }

/* A 900-unit viewBox squeezed into a 390px phone renders its 11px labels at
   about 4px — the diagram is still "there" and is completely unreadable, which
   is worse than not shipping it, and mobile is where nearly all the ad traffic
   lands. So below the point where it stops being legible the figure becomes a
   horizontally scrollable pane holding the diagram at a readable minimum width.
   overflow-x lives on the FIGURE, so it can never push the page itself sideways
   (verified: no horizontal overflow at any width from 320px up). */
@media (max-width: 760px) {
  .dgm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 14px;
  }
  .dgm svg { min-width: 620px; }
  .dgm figcaption { position: sticky; left: 0; }
  /* Say so, rather than relying on the reader noticing it can be swiped. */
  .dgm figcaption::after {
    content: " — swipe to see all of it";
    color: var(--amber);
  }
}
.dgm figcaption {
  font-family: var(--data);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--chalk-3);
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.dgm-t { font-family: var(--data); font-size: 11px; font-weight: 600; letter-spacing: .08em; fill: var(--chalk-2); }
.dgm-t-dim { fill: var(--chalk-3); }
.dgm-t-amber { fill: var(--amber); }
.dgm-t-safety { fill: var(--safety); }
.dgm-box { fill: var(--ink-3); stroke: var(--rule-hot); stroke-width: 1.5; }
.dgm-box-amber { fill: rgba(232,185,49,0.07); stroke: var(--amber); stroke-width: 1.5; }
.dgm-line { stroke: var(--rule-hot); stroke-width: 1.5; fill: none; }
.dgm-line-amber { stroke: var(--amber); stroke-width: 1.5; fill: none; }
.dgm-line-safety { stroke: var(--safety); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; }

/* --- Cards / modules ----------------------------------------------------- */

.lp-cards, .lp-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
  margin-top: 36px;
}
.lp-card, .lp-mod {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px;
  transition: border-color .18s ease, transform .18s ease;
}
.lp-card:hover, .lp-mod:hover { border-color: var(--rule-hot); transform: translateY(-2px); }
.lp-card p, .lp-mod p { font-size: 15px; line-height: 1.55; margin: 8px 0 0; color: var(--chalk-2); }

/* --- Pull quote / the catch --------------------------------------------- */

.lp-pull {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--amber);
  background: var(--ink-2);
  border-radius: 0 12px 12px 0;
  padding: 24px 26px;
  margin: 32px 0;
}
.lp-pull-kick {
  font-family: var(--data);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber);
  display: block; margin-bottom: 10px;
}
.lp-pull p { font-size: 17px; line-height: 1.6; }

.lp-quote {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--chalk);
}

/* RISK, used exactly twice (here + .lp-cta-final). Hazard stripe, lifted from
   equipment and work sites. It is the loudest thing on the page; a third
   appearance would make it wallpaper. */
.lp-mod-hazard,
.lp-cta-final { position: relative; }
.lp-mod-hazard::before,
.lp-cta-final::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--amber) 0 12px,
    var(--ink) 12px 24px
  );
  opacity: .85;
}

.lp-price {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: -0.04em;
  color: var(--chalk);
  line-height: 1;
}

/* --- CTA bands ----------------------------------------------------------- */

.lp-cta-band { background: var(--ink-2); padding: 76px 0; border-top: 1px solid var(--rule); }
.lp-cta-final { background: var(--ink-2); }
.lp-cta-line {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.08;
  color: var(--chalk);
  text-wrap: balance;
}
.lp-cta-sub { color: var(--chalk-2); margin-top: 14px; }
.lp-center { text-align: center; }
.lp-center .lp-lede, .lp-center p { margin-inline: auto; }

/* Section heads are LEFT, everywhere. Two of them arrived centred, which made
   the page alternate alignment for no reason a reader could detect. The CTA
   bands stay centred on purpose — they are a different beat, and the contrast
   only works if it is the exception. */
.section-head { text-align: left; }
.section-head .lp-sub, .section-head .section-sub, .section-head p { margin-inline: 0; }
.lp-cta-band .lp-center, .lp-cta-final .lp-center { text-align: center; }

/* --- Sticky bar ---------------------------------------------------------- */

.lp-bar {
  background: rgba(11,13,17,0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.brand-text {
  font-family: var(--data);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--chalk);
}

/* --- Footer -------------------------------------------------------------- */

.lp-footer, .footer { background: var(--ink); border-top: 1px solid var(--rule); }
.footer-links a { color: var(--chalk-2); }
.footer-links a:hover { color: var(--amber); }
.footer-fine { color: var(--chalk-3); font-family: var(--data); font-size: 11.5px; letter-spacing: .05em; }

/* --- Motion -------------------------------------------------------------- */
/*
   One device, used once per section: content lifts in as it arrives. Anything
   more elaborate starts to read as generated. Elements are visible by default
   and only hidden once JS confirms it will reveal them, so a JS failure can
   never leave the page blank.
*/
.js-reveal .reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.js-reveal .reveal-d1.is-in { transition-delay: .07s; }
.js-reveal .reveal-d2.is-in { transition-delay: .14s; }
.js-reveal .reveal-d3.is-in { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .reveal.is-in { transition: none; }
  .btn { transition: none; }
  .lp-card:hover, .lp-mod:hover { transform: none; }
}

/* ==========================================================================
   PHOTOGRAPHY AND THE FIGURE RAIL                                2026-08-26
   --------------------------------------------------------------------------
   The page was a 660px column of text pinned to the left of a 1120px
   container, which left a 460px empty channel running the full height of the
   site. On a laptop that reads as a skinny column of text beside nothing, and
   it was the single loudest complaint about this page.

   The fix is NOT to widen the measure. 660px is a deliberate, readable line
   length and stretching it to 1120px would cost more than it gained. The fix
   is to give the empty channel a job: every section that can carry a visual
   now runs text-left / figure-right, and the figure is a real photograph
   rather than another gradient.

   WHERE THE PICTURES COME FROM, because it matters for what we may claim:
     - handshake / badge-truck are frames from our own produced ad.
     - bakery / autoshop / contractor / street are ILLUSTRATIVE photographs.
       They are not customers and no caption may say or imply that they are.
     - workspace-*.webp is a REAL screenshot of the real product, rendered
       from the shipped app bundle with invented demo data. No customer's
       data appears on this site.
   ========================================================================== */

.lp-rail {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(260px, 1fr);
  gap: 0 clamp(32px, 4vw, 64px);
  align-items: start;
}
/* The text keeps its own measure inside the grid; .lp-narrow is now redundant
   here but harmless, so existing markup that carries both still behaves. */
.lp-rail > .lp-narrow { max-width: none; }

@media (max-width: 1040px) {
  .lp-rail { grid-template-columns: 1fr; }
  .lp-rail > .lp-narrow { max-width: var(--measure); }
  .lp-figure { margin-top: 36px; max-width: var(--measure); }
}

/* A figure is a photograph with a hairline and a mono caption — the same
   ruled-work-order language as the rest of the page, not a rounded card. */
.lp-figure { margin: 6px 0 0; }
.lp-figure img {
  display: block;
  width: 100%; height: auto;
  border: 1px solid var(--rule);
  background: var(--ink-2);
  /* Photographs are graded slightly down so they sit INSIDE a very dark page
     rather than glowing out of it. */
  filter: saturate(0.94) brightness(0.94) contrast(1.03);
}
.lp-figure figcaption {
  margin-top: 10px;
  font-family: var(--data);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--chalk-3);
}
.lp-figure figcaption::before {
  content: ""; display: inline-block;
  width: 14px; height: 1px; margin: 0 8px 4px 0;
  background: var(--amber); vertical-align: middle;
}
.lp-figure-sticky { position: sticky; top: 92px; }
@media (max-width: 1040px) { .lp-figure-sticky { position: static; } }

/* --- Full-bleed band ------------------------------------------------------
   Used twice, both times to say WHERE this happens: a Central Florida street,
   and our own truck. Short, wide, and never carrying text on top of a face. */
.lp-band { position: relative; overflow: hidden; border-top: 1px solid var(--rule); }
.lp-band img {
  display: block; width: 100%;
  height: clamp(180px, 26vw, 360px);
  object-fit: cover;
  filter: saturate(0.9) brightness(0.82) contrast(1.05);
}
.lp-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11,13,17,0.15) 38%, rgba(11,13,17,0.15) 62%, var(--ink) 100%),
    linear-gradient(180deg, rgba(11,13,17,0.55) 0%, transparent 40%, rgba(11,13,17,0.75) 100%);
}
.lp-band-label {
  position: absolute; left: 0; right: 0; bottom: 18px;
  font-family: var(--data);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--chalk-2);
  text-align: center;
}
.lp-band-label b { color: var(--amber); font-weight: 700; }

/* --- Hero: text left, photograph right ------------------------------------ */
@media (min-width: 1080px) {
  .lp-hero-inner { max-width: 1120px; }
  .lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    gap: 52px; align-items: center;
  }
}
.lp-hero-figure { display: none; }
@media (min-width: 900px) {
  .lp-hero-figure { display: block; position: relative; }
  .lp-hero-figure img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--rule-hot);
    filter: saturate(0.94) brightness(0.9) contrast(1.04);
  }
  /* An amber hairline in the corner, the same one the step ticket uses. */
  .lp-hero-figure::after {
    content: ""; position: absolute; left: -1px; top: -1px;
    width: 46px; height: 2px; background: var(--amber);
  }
}

/* --- The product shot -----------------------------------------------------
   The one place on the page where a visitor sees the thing they are actually
   being given. Framed as a window because a bare screenshot on a dark page
   reads as an illustration. */
.lp-shot {
  margin-top: 40px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.lp-shot-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.lp-shot-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-hot); }
.lp-shot-url {
  margin-left: 8px;
  font-family: var(--data); font-size: 11px; letter-spacing: 0.06em;
  color: var(--chalk-3);
}
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-shot-note {
  margin: 12px 0 0;
  font-family: var(--data);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--chalk-3);
}

/* --- Readability at large viewports --------------------------------------
   Body copy was set once, for a laptop. On a 1440+ screen the 15–16px runs
   were the second complaint after the empty channel. */
@media (min-width: 1360px) {
  .lp-section p { font-size: 17px; line-height: 1.72; }
  .step p { font-size: 15.5px; line-height: 1.6; }

  /* Chris, 2026-08-29: the "ONE LEFT EDGE" fix above (ln 660) deliberately
     capped every plain-text section's content at --measure (660px) so lines
     stay readable, which is correct at laptop widths but reads as unused
     width on anything wider — "Who this isn't for" and "Where this lives"
     sit in a 1120px container with roughly 460px of dead margin past that
     point. Widening --measure here (rather than overriding every selector
     that consumes it — .lp-note above, .lp-section > .lp-narrow > *, the
     rail text columns) fills noticeably more of the screen at exactly the
     viewport where the empty channel became visible again, while staying
     well inside a readable line length (860px is still under 100 characters
     per line at this font size, versus 660px's ~75). */
  :root { --measure: 860px; }
}

/* --- ONE LEFT EDGE -------------------------------------------------------
   A genuine cascade collision, not a taste call: styles.css:468 sets
   `.lp-narrow { max-width:720px; margin:0 auto; padding:0 20px }` and
   landing.css:77 overrides ONLY max-width. The `margin:0 auto` survived, so
   every section's text was CENTRED in the viewport while the hero was
   LEFT-aligned in a 1120px container. The page therefore had two different
   left margins that drifted apart as the window widened, which is most of
   what "it looks unfinished" meant.

   The block now spans the same container as everything else and the MEASURE
   is applied to its children, so all text starts on one line down the page. */
.lp-section > .lp-narrow,
.lp-cta-band > .lp-narrow {
  width: min(1120px, 100% - (2 * var(--gutter)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
.lp-section > .lp-narrow > *,
.lp-cta-band > .lp-narrow > * { max-width: var(--measure); }
/* The two CTA bands are deliberately centred; they must not inherit the cap. */
.lp-cta-band > .lp-narrow.lp-center > * { max-width: none; }
/* A .lp-narrow nested inside a .container (the "memory" section) was centred
   inside an already-centred container — same drift, one level down. */
.container > .lp-narrow { margin-inline: 0; padding-inline: 0; }

/* A CALLOUT BOX IS NOT A SECTION. `.lp-section p { max-width: 68ch }` caps
   running text everywhere, correctly — but `.lp-note` has no width rule of
   its own, so at a wide viewport it stretches to fill whatever container it
   sits in (1072px in the Modules section) while the paragraph inside it stays
   capped at ~660px. The border and background render at the full 1072px, the
   text stops at 565px, and the box reads as broken rather than designed.
   Chris, 2026-08-29: "I can tell by the placement of the containers." A note
   is a small aside, not a section — it should hug its own content's measure,
   not the width of whatever grid row it happens to land in. (`.lp-pull` has
   the same latent gap — it only looks right today because its one usage
   happens to sit inside a `.lp-rail > .lp-narrow > *` that caps it for
   unrelated reasons. Fix it the same way if it ever moves.)

   `.lp-note p` still inherits `.lp-section p { max-width: 68ch }` — a fixed
   CHARACTER count, not tied to `--measure` at all — so bounding the box to
   `--measure` and leaving the paragraph capped at 68ch just reintroduces the
   same mismatch at a different number (860px box, 565px text, when the wide-
   viewport measure bump below kicks in). The box is already the right width;
   let the text fill it instead of measuring itself independently. */
.lp-note { max-width: var(--measure); }
.lp-note p { max-width: none; }

/* --- Rail geometry, corrected -------------------------------------------
   The first cut engaged the rail at 1041px and the hero photograph at 1081px,
   which left a 1024px laptop — the most common width there is — looking
   exactly as bare as before. Both now engage at 900px and the columns are
   proportional rather than a fixed 660px + leftovers. */
.lp-rail { grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr); }
.lp-rail > .lp-narrow { width: auto; margin-inline: 0; padding-inline: 0; }
.lp-rail > .lp-narrow > * { max-width: var(--measure); }

@media (max-width: 899px) {
  .lp-rail { grid-template-columns: 1fr; }
  .lp-rail > .lp-narrow > * { max-width: var(--measure); }
  .lp-figure { margin-top: 32px; }
}
@media (min-width: 900px) and (max-width: 1040px) {
  .lp-rail { gap: 0 32px; }
  .lp-figure { margin-top: 6px; }
}

/* Hero: engage the photograph at the same 900px, and let it fill the column
   so it reads as a designed split rather than a floating thumbnail. */
@media (min-width: 900px) {
  .lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
    gap: clamp(28px, 3.5vw, 52px);
    align-items: stretch;
  }
  .lp-hero-figure { display: block; position: relative; align-self: stretch; }
  .lp-hero-figure img {
    height: 100%; min-height: 340px; max-height: 560px;
    object-fit: cover; object-position: 50% 42%;
  }
}

/* The hero belongs to the same grid as everything else.
   It was `max-width: 940px` with NO horizontal padding, so on a phone the
   headline and every line of body copy sat flush against the screen edge
   while the sections below had a gutter — visible on the live site today,
   and the reason the page reads as two different documents on mobile. */
.lp-hero-inner {
  width: min(1120px, 100% - (2 * var(--gutter)));
  max-width: none;
  margin-inline: auto;
}
@media (max-width: 899px) {
  .lp-hero-inner > .lp-hero-grid > .lp-hero-copy > * { max-width: var(--measure); }
}

/* --- The module list: the actual "skinny column of text" ------------------
   styles.css:533 sets `.lp-mod { grid-template-columns: 168px 1fr }`, which is
   right for a full-width list and wrong inside a card. `.lp-mods` lays those
   cards out at minmax(258px, 1fr), so the description got whatever was left of
   ~300px after a 168px label — about ninety pixels, i.e. two words a line, for
   five cards. This is on the live site today and it is the clearest example of
   what "skinny columns with text" meant.

   Inside a card the label goes ABOVE the text, which is what the mobile rule
   at styles.css:566 already did — the layout was only ever correct on a phone. */
.lp-modules .lp-mod {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 16px 18px;
  border-bottom: 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--ink-2);
}
.lp-modules .lp-mod strong { color: var(--chalk); }
.lp-modules { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }

/* The band label sits UNDER the band's own scrim without this: `::after` is
   generated as the last child, so it paints over an absolutely-positioned
   sibling that has no stacking order of its own. */
.lp-band-label { z-index: 2; }

/* ==========================================================================
   PASS 2 — measured, not eyeballed                              2026-08-26
   Geometry probed over the deployed page with CDP at 860/900/960/1024/1080/
   1200/1440. Two things the first pass got wrong:
   ========================================================================== */

/* 1. THE RAILS SAT 24px RIGHT OF EVERY OTHER SECTION.
      A rail is `.container.lp-rail`, and `.container` carries
      `padding-inline: var(--gutter)`. A plain section is a bare `.lp-narrow`
      whose padding I had zeroed. So the page had TWO left edges again — 33px
      vs 57px at 1200, 153px vs 177px at 1440 — which is the same bug as
      before, one level down. Everything now uses the container's own box:
      width 1120 INCLUDING a 24px inset, so the text starts on one line. */
.lp-hero-inner,
.lp-section > .lp-narrow,
.lp-cta-band > .lp-narrow {
  width: min(1120px, 100%);
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 2. BETWEEN 820 AND 899px THE HERO HAD NO PICTURE AT ALL.
      The split engages at 900 and the figure was `display:none` below it, so
      a narrow laptop window got back exactly the bare column this whole pass
      exists to remove. Below the split the photograph becomes a wide banner
      under the copy instead of disappearing. */
@media (max-width: 899px) {
  .lp-hero-figure { display: block; position: relative; margin: 28px 0 0; }
  .lp-hero-figure img {
    display: block; width: 100%;
    height: clamp(150px, 30vw, 240px);
    object-fit: cover; object-position: 50% 38%;
    border: 1px solid var(--rule-hot);
    filter: saturate(0.94) brightness(0.9) contrast(1.04);
  }
  .lp-hero-figure::after {
    content: ""; position: absolute; left: -1px; top: -1px;
    width: 46px; height: 2px; background: var(--amber);
  }
}

/* 3. THE PHONE SCROLLED SIDEWAYS, and it was the rail that did it.
      A grid item defaults to `min-width: auto`, which means it refuses to
      shrink below its content's min-content width. The pricing rail holds the
      `.dgm` diagram, whose svg carries `min-width: 620px` below 760px, so the
      single `1fr` column resolved to 660px inside a 375px viewport and the
      whole document scrolled sideways — measured at both 320 and 390.

      `min-width: 0` lets the column shrink; the diagram keeps its own
      overflow-x pane and scrolls INSIDE the figure the way it was designed to. */
.lp-rail > *,
.lp-hero-grid > * { min-width: 0; }

/* 4. `<figure>` carries a UA default `margin: 1em 40px`. `.lp-figure` resets it;
      `.lp-hero-figure` never did, so the hero photograph sat 40px inside its own
      column at every width — narrower than the grid said, and visibly indented
      once it became a banner on a phone. */
.lp-hero-figure { margin: 0; }

/* ==========================================================================
   HERO ACTION + TRUST BAR — added 2026-09-28
   ==========================================================================
   The page had no visible call to action above the fold. Its only clickable
   offer was the small button in the top-right nav, which is the one place
   readers have trained themselves to ignore, and paid traffic was about to be
   pointed here. Modelled on mirizan.com, which converts: a large high-contrast
   button in the copy column, the objection answered directly beneath it, and a
   trust bar as the first thing below the fold. */

.lp-hero-cta {
  margin: 28px 0 22px;
}

/* Bigger than .btn-large, because this one has to win against a five-line
   headline sitting directly above it. On a phone it goes FULL WIDTH: a
   thumb-sized target is the difference between a tap and a scroll past. */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 10px;
}

/* The objection, answered at the point of action rather than three sections
   later. mirizan.com puts its price and free-shipping line in exactly this
   slot and it is doing the same job: removing the reason to hesitate while the
   cursor is already over the button. */
/* TOKENS, NOT GUESSES. The first cut used var(--ink) for the emphasised text.
   On this theme --ink is #0B0D11, which is the PAGE BACKGROUND -- it means "ink
   for a light surface" -- so the line rendered black on black and vanished. It
   was in the DOM, it passed every test, and it was invisible on screen. The
   real foreground tokens are --text / --text-secondary / --text-muted. */
.lp-hero-reassure {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted, #8B8FA0);
}
.lp-hero-reassure strong {
  color: var(--text, #F4F4EE);
  font-weight: 600;
}

.lp-trustbar {
  border-block: 1px solid var(--border, #1E2740);
  background: rgba(255, 255, 255, 0.015);
}
.lp-trustbar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  justify-content: center;
  padding-block: 16px;
  font-family: var(--data, inherit);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #8B8FA0);
}
.lp-trust-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lp-trust-mark { color: var(--gold, #E8B931); font-size: 9px; }

@media (max-width: 720px) {
  /* Full-width thumb target, and the items stack two-up rather than wrapping
     into a ragged single column. */
  .btn-hero { display: flex; width: 100%; }
  .lp-hero-cta { margin: 24px 0 18px; }
  .lp-trustbar-inner { gap: 10px 20px; font-size: 11px; justify-content: flex-start; }
}

/* SHORT VIEWPORTS: guarantee the button clears the fold.
   Measured 2026-09-28 at 1883x811 (an ordinary laptop): the five-line headline
   is 402px tall on its own, and the CTA's bottom edge landed at 821px against
   an 811px fold — ten pixels short, which is the same as not having it. The
   headline, the photograph and the copy are all staying as they are, so the
   space comes from padding and a small type step, and ONLY on screens short
   enough to need it. A tall monitor renders exactly what it rendered before. */
@media (max-height: 900px) and (min-width: 900px) {
  .lp-hero { padding-top: clamp(40px, 5vh, 64px); padding-bottom: clamp(32px, 4vh, 52px); }
  .lp-h1 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02; }
  .lp-hero-cta { margin-top: 20px; margin-bottom: 14px; }
  .lp-sub { margin-bottom: 14px; }
}

/* The funnel's finish line, 2026-09-28. It was a Calendly embed; it is now a
   call-back confirmation, because the outreach is human and the calendar was
   disconnected on the day this changed. Sized to sit in the same slot the
   680px widget occupied without the overlay jumping. */
.qualify-done { padding: 28px 4px 8px; max-width: 46ch; }
.qualify-done-h {
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text, #F4F4EE);
}
.qualify-done-p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--text-secondary, #C9CBD0); }
.qualify-done-s { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted, #8B8FA0); }
.qualify-done-s a { color: var(--gold, #E8B931); text-decoration: underline; text-underline-offset: 2px; }

/* --- Hero video (2026-09-30) ----------------------------------------------
   The 16s proof-first cut of the ad. Unlike the old hero photo it is shown on
   phones too, below the button: it is the page's proof, not decoration. */
.lp-hero-video { margin: 28px 0 0; position: relative; }
.lp-hero-video video {
  display: block; width: 100%; height: auto; background: #000;
  border: 1px solid var(--rule-hot); border-radius: 6px;
}
@media (min-width: 900px) { .lp-hero-video { margin: 0; align-self: center; } }
/* Three steps, not four. */
.steps-grid.steps-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps-grid.steps-3 { grid-template-columns: 1fr; } }

/* The v6 hero video is vertical (9:16). Capped so it sits beside the headline
   on desktop and does not swallow a phone screen below the button. */
.lp-hero-video-tall { justify-self: center; width: min(78vw, 340px); }
.lp-hero-video-tall video { width: 100%; height: auto; }
@media (min-width: 900px) { .lp-hero-video-tall { width: auto; } .lp-hero-video-tall video { max-height: 560px; width: auto; max-width: 100%; } }

/* --- Hero video as a phone (2026-09-30) -----------------------------------
   Chris: "right video but what we can do to make this look good?" A vertical
   video in a hard-bordered box read as pasted in. Framed as a phone with a
   soft amber glow it reads as intentional, and the grid pulls it in beside
   the headline instead of leaving a gap. */
@media (min-width: 900px) {
  .lp-hero-grid.lp-hero-grid--video {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
  }
}
.lp-phone { position: relative; margin-inline: auto; width: min(76vw, 320px); }
.lp-phone::before {
  content: ""; position: absolute; inset: -18% -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,185,49,0.22), rgba(232,185,49,0) 70%);
}
.lp-phone-screen {
  position: relative; z-index: 1;
  aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 30px; padding: 0;
  background: #000;
  border: 8px solid #1b1e25;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px -20px rgba(0,0,0,0.7);
}
.lp-phone .lp-phone-screen video {
  display: block; width: 100%; height: 100%; max-height: none; max-width: none;
  object-fit: cover; border: 0; border-radius: 22px;
  /* The encode carries a thin black strip along its top edge; a 3% zoom
     inside the rounded screen crops it without losing the captions. */
  transform: scale(1.03);
}
@media (min-width: 900px) { .lp-phone { width: clamp(270px, 24vw, 330px); margin: 0; } }

.lp-sound {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(11,13,17,0.72); color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 13px/1 'Inter', sans-serif; letter-spacing: .01em; white-space: nowrap;
}
.lp-sound:hover { border-color: var(--amber, #E8B931); }
.lp-sound-icon { color: var(--amber, #E8B931); font-size: 11px; }
.lp-sound.is-on { background: rgba(11,13,17,0.5); }

/* --- Hero video by device (2026-09-30) ------------------------------------
   Desktop: a standard 16:9 sales-video player. Phones: the vertical phone
   frame. Each figure is shown only at its own size. */
.lp-hero-wide { display: none; }
@media (min-width: 900px) {
  .lp-hero-wide { display: block; position: relative; width: clamp(420px, 42vw, 560px); margin: 0; }
  .lp-hero-wide::before {
    content: ""; position: absolute; inset: -20% -12%; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(232,185,49,0.18), rgba(232,185,49,0) 70%);
  }
  .lp-hero-video-tall.lp-phone { display: none; }
}
.lp-wide-screen {
  position: relative; z-index: 1; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; background: #000;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
}
.lp-wide-screen video { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* On the wide player the sound button sits top-right, clear of the captions
   and of the speaker in the centre column. */
.lp-wide-screen .lp-sound { top: 12px; right: 12px; bottom: auto; left: auto; transform: none; }