/* BeargrassAI 2.0.0 · page prototype: Privacy (BEA-432). Loads after /brand/tokens.css and /brand/base.css.
   The page's own layout: the first screen (night, the township), the scene (night: the four ways your information
   comes in, on one survey line that ends at your rights), the contents crossing the dawn, and the policy by day.
   Without motion every station shows lit and still; under .m the scroll lights them (page.js). */

/* ?draft in the address outlines every sentence changed for 2.0.0 (data-draft), for Mark's and a lawyer's read. */
.show-draft [data-draft] { outline: 2px dashed var(--barn); outline-offset: 3px; }

/* The wordmark link at a full 44px touch target (as pricing). */
.site .mark { padding: 10px 0; }
/* The township, laid on the land outside by page.js (one projective transform, never animated) and cut to the glass.
   Without scripts it has no place on the picture, so it is not shown. Its wrapper fades it as you scroll in. */
.twp-w { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.hero-art .twp { position: absolute; 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: 9px; }
.hero-art .glow { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.actions .btn { min-width: 132px; }

/* 2 · The scene (night): one survey line, four stations, then your rights. */
.ways { position: relative; background: linear-gradient(180deg, #142038 0%, var(--canvas) 14%, var(--canvas) 86%, #111c36 100%); }
.ways .stage { padding: 60px 0 64px; }
.ways-box { position: relative; z-index: 3; }
.ways h2 { margin: 0; max-width: 15ch; font-size: clamp(28px, 7.4vw, 52px); line-height: 1.08; color: var(--white); }
.trail { position: relative; margin-top: 24px; padding-left: 46px; }
.stations { position: relative; display: grid; gap: 18px; }
.stations::before { content: ""; position: absolute; left: -32px; top: -18px; bottom: -26px; border-left: 2px dotted rgba(240, 230, 207, 0.42); }
.st { position: relative; }
.st-n { position: absolute; z-index: 1; left: -46px; top: 0; width: 30px; height: 24px; border: 1px solid var(--gold-bright); background: linear-gradient(180deg, rgba(244, 196, 90, 0.26), rgba(244, 196, 90, 0.08)), var(--canvas); box-shadow: 0 0 18px rgba(244, 196, 90, 0.38); font: 500 11px/22px var(--mono); text-align: center; color: var(--gold-bright); }
.st-k { font: 600 17px/1.3 var(--sans); color: var(--white); }
.st-s { margin-top: 4px; max-width: 46ch; font-size: 15.5px; line-height: 1.5; color: var(--cream); }
.rights { position: relative; margin-top: 26px; padding: 14px 16px 16px; background: rgba(11, 18, 37, 0.94); border: 1px solid rgba(244, 196, 90, 0.62); --cm: rgba(244, 196, 90, 0.9); box-shadow: 0 0 50px -16px rgba(244, 196, 90, 0.42); }
.rights::after { content: ""; position: absolute; left: -32px; top: 0; width: 31px; height: 50%; border-left: 2px dotted rgba(240, 230, 207, 0.42); border-bottom: 2px dotted rgba(240, 230, 207, 0.42); }
.rights-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.rights-s { margin-top: 8px; max-width: 30ch; font: 400 clamp(21px, 5.6vw, 30px)/1.22 var(--display); color: var(--white); text-wrap: balance; }
html:not(.js) .ways .stage { background-image: linear-gradient(rgba(240, 230, 207, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 230, 207, 0.06) 1px, transparent 1px); background-size: 64px 64px; }

/* The scene in motion: a tall track, a sticky stage; the stations start unlit and the light lights them. */
.m .ways .track { height: 290vh; }
.m .ways .stage { padding: 0; }
.m .ways-in { height: 100%; }
.m .ways-box { transform-origin: 0 0; }
.m .st-n { border-color: rgba(240, 230, 207, 0.4); background: var(--canvas); box-shadow: none; color: var(--cream-2); transition: border-color 0.35s, color 0.35s, box-shadow 0.35s, background-color 0.35s; }
.m .st.on .st-n { border-color: var(--gold-bright); background: linear-gradient(180deg, rgba(244, 196, 90, 0.26), rgba(244, 196, 90, 0.08)), var(--canvas); box-shadow: 0 0 18px rgba(244, 196, 90, 0.38); color: var(--gold-bright); }
.m .st-s { color: var(--cream-2); transition: color 0.35s; }
.m .st.on .st-s { color: var(--cream); }
.m .rights { border-color: var(--rule); --cm: rgba(240, 230, 207, 0.5); box-shadow: none; transition: border-color 0.45s, box-shadow 0.45s; }
.m .rights.on { border-color: rgba(244, 196, 90, 0.62); --cm: rgba(244, 196, 90, 0.9); box-shadow: 0 0 50px -16px rgba(244, 196, 90, 0.42); }
.m .rights-k { color: var(--cream-2); transition: color 0.45s; }
.m .rights.on .rights-k { color: var(--gold-bright); }
.ways .sky { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }

/* 3 · Dawn: the policy, section by section, night glass to cardstock (sunrise-wipe). */
.toc-head { background: linear-gradient(180deg, #111c36 0%, var(--night-2) 50%, var(--indigo) 100%); color: var(--cream); padding: 64px 0 26px; }
.toc-head h2 { max-width: 16ch; margin: 0; font-size: clamp(30px, 8vw, 54px); line-height: 1.06; color: var(--white); }
.toc .face-day, .toc .face-night { display: block; }
.toc-list { display: grid; padding: 4px 18px 6px; }
.toc-list li { display: flex; align-items: center; gap: 12px; min-height: 50px; border-top: 1px solid var(--rule-ink); }
.toc-list li:first-child { border-top: 0; }
.toc-list a, .toc-list li > span:last-child { flex: 1 1 auto; display: flex; align-items: center; min-height: 50px; padding: 10px 0; font: 600 16.5px/1.35 var(--sans); color: var(--ink); text-decoration: none; }
.toc-list a:hover { text-decoration: underline; }
.toc-n { flex: 0 0 auto; display: inline-flex; width: 9px; }
.toc-n.x::before { margin: 0; }
.face-day .toc-n.x::before { background-image: var(--x-ink); }
.face-night .toc-list li { border-color: var(--rule); }
.face-night .toc-list li > span:last-child { color: var(--cream); }

/* 4 · Day: the policy, words that stay still on quiet paper. */
.day > .topo { -webkit-mask-image: linear-gradient(transparent 50px, #000 240px); mask-image: linear-gradient(transparent 50px, #000 240px); }
.legal { position: relative; padding-top: 60px; padding-bottom: 12px; }
.draft-note { display: block; max-width: 640px; margin: 0 0 34px; }
.draft-note p + p { margin-top: 6px; }
.legal-intro { max-width: 60ch; font-size: 19px; line-height: 1.6; color: var(--ink); }
.clause { margin-top: 36px; padding-top: 30px; border-top: 1px solid rgba(35, 31, 26, 0.24); scroll-margin-top: 76px; }
.clause h2 { margin: 0; font-size: clamp(27px, 6.8vw, 36px); line-height: 1.12; color: var(--ink); }
.clause-b { margin-top: 14px; }
.clause-b > * + * { margin-top: 16px; }
.clause p, .clause li { max-width: 64ch; font-size: 17.5px; line-height: 1.66; color: var(--ink); }
.clause strong, .clause em { font-weight: 600; font-style: normal; }
.clause ul li { position: relative; padding-left: 22px; }
.clause ul li + li { margin-top: 10px; }
.clause ul li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; border: 1px solid var(--ink-2); }
.clause a { text-decoration-color: rgba(35, 31, 26, 0.45); overflow-wrap: anywhere; }
.clause a:hover { text-decoration-color: var(--ink); }
.n { font-family: var(--mono); font-size: 0.92em; letter-spacing: -0.01em; white-space: nowrap; }

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

/* Short phones: the same three thirds and the scene, set tighter. */
@media (max-height: 760px) and (max-width: 899px) {
  .st-k { font-size: 16px; }
  .st-s { font-size: 14.5px; }
  .stations { gap: 14px; }
}

/* Narrow phones, and a phone at 125% page zoom (about 314px): Start at the picture pages' width (as about). */
@media (max-width: 360px) {
  .actions .btn { min-width: 108px; padding-left: 18px; padding-right: 18px; }
}

/* Laptop and up: the words left and the township right; the scene in two columns; the policy with its headings
   held at the left while you read. */
@media (min-width: 700px) {
  .toc-list { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: 36px; padding: 8px 28px 10px; }
  .toc-list li:nth-child(6) { border-top: 0; }
}
@media (min-width: 900px) { /* along the bottom edge, on the night, as Custom work's */
  .hero-art .twp i { font-size: 10.5px; padding: 5px 6px; }
  .ways .stage { padding: 96px 0 96px; }
  .ways-box { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .trail { margin-top: 10px; }
  .stations { gap: 26px; }
  .st-k { font-size: 19px; }
  .st-s { font-size: 16.5px; }
  .rights { margin-top: 34px; padding: 20px 22px 22px; }
  .stations::before { bottom: -34px; }
  .toc-head { padding: 104px 0 40px; }
  .legal { padding-top: 80px; }
  .clause { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); margin-top: 44px; padding-top: 36px; }
  .clause h2 { position: sticky; top: 96px; align-self: start; }
  .clause-b { margin-top: 2px; }
  .clause p, .clause li { font-size: 18.5px; }
  .ai-sec { padding: 64px 0 130px; }
}