/* BeargrassAI 2.0.0 · page prototype: Start (BEA-432). After /brand/tokens.css and base.css: the first screen over
   hero-home, the sample sign-up from night to dawn, the form and its received state. Still composition first; what
   moves sits under .m. */

/* The wordmark link at a full 44px touch target (the kit's is 42 on phones; pricing's kit wish 8). */
.site .mark { padding: 10px 0; }
.n, .mono { font-family: var(--mono); }

/* 1 · The track: the first screen's words lie over the stage's first screen and scroll away. */
.scene { position: relative; background: var(--canvas); }
.track { position: relative; }
.actions .btn { min-width: 132px; }
.art .coords { position: absolute; z-index: 4; left: var(--gut); right: var(--gut-r); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin: 0; }

/* The stage: picture, night, lights, step lines, sample. Still: the picture, then the steps and the sample, finished. */
.stage { padding: 0; }
.art { position: relative; height: 100vh; height: 100svh; min-height: 540px; max-height: 1100px; overflow: hidden;
  --bt: calc(258px + 34vw + var(--nj, 0px));
  background: linear-gradient(180deg, #060a18 0%, #0a1024 32%, #121c3a calc(var(--bt) - 60px), #24304f calc(var(--bt) + 40px), #0b1122 100%); }
.art picture { display: contents; }
.art-img { position: absolute; z-index: 1; left: 0; top: var(--bt); width: 100%; height: calc(100% - var(--bt)); max-width: none; object-fit: cover; object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 90px), transparent 100%); }
/* the dawn sky above the band, which comes up as the night lifts (page.js sets --bd, the band's top in the scene) */
.dawn-sky { position: absolute; z-index: 0; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--indigo) 0, #3d4c70 calc(var(--bd, 60%) * 0.34), #6f6577 calc(var(--bd, 60%) * 0.66), #b98063 calc(var(--bd, 60%) * 0.88), #e2ac68 calc(var(--bd, 60%) + 20px), #f1cf92 calc(var(--bd, 60%) + 90px), #c9b27a 100%); }
/* the night over the picture: a deep blue multiplied in, heaviest in the sky; it lifts at dawn (page.js) */
.shade { position: absolute; z-index: 2; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(180deg, #232c52 0%, #36416f calc(var(--bt) + 30px), #545e8a calc(var(--bt) + 60%), #474d6c 100%); }
.veil { display: none; position: absolute; z-index: 3; inset: 0; pointer-events: none; }
/* the coordinates sit at the foot of the first screen: a little more night under them */
.art::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(180deg, rgba(8, 12, 28, 0), rgba(8, 12, 28, 0.82)); pointer-events: none; opacity: var(--nf, 1); }
.stage > .sky { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; min-height: 540px; max-height: 1100px; }

/* The steps, still: a numbered list (as the kit's scene shows its lines with motion off). */
.bt-box { position: relative; z-index: 4; width: min(100% - 32px, 760px); margin: 0 auto; padding-top: 56px; }
.bt { display: grid; gap: 14px; counter-reset: s; }
.bt li { position: relative; padding-left: 46px; font: 400 clamp(26px, 7vw, 42px)/1.12 var(--display); letter-spacing: -0.005em; color: var(--white); text-wrap: balance; }
.bt li::before { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0.4em; width: 30px; height: 26px; border: 1px solid rgba(244, 196, 90, 0.7); font: 500 12px/24px var(--mono); text-align: center; color: var(--gold-bright); }
.bt-ticks { display: none; }

/* The sample: night glass, square, corner marks. Three faces: what you send, what we read, what comes back. */
.sc-wrap { position: relative; z-index: 4; width: min(100% - 32px, 560px); margin: 30px auto 0; padding-bottom: 64px; }
.sc { position: relative; display: grid; gap: 26px; padding: 16px 16px 18px; background: var(--glass); border: 1px solid rgba(244, 196, 90, 0.6); --cm: rgba(244, 196, 90, 0.85); color: var(--cream); }
.sc-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.sc .iron { width: 46px; height: 46px; }
.sc-face { position: relative; }
.sc-face + .sc-face { padding-top: 22px; border-top: 1px solid var(--rule); }
.sc-h { font: 400 clamp(23px, 6.2vw, 30px)/1.1 var(--display); color: var(--white); padding-right: 64px; }
.sc-rows { display: grid; gap: 0; margin-top: 12px; }
.sr { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 8px 0 9px; border-top: 1px solid var(--rule); }
.sr dt { font: 500 10px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); }
.sr dd { font-size: 15px; line-height: 1.4; color: var(--cream); overflow-wrap: anywhere; }
.sr dd.n, .sr .n { font-size: 13.5px; }
.sc-src { margin-top: 8px; font: 400 12.5px/1.5 var(--mono); color: var(--cream-2); }
.sc-src .n { color: var(--gold-bright); }
.sc-read { display: grid; margin-top: 10px; }
.sc-read li { position: relative; padding: 8px 0 8px 22px; font-size: 15px; line-height: 1.4; color: var(--cream); border-top: 1px solid var(--rule); }
.sc-read li::before { content: ""; position: absolute; left: 1px; top: 14px; width: 8px; height: 8px; border: 1px solid var(--gold-bright); background: rgba(244, 196, 90, 0.5); }
.mail { display: grid; gap: 8px; margin-top: 12px; padding: 13px 14px 14px; background: rgba(240, 230, 207, 0.05); border: 1px solid var(--rule); }
.ml { font-size: 14.5px; line-height: 1.5; color: var(--cream); }
.ml .n { font-size: 0.9em; color: var(--gold-bright); }
.ml-sig { font-weight: 600; }

