/* Home page sections. Light and paper-first, with one deep navy band (the job, start to finish)
   so the product recordings read as the brightest thing on the page. */

/* ---- sticky header ------------------------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  backdrop-filter: saturate(1.3) blur(10px);
  box-shadow: 0 1px 0 var(--line-2);
  transition: box-shadow 200ms ease;
}
.masthead.is-scrolled { box-shadow: 0 1px 0 var(--line-2), 0 6px 18px -14px rgba(13, 27, 42, 0.35); }

.masthead-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--masthead);
  container-type: inline-size;
}
/* with large text on a narrow phone the wordmark gives way, so Sign in and Start free still fit
   (em here is the header's own text size, so this follows the reader's font setting) */
@container (max-width: 13.5em) {
  .masthead .lockup-logo { width: auto; height: 30px; aspect-ratio: 212 / 224; object-fit: cover; object-position: left center; }
}

.masthead-nav { display: flex; gap: 4px; margin-left: 20px; font-size: 0.92rem; }
.masthead-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  color: var(--steel);
  font-weight: 450;
  text-decoration: none;
  border-radius: 6px;
}
.masthead-nav a:hover { color: var(--ink); }

.masthead-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.masthead-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
}
.masthead-signin:hover { color: var(--petrol); }

/* ---- hero ---------------------------------------------------------------------------------------- */

/* The film sits in its own full-width band, so the top reads as three zones: header, hero copy,
   film. The band is painted by a border-image outset from the film itself (no extra markup, and no
   scroll overflow); --band-y is how far it reaches above and below the film. */
.hero { --film-band: #d8e1ea; --band-y: 20px; padding-top: clamp(18px, 2vw, 32px); }
.hero-text > .film {
  border-image: linear-gradient(var(--film-band), var(--film-band)) fill 0 / 0 / var(--band-y) 100vmax;
  margin-bottom: var(--band-y);
}
/* the film's own muted, petrol and rail-track colours are set for pale paper; on the band they
   step one shade darker so the rail, caption and label keep AA contrast (the drawing is untouched) */
.hero .film-controls,
.hero .film-caption { --muted: var(--steel); --petrol: var(--petrol-deep); --line-2: #b4c3d1; }

/* Up to 1179 px: one left-aligned column. From 1180 px: the headline on one line and the tagline
   in the top box, then the subhead and buttons as a strip on the film band, the film, and one line
   of proof and links. */
.hero-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "tagline" "aside" "meta" "film";
  align-items: start;
}
/* the film (public/film/film.css) comes after the proof line, and straight after the headline on
   phones */
.hero-text > .film { grid-area: film; margin-top: calc(var(--band-y) + clamp(16px, 2vw, 24px)); }
/* phones: a one-line subhead under the film */
.hero-sub-short { display: none; }
@media (max-width: 640px) {
  .hero-sub-full { display: none; }
  /* one line down to 360 px */
  .hero-sub-short { display: inline; white-space: nowrap; font-size: min(1rem, 3.6vw); }
  .hero-text { grid-template-areas: "title" "tagline" "film" "aside" "meta"; }
  .hero { --band-y: 18px; }
  .hero-text > .film { margin-top: calc(var(--band-y) + 12px); }
}
.hero-aside { grid-area: aside; }

/* what Stralos is and who it's for, as a supporting line under the headline (not a small label
   above it), so the headline is read first */
.hero-tagline {
  grid-area: tagline;
  margin-top: clamp(8px, 0.8vw, 14px);
  color: var(--ink);
  font-size: clamp(1.06rem, 0.9rem + 0.45vw, 1.3rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hero-title {
  grid-area: title;
  max-width: 13.5em;
  font-size: clamp(2.375rem, 1rem + 4.2vw, 4.625rem);
  line-height: 0.96;
  letter-spacing: -0.046em;
  font-weight: 600;
}
@media (min-width: 641px) {
  .hero-line { display: block; }
}

/* one of five headlines shows, named on <html data-headline> by headline.js */
.hl { display: none; }
html[data-headline="default"] .hl[data-hl="default"],
html[data-headline="schedule"] .hl[data-hl="schedule"],
html[data-headline="dig"] .hl[data-hl="dig"],
html[data-headline="deadline"] .hl[data-hl="deadline"],
html[data-headline="job"] .hl[data-hl="job"],
html[data-headline="civil"] .hl[data-hl="civil"] { display: inline; }

/* the ad-group headlines (?h=) run longer, so they set a step smaller; "job" and "civil" are as short
   as the default, so they keep the default size */
html:not([data-headline="default"]):not([data-headline="job"]):not([data-headline="civil"]) .hero-title { max-width: 15em; font-size: clamp(2.125rem, 1rem + 3.4vw, 4rem); }

.hero-sub {
  max-width: 600px;
  margin-top: clamp(14px, 1.8vw, 22px);
  color: var(--steel);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
  line-height: 1.55;
}

.hero-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: clamp(18px, 1.6vw, 24px);
}
.hero-risk { max-width: 21em; font-size: 0.88rem; line-height: 1.45; color: var(--muted); }

/* a rule, then the proof line on the left and the two text links on the right */
.hero-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 40px;
  margin-top: 0;
  padding: clamp(22px, 2.4vw, 32px) 0 clamp(26px, 2.8vw, 40px);
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 40em;
  color: var(--steel);
  font-size: 0.98rem;
  line-height: 1.45;
}
.faces { display: flex; flex: none; }
.faces img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: 0 0 0 2px var(--mist);
}
.faces img + img { margin-left: -10px; }


