/* home `/` · page layout glue only, scoped under main.pg-hm. The three assets style themselves (.hm-bridge, .hm-numerals,
   .hm-endmarks); nothing here restyles them (assets.md §6 D-B3). Band order and its reason: build/pages/home/spec.md §3.
   Rhythm is v4.css only (--sec, .shead 64, .wrap 1280/24): nothing here adds section padding. */
/* home background test (2026-09-30, user: "change our background color to 101010 of our home"): every --dk surface on home */
body.pg-hm{--dk:#101010}
.pg-hm{
  --hm-w14:rgba(255,255,255,.14);   /* visible hairlines on dark: the V14 floor (v4.css has no 14% white token; --dk-line is .08) */
}

/* ---------- hero (dark): no pill (R12), so the H1 sits on the 88px top padding itself (V3). l1 carries the keyword on one
   line at 1440 (1127px, so the 980 cap lifts to the 1232 wrap, as .hero.pwh does); at 761-1100 it breaks after "people" only. */
.pg-hm .hero.home .h1{margin-top:0;max-width:1232px}
/* split top (2026-09-30, the user's ElevenLabs reference): H1, CTAs and the scope line left; one paragraph right, set on the
   H1's first line. Left-aligned and shorter, so the two card links sit higher and larger. */
.pg-hm .hero.home{padding-top:72px;text-align:left}
.pg-hm .hm-top{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:80px;align-items:start}
.pg-hm .hm-top .h1{margin:0;max-width:none;font-size:56px;line-height:60px}
.pg-hm .hm-top .h1 .l2{font-size:60px;line-height:62px}
.pg-hm .hm-top .ctas{justify-content:flex-start;margin-top:32px}
.pg-hm .hm-top .micro-cta{margin-top:12px}
.pg-hm .hm-top .sub.hm-top-r{margin:10px 0 0;max-width:420px;font-size:17px;line-height:27px;color:var(--w-60)}
.pg-hm .hero.home .hm-bridge{margin-top:56px}
.pg-hm .hero.home .hm-l1b{display:inline}
.pg-hm .micro-cta{color:var(--w-60)}     /* the A6 floor for small text on --dk (the shared w-45 is 4.4:1) */

/* ---------- section heads: the stacked head (H2 across the wrap, body under it at ~620) so each tone holds one line (C3) ---------- */
.pg-hm .shead.stack .body{max-width:620px}

/* ---------- #what (white) ---------- */
.pg-hm .hm-more{margin-top:48px}

/* ---------- #ai-agents (dark, type-only): copy on the left, the seven-row stage index on the right. The index is plain
   hairline rows: no icons, numbers, rails or connectors (brief). Rows read top to bottom in the architecture's order. ---------- */
/* DOM order is the reading order (sentence, phrase, index, pull line, exits), so a single column ends on its links; at >=1101
   the index takes the right column across both rows and the pull line + exits sit under the copy. */
.pg-hm .hm-ag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"a idx" "b idx";column-gap:96px;align-items:start}
.pg-hm .hm-ag>*{min-width:0}
.pg-hm .hm-ag-a{grid-area:a}
.pg-hm .hm-stages{grid-area:idx}
.pg-hm .hm-ag-b{grid-area:b}
.pg-hm .hm-lead{max-width:500px;font-size:18px;line-height:29px;color:var(--w-85)}
.pg-hm .hm-fixed{margin-top:16px;font-size:15px;line-height:24px;color:var(--w-60)}
.pg-hm .hm-pull{margin-top:56px;max-width:560px;font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 72;
  font-size:36px;line-height:40px;letter-spacing:-.02em;color:#fff}          /* the page's one extra serif moment (V6) */
.pg-hm .hm-pull span{display:block}
.pg-hm .hm-end{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:48px}
.pg-hm .hm-stages{margin:0;padding:0;list-style:none;border-top:1px solid var(--hm-w14)}
.pg-hm .hm-stages li{display:grid;grid-template-columns:128px minmax(0,1fr);column-gap:24px;align-items:baseline;padding:17px 0 18px;border-bottom:1px solid var(--hm-w14)}
.pg-hm .hm-stages h3{font-size:16px;line-height:24px;font-weight:500;color:#fff}
.pg-hm .hm-stages p{font-size:15px;line-height:24px;color:var(--w-60)}
.pg-hm .hm-stages a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--w-35);transition:text-decoration-color .15s var(--ease)}
.pg-hm .hm-stages a:hover{text-decoration-color:#fff}

/* ---------- #passwordless (ivory, type-only): the answer under the head, three capabilities read left to right on their own
   hairlines (not the agents chapter's copy-and-index, so the two chapters never read as twins, F49), then the two exits. ---------- */
.pg-hm .hm-pw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;margin:0;padding:0;list-style:none}
.pg-hm .hm-pw li{min-width:0;padding-top:24px;border-top:1px solid var(--ink-15)}
.pg-hm .hm-pw h3{font-size:17px;line-height:26px;font-weight:500;color:var(--ink)}
.pg-hm .hm-pw p{margin-top:8px;max-width:340px;font-size:15px;line-height:24px;color:var(--ink-60)}
.pg-hm .hm-pw a,.pg-hm .hm-faq p a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--ink-40);transition:text-decoration-color .15s var(--ease)}
.pg-hm .hm-pw a:hover,.pg-hm .hm-faq p a:hover{text-decoration-color:var(--ink)}
.pg-hm .hm-pw-end{margin-top:64px}
.pg-hm .hm-pw-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-bottom:28px}
.pg-hm .hm-micro{margin-top:14px;font-size:12.5px;line-height:18px;color:var(--ink-60)}

