/* ==========================================================================
   SkySearch — landing page (2026-09-07 revamp)

   Loaded AFTER skysearch.css, and only by `/`. Everything the shared sheet
   already owns — tokens, reset, nav, footer, buttons, bands, the FAQ, the
   action bar, .hero's sky plate and scrim — is used as-is. What is here is the
   eight beats of this page and nothing else, so a change on this page cannot
   move /compare, /coverage, /pricing or the legal pages.

   The skin: deep cobalt and painted sky in the hero and the closing CTA only.
   Gold means "a source, or something found" and appears nowhere else. Product
   surfaces are white cards with hairline borders on cloud-white bands, and
   every word of them is real text.
   ========================================================================== */

/* --------------------------------------------- white cards on the sky --- */
/*
  skysearch.css paints .btn--ghost and every focus ring white inside .hero and
  .band--sky, which is right for a control sitting ON the plate and wrong for
  one sitting inside a white card that happens to be there. Both were invisible:
  the example card's "View sources" was white on white, and tabbing into the
  search fields drew a white ring on white. These put them back.
*/
.hero .search-card :focus-visible,
.hero .ex :focus-visible,
.closing .search-card :focus-visible { outline-color: var(--sky-cobalt); }

.hero .ex .btn--ghost,
.closing .search-card .btn--ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-2);
}
.hero .ex .btn--ghost:hover,
.closing .search-card .btn--ghost:hover {
  border-color: var(--sky-cobalt);
  color: var(--cobalt-ink);
  background: var(--cobalt-soft);
}

/* ------------------------------------------------------------ 1. hero --- */

/* The shared sheet centres one 36rem column. Here the argument is on the left
   and a readable example result is on the right, so the reader meets the claim
   and the proof of the claim in one glance. */
@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

.hero h1 { text-wrap: balance; max-width: 15ch; }

/* --------------------------------------------------- the headline swash --- */
/*
  A hand-drawn gold underline under "across the sky". Gold as *type* is
  reserved for a thing the product found (brand book §4), so the phrase stays
  white and the highlight is a drawn stroke instead — which also puts the hand
  on the page in the first thing a reader sees.
*/
.glow { position: relative; white-space: nowrap; }
.swash {
  position: absolute;
  left: -1.5%;
  bottom: -0.2em;
  width: 103%;
  height: 0.26em;
  overflow: visible;
  color: var(--gold);
  pointer-events: none;
}
.swash path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.swash path + path { stroke-width: 2.6; opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
  .swash path { stroke-dasharray: 310; stroke-dashoffset: 310; animation: draw-path 900ms var(--ease-out) 420ms forwards; }
  .swash path + path { stroke-dasharray: 240; stroke-dashoffset: 240; animation-delay: 760ms; }
}
@media (max-width: 61.99rem) { .hero h1 { max-width: none; } }
.hero__lede { margin-top: 0.9rem; max-width: 34rem; }

/* The globe: five graticule lines and three gold connection paths, drawn at
   1/420th scale so it stays crisp at any size and costs nothing to ship.
   It sits behind the example card on a desktop and is hidden on a phone,
   where there is no room for it to be anything but noise. */
.globe {
  position: absolute;
  right: -12%;
  top: 46%;
  width: min(54rem, 64%);
  height: auto;
  transform: translateY(-50%);
  color: var(--gold);
  opacity: 0.85;
}
/* The graticule is atmosphere; the three connection paths are the idea, so
   they carry most of the ink between them. */
.globe__grid { opacity: 0.3; }
.globe__paths { opacity: 1; }
.globe__nodes { opacity: 0.9; }
@media (max-width: 61.99rem) { .globe { display: none; } }

/* Drawn once on load: 900ms of a line finding its way across, then it stays
   put. Nothing here loops. */
@media (prefers-reduced-motion: no-preference) {
  .globe__paths path {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: draw-path 1200ms var(--ease-out) 320ms forwards;
  }
  .globe__paths path:nth-child(2) { animation-delay: 520ms; }
  .globe__paths path:nth-child(3) { animation-delay: 720ms; }
}
@keyframes draw-path { to { stroke-dashoffset: 0; } }

/* --- the search card ---------------------------------------------------- */
/* One component, used in the hero and in the closing CTA. Submitting it does
   not research anything: it carries what was typed into the signed-in
   workspace, where a search actually runs. */
