/* ============================================================================
   Likidera — Homepage layer (v5, v2 cut)
   Composition on top of tokens/base/components. Five sections: hero · facts ·
   capabilities · explore (three photo teasers) · closing CTA. The shared
   ruler, shot, photo, teaser and CTA components now live in components.css;
   what remains here is what only the homepage uses.
   ============================================================================ */

/* Hero: 90 forward days on the container width. */
.ruler--horizon [data-tick="today"] { --at: 0%; }
.ruler--horizon [data-tick="+7"] { --at: 7.8%; }
.ruler--horizon [data-tick="+30"] { --at: 33%; }
.ruler--horizon [data-tick="+90"] { --at: 100%; }


/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  padding-bottom: var(--space-5);
}

.hero__glow {
  position: absolute;
  z-index: -1;
  top: -20%;
  right: -10%;
  width: 78%;
  height: 130%;
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.hero__copy {
  max-width: 36rem;
  container-type: inline-size;
}

/* Fitted to the copy column: the accent run "in the next 90 days?" measures
   8.63em at 700/-0.032em, so font-size <= 11.6cqw keeps it on one line;
   11.2cqw leaves 3–4% air. Balanced, this is three lines from 320 to 1920
   ("How much cash / will you have / in the next 90 days?"). Re-measure if
   the H1 copy changes. The cq-free fallback keeps --text-display. */
.hero__title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-5);
  text-wrap: balance;
}
@supports (font-size: 1cqw) {
  .hero__title { font-size: clamp(2rem, 11.2cqw, var(--text-display)); }
}
/* The line carrying the horizon steps down in the accent. */
.hero__title .accent { display: block; }

.hero__lead {
  margin-top: var(--space-5);
  max-width: 32rem;
}

.hero__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero__actions .btn { width: 100%; }
@media (min-width: 480px) {
  .hero__actions { display: flex; flex-wrap: wrap; }
  .hero__actions .btn { width: auto; }
}

/* Proof chips: three plain links under the actions. */
.hero__chips {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
/* The three chips were links until the 2026-09-08 link audit de-linked them
   to plain list items; the rule stayed on the anchor and stopped matching, which
   stacked each icon above its line. It now addresses the item itself. */
.hero__chips li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: 0.15rem;
  color: var(--text-muted);
}
.hero__chips .icon { color: var(--brand); margin-top: 0.25em; }

/* ---- Visual column: one product screen, its title, one line, one link ------ */
.hero__visual { min-width: 0; }
/* One Dashboard capture, no run-out detail over it (owner, 2026-10-26: the
   large screen only, without the zoomed crop under it). */
.hero__visual-title {
  margin-top: var(--space-4);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.hero__visual-line {
  margin-top: var(--space-1);
  color: var(--text-muted);
}
.hero__visual .link-arrow {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.hero .ruler { margin-top: var(--space-6); }

@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
}
/* Wide screens: the frame leans into the right gutter, 24px air kept. */
@media (min-width: 1340px) {
  .hero__visual {
    margin-right: min(0px, calc(-1 * ((100vw - var(--container)) / 2 - var(--space-5))));
  }
}
/* Wide desktop: the hero claims the screen. */
@media (min-width: 1440px) {
  .hero__inner {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    column-gap: var(--space-8);
  }
  .hero__copy { max-width: 40rem; }
  .hero__glow { width: 88%; }
  .hero__visual {
    margin-right: min(0px, calc(-1 * ((100vw - var(--container-wide)) / 2 - var(--space-6))));
  }
}

/* ---- Opening moment ---------------------------------------------------------
   Short: copy rises in 40ms steps, the frame follows, the ruler draws.
   Once, under .js, silent under reduced motion. Kept brief so the largest
   element paints early. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__copy > * { animation: rise-in 400ms var(--ease-out) both; }
  .js .hero__copy > :nth-child(2) { animation-delay: 40ms; }
  .js .hero__copy > :nth-child(3) { animation-delay: 80ms; }
  .js .hero__copy > :nth-child(4) { animation-delay: 120ms; }
  .js .hero__copy > :nth-child(5) { animation-delay: 160ms; }
  .js .hero__visual { animation: rise-in 500ms var(--ease-out) 80ms both; }
  .js .hero .ruler__track {
    transform-origin: left;
    animation: draw-x 500ms var(--ease-out) 200ms both;
  }
  .js .hero .ruler__label { animation: fade-in 200ms var(--ease-out) 500ms both; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes draw-x {
  from { transform: scaleX(0); }
  to { transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* The run has no head: it opens itself with ~1.55x the internal gap so the
   first teaser reads as a new movement, not a fourth capability card. No
   rule, tint or texture at the seam - the section hairline is the only one. */
#explore { padding-block-start: calc(var(--section-y) + var(--space-5)); }

/* Per-photograph crop centres (direction v2.3 §7.1). They were lost with the
   retired --wide slot classes in the explore-run rework; the frames are now
   16:10 at desktop rather than 21:9 / 4:3, so these are the published values
   applied to the current frames, not re-derived ones. */
.teaser--lead .teaser__media { --focus: 48% 42%; }
.teaser--flip .teaser__media { --focus: 55% 30%; }
/* ═══════════════ CAPABILITIES — six cards + six-areas strip ═══════════════ */
.capabilities .section-head { margin-bottom: var(--space-7); }

.capability-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Whole card is the link; the arrow slides on hover. */
.capability {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  color: var(--text);
}
.capability__icon { color: var(--text-muted); }
.capability h3 {
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}
.capability p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Six areas: one row of links separated by teal points, caption beneath. */
.areas-strip {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.areas-strip li { display: inline-flex; align-items: center; }
.areas-strip li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brand);
  margin-inline: var(--space-4);
}
/* .areas-strip items stopped being links in the 2026-09-08 link audit; the
   layout lives on the li, so nothing visible changed, and the dead anchor rules
   were removed the same day the chip rule above was found to have died the
   same way. */
.areas-strip__caption {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
}
.areas-strip__caption cite { font-style: normal; }


/* ═══════════════ REVEAL STAGGER ═══════════════ */
.js .capability-grid > [data-reveal]:nth-child(2) { --reveal-delay: 70ms; }
.js .capability-grid > [data-reveal]:nth-child(3) { --reveal-delay: 140ms; }
.js .capability-grid > [data-reveal]:nth-child(4) { --reveal-delay: 210ms; }
.js .capability-grid > [data-reveal]:nth-child(5) { --reveal-delay: 280ms; }
.js .capability-grid > [data-reveal]:nth-child(6) { --reveal-delay: 350ms; }