/* ============================================================================
   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 ---------------------------------------------------------------- */

.lp-hero {
  position: relative;
  padding: clamp(72px, 12vh, 132px) 0 clamp(64px, 10vh, 108px);
  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; }
}