/* ==========================================================================
   The home page.

   Two layouts of ONE walkthrough, sharing one set of copy and one set of
   coordinates (app/routers/home.py: CALLOUTS and TARGETS):

     ≥ 900px  the screenshot centred, callouts in columns either side,
              an arrow drawn from each to the control it describes.
     < 900px  the screenshot PINNED under the header, callouts scrolling
              beneath it, and ONE dashed highlight moving between the same
              controls.  Ed: "the desktop arrows become one moving
              highlight."

   Why not stack the callouts under the screenshot on mobile (the obvious
   move): it separates the words from the thing they describe, and you end
   up scrolling back up to see what is meant. Why not cycle them over the
   top: whatever a callout describes is exactly what it then covers. Both
   were built and rejected — docs/mockups/*-REJECTED.html.
   ========================================================================== */

/* The walkthrough wants more width than the app's 960px reading measure.
   Scoped with :has so no other page is affected; where :has is missing the
   page simply stays 960 and the columns run narrower — no breakage. */
.page:has(.home) { max-width: 1120px; }

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

.home { text-align: center; }

.home-headline {
  font-size: clamp(2.1rem, 6.4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 8px auto 0;
  max-width: 14em;
}
.home-headline-accent { color: var(--orange); }

.home-dek {
  max-width: 34em;
  margin: 18px auto 0;
  font-size: clamp(1rem, 2.3vw, 1.12rem);
  line-height: 1.62;
  color: var(--text-secondary);
}
.home-dek em { font-style: italic; }

/* The one claim on the page that is about trust rather than function, so it
   is set apart in teal rather than run into the dek. */
.home-trust {
  margin: 18px auto 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #0a6f68;
}

.home-walk-heading {
  margin: 52px auto 26px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- the walkthrough, shared ---------------------------------------------- */

.walk { position: relative; }

.walk-shot { margin: 0; }

.walk-shot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* The moving highlight. Positioned from TARGETS as percentages of the
   image, so it needs no knowledge of the rendered size. Desktop hides it —
   there, the arrows do this job. */
.walk-spot {
  position: absolute;
  border: 2.5px dashed var(--orange);
  border-radius: 10px;
  background: rgba(224, 86, 58, 0.07);
  opacity: 0;
  pointer-events: none;
  transition: left .34s ease, top .34s ease, width .34s ease,
              height .34s ease, opacity .24s ease;
}

.walk-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* --- callouts ------------------------------------------------------------- */

.walk-callout { max-width: 21em; }

.walk-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 11px;
  border: 2px solid #0a6f68;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a6f68;
}

.walk-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.32;
  color: var(--ink);
}

.walk-num {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 2px 2px 0 var(--ink);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
}

.walk-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ⭐ TWO codes, not three (Ed, 2026-08-22). The page has six callouts and the
   distinction between them is binary: things you DO, in order — numbered,
   orange, solid arrow — and things that are simply THERE for you — dark teal,
   dashed arrow, no number. Steps and not-steps.

   Before this, asides were grey and the pitch was teal-but-solid, which made
   three languages for two meanings and left the reader decoding rather than
   reading. Ed's rule for which side a callout falls on: anything with "if" in
   it is a tool, not a step.

   The pitch keeps its lead WITHIN the teal group — the eyebrow pill is unique
   to it, and its title runs at full size — so unifying the colour costs it no
   prominence.

   (It is also the more legible choice: #0a6f68 on the page background measures
   5.3:1, where the old muted grey was 4.25:1 — under AA.) */
.walk-callout--aside .walk-title,
.walk-callout--feature .walk-title {
  color: #0a6f68;
}
.walk-callout--aside .walk-title {
  font-size: 0.92rem;
  font-weight: 700;
}
.walk-callout--aside .walk-body { font-size: 0.84rem; }

/* --- desktop: two columns, arrows ---------------------------------------- */