/* Book a walkthrough: a quiet text link under Start free (a full-size tap target) */
.hero-walkthrough {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--petrol);
  font-size: 0.94rem;
  font-weight: 500;
}
.hero-walkthrough:hover { color: var(--petrol-deep); }
/* it waits for script.js to add its address; it keeps its place so nothing moves */
.hero-walkthrough[hidden] { display: inline-flex; visibility: hidden; }

/* links in running copy: one underline treatment on light and navy surfaces */
.hero-walkthrough,
.faq-list details a,
.founder-email,
.register-ask a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 4px;
}
.hero-walkthrough:hover,
.faq-list details a:hover,
.founder-email:hover,
.register-ask a:hover { text-decoration-color: currentColor; }

@media (min-width: 1180px) {
  /* The top box holds only the headline and tagline. The subhead, buttons and risk line sit as a
     strip on the film band, above the film: the subhead on the left, the buttons on the right. */
  .hero-text {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: none;
    column-gap: 24px;
    container-type: inline-size;
  }
  /* the headline on one line across the box (it measures 16.8em; if a fallback font runs wider it
     wraps to two). The longer ad-group headlines keep their own size and wrap. */
  .hero-title { grid-column: 1 / -1; grid-row: 1; max-width: none; font-size: min(4.625rem, 100cqi / 17); }
  .hero-line { display: inline; }
  .hero-tagline { grid-column: 1 / -1; grid-row: 2; }
  /* painted as the band, like the film (an outset border-image, no extra markup); its outset meets
     the film's, so the band is one piece */
  .hero-aside {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 48px;
    margin-top: calc(var(--band-y) + 20px);
    border-image: linear-gradient(var(--film-band), var(--film-band)) fill 0 / 0 / var(--band-y) 100vmax;
    --muted: var(--steel);
  }
  .hero-sub { max-width: 36em; margin-top: 0; font-size: 1.04rem; line-height: 1.5; }
  /* Start free and Book a walkthrough share a line, with the risk line under them */
  .hero-act { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 0; max-width: 30em; }
  .hero-act .btn { width: auto; }
  .hero-risk { flex-basis: 100%; }
  .hero-walkthrough, .hero-walkthrough[hidden] { min-height: 24px; font-size: 0.9rem; }
  .hero-risk { max-width: none; font-size: 0.82rem; }
  .hero { --band-y: 22px; }
  .hero-text > .film { grid-column: 1 / -1; grid-row: 4; margin-top: calc(var(--band-y) + 2px); }
  .hero-meta { grid-column: 1 / -1; grid-row: 5; }
}

.nowrap { white-space: nowrap; }

/* ---- product loops ------------------------------------------------------------------------------- */

/* positioned, so its visually hidden caption stays inside it (and inside any swipe row) */
.media { position: relative; margin: 0; min-width: 0; }

/* Every recording and still sits in a frame: a neutral inset round it, rounded outside and a little
   less inside. The ::before sizes the recording area to exactly 16:10 (--ratio 62.5%; 4:5 is 125%),
   and the poster and video fill that area, so nothing is cropped and nothing jumps. */
.media-frame {
  --pad: 12px;
  --ratio: 62.5%;
  position: relative;
  padding: var(--pad);
  overflow: hidden;
  border-radius: 16px;
  background: #e4eaf0;
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.08), 0 2px 2px rgba(13, 27, 42, 0.03), 0 32px 64px -36px rgba(13, 27, 42, 0.4);
}
.media-frame::before { content: ""; display: block; padding-top: var(--ratio); }
.media-frame > picture,
.media-frame > video {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: calc(100% - 2 * var(--pad));
  height: calc(100% - 2 * var(--pad));
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper);
  object-fit: cover;
}
.media-frame > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame video { opacity: 0; transition: opacity 300ms ease; }
.media[data-state="playing"] video,
.media[data-state="paused"] video { opacity: 1; }

