/* DelPod landing page — one screen, no scroll.
   (tests/hosting.test.mjs identifies this file by the line above.)

   The walkthrough is not a panel dropped onto a page; it IS the page. So the
   ground is one continuous black, the phone is lit by a single teal glow, and
   every piece of chrome sits on that same surface with no frame, card or rule
   around it. Teal is brand (BRAND_TEAL, the app's header colour) and appears
   only as that glow and as the step marker.

   The wordmark is the one bold move. Everything else is quiet and shares its
   left edge: caption, steps, buttons and price all start where the D
   starts. Two type scales under it and nothing in between.

   The component itself (phone, screens, paper run sheet) lives in
   demo/walkthrough.css, shared byte-for-byte with /demo/. */

:root {
  --black: #000000;
  --paper: #F4F7F6;   /* type; not pure white, which vibrates on true black */
  --mute: #8EA39F;
  --teal: #5ED6D1;    /* the glow */
  --accent: #7FD4CC;  /* the step marker */
  --hair: #22302D;

  --gutter: 24px;
  --body: 15px;
}

* { box-sizing: border-box; }
html {
  color-scheme: dark;
  background: var(--black);
  /* One screen: nothing here may scroll, at any size. */
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  height: 100%;
  background: transparent;
  color: var(--paper);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* The only colour on the page, sitting behind the phone. */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 64% at 74% 50%, rgba(94, 214, 209, 0.16), rgba(94, 214, 209, 0.04) 46%, rgba(94, 214, 209, 0) 72%);
}

/* ---- The ground: a Sydney delivery truck, behind every step ----
   A fixed layer rather than background-attachment: fixed, which iOS Safari
   ignores outright - it pins the image to the document instead and the whole
   thing jumps on scroll. A fixed element is honoured everywhere.

   It sits BEHIND the content and takes no space at all, so the one-screen fit
   at 360x740 and 390x844 is exactly what it was: nothing here is in flow.

   Two overlays ride on the same element, above the photo and below the words:
   a left-to-right wash that is nearly solid where the text sits and thins out
   over the truck, and a bottom fade that puts the install buttons and price on
   their own ground. Both are the page's own black, so the photo reads as the
   page getting darker rather than as a picture with a panel over it. */
.photo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  /* Only the photo's position matters; a gradient at cover is the same
     wherever it is anchored. 55% down keeps the bridge deck and the cab in
     frame when the viewport is shorter than the photo. */
  background-position: 0 0, 0 0, 0% 55%;
  background-image:
    linear-gradient(0deg, rgba(6, 9, 14, 0.60) 0%, rgba(6, 9, 14, 0) 38%),
    linear-gradient(90deg, rgba(6, 9, 14, 0.94) 0%, rgba(6, 9, 14, 0.88) 34%, rgba(6, 9, 14, 0.62) 60%, rgba(6, 9, 14, 0.52) 100%),
    url("/img/truck-hero.jpg");
}
/* WebP where it is understood, and only then: a browser that cannot parse
   image-set() with type() keeps the whole declaration above, jpg and all,
   rather than losing the background entirely. */
@supports (background-image: image-set(url("/img/truck-hero.webp") type("image/webp"))) {
  .photo {
    background-image:
      linear-gradient(0deg, rgba(6, 9, 14, 0.60) 0%, rgba(6, 9, 14, 0) 38%),
      linear-gradient(90deg, rgba(6, 9, 14, 0.94) 0%, rgba(6, 9, 14, 0.88) 34%, rgba(6, 9, 14, 0.62) 60%, rgba(6, 9, 14, 0.52) 100%),
      image-set(url("/img/truck-hero.webp") type("image/webp"), url("/img/truck-hero.jpg") type("image/jpeg"));
  }
}

/* A phone is a tall crop of a wide photo, so there is no "left half" to keep
   clear - the truck is the whole frame. One even wash instead, and the frame
   pushed right so the cab rather than the tail is what shows. */
@media (max-width: 767.98px) {
  .photo {
    background-position: 0 0, 58% 60%;
    background-image:
      linear-gradient(0deg, rgba(6, 9, 14, 0.84), rgba(6, 9, 14, 0.84)),
      url("/img/truck-hero.jpg");
  }
  @supports (background-image: image-set(url("/img/truck-hero.webp") type("image/webp"))) {
    .photo {
      background-image:
        linear-gradient(0deg, rgba(6, 9, 14, 0.84), rgba(6, 9, 14, 0.84)),
        image-set(url("/img/truck-hero.webp") type("image/webp"), url("/img/truck-hero.jpg") type("image/jpeg"));
    }
  }
}


.screen {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--gutter);
}

.rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* ---- The hero: the app's own lockup, at page scale ----
   Not a web reinterpretation of the brand - the same three parts the phone
   header draws, in the same proportions, so the page and the app open with
   one mark. font-size here IS the "Del" size the app passes as 20;
   everything else is a multiple of it, so the whole lockup scales as one.
   Roboto because that is what the app renders on Android (it sets no
   fontFamily, so the platform face is the brand face). */