.search-card {
  margin-top: 1.6rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  color: var(--ink);
  max-width: 38rem;
}
.search-card--closing { margin-inline: auto; margin-top: 0; }

.search-card__fields { display: grid; gap: 0.7rem; }
@media (min-width: 40rem) {
  .search-card__fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: end;
  }
}

/* 44px minimum on every tap target, on every width. */
.search-card .field input { min-height: 44px; }
.search-card__go {
  min-height: 44px;
  white-space: nowrap;
  justify-content: center;
}
@media (max-width: 39.99rem) { .search-card__go { width: 100%; } }

.search-card__note {
  margin: 0.75rem 0 0;
  font-size: var(--fs-small);
  color: var(--muted);
}
.search-card__error {
  margin: 0.5rem 0 0;
  font-size: var(--fs-small);
  color: var(--bad);
}
.search-card__error[hidden] { display: none; }

.hero__aside { margin-top: 1rem; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  font-weight: 600;
  /* The arrow belongs to the words, not to the line after them. */
  white-space: nowrap;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --- the illustrative example ------------------------------------------- */
.ex { position: relative; scroll-margin-top: var(--nav-clear); }
.ex__card { padding: 1.15rem; }
.ex__flag { margin: 0 0 0.85rem; }

.ex__head { display: flex; align-items: center; gap: 0.8rem; }
.ex__avatar {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--cobalt-soft);
  color: var(--cobalt-ink);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.ex__who { display: grid; gap: 0.05rem; min-width: 0; }
.ex__name { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.ex__role { font-size: var(--fs-small); color: var(--ink-2); }
.ex__org { font-size: var(--fs-small); color: var(--muted); }

.ex__route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0.65rem 0.75rem;
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.ex__route-icon { color: var(--sky-cobalt); flex: none; }
.ex__email {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--cobalt-ink);
  overflow-wrap: anywhere;
}

.ex__label,
.prev__label {
  margin: 1.1rem 0 0.5rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.ex__sources { display: grid; gap: 0.1rem; }
.ex__sources li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}
.ex__sources li:first-child { border-top: 0; }
.ex__sources svg { width: 16px; height: 16px; color: var(--sky-cobalt); }
.ex__src-name { font-size: var(--fs-small); color: var(--ink); }
.ex__src-meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  overflow-wrap: anywhere;
  text-align: right;
}
.ex__go { margin-top: 0.9rem; }

.ex__disclaimer {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------- 2. active research --- */

.trail { position: relative; }
.trail__flag { margin: 0 0 1.25rem; text-align: center; }

.trail__sources { display: grid; gap: 1rem; }
/*
  One card per row until the four-across diagram fits. At 768 an auto-fit grid
  put the four cards in a 2x2 while the connector was still the phone's vertical
  rail, so the rail ran down the left-hand column past two cards it had nothing
  to do with. Below 62rem the trail is a list, and a list is one column.
*/
@media (min-width: 62rem) {
  .trail__sources { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.src {
  position: relative;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}
.src__head { display: flex; align-items: center; gap: 0.55rem; margin: 0; }
.src__icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 8px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-ink);
}
.src__icon svg { width: 16px; height: 16px; }
.src__name { font-weight: 700; font-size: 0.95rem; }
.src__note { margin: 0.5rem 0 0.8rem; font-size: var(--fs-small); color: var(--muted); }

/* The snippet: a piece of the document the research actually read. Real text,
   so it can be selected, translated and read aloud. */
.snip {
  padding: 0.7rem 0.8rem;
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.snip--mono { font-family: var(--font-mono); }
.snip__title { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.snip__line { margin: 0.25rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-2); }
.snip__line--hit {
  color: var(--gold-ink);
  background: var(--gold-soft);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  margin-inline: -0.3rem;
  font-weight: 600;
}
.snip__src { margin: 0.5rem 0 0; font-size: 0.72rem; color: var(--muted); font-family: var(--font-ui); }

/* The four gold paths. Only from 48rem up, where four cards sit in a row and
   the geometry means something; below that the rail below takes over. */
.trail__paths { display: none; }
@media (min-width: 62rem) {
  .trail__paths {
    display: block;
    width: 100%;
    height: 108px;
    color: var(--gold);
  }
  @media (prefers-reduced-motion: no-preference) {
    /*
      The dash has to be at least as long as the path or the line draws itself
      as a dotted one. These are the two path lengths in the viewBox's own
      units, measured with getTotalLength: 402 for the outer pair, 172 for the
      inner pair, rounded up. pathLength="1" would say this once instead of
      twice, but Chrome does not apply it to a stroke-dasharray set from CSS —
      the outer curves came out as a 1-on-1-off dotted line.
    */
    .trail__paths path { stroke-dasharray: 420; stroke-dashoffset: 420; }
    .trail__paths path:nth-child(2),
    .trail__paths path:nth-child(3) { stroke-dasharray: 185; stroke-dashoffset: 185; }
    [data-reveal].is-revealed .trail__paths path {
      animation: draw-path 900ms var(--ease-out) forwards;
    }
    [data-reveal].is-revealed .trail__paths path:nth-child(2) { animation-delay: 120ms; }
    [data-reveal].is-revealed .trail__paths path:nth-child(3) { animation-delay: 240ms; }
    [data-reveal].is-revealed .trail__paths path:nth-child(4) { animation-delay: 360ms; }
  }
}

/* Below 62rem the four cards stack, so the trail becomes what a stack of
   evidence actually looks like: a vertical gold rail with a node per source.
   A scaled-down four-way diagram would be unreadable. */
@media (max-width: 61.99rem) {
  .trail__sources { position: relative; padding-left: 1.6rem; }
  .trail__sources::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 1.4rem;
    bottom: -2.6rem;
    width: 2px;
    background: var(--gold);
    opacity: 0.55;
    border-radius: 2px;
  }
  .src::before {
    content: '';
    position: absolute;
    left: -1.22rem;
    top: 1.25rem;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--gold);
  }
  .trail__person { position: relative; padding-left: 1.6rem; margin-top: 1.6rem; }
  .trail__person::before {
    content: '';
    position: absolute;
    left: 0.38rem;
    top: 1.35rem;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-soft);
  }
}