.media-toggle {
  position: absolute;
  right: calc(var(--pad) + 10px);
  bottom: calc(var(--pad) + 10px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(13, 27, 42, 0.78);
  color: var(--paper);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
}
.media-toggle svg { fill: currentColor; }
.media-toggle:hover { background: var(--ink); }
.media-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); }
.media-toggle-text { display: none; }
.media-toggle.is-blocked {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  padding: 0 20px;
  min-height: 52px;
  font-size: 0.95rem;
}
.media-toggle.is-blocked .media-toggle-text { display: inline; }

.media-note { margin-top: 10px; font-size: 0.84rem; color: var(--on-dark-3); }
@media (min-width: 901px) {
  .media-note { display: none; }
}

/* ---- the map: chapter 2's opening row, full width (gate map) -------------------------------------- */

.map-block { margin: clamp(16px, 2vw, 24px) 0 clamp(40px, 5vw, 64px); }
.map-head { display: grid; gap: 10px 48px; margin-bottom: clamp(18px, 2.2vw, 28px); }
.map-title { color: var(--paper); font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.8rem); letter-spacing: -0.025em; line-height: 1.15; }
.map-lede { max-width: 40em; color: var(--on-dark-2); font-size: 1.02rem; line-height: 1.6; }
.map-label { margin-top: 8px; color: var(--on-dark-3); font-size: 0.86rem; font-style: italic; }
.chapter .map-block .media { margin-top: 0; }

@media (min-width: 901px) {
  .map-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
}

/* ---- one job, start to finish (the navy band) ---------------------------------------------------- */

.journey { position: relative; background: var(--ink); color: var(--on-dark); }

.journey-wrap { padding-bottom: clamp(72px, 9vw, 128px); }

.journey-head { padding-top: clamp(64px, 9vw, 120px); max-width: 46em; }
.journey-head h2 {
  color: var(--paper);
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.journey-intro { color: var(--on-dark-2); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem); line-height: 1.6; }
.journey-intro strong { color: var(--paper); font-weight: 560; }
.journey-label { margin-top: 14px; font-size: 0.86rem; font-style: italic; color: var(--on-dark-3); }

/* Chapter strip: the chapters grouped as contractor stages, then a muted "Next" that points at
   What's next. A static index under the intro on phones and tablets; a slim sticky strip across the
   top of the band on wide screens. */
.chapter-strip { margin-top: 28px; }
.rail { display: grid; gap: 12px; }
.rail-stage-name {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.rail-stage ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; column-gap: 18px; }
.chapter-strip a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  color: var(--on-dark-2);
  font-size: 0.9rem;
  text-decoration: none;
}
.chapter-strip a:hover { color: var(--paper); }
.rail-n { color: var(--teal); font-weight: 500; }
.chapter-strip .rail-next { color: var(--on-dark-3); }
.chapter-strip .rail-next:hover { color: var(--on-dark); }

.chapters { margin-top: clamp(24px, 4vw, 48px); }

.chapter {
  padding-block: clamp(40px, 6vw, 80px);
  border-top: 1px solid rgba(159, 182, 206, 0.16);
  scroll-margin-top: calc(var(--masthead) + 8px);
}
.chapter:first-child { border-top: 0; }

.chapter-title {
  color: var(--paper);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  margin-bottom: 14px;
}
.chapter-n { color: var(--teal); font-weight: 500; }
.chapter-lede { color: var(--on-dark-2); font-size: 1.03rem; line-height: 1.6; max-width: 34em; }

.chapter .media { margin-block: 28px 0; }
.journey .media-frame {
  box-shadow: 0 0 0 1px rgba(0, 191, 179, 0.18), 0 40px 90px -40px rgba(0, 0, 0, 0.75);
}

.without {
  margin-top: 24px;
  padding-left: 16px;
  border-left: 2px solid rgba(159, 182, 206, 0.4);
  color: var(--on-dark-3);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 34em;
}
.without strong { color: var(--on-dark); font-weight: 560; }

.detail { margin-top: 18px; max-width: 34em; }
.detail summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--paper);
  font-weight: 560;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}
.detail summary::-webkit-details-marker { display: none; }
.detail summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(159, 182, 206, 0.5);
  color: var(--teal);
  font-weight: 400;
  line-height: 1;
}
.detail[open] summary::before { content: "\2212"; }
.detail summary:focus-visible { outline-color: var(--teal); }
.detail ul { list-style: none; padding: 4px 0 0; display: grid; gap: 10px; }
.detail li {
  position: relative;
  padding-left: 20px;
  color: var(--on-dark-2);
  font-size: 0.94rem;
  line-height: 1.55;
}
.detail li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--teal);
}

