/* BeargrassAI 2.0.0 · page prototype: Validated Directory (BEA-432), after the kit. Still first; html.m adds motion. */
.hero-art .glow { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-art .twp { position: absolute; z-index: 2; left: 0; top: 0; width: 240px; height: 240px; margin: 0; transform-origin: 0 0; visibility: hidden; }
.hero-art .twp.laid { visibility: visible; }
.hero-art .twp i { padding: 4px 5px; font-size: 9px; }

/* 2 · The record made (night) */
.made { position: relative; background: linear-gradient(180deg, #0a1024 0%, #0c1429 38%, #0f1830 100%); }
html:not(.m) .made .stage { background-image: linear-gradient(rgba(240, 230, 207, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 230, 207, 0.06) 1px, transparent 1px); background-size: 62px 62px; }
.made-head { position: relative; z-index: 2; padding-top: 28px; padding-bottom: 4px; }
.m .made .lines-box { top: 72px; }
.made-head h2 { max-width: 19ch; color: var(--white); }
.made-say { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--cream-2); max-width: 44ch; }
.pages { position: relative; z-index: 3; width: min(100% - 32px, 560px); margin: 30px auto 0; }
.pages-k { width: fit-content; font: 500 11px/1.45 var(--mono); letter-spacing: 0.04em; color: var(--cream-2); }
.pg-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.pg { position: relative; height: 62px; padding: 6px 6px 0; background: rgba(12, 19, 38, 0.94); border: 1px solid rgba(244, 196, 90, 0.6); --cm: rgba(244, 196, 90, 0.75); }
.pg span { position: relative; display: block; font: 500 10px/1 var(--mono); letter-spacing: 0.02em; color: var(--gold-bright); white-space: nowrap; }
.pg::after { content: ""; position: absolute; left: 6px; right: 9px; top: 22px; bottom: 9px; background: repeating-linear-gradient(180deg, rgba(240, 230, 207, 0.28) 0 1px, transparent 1px 7px); }
.made .rec { margin-top: 26px; }
.rl dd.rec-sub { margin-top: 2px; font: 600 13.5px/1.4 var(--sans); color: var(--cream-2); }
.rl dd .dt-d { display: block; font: 400 11.5px/1.5 var(--mono); color: var(--cream-2); }
.rl dd .dt-c { color: var(--gold-bright); }
.made .jsonld { font-size: 11px; line-height: 1.55; padding: 14px 14px 16px; }
.jsonld .jl-cite em { color: #ffe2a0; }
.made .brand .b-label { display: none; }
.area { position: relative; z-index: 2; width: min(100% - 48px, 330px); margin: 30px auto 0; }
.area-map { display: block; width: 100%; height: auto; overflow: visible; }
.vly { fill: rgba(244, 196, 90, 0.04); stroke: rgba(240, 230, 207, 0.4); stroke-dasharray: 2 4; }
.vly-lit { fill: rgba(244, 196, 90, 0.07); stroke: var(--gold-bright); stroke-dasharray: 3 3; }
.area text { font: 500 var(--fs, 9px) var(--mono); fill: var(--cream); letter-spacing: 0.02em; }
.area .vly-t { fill: var(--gold-bright); text-anchor: middle; }
.tn-s { fill: rgba(244, 196, 90, 0.3); stroke: var(--gold-bright); }
.tn-x { fill: none; stroke: #fff3cf; stroke-width: 1.4; }
.made .tools { margin-top: 6px; padding-bottom: 8px; }
.cite-wrap { position: relative; z-index: 2; padding-top: 34px; padding-bottom: 70px; }
.cite-k { font: 500 12px/1.45 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.cite { max-width: 780px; margin: 14px 0 0; padding: 18px 18px 20px; background: var(--glass); border: 1px solid rgba(244, 196, 90, 0.6); --cm: rgba(244, 196, 90, 0.85); box-shadow: 0 0 50px -18px rgba(244, 196, 90, 0.4); }
.cite p { font: 400 14.5px/1.65 var(--mono); color: var(--cream); overflow-wrap: anywhere; }
.cite a { color: var(--gold-bright); text-decoration-color: rgba(244, 196, 90, 0.5); }
.cite-src { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--cream-2); max-width: 60ch; }
.cite-src a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); font-weight: 600; white-space: nowrap; }

/* 3 · Why it comes first (dawn) */
.why { position: relative; }
.why-head { padding: 58px 0 30px; background: linear-gradient(180deg, #0f1830 0%, var(--night-2) 34%, #24364f 72%, var(--indigo) 100%); }
.why-head .eyebrow { color: var(--cream); }
.why-head h2 { max-width: 14ch; color: var(--white); }
.why .card-c { max-width: 100%; }
.why-card .face-day, .why-card .face-night { display: block; }
.why-body { display: grid; gap: 16px; padding: 22px 20px 26px; }
.why-body p { font-size: 17.5px; line-height: 1.62; color: var(--ink); max-width: 60ch; }
.why-body .pull { font: 400 var(--fs-pull)/1.18 var(--display); letter-spacing: -0.005em; max-width: 20ch; margin: 4px 0; padding: 18px 0; border: solid rgba(35, 31, 26, 0.3); border-width: 1px 0; text-wrap: balance; }
.face-night .why-body p { color: var(--cream); }
.face-night .why-body .pull { border-color: var(--rule); }

/* 4 · What you get, the price (day) */
.deal { position: relative; padding: 62px 0 34px; }
.deal-in { display: grid; gap: 34px; }
.deal h2 { max-width: 16ch; }
.gets { display: grid; margin-top: 22px; }
.gets li { position: relative; padding: 11px 0 11px 22px; font-size: 17px; line-height: 1.5; border-top: 1px solid var(--rule-ink); }
.gets li:first-child { border-top: 0; }
.gets li::before { content: ""; position: absolute; left: 1px; top: 19px; width: 7px; height: 7px; border: 1px solid var(--ink); }
.price-card { align-self: start; padding: 22px 20px 24px; background: var(--paper-hi); border: 1px solid var(--ink); box-shadow: 0 30px 60px -38px rgba(35, 31, 26, 0.55); }
.pc-k { font: 500 12px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.pc-p { margin-top: 10px; font: 500 clamp(48px, 14vw, 68px)/1 var(--mono); letter-spacing: -0.03em; }
.pc-p span { font-size: 0.3em; letter-spacing: 0; font-weight: 400; color: var(--ink-2); }
.pc-say { margin-top: 12px; font: 400 24px/1.2 var(--display); }
.pc-terms { margin-top: 12px; font: 400 13.5px/1.55 var(--mono); color: var(--ink-2); }
.pc-act { margin-top: 20px; }
.pc-act .btn { min-width: 150px; }

/* 5 · Chambers and groups (day), on the kit's finding and meter. 6 · The directory's own site (day). */
.groups { padding: 64px 0 26px; }
.across { padding: 58px 0 24px; }
.groups h2, .across h2 { max-width: 17ch; }
.groups-say, .across-say { margin-top: 16px; font-size: 17px; line-height: 1.55; max-width: 52ch; color: var(--ink-2); }
.groups .n { font: 500 0.92em var(--mono); color: var(--ink); white-space: nowrap; }
.groups .find { margin-top: 28px; box-shadow: 0 26px 50px -40px rgba(35, 31, 26, 0.55); }
.groups .finding { font-size: clamp(25px, 6.4vw, 33px); }
.groups .finding .n { font: 400 0.74em/1 var(--mono); }
.groups .meter { display: grid; grid-template-columns: repeat(auto-fill, 15px); gap: 4px; width: 100%; max-width: 100%; }
.groups .meter i { width: 15px; height: 15px; }
.groups-src { margin-top: 18px; font: 400 13px/1.6 var(--mono); color: var(--ink-2); max-width: 64ch; }
.take { margin-top: 44px; max-width: 100%; }
.take h3 { font: 400 var(--fs-pull)/1.15 var(--display); max-width: 20ch; text-wrap: balance; }
.take ol { margin-top: 16px; border-top: 1px solid var(--ink); }
.take li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; padding: 15px 0 16px; border-bottom: 1px solid var(--rule-ink); }
.rn { display: grid; place-items: center; height: 30px; border: 1px solid var(--ink-2); background: var(--paper-hi); font: 500 12px/1 var(--mono); }
.take h4 { padding-top: 3px; font: 600 18px/1.35 var(--sans); }
.take li p { margin-top: 4px; max-width: 48ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.take-note { margin-top: 22px; font: 400 clamp(22px, 5.4vw, 28px)/1.2 var(--display); max-width: 24ch; text-wrap: balance; }
.take-act, .across-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.take-say { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
.take-act .btn, .across-act .btn { color: var(--ink); border-color: var(--ink); background: none; }
.across-list { display: grid; gap: 20px; margin-top: 26px; }
.across-list a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 16px 15px; background: var(--paper-hi); border: 1px solid var(--ink-2); color: var(--ink); text-decoration: none; }
.across-list a:hover { border-color: var(--ink); }
.across-list strong { font: 600 18px/1.3 var(--sans); }
.ac-at { margin-top: auto; padding-top: 4px; font: 500 12px/1.4 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.ac-at::before { content: "+ "; }

.ai-sec { position: relative; padding: 18px 0 96px; }
.ai-in { max-width: 820px; }
.ai-sec .aibox { margin-top: 30px; }
.foot-chk { font: 400 12.5px/1.6 var(--mono); color: var(--cream-2); }

/* The scene in motion */
.m .made .track { height: 660vh; height: 660svh; }
.m .made .stage { background: none; }
.m .pages { position: absolute; left: 50%; top: 206px; margin: 0; transform: translateX(-50%); }
.m .pages-k { padding: 1px 6px 2px 0; background: rgba(10, 16, 36, 0.92); box-shadow: 6px 0 10px rgba(10, 16, 36, 0.9); }
.m .pg { transition: box-shadow 0.3s; }
.m .pg.on { box-shadow: 0 0 22px rgba(244, 196, 90, 0.28), inset 0 0 14px rgba(244, 196, 90, 0.12); }
.m .made .rec { top: 206px; margin: 0; transform: translateX(-50%); }
.m .rec .dt-d, .m .vly-lit, .m .tn-s, .m .vly-t { opacity: 0; }
.m .area { position: absolute; left: 0; top: 0; z-index: 3; width: 240px; margin: 0; opacity: 0; pointer-events: none; }
.m .tn text { opacity: 0.45; }
.m .tn-x { opacity: 0.55; }
.m .made .tools { margin: 0; padding: 0; }
.m .made .frag small { color: var(--gold-bright); opacity: 0.9; }

/* Short phones */
@media (max-height: 760px) and (max-width: 899px) {
  .m .made .lines-box { top: 60px; height: 106px; }
  .m .pages, .m .made .rec { top: 182px; }
  .m .pg { height: 52px; }
}
/* Narrow phones, and 125% page zoom (about 314px) */
@media (max-width: 360px) {
  .pg-row { gap: 6px; }
  .pg { padding: 5px 4px 0; }
  .pg span { font-size: 8.5px; letter-spacing: 0; }
  .groups .meter { grid-template-columns: repeat(auto-fill, 13px); gap: 3px; }
  .groups .meter i { width: 13px; height: 13px; }
  /* "See validated.directory" is 319px at the kit's spacing (2026-10-24: under the edge at 314) */
  .across-act .btn { max-width: 100%; padding: 12px 14px; letter-spacing: 0.08em; white-space: normal; }
}
/* Phones: "commission" ran past its tile (5px at 314, 9px at 375, 6px at 390): the row runs 12px from the screen's
   edges and the names sit centred, sized to the width (2026-10-24) */
@media (max-width: 599px) {
  .pages { width: calc(100% - 24px); }
  .pg-row { gap: 5px; }
  .pg { padding: 5px 2px 0; }
  .pg span { font-size: min(10px, 2.55vw); letter-spacing: -0.02em; text-align: center; }
  .made .rl dd.rec-name { font-size: 24px; padding-right: 56px; }
  .made .brand .iron { width: 42px; height: 42px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .pg { height: 74px; }
  .pg span { font-size: 11px; }
}
@media (min-width: 700px) {
  .why-body { padding: 30px 34px 34px; }
  .why-body p { font-size: 19px; }
  .across-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Laptop and up */
@media (min-width: 900px) {
  .hero-art .twp i { padding: 6px 7px; font-size: 10.5px; }
  .made-head { padding-top: 40px; padding-bottom: 8px; }
  .m .made .lines-box { top: 72px; }
  .made-say { font-size: 19px; }
  .pages { width: min(900px, 70vw); }
  .pg { height: 112px; padding: 10px 12px 0; }
  .pg span { font-size: 12px; }
  .pg::after { left: 10px; right: 14px; top: 30px; background: repeating-linear-gradient(180deg, rgba(240, 230, 207, 0.28) 0 1px, transparent 1px 9px); }
  .area { width: 420px; }
  .made .jsonld { font-size: 12.5px; padding: 20px 24px 22px; }
  .m .made .track { height: 600vh; height: 600svh; }
  .m .pages, .m .made .rec { top: calc(max(86px, 10vh) + 168px); }
  .cite-wrap { padding-top: 40px; padding-bottom: 100px; }
  .cite { padding: 24px 28px 26px; }
  .cite p { font-size: 16px; }
  .why-head { padding: 96px 0 40px; }
  .why-body { padding: 40px 48px 44px; }
  .deal { padding: 110px 0 40px; }
  .deal-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px 64px; }
  .price-card { grid-column: 2; grid-row: 1; padding: 30px 32px 32px; }
  .deal-text { grid-column: 1; grid-row: 1; }
  .gets li { font-size: 18px; }
  .groups { padding: 96px 0 30px; }
  .across { padding: 84px 0 30px; }
  .groups-say, .across-say { font-size: 19px; }
  .groups-in, .take { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 0 40px; align-items: start; }
  .groups-in > *, .take > * { grid-column: 1; }
  .groups .find, .take ol { grid-column: 2; grid-row: 1 / span 3; margin-top: 8px; }
  .groups .find { align-self: start; justify-self: stretch; width: 100%; min-width: 0; padding: 26px 28px 28px; }
  .take { grid-column: 1 / -1; max-width: none; margin-top: 72px; }
  .take li p { font-size: 17.5px; }
  .across-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ai-sec { padding: 30px 0 130px; }
}