.wordmark {
  margin: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(34px, 4.1vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 0.4em;              /* App.js: gap 8 against a 20px text */
  white-space: nowrap;
}
.wm-mark {
  flex: none;
  width: 1.7em;            /* App.js: the logo at size 34 */
  height: 1.7em;
  color: var(--paper);     /* the light version; the app draws it black on teal */
}
/* Name and POD are ONE inline run, the way Wordmark.js nests POD inside the
   Del <Text>: that is what puts them on a shared baseline and keeps the
   flex gap above from opening between them as if they were two words. */
.wm-text { display: inline-block; }
.wm-name { font-weight: 700; }
/* DelPod is one word at one size: Pod inherits everything from the run
   around it and changes only colour. BRAND_TEAL rather than
   BRAND_TEAL_DARK, which is what the component uses on a dark ground. */
.wm-pod {
  color: var(--teal);
}

/* The price, now the line under the install buttons: what it costs, once
   you know what it is. */
.price {
  margin: 14px 0 0;
  font-weight: 500;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* ---- What the walkthrough writes ---- */
.cap {
  margin-top: clamp(22px, 4vh, 46px);
  transition: opacity .45s ease, transform .45s ease;
}
.cap.out { opacity: 0; transform: translateY(10px); }
/* The step label is gone, so the heading opens the block. It keeps the
   space the label used to occupy above it rather than closing up, which is
   what stops the caption shifting as steps change. */
.cap-title {
  margin: 0 0 13px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.sub {
  margin: 0;
  line-height: 1.5;
  color: var(--mute);
  max-width: 42ch;
}

/* ---- Jump straight to a step ---- */
/* The step jumps and the transport read as one cluster; on their own rows
   the two small buttons looked orphaned under the pills. */
.controls {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: clamp(14px, 2.2vh, 26px);
  width: 100%;
}
.steps {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.steps::-webkit-scrollbar { display: none; }
.steps button { flex: 0 0 auto; white-space: nowrap; }
.ctl { flex: 0 0 auto; }
.steps button {
  appearance: none;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--paper);
  font: 600 11px "Inter", sans-serif;
  padding: 6px 9px;
  border-radius: 99px;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.steps button:hover { color: var(--paper); border-color: #3A4B47; }
.steps button.on { background: var(--teal); color: var(--black); border-color: var(--teal); }

.ctl { display: flex; gap: 6px; }
.ctl button {
  appearance: none;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--mute);
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ctl button:hover { color: var(--paper); border-color: #3A4B47; }
.ctl svg { width: 14px; height: 14px; fill: currentColor; }

/* ---- Install ---- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(18px, 3vh, 34px);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--paper);
  color: var(--black);
  font-size: var(--body);
  font-weight: 700;
  text-decoration: none;
  transition: transform 120ms ease, opacity 120ms ease;
}
.btn:hover { opacity: 0.88; }
.btn:active { transform: translateY(1px); }
/* On the desktop the bar is not a box at all: it dissolves, the lockup
   stays the rail's first child and Login goes back to the page corner. */
.topbar { display: contents; }

/* The office's way in, in the corner the web puts it. It is not a third
   install option, so it does not stand beside the two that are. */
.login {
  position: absolute;
  top: clamp(24px, 4vh, 48px);
  right: var(--gutter);
  z-index: 2;
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  /* The underline still sits under the word; the padding that makes this a
     real tap target is horizontal and on the inline box, so the target is
     44px tall without the rule drifting away from the text. */
  padding: 13px 6px;
  margin: -13px -6px;
}
.login:hover { color: var(--paper); border-bottom-color: var(--mute); }

.btn:focus-visible,
.login:focus-visible,
.steps button:focus-visible,
.ctl button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- The phone ---- */
.stage {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* The component sizes .scene off --pw; here the grid sizes it and --pw is
   measured back off it (index.html), so the phone takes whatever height is
   left rather than dictating it. */
.stage .scene { height: 100%; width: 100%; }
/* The layer labels belong to the standalone demo's exploded view. On a page
   that must not scroll they would overhang a clipped stage, and the step
   buttons already name every screen. */
.stage .tag { display: none; }
/* On /demo/ the run sheet lands BESIDE the phone, which has the width of a
   centred layout to fall into. Here the phone is hard right against a stage
   that has to clip, so the sheet lands over it instead - same scan, same
   hand-off, nothing cropped. */
.stage .paper { transform: translate(-50%, -46%) rotate(-11deg); }
.stage .paper.in { transform: translate(-50%, -50%) rotate(-5deg); }

/* ---- Phone: one column, and the mockup gives up its space first ---- */
@media (max-width: 860px) {
  .screen {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: clamp(18px, 2.6vh, 28px) var(--gutter) clamp(18px, 2.6vh, 26px);
  }
  /* Dissolve the rail so its children order freely against the stage. */
  .rail { display: contents; }

  .topbar {
    display: flex;
    order: 1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  /* Largest thing on the page, and allowed to shrink before it ever reaches
     Login rather than sliding under it. */
  .wordmark { font-size: clamp(19px, 6.2vw, 26px); min-width: 0; }
  .login {
    position: static;
    flex: none;
    font-size: 13.5px;
    color: var(--paper);
    padding: 12px 8px;
    margin: -12px -8px;
  }
  /* basis 0, not auto: the stage takes exactly the height the text and
     buttons leave, and the phone is measured off that. On `auto` the scene
     sized itself from the phone and the phone from the scene, so the mockup
     grew until it pushed the buttons off the screen. */
  .stage { order: 2; flex: 1 1 0; height: auto; min-height: 140px; position: relative; }
  .stage .scene { position: absolute; inset: 0; height: auto; width: auto; }
  .cap { order: 3; margin-top: clamp(10px, 1.6vh, 18px); }
  .actions { order: 5; margin-top: clamp(10px, 1.8vh, 16px); flex-wrap: wrap; gap: 8px; }
  /* Was sitting hard on the bottom edge of a 740px screen. */
  .price { order: 6; margin: 9px 0 2px; font-size: 12.5px; white-space: nowrap; }

  /* An eight-step animation that plays itself still needs a way to stop,
     and the chips are the only thing that says which step is on screen. One
     row, the chips scrolling under the transport buttons if they must. */
  .controls {
    order: 4;
    gap: 10px;
    margin-top: clamp(8px, 1.4vh, 14px);
    align-items: center;
  }
  .steps { gap: 4px; }
  .steps button { font-size: 10.5px; padding: 5px 9px; }
  .ctl button { width: 28px; height: 28px; border-radius: 9px; }

  .cap-title { font-size: clamp(20px, 5.6vw, 24px); margin-bottom: 8px; }
  .sub { font-size: 13.5px; line-height: 1.4; }
  .eyebrow { margin-bottom: 6px; font-size: 13px; }

  /* Both install buttons share the row evenly, one line each. At 360px
     there is 312px for the pair, and "Install on Android" at 13.5px needs
     about 125 of its 152 - so it is nowrap rather than hoping. */
  .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    height: 44px;
    padding: 0 6px;
    font-size: 13.5px;
    white-space: nowrap;
    text-align: center;
  }
  .glow { background: radial-gradient(76% 34% at 50% 40%, rgba(94, 214, 209, 0.14), rgba(94, 214, 209, 0.04) 50%, rgba(94, 214, 209, 0) 76%); }
}

@media (prefers-reduced-motion: reduce) {
  .cap, .btn { transition: none; }
}


/* ---- The opening title card ----
   The intro is the claim; the seven steps are the evidence for it. It has
   to read as a different KIND of thing, not as step zero, so it takes a
   larger heading, the brand teal on the phrase that says who this is for,
   three facts a buyer is checking for, and the mockup pushed back behind
   it. Everything here is scoped to [data-intro], so a feature step is
   untouched. */
.cap[data-intro] .cap-title {
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* The one place teal is allowed to carry text on this page, and it is
   carrying the single phrase that says which industry this is for. */
.cap-title em {
  font-style: normal;
  color: var(--teal);
}

.cap[data-intro] .sub {
  margin-top: 14px;
  max-width: 46ch;
}

/* Three facts, said once. Quiet enough that the heading stays the loudest
   thing on the page. */
.badges {
  display: none;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 8px;
}
.cap[data-intro] .badges { display: flex; }

.badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  white-space: nowrap;
}
.badges svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: var(--teal);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The mockup steps back while the words are the subject. Not hidden: it is
   what the claim is about, and it comes forward the moment step one starts. */
.rig.behind { opacity: 1; }
.stage:has(.rig.behind) { filter: brightness(0.58) saturate(0.8); }
.stage { transition: filter .6s ease; }

@media (max-width: 860px) {
  /* A step heading is 20px here. The claim has to be obviously bigger than
     that, or the opening reads as just another step. */
  .cap[data-intro] .cap-title { font-size: clamp(24px, 7.1vw, 30px); letter-spacing: -0.032em; line-height: 1.06; }
  .cap[data-intro] .sub { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
  .badges { margin-top: 10px; gap: 5px; }
  .badges li { padding: 4px 9px 4px 7px; font-size: 10.5px; gap: 4px; }
  .badges svg { width: 10px; height: 10px; }
  /* On a phone the mockup is most of the screen; dimming it that far makes
     the page look broken rather than focused. */
  .stage:has(.rig.behind) { filter: brightness(0.72) saturate(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .stage { transition: none; }
}


/* The claim breaks in three fixed places from 500px up, so it always reads
   as three deliberate lines rather than however the column happens to wrap.
   Below that the phone is too narrow for those lines and it wraps naturally
   - but "food & beverage" is never split across two of them. */
.cap-title .hb { display: none; }
.cap-title .nb { white-space: nowrap; }
@media (min-width: 500px) {
  .cap-title .hb { display: inline; }
}