/* chapters 2 and 3 carry several loops; chapter 2's trench loop has its own heading and copy */
.chapter.chapter-multi .chapter-loops > * + * { margin-top: 20px; }
.chapter.chapter-multi .chapter-loops > .loop-feature,
.chapter.chapter-multi .chapter-loops > .loop-feature + * { margin-top: clamp(32px, 4vw, 48px); }
.chapter .loop-feature .media { margin-top: 16px; }
.loop-title { color: var(--paper); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.2; }
.loop-copy { margin-top: 8px; max-width: 40em; color: var(--on-dark-2); font-size: 0.98rem; line-height: 1.6; }

/* chapter 3: the four tender review steps */
.review-steps { margin-top: 22px; max-width: 34em; }
.review-steps-title { color: var(--paper); font-size: 0.95rem; font-weight: 560; }
.review-steps ol { list-style: none; counter-reset: step; padding: 0; margin-top: 10px; display: grid; gap: 8px; }
.review-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
  color: var(--on-dark-2);
  font-size: 0.95rem;
  line-height: 1.5;
}
.review-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 191, 179, 0.6);
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1;
}
.review-steps-time { margin-top: 10px; color: var(--on-dark-3); font-size: 0.88rem; }

/* chapter 3: What it catches, six checks the tender review runs, each tagged by its group. Three
   across from 1180 px, two on tablets, a swipe row on phones. */
.catches-block { margin-top: clamp(40px, 5vw, 64px); }
.catches-title { color: var(--paper); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.2; }
.catches {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: 18px;
}
.catch {
  padding: 18px 20px 20px;
  border-radius: 12px;
  background: rgba(223, 231, 239, 0.04);
  box-shadow: inset 0 0 0 1px rgba(159, 182, 206, 0.18);
}
.catch-tag { color: var(--teal); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; }
.catch-title { margin-top: 10px; color: var(--paper); font-size: 1.02rem; font-weight: 560; letter-spacing: -0.01em; line-height: 1.35; }
.catch-line { margin-top: 6px; color: var(--on-dark-3); font-size: 0.9rem; line-height: 1.5; }
@media (min-width: 1180px) {
  .catches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* chapter 3: the compact Doug strip, two example answers (stills, not recordings) */
.doug-strip {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(159, 182, 206, 0.16);
  scroll-margin-top: calc(var(--masthead) + 16px);
}
.doug-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.doug-strip-title { color: var(--paper); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.2; }
.doug-strip-label { color: var(--on-dark-3); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; }
/* two answers side by side across the band (stacked on phones). Both frames take the rate still's
   shape (1284 x 798); the shorter AP65 still sits at the top on white, uncropped. */
.doug-stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 18px; }
.doug-stills .media-frame { --ratio: 62.15%; }
.doug-stills .media-frame > picture img { object-fit: contain; object-position: top; }
.doug-caveat { margin-top: 14px; color: var(--on-dark-3); font-size: 0.88rem; }

.detail-stills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px clamp(16px, 2vw, 28px);
  margin-top: 24px;
}
.still { position: relative; margin: 0; min-width: 0; scroll-margin-top: calc(var(--masthead) + 16px); }
.still-portrait { max-width: 440px; }
.still-portrait .media-frame { --ratio: 125%; }
.still-caption { margin-top: 10px; color: var(--on-dark-3); font-size: 0.88rem; line-height: 1.5; }
.still-caption strong { color: var(--paper); font-weight: 560; }

.chapter-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding-block: clamp(36px, 5vw, 56px);
  border-top: 1px solid rgba(159, 182, 206, 0.16);
}
.chapter-cta p { max-width: 24em; color: var(--on-dark-3); font-size: 0.9rem; line-height: 1.45; }

.journey a:focus-visible, .journey .btn:focus-visible { outline-color: var(--teal); }

/* ---- what's next: the stages that aren't built yet, labelled honestly --------------------------- */

/* What's next on white, full width, between Pricing and the FAQ on the page's pale grey */
.next {
  padding-block: clamp(56px, 7vw, 96px);
  border-image: linear-gradient(var(--paper), var(--paper)) fill 0 / 0 / 0 100vmax;
}
.next-head { max-width: 40em; }
.next h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); letter-spacing: -0.038em; line-height: 1.04; margin-bottom: 14px; }
.next-lede { color: var(--steel); font-size: 1.02rem; line-height: 1.6; }
.next-with { margin-top: 6px; color: var(--petrol); font-size: 0.92rem; font-weight: 500; }

.next-stages {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(20px, 3vw, 40px);
  margin-top: clamp(24px, 3vw, 40px);
}
.next-stage { padding-top: 16px; border-top: 2px solid var(--line-2); }
.next-stage h3 { font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.3; }
.next-status {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}
.next-status[data-status="live"] { background: var(--teal-tint); box-shadow: none; color: var(--petrol-deep); }
.next-stage ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 6px; }
.next-stage li { position: relative; padding-left: 16px; color: var(--steel); font-size: 0.94rem; line-height: 1.5; }
.next-stage li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.72em;
  width: 7px;
  height: 2px;
  background: var(--petrol);
}