@media (min-width: 900px) {
  .walk {
    display: grid;
    grid-template-columns: 1fr minmax(270px, 320px) 1fr;
    column-gap: clamp(28px, 4.4vw, 64px);
    row-gap: 40px;
    align-items: center;
    justify-items: center;
  }

  .walk-shot {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 100%;
  }

  .walk-callout--left {
    grid-column: 1;
    grid-row: var(--walk-row);
    justify-self: end;
    text-align: right;
  }
  .walk-callout--right {
    grid-column: 3;
    grid-row: var(--walk-row);
    justify-self: start;
    text-align: left;
  }

  /* The number sits on the side facing the screenshot, so the eye runs
     title → number → arrow → control without doubling back. */
  .walk-callout--left .walk-title { flex-direction: row-reverse; }

  .walk-callout--left .walk-eyebrow,
  .walk-callout--right .walk-eyebrow { margin-bottom: 8px; }

  .walk-spot { display: none; }
}

/* --- mobile: the pinned screenshot ---------------------------------------- */

@media (max-width: 899px) {
  .walk-arrows { display: none; }

  /* flow-root, and it is load-bearing. The last callout's bottom margin
     otherwise COLLAPSES THROUGH .walk, so .walk ends above its own content
     and the sticky screenshot unpins while there is still a callout to
     read. Measured: the shot came adrift at ~scrollY 1100 of 1350. */
  .walk { display: flow-root; }

  .walk-shot {
    position: sticky;
    top: 10px;
    z-index: 3;
    /* Full width, with the image centred INSIDE it — not sized to the image.
       The sticky element is what masks the callouts passing underneath, so
       anything narrower leaves the ends of each line poking out either side
       of the phone while the middle disappears. */
    width: 100%;
    margin: 0 auto 22px;
    padding-bottom: 14px;
    /* The page background, so callouts scrolling underneath do not show
       through the rounded corners of the screenshot. */
    background: var(--bg);
    /* And an explicit edge for them to pass under. Without it a callout is
       simply guillotined mid-glyph as it slides beneath, which reads as a
       rendering fault rather than as depth. Ed's mockup drew this rule too. */
    border-bottom: 1.5px solid var(--line);
  }

  .walk-shot-img {
    width: min(300px, 66vw);
    margin: 0 auto;
  }

  .walk-callout {
    max-width: 30em;
    margin: 0 auto 26px;
    text-align: left;
    /* Reading one callout should not require the previous to leave the
       screen — Ed's note on the mockup was that the gaps were generous
       enough to leave the pinned phone with nothing beneath it. */
    padding: 0 4px;
  }

  .walk-callout--left .walk-title,
  .walk-callout--right .walk-title { flex-direction: row; }

  /* ⚠️ Phone reading distance is not desktop reading distance, and the
     desktop sizes are set by NARROW COLUMNS either side of the screenshot —
     a constraint that does not exist here, where a callout has the full
     width. Ed, reading it on his phone: "I'm straining a bit." So the body
     goes to a full 1rem and the asides stop being smaller than the steps:
     down here the ellipsis and the teal already say "tool, not step", and
     shrinking the type to say it a third time only costs legibility. */
  .walk-title { font-size: 1.06rem; }
  .walk-body {
    font-size: 1rem;
    line-height: 1.66;
  }
  .walk-callout--aside .walk-title { font-size: 1rem; }
  .walk-callout--aside .walk-body { font-size: 1rem; }

  /* Only the callout being read is at full strength — the others recede,
     so the highlight and the words agree about where you are. Ed's mockup
     used 0.34; kept, but this is the one number on the page worth judging
     on a real screen rather than in a spec. */
  .walk-callout { opacity: .34; transition: opacity .3s ease; }
  .walk-callout.is-current { opacity: 1; }

  /* ⚠️ The last callout needs NO extra room, and 18vh of it was a visible
     hole above the CTA (Ed, on his phone). That margin was left over from
     the discarded "nearest the band centre" rule, which really did need the
     last callout to reach the centre. Under the crossing rule it only has
     to CROSS the centre — and the CTA, the footer and the page's own bottom
     padding already sit below it, which is ~320px of run-out against the
     ~230px the crossing needs on the tallest phone. So: the ordinary gap. */
}

/* --- call to action ------------------------------------------------------- */

.home-cta {
  display: inline-block;
  margin: 46px auto 8px;
  padding: 15px 30px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 5px 5px 0 var(--ink);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.home-cta:hover {
  color: #fff;
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.home-cta:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .walk-spot { transition: opacity .2s ease; }
  .home-cta { transition: none; }
}