/* Home page (P1). Hero styles live in hero.css (C); everything here is page-only and prefixed home-. */
@layer pages {

  /* ---------- Shared bits ---------- */
  .home-copy { --stack-gap: 20px; align-content: start; }
  .home-copy .lede { max-width: 52ch; }

  .home-list { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--ink-2); }
  .home-list li { display: grid; grid-template-columns: 1.25em 1fr; gap: 12px; align-items: baseline; }
  .home-list .check { color: var(--accent); transform: translateY(.15em); }

  /* Panels on raised sections sit one step darker so the surface still reads. */
  .section--raised .panel { background: var(--bg-0); }

  /* ---------- #platform ---------- */
  .home-platform__head { max-width: none; margin-bottom: clamp(40px, 6vw, 72px); }
  .home-statement {
    max-width: 18ch;
    font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);
    line-height: 1;
    letter-spacing: -.04em;
  }
  .home-platform__head .lede { max-width: 60ch; }

  /* ---------- #alphe: routing demo ---------- */
  .home-alphe__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
  .home-alphe__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-content: start; min-width: 0; }
  .home-alphe__side .sec-head { margin: 0; }
  /* Single column: the CTAs follow the panel, so the tabs sit directly above the content they switch. */
  @media (max-width: 959.98px) {
    .home-alphe__side { display: contents; }
    .home-alphe__ctas { order: 1; }
  }

  .home-alphe__tabs-wrap { position: relative; }
  .home-alphe__tablist {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
  }
  .home-alphe__tablist::-webkit-scrollbar { display: none; }
  /* Phones: four tabs do not fit one row, and a clipped strip hides the last scenarios. Two by two. */
  @media (max-width: 639.98px) {
    .home-alphe__tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 2px 0; }
  }
  .home-alphe__tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-1);
    background: transparent;
    color: var(--ink-2);
    font: 500 var(--fs-small)/1 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--d-xs) var(--ease-ui), border-color var(--d-xs) var(--ease-ui), background-color var(--d-xs) var(--ease-ui);
  }
  .home-alphe__tab:hover { color: var(--ink); border-color: var(--line-3); }
  .home-alphe__tab[aria-selected="true"] { color: var(--ink); border-color: var(--accent); background: var(--bg-2); }
  .home-alphe__n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .home-alphe__tab[aria-selected="true"] .home-alphe__n { color: var(--accent-text); }
  .home-alphe__rail { display: none; }

  .home-alphe__panels { display: grid; gap: 24px; min-width: 0; }
  .home-alphe__panel { min-width: 0; }
  .home-alphe__panel[hidden] { display: none; }
  .home-alphe__panel .panel__body { display: grid; gap: 20px; }
  .home-alphe__pn { color: var(--ink-3); margin-right: 6px; }

  .home-alphe__log { display: grid; gap: 12px; margin: 0; }
  .home-alphe__row { display: grid; grid-template-columns: 4.5rem 1fr; gap: 12px; align-items: baseline; }
  .home-alphe__row dt { justify-self: start; color: var(--ink-3); }
  .home-alphe__row dd { margin: 0; color: var(--ink-2); }
  .home-alphe__q { color: var(--ink) !important; font-size: 1.0625rem; }
  .home-alphe__model { color: var(--ink); font-weight: 500; }

  .home-route { display: block; width: 100%; height: auto; overflow: visible; }
  .home-route path { fill: none; stroke-linecap: round; }
  .home-route__in, .home-route__lane { stroke: var(--line-2); stroke-width: 1.25; }
  .home-route__hot { stroke: var(--accent); stroke-width: 2; }
  .home-route__end { fill: var(--bg-3); }
  .home-route__end.is-on { fill: var(--accent); }
  .home-route__label { fill: var(--ink-3); font: 400 12px var(--font-mono); }
  .home-route__label.is-on { fill: var(--ink); font-weight: 500; }
  .home-route__cap { fill: var(--ink-3); font: 500 10px var(--font-mono); letter-spacing: .08em; }
  .home-route__node { fill: var(--bg-0); stroke: var(--accent); stroke-width: 1.5; }
  .home-route__comet { fill: var(--accent); }
  /* Under 640px the 640-unit drawing renders at half size or less, so its labels would be unreadably small:
     show the lanes only (the chosen model is named in the log line above). The box takes the ratio of the
     lanes alone (x 0-470) and preserveAspectRatio="xMinYMid slice" crops the empty label column. */
  @media (max-width: 639.98px) {
    .home-route { aspect-ratio: 470 / 240; overflow: hidden; }
    .home-route__label, .home-route__cap { display: none; }
    .home-route__lane, .home-route__in { stroke-width: 2; }
    .home-route__hot { stroke-width: 3; }
  }
  @media (min-width: 960px) {
    .home-route__label { font-size: 13px; }
  }

  .home-alphe__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 0;
    background: var(--line-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-1);
    overflow: hidden;
  }
  .home-alphe__stat { display: grid; gap: 6px; align-content: start; padding: 14px 16px; background: var(--bg-0); }
  .home-alphe__stat dt { justify-self: start; color: var(--ink-3); }
  .home-alphe__stat dd { margin: 0; }
  .home-alphe__val { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .home-alphe__bar { padding-top: 6px; }

  /* No JS: tabs are meaningless, every scenario is shown in order. */
  html.no-js .home-alphe__tabs-wrap { display: none; }

  @media (min-width: 960px) {
    .home-alphe__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
    .home-alphe__tabs-wrap { display: grid; grid-template-columns: 2px 1fr; gap: 20px; }
    html.no-js .home-alphe__tabs-wrap { display: none; }
    .home-alphe__tablist { grid-column: 2; flex-direction: column; gap: 0; overflow: visible; margin: 0; padding: 0; border-top: 1px solid var(--line-1); }
    .home-alphe__tab {
      justify-content: flex-start;
      width: 100%;
      min-height: 52px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid var(--line-1);
      border-radius: 0;
      background: transparent;
      font-size: .8125rem;
    }
    .home-alphe__tab[aria-selected="true"] { background: transparent; }
    .home-alphe__tab:hover { border-color: var(--line-1); }
    .home-alphe__tab::after {
      content: "";
      width: 6px;
      height: 6px;
      margin-left: auto;
      background: var(--accent);
      opacity: 0;
      transition: opacity var(--d-xs) var(--ease-ui);
    }
    .home-alphe__tab[aria-selected="true"]::after { opacity: 1; }
    .home-alphe__rail { display: block; grid-column: 1; grid-row: 1; width: 2px; background: var(--line-2); }
    .home-alphe__rail-fill { display: block; height: 100%; background: var(--accent); transform: scaleY(var(--p, .25)); transform-origin: top; }

    /* Set by home.js while the section is pinned (desktop, motion on). */
    .home-alphe.is-pinned { min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--header-h) + 16px) 24px; }
    /* The pin wraps #alphe in ScrollTrigger's .pin-spacer, which breaks the section-seam sibling rules (site.css).
       ScrollTrigger measures the section unwrapped, so the seam padding must not apply then either,
       and the seam below the spacer is restored by hand. */
    .home-alphe.is-pinned > .shell { padding-top: 0; border-top: 0; }
    .pin-spacer + .section { padding-top: 0; }
    .pin-spacer + .section > .shell:first-child { padding-top: var(--py); border-top: 1px solid var(--line-2); }
    /* While pinned the section is always transformed or fixed, so it paints over main's edge rules
       (site.css main.rules::before). It draws the same rules itself (::before), plus the seam hairline
       its shell gave up above (::after, shell width, like the site.css seam). */
    .home-alphe.is-pinned { position: relative; }
    .home-alphe.is-pinned::before,
    .home-alphe.is-pinned::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
    .home-alphe.is-pinned::before {
      inset-block: 0;
      inset-inline: max(calc(var(--gutter) * .5), calc((100% - var(--max)) / 2 - var(--gutter) * .5));
      border-inline: 1px solid var(--line-1);
    }
    .home-alphe.is-pinned::after {
      top: 0;
      inset-inline: max(0px, calc((100% - var(--max)) / 2 - var(--gutter)));
      border-top: 1px solid var(--line-2);
    }
  }

  /* ---------- #voice ---------- */
  /* Centred against the copy column instead of stretched to it, so the panel never ends in an empty band. */
  .home-voice__panel { align-self: center; }
  .home-voice__panel .panel__body { display: grid; gap: 20px; }
  .home-voice__voices { margin: 0; padding: 0; list-style: none; gap: 8px; }
  .home-voice__voices .chip.is-selected { border-color: var(--accent); color: var(--ink); }
  .home-voice__clone { gap: 6px; border-style: dashed; }
  .home-voice__clone .ico { width: .9em; height: .9em; }
  .home-voice__wave { height: 88px; border-block: 1px solid var(--line-1); }
  .home-voice__transcript { display: grid; gap: 10px; margin: 0; }
  .home-voice__turn { display: grid; grid-template-columns: 4.5rem 1fr; gap: 12px; align-items: baseline; }
  .home-voice__turn dt { justify-self: start; color: var(--ink-3); }
  .home-voice__turn dd { margin: 0; color: var(--ink); }
  .home-voice__esc {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--line-1);
    color: var(--ink-2);
    font: 500 var(--fs-small)/1.4 var(--font-mono);
  }
  .home-voice__esc .check { color: var(--accent); }

  /* ---------- #agents ---------- */
  .home-agents__split { align-items: start; }
  .home-agents__steps { grid-template-columns: 1fr !important; }
  .home-agents__term { margin: 0; min-width: 0; }
  @media (min-width: 960px) {
    .home-agents__term { position: sticky; top: calc(var(--header-h) + 32px); }
  }

  /* ---------- #integrations ---------- */
  .home-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-int {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: clamp(24px, 4vw, 40px) 16px;
    --logo-size: 32px;
  }
  .home-int__name { color: var(--ink-3); font: 500 var(--fs-eyebrow)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
  .home-int:hover .logo { color: var(--ink); }
  @media (min-width: 640px) { .home-int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ---------- #governance: approval queue ---------- */
  .home-queue .panel__body { display: grid; gap: 0; padding-block: 0; }
  .home-queue__list { margin: 0; padding: 0; list-style: none; }
  .home-queue__item { display: grid; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line-1); }
  .home-queue__text { margin: 0; color: var(--ink); }
  .home-queue__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .home-queue__actions { display: inline-flex; gap: 8px; }
  .home-queue__status { color: var(--ink-2); font: 500 var(--fs-small)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
  .home-queue__item[data-state="approve"] .home-queue__status { color: var(--success); }
  .home-queue__item[data-state="reject"] .home-queue__status { color: var(--danger); }
  .home-queue__item[data-state] .home-queue__text { color: var(--ink-2); }
  .home-queue__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    margin: 0;
    color: var(--ink-3);
    font: 500 var(--fs-small)/1.4 var(--font-mono);
  }
  .home-queue__reset[hidden], .home-queue__status[hidden], .home-queue__actions[hidden] { display: none; }
  .home-queue__status:focus { outline: none; }
  .home-queue__status:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  /* Without JS the buttons would do nothing, so the mock shows the queue only. */
  html.no-js .home-queue__actions { display: none; }

  /* ---------- #models: library ---------- */
  @media (min-width: 960px) {
    .home-models .split > .home-lib { order: -1; }
  }
  .home-lib .panel__head { gap: 12px; }
  .home-lib__saved { color: var(--accent-text); font: 500 var(--fs-small)/1 var(--font-mono); }
  .home-lib .panel__body { display: grid; gap: 16px; }
  .home-lib__filters { gap: 8px; }
  html.no-js .home-lib__filters { display: none; }
  .home-lib__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .home-model {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--line-1);
    border-radius: var(--r-2);
    background: var(--bg-1);
  }
  .home-model[hidden] { display: none; }
  .home-model.is-on { border-color: var(--line-2); }
  .home-model:not(.is-on) { border-style: dashed; background: transparent; }
  .home-model__provider { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font: 500 var(--fs-eyebrow)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
  .home-model__badge {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--r-1);
    background: var(--bg-3);
    color: var(--ink);
    --logo-size: 14px;
  }
  .home-model__badge .logo-img { width: 14px; height: 14px; }
  .home-model__badge--own { color: var(--accent); }
  .home-model__badge--own .ico { width: 12px; height: 12px; }
  .home-model__name { color: var(--ink); font-size: 1rem; line-height: 1.3; }
  .home-model:not(.is-on) .home-model__name { color: var(--ink-2); }
  .home-model__meta { color: var(--ink-3); font: 400 var(--fs-small)/1.3 var(--font-mono); }
  .home-model__state { position: absolute; top: 14px; right: 14px; display: flex; }
  .home-model__state .dot:not(.dot--live) { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }
  .home-model__state .dot--live { background: var(--success); }
  .home-lib__foot { margin: 0; color: var(--ink-3); font: 500 var(--fs-small)/1.4 var(--font-mono); }
}