/* BeargrassAI 2.0.0 · page prototype: How a Commerce project runs (BEA-432). Loads after /brand/tokens.css and
   /brand/base.css. The page's own layout: one picture (the cairn on the summit) pinned behind the first screen and the
   scene; the stations' words over its night sky (phone and tablet) or in a column at its left (laptop); the stations'
   tags either side of the cairn; then the day: who does what, the price, the AI box. Without motion the picture holds
   the first screen and the stations read as a list under it, on night. */

/* The wordmark link at a full 44px touch target (as pricing). */
.site .mark { padding: 10px 0; }

/* 1 · The climb (night to dawn). The first screen's words sit on the picture; the stage holds the picture. */
.climb { position: relative; background: var(--canvas); }
.climb .track { position: relative; }
.climb .stage { padding: 0; }
.art { position: relative; height: 100vh; height: 100svh; min-height: 540px; max-height: 1100px; overflow: hidden; background: #0b1330; }
.pic { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; }
.pic picture { display: contents; }
/* The night over the picture: a deep blue multiplied in. page.js lifts it as the last stations light; without motion
   it rests at first light. */
.night { position: absolute; inset: 0; background: #1c2a56; mix-blend-mode: multiply; opacity: 0.34; }
.m .night { opacity: 0.8; }
.scrim-top, .scrim-low, .paper-low { position: absolute; left: 0; right: 0; pointer-events: none; }
.scrim-top { z-index: 1; top: 0; height: var(--st, 340px); background: linear-gradient(180deg, rgba(7, 11, 26, 0.9) 0%, rgba(7, 11, 26, 0.8) 46%, rgba(7, 11, 26, 0.5) 74%, rgba(7, 11, 26, 0) 100%); }
.scrim-low { z-index: 1; bottom: 0; height: 36%; background: linear-gradient(180deg, rgba(10, 16, 36, 0) 0%, rgba(10, 16, 36, 0.66) 40%, rgba(10, 16, 36, 0.92) 72%, #0a1024 100%); }
.paper-low { z-index: 1; bottom: 0; height: 26%; background: linear-gradient(180deg, rgba(244, 235, 215, 0) 0%, rgba(244, 235, 215, 0.7) 60%, var(--paper) 100%); opacity: 0; }
.art .sky { z-index: 2; }
.art .fx { z-index: 3; }

/* The stations' tags either side of the cairn: ours at its right, yours at its left, the conversation under its base,
   day one over its top. page.js places them through the crop showing; they light as the scroll reaches them. On a
   phone the tags carry their numbers only; the station's words say the rest. */
.tags { display: none; }
.js .tags { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.tag, .col-k { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; opacity: 0; will-change: opacity; }
.tag { padding: 3px 6px 4px; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); background: rgba(9, 14, 32, 0.86); border: 1px solid rgba(244, 196, 90, 0.5); transition: border-color 0.3s, box-shadow 0.3s; }
.tag b { font-weight: 600; color: var(--gold-bright); }
.tag.now { border-color: var(--gold-bright); box-shadow: 0 0 18px rgba(244, 196, 90, 0.38); }
.tag.top { padding: 4px 8px; letter-spacing: 0.14em; }
.col-k { padding: 4px 7px 4px 8px; font: 600 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); background: rgba(9, 14, 32, 0.86); border-top: 1px solid rgba(244, 196, 90, 0.8); }
@media (max-width: 599px) {
  .tag span { display: none; }
  .tag { padding: 5px 7px 6px; color: var(--cream); background: var(--canvas); border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--canvas); }
  .tag b { color: var(--cream); }
}
.actions .btn { min-width: 132px; }
/* Scripts off: the kit's header shows its links as a second row on phones and tablets, so the words start under it,
   and the picture moves down with them so the cairn stays under the headline. */
@media (max-width: 899px) {
  html:not(.js) .pic { top: 40px; }
}

/* The stations: still, a list on the night under the picture, along a survey line with a "+" at each station. */
.words { position: relative; z-index: 5; padding-top: 44px; padding-bottom: 72px; }
.q-box .st-k { margin-top: 0; }
.words-h { max-width: 18ch; margin-top: 8px; color: var(--white); }
.stations { display: grid; gap: 30px; margin-top: 30px; padding-left: 26px; border-left: 1px solid rgba(244, 196, 90, 0.55); }
.stations li { position: relative; max-width: 46ch; }
.stations li::before { content: ""; position: absolute; left: -32px; top: 3px; width: 11px; height: 11px; background: var(--x) center / 11px no-repeat; }
.st-k { font: 500 12px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.st-t { margin-top: 6px; font: 400 clamp(27px, 7.2vw, 34px)/1.1 var(--display); letter-spacing: -0.005em; color: var(--white); text-wrap: balance; }
.st-d { margin-top: 8px; font-size: 16.5px; line-height: 1.5; color: var(--cream); }
[data-who="you"] .st-k { color: var(--cream); }
[data-who="top"] .st-t { color: #fff3cf; }
.beats { display: none; }

/* The scene in motion: a tall track, the stage pinned, the first screen's words scrolling away over the picture, then
   one station at a time where the headline was. */
.m .climb .track { height: 900vh; }
.m .climb .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.m .art { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; }
.m .words { position: absolute; left: 0; right: 0; top: calc(66px + env(safe-area-inset-top, 0px)); padding-top: 0; padding-bottom: 0; }
.m .words-in { display: grid; }
.m .q-box, .m .stations { grid-area: 1 / 1; }
.m .q-box { opacity: 0; will-change: opacity, transform; }
.m .words-h { max-width: 20ch; margin-top: 6px; font-size: clamp(27px, 7.2vw, 34px); line-height: 1.1; text-shadow: 0 2px 22px rgba(7, 11, 26, 0.9); }
.m .stations { display: grid; margin: 0; padding: 0; border: 0; }
.m .stations li { grid-area: 1 / 1; opacity: 0; will-change: opacity, transform; }
.m .stations li::before { content: none; }
.m .st-t { text-shadow: 0 2px 22px rgba(7, 11, 26, 0.9); }
.m .st-d { text-shadow: 0 1px 14px rgba(7, 11, 26, 0.9); max-width: 40ch; }
.m .beats { display: flex; gap: 5px; margin-top: 14px; opacity: 0; }
.m .beats i { width: 16px; height: 3px; background: rgba(240, 230, 207, 0.24); transition: background-color 0.3s; }
.m .beats i.on { background: var(--gold-bright); }

/* Short phones: the same, set tighter so the station's words stay over the sky. */
@media (max-height: 760px) and (max-width: 899px) {
  .m .words { top: calc(62px + env(safe-area-inset-top, 0px)); }
  .m .st-t, .m .words-h { font-size: 25px; margin-top: 4px; }
  .m .st-d { font-size: 15px; line-height: 1.45; margin-top: 6px; }
  .m .beats { margin-top: 10px; }
}
/* Narrow phones, and a phone at 125% page zoom (about 314px): smaller words, Start and its link on one row. */
@media (max-width: 360px) {
  .actions .btn { min-width: 108px; padding-left: 18px; padding-right: 18px; }
  .actions .more { font-size: 15px; gap: 7px; }
  .m .st-t, .m .words-h { font-size: 23px; }
  .m .st-d { font-size: 14.5px; }
  .st-k { font-size: 11px; letter-spacing: 0.12em; }
}

/* Tablets: the same thirds, the words a little larger. */
@media (min-width: 600px) and (max-width: 899px) {
  .m .st-t, .m .words-h { font-size: 38px; }
  .m .st-d { font-size: 18px; }
}

/* 3 · Day: who does what, on cardstock over the contours. */
.day > .topo { -webkit-mask-image: linear-gradient(transparent 40px, #000 220px); mask-image: linear-gradient(transparent 40px, #000 220px); }
.who-sec { position: relative; padding: 60px 0 30px; }
.who-sec h2, .rate h2 { max-width: 16ch; }
.who-card { margin-top: 26px; max-width: 1040px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); box-shadow: 0 34px 60px -40px rgba(35, 31, 26, 0.6); }
.both-row { padding: 16px 18px 15px; border-bottom: 1px solid var(--rule-ink); font: 600 17px/1.4 var(--sans); color: var(--ink); }
.who-card .n { display: inline-block; min-width: 2.2em; font: 500 13px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-2); }
.cols { display: grid; }
.col { padding: 18px 18px 20px; }
.col + .col { border-top: 1px solid var(--rule-ink); }
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; }
.col-head h3 { font: 400 clamp(28px, 7.4vw, 36px)/1.05 var(--display); color: var(--ink); }
.col-list { display: grid; margin-top: 10px; }
.col-list li { padding: 10px 0; border-top: 1px solid var(--rule-ink); font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.col-list li:first-child { border-top: 0; }
.col-own { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule-ink); font: 400 13px/1.55 var(--mono); color: var(--ink-2); }
.who-say { margin-top: 22px; font: 400 var(--fs-pull)/1.2 var(--display); color: var(--ink); max-width: 24ch; }

/* 4 · The price: the rate is the only number; the setup and the quote are a conversation. */
.rate { position: relative; padding: 46px 0 30px; scroll-margin-top: 70px; }
.rate-card { margin-top: 24px; max-width: 640px; padding: 22px 20px 24px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); box-shadow: 0 34px 60px -40px rgba(35, 31, 26, 0.6); }
.rc-name { font: 600 19px/1.3 var(--sans); color: var(--ink); }
.rc-price { margin-top: 8px; font: 500 15px/1.4 var(--mono); color: var(--ink); }
.rc-price b { display: block; font-weight: 500; font-size: clamp(32px, 9vw, 44px); line-height: 1.08; letter-spacing: -0.02em; }
.rc-say { margin-top: 14px; font: 400 clamp(27px, 7vw, 36px)/1.1 var(--display); color: var(--ink); }
.rc-say .n { font: 400 0.8em/1 var(--mono); letter-spacing: -0.02em; }
.rc-fine { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-ink); font: 400 12.5px/1.55 var(--mono); color: var(--ink-2); }
.rc-body { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 40ch; }
.rc-act { margin-top: 22px; }
.rc-act .btn { min-width: 170px; }
.com-more { margin-top: 30px; }
.com-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.com-more ul { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }
.com-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration-color: var(--barn); text-decoration-thickness: 2px; }