/* ---------- #faq (white, after ivory, so no .rule): the stacked head, then the list in the right two thirds, the
   title-left / list-right idea re-set so "Hawcx questions, answered." still holds one line (C3). The list's left edge sits on
   the page's second third-column line (x 531 at 1440), the same line as the #what numerals and the #passwordless rows directly
   above it (both are 3 columns with a 48px gap), so the offset reads as the grid, not as a stray indent (gate 2). ---------- */
.pg-hm .hm-faq{margin-left:calc((100% - 96px) / 3 + 48px)}

/* ---------- #close (dark): the H2 is hm-endmarks; the CTA pair and its scope line under it ---------- */
.pg-hm .hm-close-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:48px}

@media (max-width:1100px){
  .pg-hm .hm-top{grid-template-columns:minmax(0,1fr) 340px;column-gap:48px}
  .pg-hm .hm-top .h1{font-size:46px;line-height:50px}
  .pg-hm .hm-top .h1 .l2{font-size:50px;line-height:52px}
  .pg-hm .hm-top .sub.hm-top-r{font-size:16px;line-height:25px}
  .pg-hm .hm-ag{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"a" "idx" "b";row-gap:48px}
  .pg-hm .hm-ag-b .hm-pull{margin-top:16px}
  .pg-hm .hm-pw{column-gap:32px}
  .pg-hm .hm-faq{margin-left:0}
}
@media (max-width:900px){
  .pg-hm .hm-top{grid-template-columns:minmax(0,1fr);row-gap:0}
  .pg-hm .hm-top-l{display:contents}            /* stacked: H1, paragraph, CTAs, scope line */
  .pg-hm .hm-top .h1{grid-row:1}
  .pg-hm .hm-top .sub.hm-top-r{grid-row:2;margin-top:20px;max-width:560px}
  .pg-hm .hm-top .ctas{grid-row:3;margin-top:28px}
  .pg-hm .hm-top .micro-cta{grid-row:4}
}
@media (max-width:760px){
  .pg-hm .hero.home{padding-top:40px}
  .pg-hm .hero.home .hm-bridge{margin-top:40px}
  /* the keyword l1 (28 characters) takes two lines at 390 at 36px; the serif l2 is one */
  .pg-hm .hero.home .h1{font-size:36px;line-height:39px}
  .pg-hm .hero.home .h1 .l2{font-size:40px;line-height:43px}
  .pg-hm .hm-lead{font-size:17px;line-height:28px}
  .pg-hm .hm-ag{row-gap:40px}
  .pg-hm .hm-pull{font-size:30px;line-height:34px}
  .pg-hm .hm-end{margin-top:36px}
  .pg-hm .hm-stages li{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:14px 0 15px}
  .pg-hm .hm-pw{grid-template-columns:minmax(0,1fr);row-gap:0}
  .pg-hm .hm-pw li{padding:20px 0}
  .pg-hm .hm-pw li:last-child{border-bottom:1px solid var(--ink-15)}
  .pg-hm .hm-pw p{max-width:none}
  .pg-hm .hm-pw-end{margin-top:40px}
  .pg-hm .hm-more{margin-top:32px}
  .pg-hm .hm-close-ctas{margin-top:36px}
}

/* ---------- 2026-10-01: #what and #faq are gone; #enterprise and #close are dark ---------- */
/* #enterprise on --dk: the track in dark tones */
.pg-hm #enterprise .hm-en{color:#fff}
.pg-hm #enterprise .hm-en .eyebrow{color:rgba(255,255,255,.6)}
.pg-hm #enterprise .hm-en .h2{color:#fff}
.pg-hm #enterprise .hm-en-p,.pg-hm #enterprise .hm-en-track p{color:rgba(255,255,255,.58)}
.pg-hm #enterprise .hm-en>.btn-primary{background:#fff;color:#0a0a0a}
.pg-hm #enterprise .hm-en-track .bar{background:#1d1d1f}
.pg-hm #enterprise .hm-en-track .fill{background:#2e2e31}
.pg-hm #enterprise .hm-en-track .dot{background:#fff}
.pg-hm #enterprise .hm-en-track li::before{border-left-color:rgba(255,255,255,.26)}
.pg-hm #enterprise+#close{padding-top:0}
/* #close: one painted grain panel (ElevenLabs' grainy light, in our blues); a two-tone line bottom-left, two pills bottom-right */
.pg-hm .hm-close-panel{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;height:440px;padding:56px;border-radius:24px;
  background:#0a0d1c url(/assets/close-grain.webp) 50% 50%/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden}
.pg-hm .hm-close-h{margin:0;font-size:48px;line-height:52px;font-weight:450;letter-spacing:-.022em;color:#fff}
.pg-hm .hm-close-h .dim{color:rgba(255,255,255,.62)}
.pg-hm .hm-close-panel .hm-close-ctas{flex:none;margin:0}
@media (max-width:1100px){
  .pg-hm .hm-close-panel{height:400px;padding:44px}
  .pg-hm .hm-close-h{font-size:40px;line-height:44px}
}
@media (max-width:760px){
  .pg-hm .hm-close-panel{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:28px;height:420px;padding:28px 24px;border-radius:20px}
  .pg-hm .hm-close-h{font-size:32px;line-height:36px}
}