/* Interior templates only. Homepage selectors and production styles stay intact. */
.interior-page .page-intro { padding-top: calc(var(--space-10) + var(--space-7)); border-top: none; }
.page-intro .h-display { max-width: 18ch; font-weight: var(--weight-body); }
.page-intro__lead { margin-top: var(--space-6); }
.page-intro__action { margin-top: var(--space-6); }
.nav--interior [aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: var(--space-2); }
.page-menu { display: none; }
.image-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.image-text__media { margin: 0; min-width: 0; }
.image-text__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.image-text__media figcaption { margin-top: var(--space-3); font-size: var(--text-sm); }
.image-text__copy .body { margin-top: var(--space-5); }
.commercial-ledger { margin-top: var(--space-7); }
@media (max-width: 1100px) {
  /* Review drafts only: published pages (with .site-menu) follow navigation.css. */
  .nav--interior:has(.page-menu) .nav__links { display: none; }
  .nav--interior:has(.page-menu) .nav__in { grid-template-columns: 1fr auto auto; gap: var(--space-4); }
  .page-menu { display: block; }
  .page-menu summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font-size: var(--control-size); list-style: none; }
  .page-menu summary::-webkit-details-marker { display: none; }
  .page-menu summary::after { content: "+"; margin-left: var(--space-2); }
  .page-menu[open] summary::after { content: "−"; }
  .page-menu__links { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-tint); padding: var(--space-5); border-bottom: 1px solid var(--line); display: grid; }
  .page-menu__links a { padding: var(--space-3) 0; min-height: 44px; }
}
@media (max-width: 900px) {
  .image-text { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 720px) {
  .interior-page .page-intro { padding-top: var(--space-10); }
}
@media (max-width: 560px) {
  .nav--interior .nav__in { gap: var(--space-3); }
  .nav--interior .nav__in > .btn { display: none; }
  .nav--interior .nav__in { grid-template-columns: 1fr auto; }
  .commercial-ledger .rule-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

.dashboard-demo { margin: var(--space-7) 0 0; }
.dashboard-demo__placeholder { width: 100%; min-width: 0; aspect-ratio: 16 / 9; min-height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-3); padding: var(--space-5); text-align: center; border: 1px solid var(--line); background: var(--surface-tint); }
.dashboard-demo figcaption { margin-top: var(--space-3); font-size: var(--text-sm); }

.cost-chat { margin-top: var(--space-5); border: 1px solid var(--line-strong); padding: var(--space-5); }
.cost-chat__speaker { font-size: var(--text-sm); color: var(--ink-muted); }
.cost-chat__messages { max-height: 240px; overflow-y: auto; padding: var(--space-4) 0; }
.cost-chat__message { max-width: 66ch; overflow-wrap: anywhere; }
.cost-chat__speaker { margin-bottom: var(--space-2); font-weight: 500; }
.cost-chat__message--visitor { margin: var(--space-3) 0 var(--space-3) auto; padding: var(--space-3); background: var(--surface-tint); white-space: pre-wrap; }
.cost-chat__prompts, .cost-chat__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.cost-chat__prompts button, .cost-chat__quick button { min-height: 44px; padding: var(--space-2) var(--space-3); background: transparent; color: var(--ink); border: 1px solid var(--line-strong); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.cost-chat__prompts button:hover, .cost-chat__quick button:hover { background: var(--surface-tint); }
.cost-chat__form label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.cost-chat__composer { display: flex; gap: var(--space-3); align-items: flex-end; }
.cost-chat textarea { flex: 1; width: 100%; min-width: 0; min-height: 76px; max-height: 180px; resize: vertical; padding: var(--space-3); font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; }
.cost-chat textarea:focus-visible, .cost-chat button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.cost-chat button:disabled { opacity: .5; cursor: default; }
/* Live replies (cost-chat.js): line breaks kept, a quiet waiting state, the cost review handoff inside the reply. */
.cost-chat__text { white-space: pre-wrap; }
.cost-chat__prompts[hidden], .cost-chat__quick[hidden] { display: none; }
.cost-chat__message + .cost-chat__message { margin-top: var(--space-3); }
.cost-chat__message--pending .cost-chat__text { color: var(--ink-muted); animation: cost-chat-waiting 1.4s ease-in-out infinite; }
@keyframes cost-chat-waiting { 50% { opacity: .45; } }
.cost-chat__action { margin-top: var(--space-4); }
/* Persistent booking control below the composer, present from the first reply. */
.cost-chat__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.cost-chat__footer-note { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }
@media (max-width: 560px) { .cost-chat { padding: var(--space-4); } .cost-chat__composer { flex-direction: column; align-items: stretch; } }

/* ── Pricing (/pricing) ──────────────────────────────────────────────────
   Chosen September 28, 2026 over the photo hero (kept in commit 6154481). After the
   pricing pages reviewed that day: a centered text header on white, the prairie chat
   band rising out of it, the bill and one package card, the quote, the savings band
   and an FAQ. Follows design/DIRECTION.md and design/SKILL.md. */
.page-intro__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); font-size: 16px; }

