/* Homepage-specific styles. Extracted from the design preview 2026-08-06.
   Layers on cinematic.css; introduces no new colours. */

  /* ---- preview-local: package strip + proof bar tightening ---- */
  /* Hero is tuned so the package strip — the prices — clears a 1440x900 fold.
     That is the whole point of the restructure; if the prices fall below the
     fold the ten-second rule is not met. */
  .hero--fold {
    min-height: auto; padding: 3.2rem var(--gutter) 0.85rem;
    display: flex; align-items: center;
  }
  .hero--fold .hero__inner { margin-inline: auto; }
  /* 4.0rem cap per Kevin. The three-line headline is ~45px taller than the
     two-line alternative even at the smaller size, so everything below it
     stays tight to keep the price row above the fold. */
  .hero--fold .hero__title { font-size: clamp(2.3rem, 5.1vw, 4.0rem); margin-bottom: 0.85rem; }
  .hero--fold .hero__sub {
    font-size: 1.05rem; margin: 0 auto 0.95rem; max-width: 52ch;
  }
  .hero--fold .hero__cta { margin-bottom: 0.55rem; }
  .hero--fold .hero__meta { margin-top: 0.15rem; }
  .packs { padding-top: 1rem; }
  .packs__head { margin-bottom: 0.6rem; }

  .proofbar {
    border-top: 1px solid var(--edge);
    border-bottom: 1px solid var(--edge);
    padding: 1.15rem var(--gutter);
    background: var(--ink-1);
  }
  /* ---- VARIANT A: case-file register ----
     Rows, not cards. Borrows the FILE:/STATUS: label register already used on
     services.html, about.html and contact.html, so it reads as this site's own
     document language rather than a generic three-up stat grid. */
  .register { max-width: var(--maxw); margin: 0 auto; }

  /* ---- vertical crawl ----
     Rows scroll upward continuously so the entry count is decoupled from the
     fold budget: adding a line costs no vertical space. Track is duplicated
     for a seamless loop; the clone is aria-hidden so screen readers hear the
     list once. Rows are a FIXED height -- a ragged track cannot loop
     seamlessly. */
  .crawl {
    --row-h: 2.85rem;
    --rows-visible: 3;
    height: calc(var(--row-h) * var(--rows-visible));
    overflow: hidden; position: relative;
    border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  }
  .crawl__track { animation: crawl-up 39s linear infinite; }
  /* Readable on demand: stop the motion whenever a human is engaging with it. */
  .crawl:hover .crawl__track,
  .crawl:focus-within .crawl__track { animation-play-state: paused; }
  @keyframes crawl-up {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(var(--row-h) * -12)); }
  }
  /* Top and bottom fade so rows enter and leave rather than snapping. */
  .crawl::before, .crawl::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5rem;
    pointer-events: none; z-index: 2;
  }
  .crawl::before { top: 0; background: linear-gradient(var(--ink-1), transparent); }
  .crawl::after { bottom: 0; background: linear-gradient(transparent, var(--ink-1)); }

  /* No motion: the crawl becomes a plain scrollable list. Nothing is hidden. */
  @media (prefers-reduced-motion: reduce) {
    .crawl { overflow-y: auto; }
    .crawl__track { animation: none; }
    .crawl__track--clone { display: none; }
  }

  .reg-row {
    display: grid;
    grid-template-columns: 5.5rem 15.5rem 1fr;
    align-items: center; gap: 1.1rem;
    height: var(--row-h); box-sizing: border-box;
    padding: 0 0.2rem; text-decoration: none;
    border-bottom: 1px solid rgba(61,53,40,0.55);
    transition: background .15s ease;
  }
  .reg-row:hover { background: rgba(63,240,128,0.045); }
  .reg-row__frame {
    font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--phosphor);
  }
  .reg-row__fig {
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(1.35rem, 2.5vw, 1.95rem); color: var(--caution);
    line-height: 1; white-space: nowrap;
  }
  /* Speed cannot be shown with one number — it only reads as movement. */
  .reg-row__fig .was { color: var(--bone-2); }
  .reg-row__fig .arrow { color: var(--bone-2); margin: 0 0.25rem; }
  .reg-row__said {
    font-family: var(--f-body); font-size: 0.9rem; line-height: 1.35;
    color: var(--bone-1);
  }
  .reg-row:hover .reg-row__said { color: var(--bone-0); }
  @media (max-width: 780px) {
    .reg-row { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.8rem 0; }
  }

  .packs { padding: 2.6rem var(--gutter) 3rem; }
  /* Six packages will not fit five columns, and a 3x2 grid puts the second row
     of prices below the fold -- which is the one thing this layout exists to
     prevent. So the strip runs wider than --maxw and the type tightens. */
  .packs__head {
    max-width: 84rem; margin: 0 auto 1.4rem;
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  }
  .packs__grid {
    max-width: 84rem; margin: 0 auto;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7rem;
  }
  .pack {
    background: var(--ink-2); border: 1px solid var(--edge);
    border-top: 3px solid var(--caution);
    padding: 0.95rem 0.9rem 0.9rem; display: flex; flex-direction: column;
    text-decoration: none; transition: background .18s ease, transform .18s ease;
  }
  .pack:hover { background: var(--ink-3); transform: translateY(-3px); }
  .pack__trigger {
    font-family: var(--f-body); font-size: 0.84rem; line-height: 1.28;
    color: var(--bone-0); margin: 0 0 0.6rem;
  }
  .pack__name {
    font-family: var(--f-display); font-weight: 700; font-size: 0.74rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--phosphor); margin-top: auto; line-height: 1.25;
  }
  .pack__price {
    font-family: var(--f-mono); font-size: 0.72rem; color: var(--caution);
    margin-top: 0.3rem; letter-spacing: 0;
  }
  .pack__price span { color: var(--bone-2); }
  /* Scarcity marker — signals limited capacity without committing to a number. */
  .pack--capped { border-top-color: var(--threat); }
  .pack__cap {
    font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--threat); margin-top: 0.28rem;
  }
  @media (max-width: 1100px) {
    .packs__grid { grid-template-columns: repeat(2, 1fr); }
    .proofbar__grid { grid-template-columns: 1fr; gap: 1rem; }
  }

  /* ---- below the fold: case-file teasers ---- */
  .cases-strip { padding: 3rem var(--gutter) 3.5rem; background: var(--ink-1);
    border-top: 1px solid var(--edge); }
  .cases-strip__head { max-width: 84rem; margin: 0 auto 1.4rem;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; flex-wrap: wrap; }
  .cases-strip__grid { max-width: 84rem; margin: 0 auto; display: grid;
    grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
  .tease { display: flex; flex-direction: column; text-decoration: none;
    background: var(--ink-2); border: 1px solid var(--edge);
    border-top: 3px solid var(--caution); padding: 1.1rem 1rem;
    transition: background .18s ease, transform .18s ease; }
  .tease:hover { background: var(--ink-3); transform: translateY(-3px); }
  .tease__k { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--phosphor); }
  .tease__h { font-family: var(--f-display); font-weight: 700; font-size: 1rem;
    line-height: 1.22; color: var(--bone-0); margin: 0.5rem 0 0.7rem; }
  .tease__fig { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem;
    color: var(--caution); margin-top: auto; line-height: 1; white-space: nowrap; }
  .tease__fig .was { color: var(--bone-2); }
  .tease__fig .arrow { color: var(--bone-2); margin: 0 0.18rem; }
  @media (max-width: 1000px) { .cases-strip__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- MOBILE ----
   The crawl needs a FIXED row height or the loop cannot be seamless, but the
   780px breakpoint stacks each row's contents, which overflowed that fixed
   height and overlapped. Fix is a taller row and fewer visible, not auto
   height: keep the loop intact and let each entry occupy two lines. */
@media (max-width: 780px) {
  .crawl { --row-h: 6.2rem; --rows-visible: 2; }
  .reg-row {
    grid-template-columns: 1fr;
    height: var(--row-h);
    align-content: center;
    gap: 0.15rem;
    padding: 0 0.2rem;
  }
  .reg-row__said { font-size: 0.86rem; line-height: 1.3; }
  @keyframes crawl-up {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(var(--row-h) * -12)); }
  }
  /* Eyebrow was running under the hamburger. */
  .hero--fold { padding-top: 5.2rem; }
  .hero--fold .hero__sub { font-size: 0.98rem; }
  .cases-strip__grid { grid-template-columns: 1fr; }
}