.next-foot {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line-2);
}
.next-act { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.next-risk { max-width: 24em; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }

.next-form-title { font-size: 1.02rem; font-weight: 560; letter-spacing: -0.01em; line-height: 1.4; }
.next-form-title:focus { outline: none; }
.next-form-title:focus-visible { outline: 2px solid var(--petrol); outline-offset: 4px; }
.next-form-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.next-form-fields[hidden] { display: none; }
/* a fieldset is at least as wide as its content by default; this lets the ticks wrap */
.next-picks { display: flex; flex-wrap: wrap; gap: 4px 24px; min-inline-size: 0; padding: 0; border: 0; }
.next-form .check { align-items: center; min-height: 36px; color: var(--ink); font-size: 0.95rem; }
.next-form .check input { margin: 0; accent-color: var(--petrol); }
.next-form .check input:focus-visible { outline-color: var(--petrol); }
.next-row { display: flex; align-items: flex-end; gap: 10px; }
.next-row .field { flex: 1; min-width: 0; }
.next-row .btn { flex: none; min-height: 48px; }
.next-form .field label { color: var(--steel); }
.next-form .field input { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.next-form .field input:hover { border-color: var(--blue); }
.next-form .field input:focus { outline-color: var(--petrol); border-color: var(--petrol); }
.next-form .field input.invalid { border-color: #b3261e; }
.next-form .form-status { margin-top: 8px; color: var(--steel); }
.next-form .form-status:empty { display: none; }
.next-form .form-status.error { color: #b3261e; }

/* ---- the people ------------------------------------------------------------------------------------ */

.team { padding-block: var(--section); background: var(--paper); }
.team-intro { max-width: 44rem; }
.team h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); letter-spacing: -0.038em; line-height: 1.04; margin-bottom: 18px; }
.team-lede { color: var(--steel); font-size: 1.02rem; line-height: 1.6; }
.team-mail { margin-top: 22px; }
.team-mail[hidden], .team-mail a[hidden] { display: none; }

.founders {
  list-style: none;
  padding: 0;
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line-2);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px clamp(20px, 3vw, 36px);
}
/* the portraits are cut out on transparency; the tile supplies one backdrop for all four */
.founders img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--line);
  margin-bottom: 18px;
}
.founders h3 { font-size: 1.06rem; letter-spacing: -0.01em; line-height: 1.3; }
.founder-role { color: var(--petrol); font-size: 0.9rem; font-weight: 500; margin: 2px 0 10px; }
.founders p:not(.founder-role) { color: var(--steel); font-size: 0.93rem; line-height: 1.55; }
.founder-email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  color: var(--petrol);
  font-size: 0.92rem;
  font-weight: 500;
}
.founder-email[hidden] { display: none; }
.founder-email:hover { color: var(--petrol-deep); }

/* ---- pricing --------------------------------------------------------------------------------------- */

.pricing { padding-block: var(--section) clamp(56px, 7vw, 96px); }
.pricing h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); letter-spacing: -0.038em; line-height: 1.04; margin-bottom: clamp(24px, 3vw, 40px); }

.price-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px clamp(32px, 5vw, 72px);
  padding: clamp(24px, 4vw, 48px);
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -44px rgba(13, 27, 42, 0.35);
}
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.price-figure { font-size: min(clamp(3rem, 2.2rem + 3vw, 4.6rem), 15vw); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-unit { color: var(--steel); font-size: 1rem; }
.price-ex { margin-top: 6px; color: var(--muted); font-size: 0.9rem; }
.price-anchor { margin-top: 4px; color: var(--steel); font-size: 0.92rem; }
.price-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }

.price-points { list-style: none; padding: 0; display: grid; gap: 14px; align-content: start; }
.price-points li { position: relative; padding-left: 30px; color: var(--steel); line-height: 1.55; }
.price-points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.32em;
  width: 7px;
  height: 12px;
  border: solid var(--petrol);
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}
.price-points li:first-child { color: var(--ink); }

/* ---- questions ------------------------------------------------------------------------------------- */

.faq {
  padding-block: var(--section);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(32px, 5vw, 72px);
  align-items: start;
}
.faq h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); letter-spacing: -0.038em; line-height: 1.04; padding-top: 10px; }
.faq-list { border-top: 1px solid var(--line-2); }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list summary {
  position: relative;
  padding: 18px 40px 18px 0;
  font-weight: 560;
  font-size: 1.02rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 15px;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--petrol);
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { color: var(--steel); font-size: 0.97rem; line-height: 1.6; padding: 0 40px 22px 0; max-width: 42em; }
.faq-list details a { color: var(--petrol); font-weight: 500; }
.faq-list details a[hidden], [data-mail-wrap][hidden] { display: none; }

