/* BeargrassAI 2.0.0 · page prototype: The counter (commerce-counter, BEA-432). Loads after /brand/tokens.css and
   /brand/base.css. Only what is this page's own: the first screen, with the counter's screen at night; a sample day at
   the counter, a pinned scene that runs night to dawn to day; the words that stay still; the price; the AI box.
   Every moving rule sits under .m, so reduced motion and scripts off show the still composition. The pictures are real
   Till 2's own screens on a made-up shop (BGA 49, 63), cut 2x by crops.json; none shows a tax line or a dash. */

/* The counter's screens: the till's own paper, a hairline, the surveyor's corner marks, and the sample label. */
.glass { position: relative; background: #fafaf8; border: 1px solid rgba(35, 31, 26, 0.42); box-shadow: 0 26px 46px -32px rgba(35, 31, 26, 0.6); }
.glass img { display: block; width: 100%; height: auto; }
.glass-clip { position: relative; overflow: hidden; }
.tag { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.strip { margin-bottom: 8px; }

/* A line on a screen, found and marked: a soft gold wash under the words, with corner ticks in the gold's own ink. */
.hit { position: absolute; left: 2.2%; width: 95.6%; background: rgba(244, 196, 90, 0.34); mix-blend-mode: multiply; box-shadow: inset 0 0 0 1px rgba(125, 90, 26, 0.5); }
.hit::before { content: ""; position: absolute; inset: -4px; --a: var(--gold-ink);
  background: linear-gradient(var(--a), var(--a)) 0 0 / 8px 2px, linear-gradient(var(--a), var(--a)) 0 0 / 2px 8px,
    linear-gradient(var(--a), var(--a)) 100% 0 / 8px 2px, linear-gradient(var(--a), var(--a)) 100% 0 / 2px 8px,
    linear-gradient(var(--a), var(--a)) 0 100% / 8px 2px, linear-gradient(var(--a), var(--a)) 0 100% / 2px 8px,
    linear-gradient(var(--a), var(--a)) 100% 100% / 8px 2px, linear-gradient(var(--a), var(--a)) 100% 100% / 2px 8px;
  background-repeat: no-repeat; }
.hit-dep { top: 14.1%; height: 7.6%; }
.hit-tot { top: 22.6%; height: 9.1%; background: rgba(244, 196, 90, 0.16); }
/* The phone and tablet crop uses this page's focus. The shared rule keeps every other page on the center crop. */
@media (max-width: 1023px) {
  .hero-art > picture > img,
  .hero-art > img { object-position: var(--hero-focus, var(--hero-narrow-focus)); }
}
.hero-art .veil { position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 24, 0.86) 0%, rgba(6, 10, 24, 0.74) 16%, rgba(6, 10, 24, 0.5) 27%, rgba(6, 10, 24, 0.16) 36%, rgba(6, 10, 24, 0.08) 44%, rgba(6, 10, 24, 0.08) 66%, rgba(8, 13, 30, 0.62) 76%, rgba(10, 16, 36, 0.92) 87%, #0b1229 100%); }
.first-pic { position: absolute; z-index: 2; left: 0; top: 0; width: 214px; height: 291px; margin: 0; transform-origin: 0 0; visibility: hidden; }
.first-pic.laid { visibility: visible; }
.plate { width: 100%; height: 100%; background: #f6f1e6; box-shadow: 0 0 0 1px rgba(35, 31, 26, 0.35); }
.plate-in { position: relative; overflow: hidden; }
.pic { position: relative; }
.pic img { display: block; width: 100%; height: auto; }
.m .first-pic .hit { opacity: 0; transition: opacity 0.6s ease; }
.m .first-pic.landed .hit-dep { opacity: 1; }
.m .first-pic.landed .hit-tot { opacity: 1; transition-delay: 0.55s; }
.actions .btn { min-width: 132px; }

/* 2 · A sample day at the counter. The still composition first (scripts off, reduced motion): the moments in order,
   each on its own time of day, night to dawn to day, each screen under its words. */
.dayscene { position: relative; background: var(--canvas); }
.ct-stage { padding: 0; }
.sk, .ct-stage > .sky, .aim, .dl, .night-glass, .ng-edge, .strip-gap, .scan { display: none; }
.mo { padding: 56px max(var(--gut-r), calc((100% - var(--max)) / 2 + var(--gut-r))) 60px max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); }
.t-night { background: linear-gradient(180deg, #0a1024, #111c36); }
.t-dawn { background: linear-gradient(180deg, #16212e 0%, #1d2a3a 40%, #2b4563 64%, #6f6577 80%, #b98063 90%, #e2ac68 95%, #f1cf92 98%, var(--paper) 100%); }
.t-dawn .shot .tag { color: var(--cream-2); }
.t-day { background: var(--paper); }
.mo-say { max-width: 22ch; font: 400 clamp(28px, 7.4vw, 44px)/1.14 var(--display); text-wrap: balance; }
.t-night .mo-say, .t-dawn .mo-say { color: var(--white); }
.t-day .mo-say { color: var(--ink); }
.shot { --sw: min(100%, calc(var(--w) * 1.1px)); margin: 24px 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.shot > * { width: var(--sw); }
.shot .tag { margin-bottom: 8px; }
.s-cash { --w: 704; --h: 246; }
.s-card { --w: 590; --h: 310; }
@media (max-width: 599px) { .s-cash { --w: 328; } .s-card { --w: 465; --h: 131; } .m .s-close { left: 8px; right: 8px; } }
.mo .glass { --cm: var(--ink); }

/* The scene in motion: a tall track and a sticky stage. Behind, the sky turns night to dawn to day; across the bottom
   runs the counter's edge with the day's stations on it; above it stands the counter's screen, one moment at a time;
   the words for each moment sit at the top and never move while they show. page.js runs the clock. */
.m .ct-track { height: 660vh; }
.m .ct-stage { --edge: 104px; --say-top: 74px; --say-h: 112px; --hmax: calc(100svh - var(--edge) - 16px - var(--say-top) - var(--say-h) - 16px - 22px); }
.m .sk { display: block; position: absolute; inset: 0; z-index: 0; }
.sk-night { background: linear-gradient(180deg, #0b1229 0%, #0a1024 30%, #0f1a34 76%, #131e38 calc(100% - var(--edge)), #0b1122 calc(100% - var(--edge)), #080d1c 100%); }
.m .sk-dawn { opacity: 0; background: linear-gradient(180deg, #111a2b 0%, #16212e 24%, #1d2a3a 38%, #2b4563 54%, #6f6577 70%, #b98063 83%, #e2ac68 calc(100% - var(--edge) - 1px), #18202f calc(100% - var(--edge)), #121a28 100%); }
.m .sk-day { transform: translate3d(0, 135%, 0); will-change: transform; background: linear-gradient(180deg, var(--paper) calc(100% - var(--edge)), #efe5cf calc(100% - var(--edge))); }
/* The day comes up from the counter's edge behind a warm band, so the sky never passes through grey. */
.m .sk-day::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 34%; background: linear-gradient(0deg, var(--paper) 0%, rgba(241, 207, 146, 0.92) 30%, rgba(226, 172, 104, 0.55) 62%, rgba(226, 172, 104, 0) 100%); }
.sk-topo { position: absolute; inset: 0; width: 100%; height: 100%; }
.m .ct-stage > .sky { display: block; z-index: 1; }
.m .moments { position: absolute; inset: 0; z-index: 2; }
.m .mo { position: absolute; inset: 0; padding: 0; background: none; pointer-events: none; }
.m .mo-say { position: absolute; left: var(--gut); right: var(--gut-r); top: var(--say-top); height: var(--say-h); max-width: none; display: grid; place-items: center; text-align: center; font-size: clamp(25px, 7vw, 34px); line-height: 1.14; opacity: 0; }
.m .t-night .mo-say, .m .t-dawn .mo-say { text-shadow: 0 2px 22px rgba(10, 16, 36, 0.9); }
.m .t-day .mo-say { text-shadow: 0 0 18px rgba(244, 235, 215, 0.95); }
.m .shot { position: absolute; left: var(--gut); right: var(--gut-r); bottom: calc(var(--edge) + 16px); margin: 0; align-items: center; opacity: 0; --sw: min(100%, calc(var(--w) * 1.1px), calc(var(--hmax) * var(--w) / var(--h))); }
.m .t-dawn .shot .tag { color: var(--cream-2); }
.m .t-dawn .glass { --cm: rgba(240, 230, 207, 0.62); }
.m .s-open .glass { border-color: rgba(240, 230, 207, 0.4); }
.m .strip { margin-bottom: 0; }
.m .strip-gap { display: block; aspect-ratio: 439 / 28; }
.m .s-close { bottom: calc(var(--edge) + 16px + var(--hmax) * 0.34); }
/* the short screens (the card, the cash) stand off the counter line too, so the stage is not half bare paper */
.m .s-card, .m .s-cash { bottom: calc(var(--edge) + 16px + var(--hmax) * 0.3); }
/* The deposit comes off: the same sale is redrawn from the top behind a gold scan line, over the sale as it was. */
.m .s-applied .glass { background: none; }
.m .redraw .glass.cm::before { visibility: hidden; }
.m .rv-o { overflow: hidden; will-change: transform; }
.m .rv-i { will-change: transform; }
.m .scan { display: block; position: absolute; left: -1px; right: -1px; top: 0; z-index: 2; height: 2px; opacity: 0; background: linear-gradient(90deg, rgba(244, 196, 90, 0), var(--gold-bright) 18%, #fff1c2 50%, var(--gold-bright) 82%, rgba(244, 196, 90, 0)); box-shadow: 0 0 14px 2px rgba(244, 196, 90, 0.55); will-change: transform, opacity; }
.m .night-glass { display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(155deg, #1a263e 0%, #0e152a 36%, #0a1022 100%); will-change: transform; }
.m .night-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(240, 230, 207, 0) 38%, rgba(240, 230, 207, 0.07) 48%, rgba(240, 230, 207, 0) 58%); }
.m .ng-edge { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 2px; opacity: 0; background: linear-gradient(90deg, rgba(244, 196, 90, 0), var(--gold-bright) 22%, #fff1c2 50%, var(--gold-bright) 78%, rgba(244, 196, 90, 0)); box-shadow: 0 12px 24px 2px rgba(244, 196, 90, 0.42); will-change: transform, opacity; }

/* The mark that finds each moment's line on the screen: four corner ticks and a gold wash, moved by page.js. */
.m .aim { display: block; position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.aim-fill { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; background: rgba(244, 196, 90, 0.42); will-change: transform; }
.aim-c { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border: 0 solid var(--gold-ink); will-change: transform; }
.c1 { border-top-width: 2px; border-left-width: 2px; }
.c2 { border-top-width: 2px; border-right-width: 2px; }
.c3 { border-bottom-width: 2px; border-right-width: 2px; }
.c4 { border-bottom-width: 2px; border-left-width: 2px; }

/* The day's stations along the counter's edge: a marker on the edge, its name under it. Lit gold as the day reaches
   them; cream on the night's land, ink on the day's. */
.m .dl { display: flex; justify-content: space-between; position: absolute; z-index: 3; left: calc(var(--gut) + 24px); right: calc(var(--gut-r) + 24px); top: calc(100% - var(--edge) - 5px); pointer-events: none; }
/* each station centred on its point of the line (2026-10-24: they hung right of it, "Close" 4 to 5px from the edge) */
.dl li { position: relative; display: grid; justify-items: center; justify-content: center; gap: 9px; width: 0; }
.dl b { width: 10px; height: 10px; border: 1px solid rgba(240, 230, 207, 0.62); background: #0b1122; }
.dl span { font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); white-space: nowrap; }
.dl.is-day b { border-color: rgba(35, 31, 26, 0.62); background: var(--paper); }
.dl.is-day span { color: var(--ink-2); }
.dl li.lit b { background: var(--gold-bright); border-color: #fff1c2; box-shadow: 0 0 14px rgba(244, 196, 90, 0.75); }
.dl li.lit span { color: var(--gold-bright); }
.dl.is-day li.lit b { border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgba(244, 196, 90, 0.3); }
.dl.is-day li.lit span { color: var(--gold-ink); }
.dl li.held b { border-color: #f4c45a; }
.dl.is-day li.held b { border-color: var(--gold-ink); }

/* 3 · Day. The words that stay still: what the counter does, the connection it needs, the price. */
.day > .topo { -webkit-mask-image: linear-gradient(transparent 60px, #000 260px); mask-image: linear-gradient(transparent 60px, #000 260px); }
.how { position: relative; padding-top: 64px; padding-bottom: 12px; }
.how h2 { max-width: 17ch; }
.how-live { margin-top: 16px; max-width: 46ch; font: 400 13.5px/1.55 var(--mono); color: var(--ink-2); }
.how-rows { margin-top: 24px; max-width: 780px; border-top: 1px solid var(--rule-ink); }
.how-rows li { position: relative; padding: 13px 0 13px 26px; border-bottom: 1px solid var(--rule-ink); font: 600 18px/1.4 var(--sans); color: var(--ink); }
.how-rows li::before { content: ""; position: absolute; left: 1px; top: 21px; width: 8px; height: 8px; border: 1px solid var(--ink-2); }

.wire { position: relative; padding-top: 44px; }
.wire-card { --cm: var(--ink); display: grid; gap: 22px; padding: 22px 20px 24px; background: var(--paper-hi); border: 1px solid var(--ink-2); }
.wire h3 { max-width: 20ch; font: 400 clamp(27px, 6.8vw, 40px)/1.12 var(--display); color: var(--ink); text-wrap: balance; }
.wire-words p { margin-top: 14px; max-width: 48ch; font-size: 17px; line-height: 1.55; color: var(--ink); }
.wire-shot { margin: 0; width: min(100%, 470px); }
.wire-shot .glass { --cm: var(--ink); }
.wire-shot .tag { margin-top: 10px; line-height: 1.5; }

section.price { position: relative; padding-top: 48px; padding-bottom: 44px; }
.price-card { --cm: var(--ink); padding: 24px 20px 26px; background: var(--paper-hi); border: 1px solid var(--ink-2); container-type: inline-size; }
#price-h { margin-top: 14px; color: var(--ink); }
.rate { display: block; max-width: 100%; font: 500 clamp(28px, 15cqw, 72px)/1 var(--mono); letter-spacing: -0.03em; white-space: nowrap; }
@media (max-width: 359px) { .rate { font-size: 12vw; } } /* "4.6% + 30¢" ran 2px past its card at 314 (2026-10-24) */
.scope { display: block; margin-top: 12px; max-width: 26ch; font: 500 17px/1.4 var(--mono); letter-spacing: 0; }
.p406 { margin-top: 18px; font: 400 clamp(27px, 7vw, 38px)/1.1 var(--display); color: var(--ink); }
.p406 .n { font: 400 0.8em/1 var(--mono); letter-spacing: -0.02em; }
.price-fine { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-ink); }
.price-fine p { max-width: 54ch; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.price-act { margin-top: 24px; }
.price-act .btn { min-width: 170px; }
.more-com { margin-top: 34px; }
.more-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.more-com ul { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }
.more-com 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; }

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

/* Short phones: the same first screen set tighter, the screen showing its deposit and total; the scene's words set a
   little smaller. */
@media (max-height: 760px) and (max-width: 899px) {
  .m .ct-stage { --edge: 92px; --say-top: 68px; --say-h: 100px; }
  .m .mo-say { font-size: clamp(24px, 6.6vw, 30px); }
}
/* Narrow phones, and a phone at 125% page zoom (about 314px): 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; }
  .dl span { font-size: 9px; letter-spacing: 0.08em; }
  .m .dl { left: calc(var(--gut) + 20px); right: calc(var(--gut-r) + 20px); }
}

/* Tablet and up */
@media (min-width: 600px) {
  .shot { --sw: min(100%, calc(var(--w) * 1.25px)); }
  .m .shot { --sw: min(100%, calc(var(--w) * 1.25px), calc(var(--hmax) * var(--w) / var(--h))); }
  .m .ct-stage { --say-top: 84px; }
  .m .mo-say { font-size: clamp(30px, 5vw, 40px); }
  .wire-card { padding: 30px 30px 32px; }
  .price-card { padding: 30px 32px 32px; }
}

/* Laptop and up: on the first screen the words at left and the counter's screen at right; in the scene the words at
   left and the screens at right, over the edge that runs the width of the day. */
@media (min-width: 900px) {
  .hero-art .veil { background: linear-gradient(180deg, rgba(8, 12, 28, 0.7) 0%, rgba(8, 12, 28, 0) 16%, rgba(8, 12, 28, 0) 80%, rgba(10, 16, 36, 0.75) 100%); }
  .m .ct-track { height: 620vh; }
  .m .ct-stage { --edge: 128px; --lx: var(--read-x); --colw: min(420px, calc((100vw - var(--read-x) * 2) * 0.52)); --hmax: calc(100svh - var(--edge) - 20px - 96px - 22px); }
  .m .mo-say { left: var(--lx); right: auto; top: calc((100svh - var(--edge)) * 0.3); width: min(300px, calc(100vw - var(--lx) - var(--colw) - 40px)); height: auto; display: block; text-align: left; font-size: clamp(32px, 2.6vw, 44px); }
  .m .shot { left: auto; right: var(--lx); width: var(--colw); bottom: calc(var(--edge) + 20px); }
  .dl span { font-size: 11px; }
  .m .dl { left: calc(var(--lx) + 28px); right: calc(var(--lx) + 28px); }
  .how { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; gap: 64px; padding-top: 104px; }
  .how-rows { margin-top: 30px; }
  .how-rows li { font-size: 19px; }
  .wire { padding-top: 56px; }
  .wire-card { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); align-items: center; gap: 48px; padding: 36px 40px; }
  .wire-shot .tag { max-width: 46ch; }
  section.price { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 56px; padding-top: 64px; padding-bottom: 64px; }
  .price-card { padding: 34px 40px 36px; }
  .more-com { margin-top: 8px; }
  .more-com ul { display: grid; gap: 0; margin-top: 8px; }
  .ai-end { padding: 80px 0 130px; }
}