/* BeargrassAI 2.0.0 · page prototype: For makers (BEA-432, board-pages-2 section 10). Loads after /brand/tokens.css and
   /brand/base.css; only this page's own. Night (a maker's bench at first light, then one craft question traced by
   scroll), dawn (his record), day (what to check, the price, the AI box), then the night footer. Motion only under
   html.m; html.js means scripts on. */

/* ?draft in the address outlines every sentence written for this prototype (data-draft) */
.show-draft [data-draft] { outline: 2px dashed var(--barn); outline-offset: 3px; }
/* a number a reader could check, inside a sentence */
.n { font-family: var(--mono); font-size: 0.9em; letter-spacing: -0.01em; white-space: nowrap; }
.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; }
.src { margin-top: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--cream-2); }
.src::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; background: var(--x) center / 9px no-repeat; }

/* 2 · The trace (night). A night heading, then a stage the scroll walks: the step lines one at a time at the top, and
   the chain under them. Without motion the steps are a numbered list and the chain stands in the page, each link
   joined to the next by a dotted trail. */
.trace { position: relative; background: var(--canvas); }
.trace-head { padding: 72px 0 36px; }
.trace-head h2 { color: var(--white); max-width: 17ch; }
.trace-say { margin-top: 16px; max-width: 34ch; font-size: 18px; line-height: 1.5; color: var(--cream); }
.trace .stage { padding: 12px 0 76px; background: radial-gradient(120% 60% at 50% 100%, rgba(43, 69, 99, 0.42), rgba(43, 69, 99, 0) 70%); }
.chain { position: relative; z-index: 3; display: grid; justify-items: center; gap: 46px; margin-top: 44px; padding: 0 16px; }
.part { position: relative; width: min(100%, 560px); }
.part + .part::before { content: ""; position: absolute; left: 50%; top: -40px; height: 34px; border-left: 2px dotted rgba(244, 196, 90, 0.85); }
.pk { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.pq { padding: 15px 17px 17px; background: var(--glass); border: 1px solid rgba(244, 196, 90, 0.55); --cm: rgba(244, 196, 90, 0.85); }
.pq-t { margin-top: 8px; font: 400 clamp(23px, 6.3vw, 32px)/1.2 var(--display); color: var(--white); text-wrap: balance; }
.srs { display: grid; gap: 10px; margin-top: 10px; }
.sr { position: relative; padding: 9px 12px 10px 15px; background: rgba(12, 19, 38, 0.94); border: 1px solid rgba(244, 196, 90, 0.4); }
.sr::before { content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--gold-bright); }
.sr-t { display: block; font: 400 13px/1.45 var(--mono); color: var(--cream); }
.sr small { display: block; margin-top: 3px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--gold-bright); }
.sts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.st { position: relative; display: grid; place-items: center; min-height: 58px; padding: 8px 4px; text-align: center; font: 500 11px/1.25 var(--mono); letter-spacing: 0.03em; color: var(--cream-2); border: 1px solid rgba(240, 230, 207, 0.3); background: rgba(10, 16, 36, 0.9); }
.st::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--gold-bright); box-shadow: 0 0 22px rgba(244, 196, 90, 0.32), inset 0 0 14px rgba(244, 196, 90, 0.14); opacity: 0; pointer-events: none; }
.st.own { color: var(--gold-bright); }
.st.own::after { opacity: 1; }
.st small { display: block; margin-top: 4px; font-size: 9.5px; line-height: 1.25; letter-spacing: 0.02em; color: var(--cream); }
.st > span { display: block; }
.pn { padding: 17px 18px 18px; background: var(--glass); border: 1px solid rgba(244, 196, 90, 0.6); --cm: rgba(244, 196, 90, 0.85); }
.pn-n { font: 500 clamp(44px, 13vw, 72px)/1 var(--mono); letter-spacing: -0.03em; color: var(--gold-bright); text-shadow: 0 0 26px rgba(244, 196, 90, 0.35); }
.pn-n .n { font-size: 1em; }
.pn-say { margin-top: 10px; max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--cream); }
.m50 { display: grid; grid-template-columns: repeat(10, 15px); gap: 4px; margin-top: 14px; }
.m50 i { position: relative; width: 15px; height: 15px; border: 1px solid rgba(244, 196, 90, 0.5); }
.m50 i::before { content: ""; position: absolute; inset: -1px; background: var(--gold-bright); box-shadow: 0 0 9px rgba(244, 196, 90, 0.42); opacity: 0; }
.m50 i.on::before { opacity: 1; }
.pn-src { margin-top: 13px; font: 500 11.5px/1.45 var(--mono); letter-spacing: 0.04em; color: var(--cream-2); }