/* The meadow's foot fades into the day's paper as the dawn completes (page.js), so the scene hands over to the form. */
.ground { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 24%; opacity: 0; pointer-events: none; background: linear-gradient(180deg, rgba(244, 235, 215, 0) 0%, rgba(244, 235, 215, 0.5) 52%, var(--paper) 100%); }
/* The turn from the night into the day, for the still composition. */
.turn { height: 150px; background: linear-gradient(180deg, var(--canvas) 0%, var(--indigo) 22%, #6f6577 42%, #b98063 58%, #e2ac68 70%, #f1cf92 82%, #f5e3bd 92%, var(--paper) 100%); }
.at { position: absolute; left: 0; top: 100vh; top: 100svh; width: 1px; height: 1px; }

/* 2 · In motion: the stage pinned, the first screen's words scroll off it, the steps play over the picture (page.js). */
.m .track { height: 480vh; }
.m .art { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; }
.m .art-img { will-change: transform; }
.m .shade, .m .dawn-sky { will-change: opacity; }
.m .bt-box { position: absolute; left: 50%; top: calc(70px + env(safe-area-inset-top, 0px)); width: min(100% - 32px, 760px); height: 116px; margin: 0; padding: 0; transform: translateX(-50%); opacity: 0; }
.m .bt-box::before { content: ""; position: absolute; inset: -26px -18px; background: radial-gradient(closest-side, rgba(10, 16, 36, 0.8), rgba(10, 16, 36, 0)); pointer-events: none; }
.m .bt { display: block; position: absolute; inset: 0; }
.m .bt li { position: absolute; inset: 0 0 16px; display: grid; place-items: center; padding: 0; text-align: center; opacity: 0; font-size: clamp(25px, 7vw, 46px); text-shadow: 0 2px 24px rgba(10, 16, 36, 0.9); }
.m .bt li::before { content: none; }
.m .bt-ticks { display: flex; justify-content: center; gap: 6px; position: absolute; left: 0; right: 0; bottom: 0; }
.m .bt-ticks i { width: 22px; height: 3px; background: rgba(240, 230, 207, 0.22); transition: background-color 0.3s; }
.m .bt-ticks i.on { background: var(--gold-bright); }
.m .sc-wrap { position: absolute; left: 50%; top: calc(200px + env(safe-area-inset-top, 0px)); width: min(100% - 32px, 520px); margin: 0; padding: 0; transform: translateX(-50%); transform-origin: 50% 0; opacity: 0; will-change: transform, opacity; }
.m .sc { display: grid; grid-template-areas: "k" "f"; gap: 10px; border-color: var(--rule); --cm: rgba(240, 230, 207, 0.55); transition: border-color 0.5s ease; }
.m .sc.confirmed { border-color: rgba(244, 196, 90, 0.6); --cm: rgba(244, 196, 90, 0.85); }
.m .sc-k { grid-area: k; }
.m .sc-face { grid-area: f; opacity: 0; }
.m .sc-face + .sc-face { padding-top: 0; border-top: 0; }
.m .sr dd, .m .sr dt { opacity: 0.08; transition: opacity 0.25s ease; }
.m .sr.on dd, .m .sr.on dt { opacity: 1; }
.m .sc-read li { color: var(--cream-2); transition: color 0.3s ease; }
.m .sc-read li::before { background: none; border-color: rgba(240, 230, 207, 0.4); transition: background-color 0.3s, border-color 0.3s; }
.m .sc-read li.on { color: var(--white); }
.m .sc-read li.on::before { background: rgba(244, 196, 90, 0.75); border-color: var(--gold-bright); }
.m .ml { opacity: 0; }
.m .turn { display: none; }

/* 3 · Day: the form. */
.day > .topo { -webkit-mask-image: linear-gradient(180deg, transparent 40px, #000 260px); mask-image: linear-gradient(180deg, transparent 40px, #000 260px); }
.form-sec { position: relative; padding: 40px 0 30px; scroll-margin-top: 70px; }
.fs-in { max-width: 820px; }
.form-sec h2 { max-width: 16ch; }
.fs-say { margin-top: 12px; max-width: 44ch; font-size: 17.5px; line-height: 1.5; color: var(--ink-2); }
.form-card { margin-top: 26px; padding: 20px 16px 22px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); box-shadow: 0 30px 60px -44px rgba(35, 31, 26, 0.6); }
.form { display: grid; gap: 22px; }
.lab { display: block; font: 600 11.5px/1.4 var(--sans); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.lab-opt { margin-left: 6px; font: 400 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: none; color: var(--ink-2); }
.hint { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); max-width: 52ch; }
.fw { display: block; margin-top: 9px; --cm: var(--ink); }
.field.mono { font-family: var(--mono); font-size: 15.5px; }
.fw-code .field { max-width: 260px; text-transform: uppercase; letter-spacing: 0.06em; }
.fw-code { max-width: 260px; }
.field:hover { border-color: var(--ink); }
.field[aria-invalid="true"] { border-color: var(--barn); box-shadow: inset 3px 0 0 var(--barn); }
.err { font: 500 13.5px/1.45 var(--sans); color: var(--barn); }
.err:empty { display: none; }
.fl .err { margin-top: 7px; }

/* The offers: square radio tiles; the picked one is ink with a gold line under it, as the kit's trail signs. */
.opts { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; scroll-margin-top: 90px; }
.opts .lab { margin-bottom: 2px; padding: 0; }
.opt { display: grid; gap: 4px; padding: 13px 14px 14px; border: 1px solid var(--ink-2); background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.o-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.o-name { font: 600 17px/1.3 var(--sans); }
/* the prices in mono 600: the same face as the received label's word, so it loads with the page and Send fetches nothing */
.o-price { font: 600 14px/1.3 var(--mono); white-space: nowrap; }
.o-say { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.o-say .n { font-size: 0.93em; white-space: nowrap; }
.opt:hover { background: #fffaf0; }
.opt:has(input:checked) { background: var(--ink); color: var(--paper-hi); box-shadow: inset 0 -3px 0 var(--gold-bright); --cm: var(--ink); }
.opt:has(input:checked) .o-say { color: rgba(250, 245, 234, 0.82); }
.opt:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 3px; }
.opts[aria-invalid="true"] .opt { border-color: var(--barn); }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 2px; }
.send .btn { min-width: 150px; }
.fine { font: 400 13px/1.5 var(--mono); color: var(--ink-2); }

/* Received: the form gives way to the Box V, which burns once (brand-burn, arrive). Scripts off: #received, burnt. */
.received { display: none; outline: none; }
.js .received.show { display: block; }
html:not(.js) .received:target { display: block; }
html:not(.js) .form-card:has(.received:target) .form { display: none; }
.js .form-card.got .form { display: none; }
.rc-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; }
.received .brand-day { margin: 2px 0 0; }
.received .b-label { gap: 2px; }
.rc-date { display: block; font-size: 10.5px; letter-spacing: 0.06em; }
.rc-h { font: 400 clamp(28px, 7.6vw, 40px)/1.08 var(--display); color: var(--ink); text-wrap: balance; }
.rc-words { align-self: center; }
.rc-to { margin-top: 14px; font-size: 16.5px; line-height: 1.5; color: var(--ink); max-width: 46ch; overflow-wrap: anywhere; }
.rc-to b { font: 500 0.92em/1 var(--mono); }
.rc-list { display: grid; margin-top: 18px; border-bottom: 1px solid var(--rule-ink); }
.rc-list:empty { display: none; }
.rc-list div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule-ink); }
.rc-list dt { font: 500 10.5px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.rc-list dd { font-size: 15.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.rc-list dd.mono { font-size: 14px; }
.rc-fine { margin-top: 16px; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.rc-act { margin-top: 6px; }
.more.rc-back { color: var(--ink); text-decoration-color: rgba(35, 31, 26, 0.45); }
.more.rc-back:hover { text-decoration-color: var(--ink); }

/* 4 · The AI box. */
.ai-sec { position: relative; padding: 34px 0 92px; }
.ai-in { max-width: 884px; }
.ai-sec .aibox { margin-top: 0; }

/* Scripts off: the header's links take a second row on phones and tablets, so words and picture start under it. */
@media (max-width: 899px) {
  html:not(.js) .art { --nj: 44px; }
}

/* Short phones: the same, a little tighter, so Start stays well above the fold. */
@media (max-height: 760px) and (max-width: 899px) {
  .art { --bt: calc(222px + 32vw + var(--nj, 0px)); }
  .m .bt-box { top: calc(62px + env(safe-area-inset-top, 0px)); height: 100px; }
  .m .bt li { font-size: clamp(23px, 6.6vw, 40px); }
  .m .sc-wrap { top: calc(172px + env(safe-area-inset-top, 0px)); }
}
/* Narrow phones, and a phone at 125% page zoom (about 314px wide). */
@media (max-width: 360px) {
  .actions .btn { min-width: 108px; padding-left: 18px; padding-right: 18px; }
  .actions .more { font-size: 15px; gap: 7px; }
  .art .coords { font-size: 11px; }
  .art { --bt: calc(222px + 40vw + var(--nj, 0px)); }
  .sr { grid-template-columns: 66px minmax(0, 1fr); }
  .sr dd { font-size: 14px; }
  .form-card { padding-left: 13px; padding-right: 13px; }
  .rc-list div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}

/* Tablets: the band is wider and the words larger. */
@media (min-width: 600px) and (max-width: 899px) {
  .art { --bt: calc(300px + 22vw + var(--nj, 0px)); }
  .m .sc-wrap { top: calc(214px + env(safe-area-inset-top, 0px)); }
}

/* Laptop and up: the picture fills the stage; words, lines and sample at left over the night, the sun at right. */
@media (min-width: 900px) {
  .art .coords { left: calc(max(0px, (100% - var(--max)) / 2) + max(32px, env(safe-area-inset-left, 0px))); right: calc(max(0px, (100% - var(--max)) / 2) + max(32px, env(safe-area-inset-right, 0px))); bottom: 26px; }
  /* round 4: the picture at the right of the words, fading in from the night, as Custom work's does */
  .scene { --wl: max(32px, calc((100vw - var(--max)) / 2 + 32px)); }
  .art { min-height: 640px; background: radial-gradient(110% 46% at 72% 0%, rgba(43, 69, 99, 0.34), rgba(43, 69, 99, 0) 70%), linear-gradient(180deg, #060a18 0%, #0a1024 58%, #0b1122 100%); }
  .art-img { object-position: 72% 50%; }
  .shade { background: linear-gradient(180deg, #333e6c 0%, #444f7e 40%, #56608c 70%, #484e6e 100%); }
  .veil { display: block; background: linear-gradient(180deg, rgba(8, 12, 28, 0.7) 0%, rgba(8, 12, 28, 0) 18%); }
  .art::after { height: 140px; }
  .stage > .sky { min-height: 640px; }
  .bt-box, .sc-wrap { --edge: calc(max(0px, (100% - var(--max)) / 2) + max(32px, env(safe-area-inset-left, 0px))); margin-left: var(--edge); }
  .bt-box { width: min(100% - 64px, 760px); padding-top: 80px; }
  .sc-wrap { margin-top: 40px; }
  .m .track { height: 460vh; }
  .m .bt-box { left: var(--edge); top: max(104px, 12vh); width: min(640px, 46vw); height: 140px; margin: 0; transform: none; }
  .m .bt li { place-items: center start; text-align: left; font-size: clamp(34px, 3.3vw, 48px); }
  .m .bt-box::before { inset: -70px -140px -60px -90px; background: radial-gradient(ellipse 50% 50% at 42% 50%, rgba(10, 16, 36, 0.84) 0%, rgba(10, 16, 36, 0.74) 40%, rgba(10, 16, 36, 0.36) 72%, rgba(10, 16, 36, 0) 100%); }
  .m .bt-ticks { justify-content: flex-start; }
  .m .sc-wrap { left: var(--edge); top: calc(max(104px, 12vh) + 170px); width: min(560px, 42vw); margin: 0; transform: none; transform-origin: 0 0; }
  .sc { padding: 22px 24px 24px; }
  .sr { grid-template-columns: 92px minmax(0, 1fr); padding: 10px 0 11px; }
  .sr dd { font-size: 16px; }
  .form-sec { padding: 64px 0 40px; }
  .form-card { padding: 30px 32px 32px; }
  .opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; align-items: stretch; }
  .opts .lab, .opts .err { grid-column: 1 / -1; }
  .opts .lab { margin-bottom: 12px; }
  .opts .err { margin-top: 10px; }
  .opt { align-content: start; padding: 16px 16px 18px; }
  .o-top { display: grid; gap: 4px; }
  .rc-h { font-size: 44px; }
  .ai-sec { padding: 40px 0 130px; }
}

/* Round 3 (BGA 68 to 71): each choice carries its step's heading, in the path's order; DIY's price is two parts that
   may wrap; under the form, the way to Talk to us for owners who would rather not build it themselves. */
.o-step { font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.opt:has(input:checked) .o-step { color: var(--gold-bright); }
.o-price.o-long { white-space: normal; }
.o-price .nw { white-space: nowrap; }
.fs-off { margin-top: 22px; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--ink); }
.fs-off a { display: inline-block; padding: 10px 0; margin: -10px 0; font-weight: 600; color: var(--ink); text-decoration-color: var(--barn); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }