/* BeargrassAI 2.0.0 · page prototype: Custom work (BEA-432). This page's own layout over the kit. Every moving rule
   sits under .m, so reduced motion and scripts off show the still composition. */
.hero-art .glow { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The township, laid on the picture by page.js (one projective transform, never animated). Without scripts it has no
   place on the picture, so it is not shown. The sections over the bird break loose (.free) and keep their light. */
.hero-art .twp { position: absolute; z-index: 3; 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; }
.hero-art .twp i.free { z-index: 1; color: #fff6dc; }
.m .hero-art .twp.run i.free::before { animation: free 0.7s ease-out both; }
html:not(.m) .hero-art .twp i.free::before { opacity: 1; }
@keyframes free { from { opacity: 0; } to { opacity: 1; } }
.actions .btn { min-width: 132px; }

/* 2 · The scene (night). Still: the nine lines as a list with their figures, and the township with its open section. */
.work { position: relative; background: linear-gradient(180deg, #0b1122 0%, var(--canvas) 14%, #0c1530 74%, #141f36 100%); }
.work .stage { padding: 56px 0 64px; }
.lines { gap: 26px; }
.lines li > * { display: block; }
.ls { margin-top: 6px; font: 400 17px/1.45 var(--sans); color: var(--cream); }
.lc { margin-top: 4px; font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--gold-bright); }
.lines .fig { width: auto; height: 96px; max-width: 100%; margin: 14px 0 2px; color: rgba(240, 230, 207, 0.66); }
.blocks { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100% - 32px, 360px); margin: 40px auto 0; border-top: 1px solid rgba(240, 230, 207, 0.34); border-left: 1px solid rgba(240, 230, 207, 0.34); }
.sq { position: relative; aspect-ratio: 1 / 1; border-right: 1px solid rgba(240, 230, 207, 0.34); border-bottom: 1px solid rgba(240, 230, 207, 0.34); }
.sq i { position: absolute; left: 5px; top: 5px; font: 500 9.5px/1 var(--mono); font-style: normal; color: rgba(240, 230, 207, 0.86); }
.sq.open { background: rgba(244, 196, 90, 0.16); box-shadow: inset 0 0 0 1px rgba(244, 196, 90, 0.95), 0 0 22px rgba(244, 196, 90, 0.3); }
.vbox { display: none; }

/* In motion: a tall track and a pinned stage. The words stay at the top; the squares move below them. */
.m .work .track { height: 878vh; }
.m .work .stage { padding: 0; }
.m .lines-box { height: 136px; }
.m .lines li { grid-template-columns: minmax(0, 1fr); align-content: center; }
.m .ls { margin-top: 8px; font-size: 16px; text-shadow: 0 1px 14px rgba(10, 16, 36, 0.9); }
.m .lc { position: absolute; left: 0; right: 0; top: calc(100svh - 70px - 54px); margin: 0; text-align: center; text-shadow: 0 1px 12px rgba(10, 16, 36, 0.95); }
.m .lines .fig { display: none; }
.m .blocks { position: absolute; inset: 0; display: block; width: auto; margin: 0; border: 0; pointer-events: none; }
.m .sq { position: absolute; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 1px solid rgba(240, 230, 207, 0.4); background: rgba(12, 19, 38, 0.78); transform-origin: 50% 50%; will-change: transform, opacity; }
.m .sq::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(180deg, rgba(244, 196, 90, 0.34), rgba(244, 196, 90, 0.1)); box-shadow: inset 0 0 0 1px rgba(244, 196, 90, 0.95), inset 0 0 16px rgba(244, 196, 90, 0.22); opacity: var(--l, 0); }
.m .sq::after { content: ""; position: absolute; inset: -6px; pointer-events: none; background: var(--x) 0 0 / 11px no-repeat, var(--x) 100% 0 / 11px no-repeat, var(--x) 0 100% / 11px no-repeat, var(--x) 100% 100% / 11px no-repeat; opacity: calc(var(--p, 0) * 0.62); }
.m .sq i { position: absolute; z-index: 1; left: 4px; top: 4px; right: 4px; width: auto; overflow: hidden; font-size: 9px; opacity: var(--n, 1); }
.m .sq.open { background: rgba(12, 19, 38, 0.78); box-shadow: none; }
.m .vbox { display: block; position: absolute; left: 0; top: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; opacity: 0; will-change: transform, opacity; }
.m .vbox .iron { width: 54px; height: 54px; }
.m .vbox use { opacity: 0; }
.work .sky { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }

/* 3 · Dawn: the seven by daylight, crossing the sunrise (sunrise-wipe). */
.ours-head { padding: 72px 0 30px; background: linear-gradient(180deg, #141f36 0%, var(--night-2) 40%, #24364f 74%, var(--indigo) 100%); color: var(--cream); }
html:not(.js) .ours-head { background: linear-gradient(180deg, var(--night-2) 0%, #24364f 60%, var(--indigo) 100%); }
.ours-head h2 { max-width: 16ch; color: var(--white); }
.ours .dawn-art { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
@media (max-width: 599px) {
  .ours .card-wrap.wrap { padding-left: 0; padding-right: 0; }
  .ours .card { border-left: 0; border-right: 0; }
}
.roster .face-day, .roster .face-night { display: block; padding: 18px 18px 8px; }
.r-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.r-list { display: grid; margin-top: 8px; }
.r-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 18px 0 20px; border-top: 1px solid var(--rule-ink); }
.r-list .r-row:first-child { border-top: 0; }
.r-fig { grid-row: 1 / span 3; padding-top: 4px; }
.r-fig svg { width: 52px; height: 52px; color: var(--ink-2); }
.face-day .r-fig[data-fig="2"] svg, .face-day .r-fig[data-fig="6"] svg { color: var(--ink); }
.face-night .r-fig[data-fig="2"] svg, .face-night .r-fig[data-fig="6"] svg { color: var(--cream); }
.r-fig[data-fig="2"] svg path, .r-fig[data-fig="6"] svg path { stroke-width: 0.16; }
.r-name { grid-column: 2; font: 400 clamp(26px, 6.6vw, 34px)/1.08 var(--display); color: var(--ink); }
.r-name a { text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: rgba(35, 31, 26, 0.45); }
.r-name a:hover { text-decoration-color: var(--barn); }
.r-at { grid-column: 2; margin-top: 6px; font: 500 13px/1.45 var(--mono); color: var(--ink-2); }
.r-say { grid-column: 2; margin-top: 8px; max-width: 54ch; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.face-night .r-k, .face-night .r-at { color: var(--cream-2); }
.face-night .r-name, .face-night .r-say { color: var(--cream); }
.face-night .r-row { border-color: var(--rule); }
.face-night .r-fig svg { color: var(--cream-2); }
.fig .f-lit { fill: rgba(244, 196, 90, 0.85); }

/* 4 · Day: the off-ramp, Commerce and the price. */
#day > .topo { -webkit-mask-image: linear-gradient(transparent 70px, #000 300px); mask-image: linear-gradient(transparent 70px, #000 300px); }
.dp { position: relative; display: grid; gap: 44px; padding-top: 56px; padding-bottom: 56px; }
.talk h2 { max-width: 16ch; }
.prose a { font-weight: 600; text-decoration-color: var(--barn); text-decoration-thickness: 2px; }
.price-card { position: relative; padding: 22px 20px 26px; background: var(--paper-hi); border: 1px solid var(--ink-2); }
#price-h { margin-top: 10px; }
.price-say { margin-top: 16px; max-width: 32ch; font-size: 19px; line-height: 1.5; color: var(--ink); }
.price-act { margin-top: 24px; }
.price-act .btn { min-width: 170px; }

/* 5 · The AI box. */
.ai-end { position: relative; padding: 0 0 88px; }
.ai-in { max-width: 884px; }
.ai-end .aibox { margin-top: 0; }
.site.day { overflow: visible; }

/* Short phones: the same, set a little tighter so Start stays on the first screen with room under it. */
@media (max-height: 760px) and (max-width: 899px) {
  .m .lines-box { top: 62px; height: 124px; }
  .m .lc { top: calc(100svh - 62px - 46px); }
}
/* 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 .ls { font-size: 15px; }
}

/* Tablet and up */
@media (min-width: 600px) {
  .r-row { grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; }
  .r-fig svg { width: 64px; height: 64px; }
}

/* Laptop and up: the words at left on the night; the picture at right, as wide as the words leave, fading in from the
   night at its left edge; the scene's words above the squares; the six in two columns; how it starts beside the price. */
@media (min-width: 900px) {
  .hero-art .twp i { padding: 6px 7px; font-size: 10.5px; }
  .work .stage { padding: 90px 0 96px; }
  .blocks { width: min(100%, 520px); margin-inline: auto; }
  .m .work .lines-box { left: calc(50% - min(260px, (100vw - var(--read-x) * 2) / 2)); width: min(520px, calc(100vw - var(--read-x) * 2)); right: auto; transform: none; }
  .m .work .track { height: 810vh; }
  .m .lines-box { height: 160px; }
  .m .ls { font-size: 18px; }
  .m .lc { top: calc(100svh - max(86px, 10vh) - 64px); font-size: 13.5px; }
  .ours-head { padding: 104px 0 40px; }
  .roster .face-day, .roster .face-night { padding: 26px 30px 14px; }
  .r-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
  .r-list .r-row:nth-child(2) { border-top: 0; }
  .dp { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: start; gap: 80px; padding-top: 96px; padding-bottom: 96px; }
  .price-card { padding: 30px 32px 34px; margin-top: 30px; }
  .ai-end { padding-bottom: 130px; }
}

/* Round 3 (BGA 68 to 71): by day, DIY's off-ramp, Commerce with its rate and four pages, and one price card for both. */
.dp { grid-template-columns: minmax(0, 1fr); }
.talk .prose .n, .com .n { font-family: var(--mono); font-size: 0.93em; white-space: nowrap; }
.com h2 { max-width: 17ch; }
.com-rate { margin-top: 14px; font: 500 15px/1.45 var(--mono); }
.com-rate b { display: block; margin-bottom: 4px; font-weight: 500; font-size: clamp(36px, 10.5vw, 54px); line-height: 1.04; letter-spacing: -0.02em; }
.com .prose { margin-top: 16px; }
.com-parts { display: grid; gap: 14px; margin-top: 24px; padding: 0; list-style: none; }
.part { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 5px 10px; padding: 15px 16px 17px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.45); color: var(--ink); text-decoration: none; }
.part:hover { border-color: var(--ink); }
.pn { grid-row: 1 / 3; padding-top: 3px; font: 500 13px/1.3 var(--mono); color: var(--ink-2); }
.pt { font: 600 17px/1.3 var(--sans); text-decoration: underline 2px var(--barn); text-underline-offset: 0.24em; }
.pt::after { content: " \2192"; display: inline-block; margin-left: 6px; }
.pq { font: 400 clamp(19px, 5vw, 22px)/1.25 var(--display); color: var(--ink-2); text-wrap: balance; }
.com-all { margin-top: 18px; }
.com-all a { display: inline-block; padding: 10px 0; margin: -10px 0; font-weight: 600; color: var(--ink); text-decoration: underline 2px var(--barn); text-underline-offset: 0.16em; }
.price-rows { display: grid; margin-top: 12px; }
.pr { padding: 14px 0; border-top: 1px solid var(--rule-ink); }
.pr:first-child { border-top: 0; padding-top: 6px; }
.pr dt { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.pr dd { margin: 6px 0 0; font: 500 15px/1.45 var(--mono); }
.pr .pr-big { font: 400 clamp(36px, 9.6vw, 48px)/1.05 var(--display); }
.pr b.n { display: block; margin-bottom: 2px; font-weight: 500; font-size: clamp(28px, 8vw, 36px); line-height: 1.08; letter-spacing: -0.02em; }
@media (min-width: 700px) { .com-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .dp { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); row-gap: 88px; }
  .talk, .com { grid-column: 1; }
  .price { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .price-card { position: sticky; top: 110px; }
  #day { overflow: clip; } /* clip, not hidden, so the price card stays in view */
}