/* The chat: translucent frame, near-opaque bubbles and composer. */
.chat-band .cost-chat { margin-top: 0; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cost-chat__title { padding-bottom: var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: clamp(20px, 1.7vw, 24px); font-weight: var(--weight-body); line-height: 1.25; letter-spacing: var(--track-title); color: #fff; text-wrap: balance; }
.chat-band .cost-chat__message { background: rgba(255, 255, 255, .92); color: var(--ink); padding: var(--space-4); border-radius: 14px 14px 14px 0; }
.chat-band .cost-chat__message--visitor { background: rgba(235, 245, 239, .92); border-radius: 14px 14px 0 14px; }
.chat-band .cost-chat__form label { color: #fff; }
.chat-band .cost-chat__prompts button, .chat-band .cost-chat__quick button { color: #fff; background: rgba(1, 20, 13, .35); border-color: rgba(255, 255, 255, .5); }
.chat-band .cost-chat__prompts button:hover, .chat-band .cost-chat__quick button:hover { background: rgba(1, 20, 13, .65); }
.chat-band textarea { background: rgba(255, 255, 255, .94); }
.chat-band .cost-chat button:focus-visible { outline-color: #fff; }
.chat-band .cost-chat__footer { border-top-color: rgba(255, 255, 255, .18); }
.chat-band .cost-chat__footer-note { color: rgba(255, 255, 255, .78); }

.interior-page--pricing .section { border-top: none; }

/* Every other section shares the header's track, so all left edges line up
   with the logo. */
.interior-page--pricing main > section:not(.chat-band) > .shell { max-width: var(--container-hero); padding-inline: clamp(var(--space-5), 10vw, 160px); }
.interior-page--pricing main > section .col-body { grid-column: 1 / -1; }

/* Heading column beside content, as on the company page. */
.pricing-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
.pricing-split__head .h-section { font-weight: var(--weight-body); max-width: none; text-wrap: balance; }
.pricing-split__head .body { margin-top: var(--space-5); max-width: 40ch; }
/* Type scale below the pricing header (September 29, 2026): label 12 caps or 13, small 15,
   body 16 to 17, lead 18 to 20, item 24 (20), section 48 (32), statement 44 (30),
   display 72 (40). The header keeps its own 80px headline and 18px facts. */
.pricing-package .pricing-split__head .body { max-width: 34ch; font-size: clamp(17px, 1.25vw, 18px); line-height: 1.55; }
/* Pricing's section headings are a step larger than the site's (Bilguun, September 29):
   48px at 1440, 32px on phones. Beside the bill, the heading column stays in view while
   the bill scrolls past, so the left side is never blank. */
.interior-page--pricing .pricing-package .h-section, .interior-page--pricing .pricing-faq .h-section { font-size: clamp(2rem, 3.4vw, 3rem); }
@media (min-width: 901px) { .pricing-package .pricing-split__head { position: sticky; top: calc(72px + var(--space-8)); } }

/* The bill: the agreed base as a solid block, overage as a narrow quiet block
   beside it. A schematic of how the price is built. It carries no numbers. */
.pricing-bill { margin: 0; }
.pricing-bill__bar, .pricing-bill__keys { display: grid; grid-template-columns: 3fr 1fr; }
.pricing-bill__bar { height: 72px; }
.pricing-bill__block:first-child { background: var(--brand); }
.pricing-bill__block + .pricing-bill__block { box-shadow: inset 0 0 0 1px var(--line-strong); }
.pricing-bill__key { padding: var(--space-4) var(--space-4) 0 0; }
.pricing-bill__key + .pricing-bill__key { padding-left: var(--space-4); padding-right: 0; }
.pricing-bill__term { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: var(--track-title); line-height: 1.25; text-wrap: balance; }
.pricing-bill__detail { margin-top: var(--space-2); font-size: 15px; color: var(--ink-muted); }

/* Proof band: the case study's packing-room photograph under a green scrim that is darkest
   behind the quote, the quote on the left, and a case file on the right in the same
   document style as the bill. No arrow on the button. */
.interior-page--pricing .pricing-proof { padding-block: var(--space-10); color: var(--on-brand); background: linear-gradient(90deg, rgba(0, 20, 13, .9) 0%, rgba(0, 20, 13, .78) 45%, rgba(0, 20, 13, .45) 100%), var(--proof-image) center / cover no-repeat, var(--brand-deep); }
.pricing-proof__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--space-7), 6vw, var(--space-10)); align-items: center; }
.pricing-proof__quote { margin: 0; }
.pricing-proof__quote blockquote { margin: 0; }
.pricing-proof__quote p { max-width: 24ch; text-indent: -0.42em; font-size: clamp(30px, 3.8vw, 44px); line-height: 1.25; letter-spacing: var(--track-title); text-wrap: pretty; }
.pricing-proof__quote figcaption { margin-top: var(--space-6); font-size: 15px; color: rgba(249, 251, 250, .76); }
.case-file { padding: var(--space-7); background: #fff; color: var(--ink); border-radius: 4px; box-shadow: 0 32px 64px -36px rgba(0, 0, 0, .55); }
.case-file__title { margin: 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: var(--weight-body); line-height: 1.2; letter-spacing: var(--track-title); text-wrap: balance; }
.case-file__figures { margin: var(--space-6) 0 0; border-top: 1px solid var(--ink); }
.case-file__figures > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.case-file__figures dt { font-size: 28px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.case-file__figures dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.case-file__link { margin-top: var(--space-6); }
/* Below 1100px the case file is too narrow beside the quote, so the two stack. */
@media (max-width: 1100px) {
  .pricing-proof__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .case-file { max-width: 520px; }
}

/* Closing, centered as on the company page. */
/* Closing: the page's last word, sized up to match the headline and the section headings
   (Bilguun, September 29, 2026), and pulled closer to the FAQ above it. */
.interior-page--pricing [aria-labelledby="close-title"] { background: var(--surface); text-align: center; padding-block: var(--space-6) var(--space-10); }
.interior-page--pricing [aria-labelledby="close-title"] .h-display { max-width: 16ch !important; margin-inline: auto; text-wrap: balance; font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: var(--weight-body); line-height: 1.05; letter-spacing: -0.035em; }
.interior-page--pricing [aria-labelledby="close-title"] .lead { max-width: 40ch; margin-inline: auto; text-wrap: balance; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-muted); }
.interior-page--pricing [aria-labelledby="close-title"] .btn { min-height: 56px; padding-inline: var(--space-6); font-size: 16px; }

@media (max-width: 900px) {
  .pricing-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .interior-page--pricing .pricing-proof { padding-block: var(--space-9); background: linear-gradient(rgba(0, 20, 13, .8), rgba(0, 20, 13, .72)), var(--proof-image) 60% center / cover no-repeat, var(--brand-deep); }
  .pricing-proof__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .case-file { padding: var(--space-5); }
}
@media (max-width: 560px) {
  .pricing-bill__bar { height: 64px; }
}

/* Header: a centered headline and facts row on white. */
.interior-page--pricing .pricing-intro { padding: calc(72px + var(--space-9)) 0 var(--space-8); text-align: center; }
/* A step above the shared display size (Bilguun, September 28, 2026): 80px at 1440,
   44px on phones. Kept on one line on desktop. */
.pricing-intro .h-display { max-width: none; margin-inline: auto; font-size: clamp(2.75rem, 7vw, 5rem); text-wrap: balance; }
.pricing-intro .page-intro__lead { margin: var(--space-5) auto 0; max-width: 44ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-muted); }
.pricing-intro .page-intro__facts { justify-content: center; color: var(--ink-muted); font-size: clamp(16px, 1.3vw, 18px); }
.pricing-intro .page-intro__facts li + li::before { content: "·"; margin-right: var(--space-4); color: var(--line-strong); }

/* The prairie band rises out of the white header: the top of the photograph fades up
   into the page like the overcast sky, then darkens where the chat sits. The band is
   tall so the landscape shows around the chat box; the white above it is kept short
   (tightened the same day at Bilguun's request). Bilguun chose the fade on
   September 28, 2026 because the hard edge between header and photo felt abrupt.
   The white fade is the one light scrim on the site; see DIRECTION.md. */
.interior-page--pricing .pricing-intro { padding-bottom: 0; }
/* The photograph starts 64px higher, under the header's white (--band-lift), so the clouds
   sit deeper in the fade. Padding and gradient stops add the same amount back, so the
   fade, the chat and the band's bottom edge stay where they were on the page. */
.chat-band {
  --band-lift: 64px;
  margin-top: calc(-1 * var(--band-lift));
  padding: calc(clamp(180px, 18vw, 260px) + var(--band-lift)) 0 clamp(160px, 16vw, 240px);
  background:
    linear-gradient(to bottom, #fff 0, #fff var(--band-lift), rgba(255, 255, 255, .8) calc(var(--band-lift) + 40px), rgba(255, 255, 255, 0) calc(var(--band-lift) + 160px)),
    linear-gradient(to bottom, rgba(1, 20, 13, 0) var(--band-lift), rgba(1, 20, 13, .36) calc(var(--band-lift) + 120px), rgba(1, 20, 13, .62) calc(var(--band-lift) + clamp(170px, 17vw, 240px)), rgba(1, 20, 13, .66) 100%),
    url("/design/mock/assets/support-cost-prairie-web.jpg") center 35% / cover no-repeat,
    var(--brand-deep);
}
.chat-band .shell { max-width: 880px; }

/* The bill as a document (after Designjoy's membership card: the offer shown as one
   object). A white sheet with a document rule under the header, line items marked
   Included, the base and overage bar, and the term at the foot. No prices or dates. */
.pricing-package .h-section { font-weight: var(--weight-body); }
.invoice { width: 100%; max-width: 560px; justify-self: end; margin: 0; padding: var(--space-7); background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 2px rgba(1, 41, 27, .04), 0 32px 64px -36px rgba(1, 41, 27, .3); }
.invoice__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--ink); }
.invoice__brand { display: inline-flex; align-items: center; gap: 9px; font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 72; }
.invoice__brand img { display: block; }
.invoice__kind, .invoice__lines dd { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.invoice__lines { margin: 0; }
.invoice__lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: 13px 0; border-bottom: 1px solid var(--line); }
.invoice__lines dt { font-size: 17px; }
.invoice__lines dd { margin: 0; white-space: nowrap; }
.invoice .pricing-bill { margin-top: var(--space-6); }
.invoice .pricing-bill__bar { height: 36px; }
.invoice .pricing-bill__keys { display: flex; justify-content: space-between; gap: var(--space-4); }
.invoice .pricing-bill__key, .invoice .pricing-bill__key + .pricing-bill__key { padding: var(--space-3) 0 0; }
.invoice .pricing-bill__key + .pricing-bill__key { text-align: right; }
.invoice .pricing-bill__term { font-size: 17px; }
.invoice .pricing-bill__detail { margin-top: 2px; font-size: 15px; }
.invoice__foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--ink); font-size: 17px; }