.trail__person { margin-top: 0.4rem; }
@media (min-width: 62rem) { .trail__person { margin-top: 0; } }

.person {
  max-width: 30rem;
  padding: 1rem;
  border-color: var(--gold-line);
}
@media (min-width: 62rem) { .person { margin-inline: auto; } }
.person__head { display: flex; align-items: center; gap: 0.75rem; }
.person__avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-ink);
  font-weight: 700;
  font-size: 0.85rem;
}
.person__who { display: grid; gap: 0.05rem; min-width: 0; }
.person__name { font-weight: 700; }
.person__role { font-size: var(--fs-small); color: var(--muted); }
.person__route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.person__route svg { width: 16px; height: 16px; color: var(--sky-cobalt); flex: none; }
.person__email { font-family: var(--font-mono); font-size: 0.88rem; color: var(--cobalt-ink); overflow-wrap: anywhere; }

.research__foot {
  max-width: 46rem;
  margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) auto 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* --------------------------------------------------- figure rows -------- */
/*
  The ten-figure row. It was built for the illustrative gauge; the benchmark
  inherited it and colours it for the cobalt band in the richness pass below.
*/
.fig--off { color: var(--line-strong); }
.fig--on { color: var(--sky-cobalt); }

/* ------------------------------------------------- 4. how it works ------ */

.how__list { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .how__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Not a half-width orphan on its own row. */
  .how__list > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 62rem) {
  .how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.step {
  display: grid;
  align-content: start;
  padding: 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}
.step__n { margin: 0 0 0.7rem; }
.step__num {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cobalt-soft);
  color: var(--cobalt-ink);
  font-weight: 700;
  font-size: 0.9rem;
}
.step__title { font-size: var(--fs-h3); }
.step__body { margin: 0.35rem 0 1rem; font-size: var(--fs-small); color: var(--muted); }

/* The product previews. Built from the same parts as the real screens rather
   than screenshotted, so the words in them are words. */
.prev {
  margin-top: auto;
  padding: 0.85rem;
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.prev__label { margin: 0.75rem 0 0.4rem; font-size: 0.68rem; }
.prev > .prev__label:first-child { margin-top: 0; }
.prev__input {
  margin: 0;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prev__btn {
  margin: 0.6rem 0 0;
  padding: 0.5rem;
  background: var(--sky-cobalt);
  border-radius: 6px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

.prev__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  padding: 0.45rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.prev__row:last-child { margin-bottom: 0; }
.prev__row--picked { border-color: var(--sky-cobalt); box-shadow: 0 0 0 2px var(--cobalt-soft); }
.prev__dot {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cobalt-soft);
  color: var(--cobalt-ink);
  font-size: 0.66rem;
  font-weight: 700;
}
.prev__who { display: grid; min-width: 0; }
.prev__name { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.prev__meta {
  font-size: 0.68rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prev__score { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.prev__row--picked .prev__score { color: var(--cobalt-ink); }

.prev__route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.prev__email {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cobalt-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.prev__pill {
  flex: none;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-ink);
  font-size: 0.68rem;
  font-weight: 700;
}
.prev__src {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 0.5rem;
  margin: 0 0 0.3rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.prev__src:last-child { margin-bottom: 0; }
.prev__src-name { font-size: 0.72rem; color: var(--ink); white-space: nowrap; }
.prev__src-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.how__foot {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ---------------------------------------------------- 5. hard cases ----- */

.cases__grid { display: grid; gap: 1rem; }
@media (min-width: 34rem) and (max-width: 61.99rem) {
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .cases__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.case {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.case:hover { border-color: var(--cobalt-line); transform: translateY(-2px); }
.case__line { margin: 0.3rem 0 0; font-size: var(--fs-small); color: var(--muted); }

.cases__foot {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}

/* ------------------------------------------------ 6. pricing preview ---- */

.plans__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
@media (min-width: 56rem) {
  .plans__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.plans__copy .lede { margin-top: 0.6rem; }
.plans__cta { margin: 1.4rem 0 0; }
.plans__cta .btn { min-height: 44px; }
@media (max-width: 39.99rem) { .plans__cta .btn { width: 100%; justify-content: center; } }

.plans__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0;
  font-size: var(--fs-small);
}
.plans__links a { color: var(--cobalt-ink); font-weight: 600; padding-block: 0.35rem; }
.plans__links span { color: var(--line-strong); }

.plans__break { margin: 1rem 0 0; font-size: var(--fs-small); color: var(--muted); }

.tariff {
  margin: 0;
  padding: 0.35rem 1.1rem;
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.tariff > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.tariff > div:first-child { border-top: 0; }
.tariff dt { font-size: var(--fs-small); color: var(--ink-2); }
.tariff dd { margin: 0; font-weight: 700; font-size: var(--fs-small); color: var(--ink); white-space: nowrap; }

/* ------------------------------------------------------------- 7. faq -- */
/*
  The shared floor under .faq__list is 39rem, which is what six questions and
  their tallest answer needed. Three questions need far less, and the
  difference was 250px of white beside them. The floor still has to be at least
  the tallest answer plus the three summary rows, or opening a question moves
  the closing CTA — scripts/check.mjs asserts exactly that.
*/
@media (min-width: 56rem) { .faq__list { --faq-pane: 21rem; } }

/* ------------------------------------------------------ 8. closing ------ */

.closing__head { margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.closing .search-card { color: var(--ink); }
.closing .search-card__note { text-align: center; }

/* ------------------------------------------------------------ reveal ---- */
/* The fade-and-lift itself belongs to skysearch.css, together with the two
   guards that keep it honest: `scripting: none` and `:focus-within`, so
   nothing on this page can be trapped behind an animation that never runs.
   All that is added here is the still frame for the two drawn paths. */
@media (prefers-reduced-motion: reduce) {
  .globe__paths path,
  .trail__paths path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* --------------------------------------------------------- small screens */
@media (max-width: 47.99rem) {
  /* The hero is the one screen where the reader has to see the whole offer, so
     it stops trying to fill the viewport and simply ends where it ends. */
  .hero { min-height: 0; }
  .btn--block, .search-card__go { min-height: 44px; }
}

/* ==========================================================================
   2026-09-07 · richness pass

   The page shipped honest and legible and read as bland, and the reason was
   measurable: one image between the hero and the closing CTA, two background
   colours three per cent apart, and every section the same shape — a centred
   heading over a row of hairline cards, six times running.

   What is below is the fix, and it is mostly not new copy. It is: a third
   surface (the cobalt proof band), the painted scenes and real product
   screenshots that were already in the repo and referenced by nothing, and a
   hand-drawn layer so a human is visibly present on the page.

   Names avoid .steps/.pricing/.cmp (owned by skysearch.css) and also .mk and
   .shot, which coverage.html and the product-shot styles already use.
   ========================================================================== */

/* ------------------------------------------------------- duotone icons --- */
/*
  A 16 px hairline glyph is a footnote. These are the same inline SVG, drawn at
  36–40 px on a soft cobalt ground with one gold accent — the accent is always
  on the part of the glyph that means "found".
*/
.duo {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 11px;
  background: var(--cobalt-soft);
  border: 1px solid var(--cobalt-line);
  color: var(--cobalt-ink);
}
.duo svg { width: 21px; height: 21px; }
.duo--gold {
  background: var(--gold-soft);
  border-color: var(--gold-line);
  color: var(--gold-ink);
}
.band--sky .duo, .hero .duo, .bench .duo {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--sky-line);
  color: var(--on-sky);
}

/* ------------------------------------------------- the hand-drawn layer --- */
/*
  Every annotation on this page is a drawn path, not a font: a monoline stroke
  alphabet (.context/revamp/handwriting.mjs) emits one path per phrase, which
  is why it can be *written* on entry rather than faded in. The words reach a
  screen reader through aria-label on the <svg>, so nothing is lost.
*/
.ink {
  position: absolute;
  pointer-events: none;
  color: var(--gold-ink);
  overflow: visible;
}
.ink path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/*
  White, not gold, over a sky band. Gold-light is #F0C978 and the top right of
  the hero plate is where the gold arc lands, so a gold annotation there was
  invisible against the thing it was written on. White also matches what an
  annotation is: a note about the page, not something the product found, and
  gold is reserved for the latter.
*/
.ink--sky { color: var(--on-sky); }
.ink--sky path { stroke-width: 1.9; }
.ink--muted { color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  /*
    A dash has to be at least as long as the path it hides, or the line draws
    itself as a dotted one. These are the measured getTotalLength values, per
    annotation, rounded up: Chrome does not apply pathLength to a dasharray set
    from CSS, which cost a pass on the trail curves last time. Measured with
    .context/revamp/inklen.mjs.
  */
  .ink path { stroke-dasharray: 600; stroke-dashoffset: 600; }
  .ink--hero    path:first-child { stroke-dasharray: 340; stroke-dashoffset: 340; }
  .ink--trail   path:first-child { stroke-dasharray: 580; stroke-dashoffset: 580; }
  .ink--bench   path:first-child { stroke-dasharray: 470; stroke-dashoffset: 470; }
  .ink--atlas   path:first-child { stroke-dasharray: 450; stroke-dashoffset: 450; }
  .ink--how     path:first-child { stroke-dasharray: 240; stroke-dashoffset: 240; }
  .ink--closing path:first-child { stroke-dasharray: 445; stroke-dashoffset: 445; }
  /* Every arrow is one of three gestures and they measure the same. */
  .ink path + path { stroke-dasharray: 110; stroke-dashoffset: 110; }
  .ink--hero path + path { stroke-dasharray: 70; stroke-dashoffset: 70; }

  [data-reveal].is-revealed .ink path,
  .hero .ink path,
  .bench .ink path,
  .closing .ink path { animation: draw-path 1000ms var(--ease-out) forwards; }
  .ink path + path { animation-delay: 620ms; }
}
@media (prefers-reduced-motion: reduce) {
  .ink path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}
/* Under 62rem the annotations sit on top of the thing they annotate, so they
   come off entirely rather than being shrunk into illegibility. */
@media (max-width: 61.99rem) { .ink { display: none; } }

/* --------------------------------------------- hero: ring and annotation --- */
.hero__grid { position: relative; }
.ink--hero { right: 2%; top: -1.4rem; width: 13rem; }

.ex__ring { display: grid; place-items: center; width: 54px; height: 54px; flex: none; position: relative; }
.ex__ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.ex__ring-track { fill: none; stroke: var(--gold-soft); stroke-width: 5; }
.ex__ring-fill { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.ex__ring-num {
  position: absolute;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-ink);
  line-height: 1;
}
.ex__ring-cap {
  position: absolute;
  bottom: -0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ex__head { align-items: flex-start; }
.ex__head-end { margin-left: auto; padding-left: 0.5rem; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin: 1.1rem 0 0;
  font-size: var(--fs-small);
  color: var(--on-sky-2);
}
.hero__proof b { color: var(--on-sky); font-weight: 600; }
.hero__proof span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__proof svg { width: 15px; height: 15px; color: var(--gold-light); flex: none; }

.search-wrap { position: relative; }
/* The hero console corner, which is where brand book §8 puts it. */
.mascot--corner {
  position: absolute;
  right: -18px;
  top: -50px;
  width: 78px; height: 78px;
  transform: rotate(5deg);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 47.99rem) { .mascot--corner { display: none; } }

/* --------------------------------------------------- 1b. audience strip --- */
/*
  Reference A opens with who this is for, and it is the fastest credibility on
  the page. The four painted scenes were made for exactly these four arguments
  in the 2026-09-04 scene set and have been referenced by nothing since.
*/
.audience { padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.audience__head { margin-bottom: 1.5rem; text-align: center; }
.audience__kicker {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.audience__grid { display: grid; gap: 1rem; }
@media (min-width: 34rem) and (max-width: 61.99rem) { .audience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .audience__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.aud {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.aud:hover { transform: translateY(-2px); border-color: var(--cobalt-line); }
.aud__art { display: block; width: 100%; height: 118px; object-fit: cover; object-position: center 62%; }
.aud__body { padding: 0.85rem 1rem 1.1rem; }
.aud__name { font-size: 0.98rem; font-weight: 700; margin: 0; }
.aud__line { margin: 0.25rem 0 0; font-size: var(--fs-small); color: var(--muted); }

/* --------------------------------------------------- 2b. the run ledger --- */
/*
  The "advanced" cue, and every row of it is what api/_intelligence.js actually
  instructs: at least eight distinct searches, varied by angle, the name in its
  native script, and never a contact-data aggregator as a source. The counts
  are the sample's, inside the "Sample evidence" boundary that labels them.
*/
.ledger {
  display: grid;
  gap: 0.65rem;
  margin: 0 auto clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  max-width: 54rem;
  padding: 0.9rem 1.1rem;
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
@media (min-width: 48rem) { .ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 1.25rem; } }
.ledger__item { display: grid; gap: 0.1rem; }
.ledger__n {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cobalt-ink);
  line-height: 1.1;
}
.ledger__k { font-size: 0.78rem; color: var(--muted); }

.never {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 46rem;
  margin: 0 auto clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  padding: 1rem 1.15rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-m);
}
.never svg { width: 20px; height: 20px; flex: none; margin-top: 0.15rem; color: var(--gold-ink); }
.never p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.never strong { color: var(--ink); }

.research { position: relative; }
.ink--trail { left: 50%; margin-left: 9rem; bottom: 7.5rem; width: 14.5rem; }

/* ------------------------------------------------------ 3. the benchmark --- */
/*
  The third surface. Two backgrounds three per cent apart made the middle of
  the page one continuous white sheet; the strongest claim on the page is the
  right place to break it.
*/
.bench {
  position: relative;
  background: var(--sky-deep);
  color: var(--on-sky);
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(3.5rem, 2.4rem + 3.6vw, 5.5rem);
}
.bench__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bench::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(30, 58, 110, 0.82) 0%, rgba(30, 58, 110, 0.9) 60%, rgba(30, 58, 110, 0.94) 100%);
}
.bench .h2, .bench .lede { color: var(--on-sky); }
.bench .lede { color: var(--on-sky-2); }

.bench__card {
  position: relative;
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--sky-line);
  border-radius: var(--radius-l);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bench__rows { display: grid; gap: 1.15rem; }
.bench__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.35rem 1rem;
}
.bench__name { margin: 0; font-weight: 600; font-size: var(--fs-small); color: var(--on-sky-2); }
.bench__row--ours .bench__name { color: var(--on-sky); font-weight: 700; }
.bench__score { margin: 0; font-weight: 700; font-size: 1.15rem; white-space: nowrap; color: var(--on-sky-2); }
.bench__row--ours .bench__score { color: var(--gold-light); font-size: 1.35rem; }
.bench__figures { grid-column: 1 / -1; width: 100%; height: auto; }
.bench__figures .fig--on { color: rgba(255, 255, 255, 0.82); }
.bench__figures .fig--off { color: rgba(255, 255, 255, 0.17); }
.bench__figures--ours .fig--on { color: var(--gold); }

.bench__method {
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--sky-line-soft);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--on-sky-2);
}
.bench__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.bench__aside { margin: 0; font-size: var(--fs-small); color: var(--on-sky-2); }
.ink--bench { right: 2%; top: 5.5rem; width: 13rem; }
@media (max-width: 61.99rem) { .bench__card { max-width: none; } }

/* ------------------------------------------------------------ 4. atlas --- */
.atlas { position: relative; overflow: hidden; }
.atlas__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.24;
  pointer-events: none;
}
.atlas > .wrap { position: relative; z-index: 1; }

/* Twenty markets, so every column count here divides twenty and no row is
   left ragged: 2, 4 and 5 across. */
.markets {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}
@media (max-width: 26rem) { .markets { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 46rem) { .markets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .markets { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.market {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.market img { display: block; width: 24px; height: 18px; border-radius: 2px; }
.market__who { display: grid; min-width: 0; }
.market__name { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
/*
  The legal-form suffix in the market's own script. Inter's subset carries no
  Thai, CJK, Khmer, Lao, Burmese, Bengali, Urdu or Arabic, and shipping those
  faces would cost megabytes against a 900 KB budget — so each one is set in
  the reader's own system font, with lang set so the right one is chosen.
*/
.market__form {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sources-read {
  max-width: 54rem;
  margin-inline: auto;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.sources-read__k {
  margin: 0 0 0.7rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.sources-read__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sources-read__list li {
  padding: 0.3rem 0.65rem;
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  color: var(--ink-2);
}
.sources-read__list li b { color: var(--cobalt-ink); font-weight: 600; }
.atlas__foot {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
}
.atlas__foot a { color: var(--cobalt-ink); }
.ink--atlas { left: 1%; top: 9rem; width: 13.5rem; }

/* --------------------------------------- 5. real product screenshots --- */
/*
  Brand book §6.2: a page that never shows the product making its claim is only
  assertion. These are the real workspace, driven against stubbed fixtures by
  .context/appqa/product-shots.mjs, so no customer data is anywhere near them.
  The frame is markup, not raster, so it stays crisp and the shot inside can be
  re-taken without an artist.
*/
.shotframe {
  /* A <figure> carries 1em/40px of UA margin, which pulled the frame in from
     both edges of the card and made the shot look like a thumbnail. */
  margin: auto 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 8px 20px rgba(15, 27, 45, 0.07);
}
.shotframe__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  background: var(--cloud);
  border-bottom: 1px solid var(--line);
}
.shotframe__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.shotframe__path {
  margin: 0 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shotframe img { display: block; width: 100%; height: auto; }
.shotframe--crop img { height: 208px; object-fit: cover; object-position: top center; }

.how__caption {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.ink--how { left: 0.5%; top: 6.5rem; width: 9.5rem; }
.how { position: relative; }

/* ---------------------------------------------- 6. hard cases, painted --- */
.case { overflow: hidden; padding: 0; display: grid; align-content: start; }
/*
  Crops are aimed per image, not shared (brand book §7.1) — each scene puts its
  subject somewhere different, and a shared crop showed sky on two of the four.
  The percentages are where the subject actually sits in the 660x495 source.
*/
.case__art { display: block; width: 100%; height: 128px; object-fit: cover; }
.cases__grid > li:nth-child(1) .case__art { object-position: center 42%; }  /* the empty frame */
.cases__grid > li:nth-child(2) .case__art { object-position: center 34%; }  /* the two blank signs */
.cases__grid > li:nth-child(3) .case__art { object-position: center 74%; }  /* the ownership climb */
.cases__grid > li:nth-child(4) .case__art { object-position: center 84%; }  /* the lit ledger */
.case__body { padding: 0.95rem 1.05rem 1.15rem; }
.case__icon { margin-bottom: 0.7rem; }
.case__title { font-size: var(--fs-h3); }

/* ------------------------------------------------- 7. credit arithmetic --- */
.arith {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.1rem;
}
@media (min-width: 26rem) { .arith { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.arith__cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.arith__cell svg { width: 18px; height: 18px; color: var(--cobalt-ink); flex: none; }
.arith__cell--found { background: var(--gold-soft); border-color: var(--gold-line); }
.arith__cell--found svg { color: var(--gold-ink); }
.arith__t { display: grid; gap: 0.05rem; min-width: 0; }
.arith__t b { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.arith__t span { font-size: 0.72rem; color: var(--muted); }
.arith__op { text-align: center; font-weight: 700; color: var(--muted); }
.arith__sum {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.8rem;
  background: var(--cobalt-soft);
  border: 1px solid var(--cobalt-line);
  border-radius: var(--radius-s);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cobalt-ink);
  text-align: center;
}

/* ------------------------------------------------------- 8. closing ------ */
.closing { position: relative; }
.mascot--closing {
  display: block;
  width: 84px; height: 84px;
  margin: 0 auto 0.5rem;
}
.ink--closing { right: 3%; bottom: 4.5rem; width: 13rem; }