/* the stage in motion: sticky, one screen tall; page.js moves the chain up a place a step and lights each link */
.m .trace .track { height: 520vh; }
.m .trace .stage { padding: 0; background: none; }
.m .chain { position: absolute; inset: 0; display: block; margin: 0; padding: 0; }
.m .part { position: absolute; left: 0; right: 0; top: 0; width: min(100% - 40px, 520px); margin: 0 auto; opacity: 0; will-change: transform, opacity; }
.m .part + .part::before { content: none; }
.m .sr, .m .st, .m .pn-n, .m .pn-say, .m .pn-src { opacity: 0; }
.m .st.own { color: var(--cream-2); }
.m .st.own::after { transition: opacity 0.3s ease; }
.m .st.own:not(.lit)::after { opacity: 0; }
.m .st.own.lit { color: var(--gold-bright); }
.m .m50 i::before { transition: opacity 0.25s ease; }
/* in motion the answers fill first, then the number lands under them (the reading order stays number first) */
.m .pn { display: flex; flex-direction: column; }
.m .m50 { order: -1; margin: 0 0 16px; }

/* 3 · Dawn: his record. The night heading hands over to the sunrise; the card is the kit's record card, no photo. */
.rec-head { padding: 64px 0 52px; background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas) 52%, #142238 80%, var(--indigo) 100%); }
.rec-head h2 { color: var(--white); }
.rec-say { margin-top: 14px; max-width: 34ch; font-size: 18px; line-height: 1.5; color: var(--cream); }
.rec-sec .card-c { max-width: 100%; }
.rec-sec .card-name { font-size: clamp(32px, 8.6vw, 46px); }
/* his photo stays on his own record (DIR 45), so the kit card's photo column is not used here */
.rec-sec .face-day, .rec-sec .face-night { display: block; }
.card-list h4 { margin-top: 4px; }
.rec-more { margin-top: 26px; text-align: center; }
.rec-more .more { color: var(--ink); text-decoration-color: rgba(35, 31, 26, 0.5); }

/* 4 · Day: what to check, in rows numbered like sections, then how it was read. */
.two { display: flex; flex-direction: column; }
.two .side { display: contents; }
.checks { position: relative; padding: 72px 0 26px; }
.checks h2 { max-width: 16ch; }
.ck-intro { margin-top: 22px; max-width: 24ch; font: 400 var(--fs-pull)/1.2 var(--display); color: var(--ink); text-wrap: balance; }
.ck-rows { margin-top: 26px; max-width: 760px; border-top: 1px solid var(--ink); }
.ck-rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 0 20px; border-bottom: 1px solid var(--rule-ink); }
.rn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ink-2); background: var(--paper-hi); font: 500 12px/1 var(--mono); color: var(--ink); }
.ck-h { padding-top: 3px; font: 600 19px/1.35 var(--sans); color: var(--ink); }
.ck-p { margin-top: 6px; max-width: 58ch; font-size: 17px; line-height: 1.55; color: var(--ink); }
.ck-ev { margin-top: 10px; font: 500 12px/1.5 var(--mono); color: var(--ink-2); }
.ck-ev::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--x-ink) center / 9px no-repeat; }
.how-read { max-width: 100%; margin-top: 30px; padding: 14px 16px 15px; border: 1px solid var(--ink-2); background: var(--paper-hi); font: 400 13px/1.62 var(--mono); color: var(--ink-2); }
.how-read b { font-weight: 600; color: var(--ink); }

/* 5 · Day: the price, the three offers as on pricing. Start lands here. */
section.price { position: relative; padding: 50px 0 30px; scroll-margin-top: 72px; }
.pr-card { max-width: 100%; padding: 22px 20px 24px; background: var(--paper-hi); border: 1px solid var(--ink-2); box-shadow: 0 34px 70px -40px rgba(35, 31, 26, 0.6); }
.pr-card h2 { margin-top: 10px; font-size: clamp(32px, 8.4vw, 54px); }
.pr-rows { margin-top: 18px; border-top: 1px solid var(--ink); }
.pr-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; row-gap: 4px; padding: 14px 0 15px; border-bottom: 1px solid var(--rule-ink); }
.pr-rows strong { font: 600 18px/1.3 var(--sans); color: var(--ink); }
.pr-p { font: 500 14px/1.5 var(--mono); color: var(--ink); white-space: nowrap; }
.pr-s { grid-column: 1 / -1; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
/* DIY's price is long ("$899 for six months, then $149 a month", BGA 68): on a phone it takes two lines, leaving the name its room. */
@media (max-width: 599px) { .pr-p { white-space: normal; max-width: 20ch; text-align: right; } }
.pr-card .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; }
.pr-card .actions .btn { min-width: 132px; }
.pr-card .more { color: var(--ink); text-decoration-color: rgba(35, 31, 26, 0.5); }

/* 6 · The AI box: the night panel in the day. */
.askai { position: relative; padding: 30px 0 100px; }
.askai .aibox { max-width: 820px; margin-top: 0; }

/* Short phones: the same first screen, set tighter so Start keeps its room */
@media (max-height: 760px) and (max-width: 899px) {
  .pq-t { font-size: 21px; }
}
/* Narrow phones, and a phone at 125% page zoom (about 314px): the lead smaller, Start and its link on one row */
@media (max-width: 360px) {
  .sr-t { font-size: 12px; }
  .st { font-size: 10px; letter-spacing: 0; }
  .m50 { grid-template-columns: repeat(10, 13px); gap: 3px; }
  .m50 i { width: 13px; height: 13px; }
}
@media (min-width: 700px) {
  .chain { padding: 0 32px; }
}
/* from 430px the step lines grow toward 50px, and the longest takes three lines: the box under them grows to hold them */
@media (min-width: 430px) and (max-width: 899px) { .m .trace .lines-box { height: 176px; } }

/* Laptop and up */
@media (min-width: 900px) {
  .hero-art .twp i { padding: 6px 7px; font-size: 10.5px; }
  .trace-head { padding: 112px 0 52px; }
  .trace-head h2 { max-width: 20ch; }
  .m .trace .track { height: 480vh; }
  .part, .m .part { width: 640px; }
  .pq { padding: 22px 28px 24px; }
  .pq-t { font-size: 36px; }
  .pk { font-size: 12px; }
  .sr { padding: 11px 16px 12px 18px; }
  .sr-t { font-size: 16px; }
  .sr small { font-size: 11.5px; }
  .st { min-height: 76px; font-size: 13px; }
  .st small { font-size: 11px; }
  .pn-n { font-size: 84px; }
  .pn { padding: 22px 26px 24px; }
  .pn-say { font-size: 17px; }
  .m50 { grid-template-columns: repeat(10, 18px); gap: 5px; }
  .m50 i { width: 18px; height: 18px; }
  .rec-head { padding: 104px 0 60px; }
  .rec-sec .card-body { padding: 30px 34px 30px; }
  .rec-sec .offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
  .rec-sec .offer-list li:nth-child(2) { border-top: 0; }
  .two { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
  .two .side { display: block; position: sticky; top: 104px; }
  .checks { padding: 112px 0 30px; }
  .checks h2 { font-size: clamp(42px, 4.2vw, 62px); margin-top: 12px; }
  .ck-intro { margin-top: 26px; font-size: 26px; }
  .ck-rows { margin-top: 10px; }
  .ck-p { font-size: 18px; }
  .how-read { margin-top: 40px; margin-left: 0; margin-right: 0; }
  section.price { padding: 70px 0 40px; }
  .pr-card { margin-inline: 0; padding: 32px 36px 34px; }
  .askai { padding: 40px 0 130px; }
  .askai .aibox { margin-inline: auto; }
}