/* 5 · The AI box, the one piece of night in the day. */
.ai-sec { position: relative; padding: 24px 0 92px; }
.ai-in { max-width: 884px; }
.ai-sec .aibox { margin-top: 0; }

/* Laptop and up: the picture is a square at the right, rising out of the night at its left edge; the words, the first
   screen's and then each station's, sit in a column at left; the cairn's tags carry their names. */
@media (min-width: 900px) {
  .art { background: linear-gradient(180deg, #0a1024 0%, #0d1631 40%, #111c3a 72%, #0a1024 100%); }
  /* The picture's place is the shared .edge-art rule. */
  .scrim-top { height: 30%; background: linear-gradient(180deg, rgba(7, 11, 26, 0.7) 0%, rgba(7, 11, 26, 0) 100%); }
  .scrim-low { height: 30%; }
  .tag { font-size: 11px; padding: 4px 8px 5px; }
  .words { padding-top: 70px; padding-bottom: 96px; }
  .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 48px; }
  .m .words { top: 0; bottom: 0; left: var(--read-x); right: auto; width: min(340px, calc((100vw - var(--read-x) * 2) * 0.44)); max-width: none; margin: 0; display: grid; align-content: center; padding-top: 60px; }
  .m .stations { grid-template-columns: minmax(0, 1fr); }
  .m .st-t, .m .words-h { font-size: clamp(38px, 3.4vw, 52px); }
  .m .st-d { font-size: 19px; }
  .m .beats i { width: 22px; }
  .who-sec { padding: 84px 0 34px; }
  .both-row { padding: 18px 26px; font-size: 18px; }
  .cols { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .col { padding: 22px 26px 26px; }
  .col + .col { border-top: 0; border-left: 1px solid var(--rule-ink); }
  .rate { padding: 64px 0 34px; }
  .rate-card { padding: 30px 30px 32px; }
  .ai-sec { padding: 36px 0 130px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .m .words { width: min(42vw, 440px); }
}