/* FAQ: ruled disclosure list. */
.pricing-faq__list { border-bottom: 1px solid var(--line); }
.pricing-faq__list details { border-top: 1px solid var(--line); }
.pricing-faq__list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); min-height: 44px; padding: var(--space-5) 0; cursor: pointer; list-style: none; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; letter-spacing: var(--track-title); }
.pricing-faq__list summary::-webkit-details-marker { display: none; }
.pricing-faq__sign::before { content: "+"; font-size: 22px; color: var(--ink-muted); }
.pricing-faq__list details[open] .pricing-faq__sign::before { content: "\2212"; }
.pricing-faq__list summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pricing-faq__list details p { padding-bottom: var(--space-5); font-size: 17px; line-height: 1.6; color: var(--ink-muted); max-width: 56ch; }

@media (max-width: 900px) {
  .invoice { justify-self: stretch; max-width: none; }
}
@media (max-width: 560px) {
  .interior-page--pricing .pricing-intro { padding: calc(64px + var(--space-8)) 0 var(--space-7); text-align: left; }
  .pricing-intro .page-intro__lead { margin-inline: 0; }
  .pricing-intro .page-intro__facts { flex-direction: column; gap: var(--space-2); justify-content: flex-start; }
  .pricing-intro .page-intro__facts li + li::before { content: none; }
  .chat-band { --band-lift: 40px; padding: calc(170px + var(--band-lift)) 0 var(--space-9); background-image: linear-gradient(to bottom, #fff 0, #fff var(--band-lift), rgba(255, 255, 255, .8) calc(var(--band-lift) + 30px), rgba(255, 255, 255, 0) calc(var(--band-lift) + 110px)), linear-gradient(to bottom, rgba(1, 20, 13, 0) var(--band-lift), rgba(1, 20, 13, .66) calc(var(--band-lift) + 150px), rgba(1, 20, 13, .7) 100%), url("/design/mock/assets/support-cost-prairie-web.jpg"); }
  .invoice { padding: var(--space-5); }
  .invoice__lines dt { font-size: 16px; }

}