/* BeargrassAI 2.0.0 · page prototype: Commerce (BEA-432). Loads after /brand/tokens.css and /brand/base.css. Only what
   is this page's own. Every moving rule sits under .m, so reduced motion and scripts off show the still composition. */

/* Light, as this page holds it: a lit section glows from its edge in, so it reads as light on the night blue. */
.week { --lit: linear-gradient(180deg, rgba(244, 196, 90, 0.34), rgba(244, 196, 90, 0.1)); --lit-edge: inset 0 0 0 1px rgba(244, 196, 90, 0.95), inset 0 0 18px rgba(244, 196, 90, 0.22), 0 0 22px rgba(244, 196, 90, 0.26); }

/* The wordmark link at a full 44px touch target, as on pricing. base.css's .day (the day wrapper) also matches the
   header's day state, and its overflow: hidden would clip the phone menu by day (as the kit page found). */
.site .mark { padding: 10px 0; }
.site.day { overflow: visible; }
.first-glow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* The township, laid on the picture by page.js (one transform, never animated); without scripts it is not shown. */
.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: 3px 4px; font-size: 8px; }
.actions .btn { min-width: 132px; }

/* 2 · The sample week (night). Still first: the step lines as a list, then the week with every booking lit. */
.week { position: relative; background: linear-gradient(180deg, var(--canvas) 0%, #0b1228 40%, #0e1731 75%, #121d37 100%); }
.week .stage { padding: 64px 0 52px; }
.cal { position: relative; z-index: 2; width: min(100% - 32px, 520px); margin: 30px auto 0; }
.cal-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 8px; }
.days li { padding: 0 0 7px 5px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); }
.grid { position: relative; aspect-ratio: 1 / 1; }
.grid .twp { position: absolute; inset: 0; }
.bk { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); pointer-events: none; }
.bk b { position: relative; margin: 1px 0 0 1px; background: var(--lit); box-shadow: var(--lit-edge); }
.taken { position: absolute; left: calc(100% / 3 - 1px); top: calc(100% + 9px); max-width: calc(200% / 3); padding: 5px 9px 6px; font: 500 10.5px/1.35 var(--mono); color: var(--gold-bright); background: rgba(10, 16, 36, 0.94); border: 1px solid rgba(244, 196, 90, 0.7); }
.taken::before { content: ""; position: absolute; left: 14px; top: -5px; width: 8px; height: 8px; background: rgba(10, 16, 36, 0.94); border-left: 1px solid rgba(244, 196, 90, 0.7); border-top: 1px solid rgba(244, 196, 90, 0.7); transform: rotate(45deg); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 52px; font: 500 11px/1.4 var(--mono); color: var(--cream-2); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; border: 1px solid rgba(240, 230, 207, 0.5); }
.legend .lg-on::before { background: rgba(244, 196, 90, 0.45); border-color: var(--gold-bright); }