/* ---- start free (the sign-up at the foot of the page) ----------------------------------------------- */

.register { padding-bottom: var(--section); }
.register-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(32px, 6vw, 96px);
  padding: clamp(28px, 6vw, 80px);
  background: var(--ink);
  color: var(--mist);
  border-radius: 24px;
}
.register h2 {
  color: var(--paper);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: -0.038em;
  line-height: 1.04;
  margin-bottom: 18px;
}
.register-risk { color: var(--on-dark-2); max-width: 26em; }
.register-ask { margin-top: 18px; color: var(--on-dark-3); font-size: 0.94rem; }
.register-ask a { color: var(--paper); display: inline-flex; min-height: 44px; align-items: center; }
.register-ask a:focus-visible { outline-color: var(--teal); }
.register-slot { min-width: 0; }
/* signup.css lays each step out as a grid; text inputs are about 20 characters wide by default,
   so with large text the track has to be allowed below that (here and in the sign-up dialog) */
.beta-step { grid-template-columns: minmax(0, 1fr); }

/* ---- footer ------------------------------------------------------------------------------------------ */

.home-foot { grid-template-columns: auto 1fr auto; row-gap: 10px; }
/* the links wrap rather than push the footer past the screen with large text */
.home-foot .foot-links { flex-wrap: wrap; }
.foot-company { grid-column: 1 / -1; color: var(--muted); }

/* ---- mobile Start free bar ---------------------------------------------------------------------------- */

.mobile-bar { display: none; }

/* ---- wide screens: the chapter strip and side-by-side chapters ------------------------------------------- */

@media (min-width: 901px) {
  .chapter-strip {
    position: sticky;
    top: var(--masthead);
    z-index: 10;
    margin-top: clamp(32px, 4vw, 56px);
    background: rgba(13, 27, 42, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(159, 182, 206, 0.16), 0 -1px 0 rgba(159, 182, 206, 0.16);
  }
  .rail {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rail-stage { flex: none; padding-top: 9px; }
  .rail-stage-name { font-size: 0.66rem; }
  .rail-stage ol { flex-wrap: nowrap; column-gap: 26px; }
  .rail-later { margin-left: auto; }
  .chapter-strip a {
    min-height: 40px;
    white-space: nowrap;
    font-size: 0.86rem;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color 160ms ease, box-shadow 160ms ease;
  }
  .chapter-strip a[aria-current="step"] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--teal); }
  .chapter-strip a:focus-visible { outline-offset: -2px; }

  .chapter {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(32px, 4.5vw, 72px);
    scroll-margin-top: calc(var(--masthead) + 58px);
  }
  .still { scroll-margin-top: calc(var(--masthead) + 74px); }
  .chapter > .chapter-title { grid-column: 1; grid-row: 2; }
  .chapter > .chapter-lede { grid-column: 1; grid-row: 3; }
  .chapter > .without { grid-column: 1; grid-row: 4; }
  .chapter > .detail { grid-column: 1; grid-row: 5; }
  .chapter > .media { grid-column: 2; grid-row: 1 / 7; align-self: center; margin: 0; }
  .chapter-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .chapter-flip > .chapter-title,
  .chapter-flip > .chapter-lede,
  .chapter-flip > .without,
  .chapter-flip > .detail { grid-column: 2; }
  .chapter-flip > .media { grid-column: 1; }
  /* chapters 2 and 3: .chapter-body is the only grid, so the sticky text is bounded by it and stops
     at the end of the loops. The detail (chapter 2) and Doug (chapter 3) follow it as plain
     full-width rows, outside anything sticky. */
  .chapter-multi { display: block; }
  .chapter-body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
  }
  .chapter-flip .chapter-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* sticky only while the text is shorter than both its loops and the screen (page-ui.js sets
     .is-sticky); otherwise, or without script, it simply scrolls */
  .chapter-body > .chapter-text { grid-column: 1; grid-row: 1; top: calc(var(--masthead) + 80px); }
  .chapter-body.is-sticky > .chapter-text { position: sticky; }
  .chapter-body > .chapter-loops { grid-column: 2; grid-row: 1; }
  .chapter-flip .chapter-body > .chapter-text { grid-column: 2; }
  .chapter-flip .chapter-body > .chapter-loops { grid-column: 1; }
  .chapter-multi .chapter-loops > :first-child { margin-top: 0; }
  .chapter > .detail-wide { max-width: none; margin-top: clamp(24px, 3vw, 40px); }
  /* two columns that read down: measuring first, then pricing */
  .detail-wide ul { display: block; columns: 2; column-gap: clamp(28px, 4vw, 56px); max-width: 64em; }
  .detail-wide li { break-inside: avoid; margin-bottom: 10px; }
  .detail-wide .detail-stills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* a text column of about 400 px and the loop at about 60% of the band */
@media (min-width: 1100px) {
  .chapter, .chapter-body { grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); }
  .chapter-flip, .chapter-flip .chapter-body { grid-template-columns: minmax(0, 9fr) minmax(0, 5fr); }
}

/* ---- tablets and phones -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .founders img { max-width: 280px; }
}

@media (max-width: 900px) {
  .price-card, .faq, .register-panel, .next-foot { grid-template-columns: minmax(0, 1fr); }
  .next-stages { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* chapters 2 and 3 read title, lede, the loops, then the rest of the text */
  .chapter-body { display: flex; flex-direction: column; }
  .chapter-body > .chapter-text { display: contents; }
  .chapter-body > .chapter-loops { order: 1; }
  .chapter-text > :not(.chapter-title):not(.chapter-lede) { order: 2; }
}

@media (max-width: 760px) {
  :root { --masthead: 60px; }
  .masthead-nav { display: none; }
  .masthead-inner { gap: 12px; }
  .masthead-actions { gap: 4px; }

  .mobile-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(243, 246, 248, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -1px 0 var(--line-2);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 240ms var(--settle), visibility 0s linear 240ms;
  }
  .mobile-bar.is-shown { transform: none; visibility: visible; transition: transform 240ms var(--settle), visibility 0s; }
  /* while the bar is up, it is the Start free; the header keeps Sign in */
  .masthead.has-bar [data-cta="header"] { display: none; }
  .mobile-bar .btn { width: 100%; }
}

@media (max-width: 640px) {
  :root { --section: 52px; }
  .hero { padding-top: 18px; }
  .hero-tagline { margin-top: 10px; font-size: 1rem; }
  .hero-sub { margin-top: 14px; font-size: 1rem; line-height: 1.5; }
  .hero-act { margin-top: 18px; gap: 10px; }
  .hero-act .btn { width: 100%; }
  .hero-risk { max-width: none; font-size: 0.84rem; }
  .hero-meta { padding: 20px 0 24px; gap: 4px; }
  .hero-proof { font-size: 0.92rem; }
  .faces img { width: 40px; height: 40px; }

  .media-frame { --pad: 8px; --ratio: 125%; border-radius: 12px; }
  .media-frame > picture, .media-frame > video { border-radius: 6px; }

  .map-block { margin-bottom: 36px; }
  .map-lede { font-size: 0.98rem; }

  .journey-head { padding-top: 48px; }
  .chapter { padding-block: 36px; }
  .chapter-lede, .journey-intro { font-size: 0.98rem; }
  .journey-wrap { padding-bottom: 48px; }
  .chapter .media { margin-top: 20px; }
  .without { margin-top: 18px; }
  .detail { margin-top: 8px; }
  .chapter-cta .btn { width: 100%; }

  /* swipe rows: each card about 85% of the screen, the next one peeking */
  .detail-stills,
  .catches,
  .founders {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .detail-stills::-webkit-scrollbar, .catches::-webkit-scrollbar, .founders::-webkit-scrollbar { display: none; }
  .detail-stills > *, .catches > li, .founders > li { scroll-snap-align: start; }
  .catch { padding: 16px 18px 18px; }
  .detail-stills { margin-top: 20px; }

  .next-stages { gap: 16px; margin-top: 20px; }
  .next-stage { padding-top: 12px; }
  .next-stage ul { margin-top: 8px; gap: 4px; }
  .next-stage li { font-size: 0.92rem; }
  .next-act .btn { width: 100%; }

  .founders { margin-top: 36px; padding-top: 0; border-top: 0; }
  .founders li {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 14px;
    align-content: start;
    padding: 18px;
    border-radius: 14px;
    background: var(--mist);
  }
  .founders img { max-width: none; grid-row: span 2; margin-bottom: 0; border-radius: 10px; background: var(--line-2); }
  .founders h3 { align-self: end; font-size: 1rem; }
  .founder-role { align-self: start; margin-bottom: 0; }
  .founders li > p:not(.founder-role) { grid-column: 1 / -1; margin-top: 14px; }
  .founder-email { grid-column: 1 / -1; justify-self: start; }

  .price-act .btn { width: 100%; }
  .price-card { gap: 24px; }
  .price-points { gap: 10px; }
  .price-points li { font-size: 0.94rem; }
  .doug-stills { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .doug-stills .media-frame { --ratio: 101.4%; }
  .faq-list summary { padding-block: 14px; font-size: 0.98rem; }
  .faq-list summary::after { top: 12px; }
  .register-panel { border-radius: 18px; padding: 28px 20px; }
  .home-foot { grid-template-columns: minmax(0, 1fr); }
}

/* ---- hero photo: Atlas's pipe lift behind the headline, the film overlapping its foot ---------- */
.hero { --overlap: 0px; position: relative; overflow-x: clip; }
.hero-photo {
  position: relative;
  z-index: 0;
  align-self: stretch;
  grid-column: 1 / -1;
  margin-inline: calc(50% - 50vw);
  background: #1b2633;
}
/* the image never sizes the box: the copy does, plus the spacing below */
.hero-photo picture { position: absolute; inset: 0; }
.hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 60% 55%; }
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 20, 32, 0.9) 0%, rgba(10, 20, 32, 0.87) 52%, rgba(10, 20, 32, 0.74) 64%, rgba(10, 20, 32, 0.26) 84%, rgba(10, 20, 32, 0.1) 100%),
    linear-gradient(0deg, rgba(10, 20, 32, 0.45) 0%, rgba(10, 20, 32, 0) 38%);
}
.hero-title, .hero-tagline, .hero-aside { position: relative; z-index: 1; }
.hero-text > .film { position: relative; z-index: 1; }
.hero-title { color: #fff; }
.hero-photo-credit { position: absolute; z-index: 1; right: max(16px, calc(50vw - 600px)); bottom: calc(var(--overlap) + 12px); margin: 0; padding: 2px 8px; border-radius: 4px; background: rgba(10, 20, 32, 0.62); font-size: 0.74rem; color: rgba(255, 255, 255, 0.92); }
@media (max-width: 1179px) { .hero-photo-credit { bottom: calc(var(--overlap) + 8px); right: 16px; } }
.hero-tagline { color: #fff; }
.hero { padding-top: 0; }

@media (min-width: 1180px) {
  /* the photo fills the first screen; the film's top edge shows about 96 px above its foot.
     --gap centres the copy (about 300 px tall) between the header and the film */
  .hero { --overlap: 120px; --gap: clamp(40px, calc((100svh - var(--masthead) - 96px - 380px) / 2), 240px); }
  .hero-photo { grid-row: 1 / 4; }
  .hero-title { font-size: clamp(2.375rem, 1rem + 4.2vw, 4.625rem); max-width: 13.5em; margin-top: var(--gap); }
  .hero-line { display: block; }
  .hero-sub { display: block; max-width: 34em; margin-top: 0; color: rgba(255, 255, 255, 0.96); font-size: 1.12rem; line-height: 1.5; }
  .hero-aside { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; margin-top: clamp(16px, 2vh, 24px); margin-bottom: calc(var(--overlap) + var(--gap)); border-image: none; }
  .hero-act { max-width: none; margin-top: clamp(22px, 3vh, 30px); }
  .hero-risk { color: rgba(255, 255, 255, 0.92); }
  .hero-walkthrough { color: #8fe9e1; }
  .hero-walkthrough:hover { color: #fff; }
  /* the band starts where the photo ends, so the film's top sits on the photo */
  .hero-text > .film {
    margin-top: calc(-1 * var(--overlap));
    border-image: linear-gradient(transparent var(--overlap), var(--film-band) var(--overlap)) fill 0 / 0 / 0 100vmax var(--band-y) 100vmax;
  }
}
@media (min-width: 641px) and (max-width: 1179px) {
  .hero-photo { grid-row: title-start / aside-end; }
  /* the copy runs most of the way across here, so the whole photo is darkened */
  .hero-photo::after { background: linear-gradient(90deg, rgba(10, 20, 32, 0.9) 0%, rgba(10, 20, 32, 0.82) 65%, rgba(10, 20, 32, 0.55) 100%); }
  .hero-title { margin-top: clamp(48px, calc((100svh - var(--masthead) - 460px) / 2), 160px); }
  .hero-aside { margin-bottom: clamp(48px, calc((100svh - var(--masthead) - 460px) / 2), 160px); }
  .hero-sub { color: rgba(255, 255, 255, 0.96); }
  .hero-risk { color: rgba(255, 255, 255, 0.92); }
  .hero-walkthrough { color: #8fe9e1; }
}
@media (max-width: 640px) {
  .hero { --overlap: 40px; }
  .hero-photo { grid-row: title-start / tagline-end; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(10, 20, 32, 0.82) 0%, rgba(10, 20, 32, 0.66) 55%, rgba(10, 20, 32, 0.5) 100%); }
  .hero-title { margin-top: clamp(32px, 8svh, 72px); }
  .hero-tagline { margin-bottom: calc(var(--overlap) + clamp(32px, 8svh, 72px)); }
  .hero-text > .film {
    margin-top: calc(-1 * var(--overlap));
    border-image: linear-gradient(transparent var(--overlap), var(--film-band) var(--overlap)) fill 0 / 0 / 0 100vmax var(--band-y) 100vmax;
  }
}