/* The scene in motion: a tall track, a sticky stage; the step lines at the top, the week under them. */
.m .week .track { height: 430vh; }
.m .week .lines li { font-size: clamp(26px, 7.2vw, 46px); }
.m .week .lines-box { top: max(70px, 50svh - 300px); }
.m .cal { position: absolute; left: 50%; top: calc(max(70px, 50svh - 300px) + 130px); margin: 0; width: min(100% - 32px, 100svh - 290px, 520px); transform: translateX(-50%); }
.m .bk b { opacity: 0; transition: opacity 0.25s ease-out; }
.m .bk b.on { opacity: 1; }
.m .taken { opacity: 0; transition: opacity 0.3s; }
.m .taken.show { opacity: 1; }
.week .sky { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* 3 · Dawn: the heading at night, then the sample confirmation crossing the sunrise. */
.conf { position: relative; background: var(--paper); color: var(--ink); }
.conf-head { padding: 64px 0 34px; background: linear-gradient(180deg, #121d37 0%, var(--night-2) 34%, #24364f 68%, var(--indigo) 100%); color: var(--cream); }
.conf-head .eyebrow { color: var(--cream-2); }
.conf-head h2 { max-width: 19ch; font-size: clamp(32px, 8.4vw, 58px); line-height: 1.06; color: var(--white); }
.m #dawn .dawn-art { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.dawn .card-c { max-width: 100%; }
.mail .face { display: block; padding: 18px 18px 20px; }
.mail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mail-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.mail-from { margin-top: 5px; font: 400 13px/1.4 var(--mono); color: var(--ink-2); }
.mail .brand-day { margin: -2px -4px 0 0; }
.mail-h { margin-top: 8px; font: 400 clamp(30px, 8.4vw, 44px)/1.05 var(--display); color: var(--ink); text-wrap: balance; }
.mail-rows { margin-top: 16px; border-top: 1px solid var(--rule-ink); }
.mail-rows div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-ink); }
.mail-rows dt { font: 500 11px/1.65 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.mail-rows dd { font: 500 15px/1.5 var(--mono); color: var(--ink); }
.mail-reply { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.mail-cap { position: relative; z-index: 2; max-width: 100%; margin: 18px 0 0; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.face-night .mail-k, .face-night .mail-from, .face-night .mail-rows dt { color: var(--cream-2); }
.face-night .mail-h, .face-night .mail-rows dd, .face-night .mail-reply { color: var(--cream); }
.face-night .mail-rows, .face-night .mail-rows div { border-color: var(--rule); }

/* 4 · Day: the money's trail. Cards on the paper, dotted trails drawn between them (page.js), lit as you scroll. */
.day > .topo { -webkit-mask-image: linear-gradient(180deg, transparent 70px, #000 280px); mask-image: linear-gradient(180deg, transparent 70px, #000 280px); }
.money { position: relative; padding: 60px 0 30px; }
.money h2, .parts h2 { max-width: 17ch; }
.trail { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "on ctr" "acct acct" "bank fee"; gap: 70px 14px; margin-top: 30px; }
.trail-art { display: none; }
.node { position: relative; z-index: 2; padding: 12px 12px 14px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.45); transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s; }
.n-on { grid-area: on; } .n-ctr { grid-area: ctr; } .n-bank { grid-area: bank; } .n-fee { grid-area: fee; }
.n-acct { grid-area: acct; justify-self: center; width: min(100%, 380px); padding: 16px 16px 18px; }
.nk { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.nh { margin-top: 4px; font: 400 clamp(28px, 7.6vw, 36px)/1.06 var(--display); color: var(--ink); }
.nt { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.node.lit, html:not(.m) .node { border-color: #b8873e; --cm: var(--gold-ink); box-shadow: 0 0 0 1px rgba(212, 162, 90, 0.55), 0 16px 34px -20px rgba(184, 135, 62, 0.9); }
.n-acct.lit, html:not(.m) .n-acct { background: #fffaf0; }
.js .trail-art { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
/* Scripts off: the trails as plain dotted lines between the cards. */
html:not(.js) .n-acct::after, html:not(.js) .n-bank::after, html:not(.js) .n-fee::after { content: ""; position: absolute; left: 50%; bottom: 100%; height: 70px; border-left: 2px dotted #b8873e; }

/* 5 · Day: the four pages, each its own question. */
.parts { position: relative; padding: 56px 0 30px; }
.part-list { display: grid; gap: 18px; margin-top: 26px; }
.part { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 5px; padding: 16px 16px 18px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.45); color: var(--ink); text-decoration: none; transition: background-color 0.2s, border-color 0.2s; }
.part:hover { background: #fffaf0; 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 18px/1.3 var(--sans); text-decoration: underline; text-decoration-color: var(--barn); text-decoration-thickness: 2px; text-underline-offset: 0.24em; }
.pt::after { content: " \2192"; text-decoration: none; display: inline-block; margin-left: 6px; }
.pq { font: 400 clamp(20px, 5.4vw, 24px)/1.25 var(--display); color: var(--ink-2); text-wrap: balance; }

/* 6 · Day: the rate, where Start lands, and the one action. */
.rate { position: relative; padding: 44px 0 40px; scroll-margin-top: 72px; }
.rate-in { display: grid; gap: 40px; }
.rate-card { padding: 22px 20px 20px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); box-shadow: 0 34px 60px -38px rgba(35, 31, 26, 0.7); }
.rate-n { margin-top: 12px; font: 500 15px/1.45 var(--mono); color: var(--ink); }
.rate-n b { display: block; margin-bottom: 6px; font-weight: 500; font-size: clamp(40px, 12vw, 62px); line-height: 1.04; letter-spacing: -0.02em; }
.rate-406 { margin-top: 16px; font: 400 clamp(27px, 7vw, 36px)/1.1 var(--display); color: var(--ink); }
.rate-406 .n { font: 400 0.8em/1 var(--mono); letter-spacing: -0.02em; }
.rate-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); }
.rate-list { display: grid; gap: 10px; margin-top: 16px; }
.rate-list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.rate-list li::before { content: ""; position: absolute; left: 1px; top: 9px; width: 6px; height: 6px; border: 1px solid var(--ink-2); }
.more-in { margin-top: 12px; }
.more-in 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; }
.more-in a::after { content: "\2192"; margin-left: 8px; }
.setup.prose { margin-top: 0; }
.setup .talk { margin-top: 6px; }
.setup .talk .btn { min-width: 170px; }

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

/* Short phones: the first screen set tighter, so Start keeps its room. */
@media (max-height: 760px) and (max-width: 899px) {
  .m .week .lines-box { top: 66px; }
  .m .cal { top: 186px; width: min(100% - 32px, 100svh - 270px, 520px); }
  .legend { margin-top: 46px; }
}
/* Narrow phones, and a phone at 125% page zoom (about 314px): Start and its link on one row. */
@media (max-width: 389px) {
  .actions .btn { min-width: 112px; padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 360px) {
  .actions .btn { min-width: 108px; }
  .actions .more { font-size: 15px; gap: 7px; }
  .trail { column-gap: 10px; }
  .node { padding: 10px 10px 12px; }
  .nt { font-size: 14.5px; }
}
@media (min-width: 700px) {
  .part-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trail { column-gap: 22px; }
}

/* Laptop and up. The trail runs left to right: two sources, the account, then the bank and our part. */
@media (min-width: 900px) {
  .hero-art .twp i { padding: 5px 6px; font-size: 9.5px; }
  /* the week on a laptop: the step lines at left, the week at right, both on the middle of the screen */
  .m .week .lines-box { left: var(--read-x); top: 50%; width: min(340px, calc((100vw - var(--read-x) * 2) * 0.44)); height: 240px; transform: translateY(-50%); }
  .m .week .lines-box::before { inset: -40px -30px; }
  .m .week .lines li { place-items: center start; text-align: left; inset: 0 0 26px; }
  .m .week .ticks { justify-content: flex-start; }
  .m .cal { left: auto; right: var(--read-x); top: 50%; width: min(calc((100vw - var(--read-x) * 2) * 0.5), 100svh - 230px, 420px); transform: translateY(-50%); }
  .legend { margin-top: 56px; }
  .conf-head { padding: 104px 0 40px; }
  .mail .face { padding: 26px 28px 28px; }
  .money { padding: 84px 0 40px; }
  .trail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "on acct bank" "ctr acct fee"; gap: 34px 110px; margin-top: 44px; }
  .n-acct { align-self: center; width: 100%; padding: 22px 22px 24px; }
  .node { padding: 16px 18px 18px; }
  .nt { font-size: 16px; }
  .parts { padding: 70px 0 40px; }
  .part { padding: 20px 22px 22px; }
  .rate { padding: 56px 0 50px; }
  .rate-in { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; gap: 64px; }
  .rate-card { padding: 30px 30px 26px; }
  .ai-sec { padding: 40px 0 130px; }
}
.part-of a { font-weight: 600; text-decoration-color: var(--barn); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }