/* ============================================================
   WagonWorksAI Pages · shared chrome for the inner pages
   Site nav, masthead, reading column, page objects.
   Built on tokens + base + components. No new pigments.
   ============================================================ */

/* ---------- Site nav (inner pages) ---------- */
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; flex-wrap: wrap; }
.site-nav .brand { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: -.01em; text-decoration: none; color: var(--ink); line-height: 1; }
.site-nav .brand .ai { color: var(--sunrise); font-style: italic; font-weight: 600; }
.site-nav .brand small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--saddle); font-weight: 400; margin-top: 2px; }
.site-nav .links { display: flex; gap: 22px; align-items: center; font-family: var(--sans); font-size: 13.5px; font-weight: 600; }
.site-nav .links a { color: var(--ink); text-decoration: none; letter-spacing: .01em; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-nav .links a:hover { color: var(--sunrise); }
.site-nav .links a.current { color: var(--sunrise); border-bottom-color: var(--sunrise); }

@media (max-width: 780px) {
  .site-nav { justify-content: center; text-align: center; }
  .site-nav .links { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; gap: 14px 18px; }
}

/* ---------- Masthead ---------- */
.doc-mast { padding: 64px 0 44px; border-bottom: 4px double var(--ink); }
.doc-mast h1 { font-size: clamp(40px, 6.5vw, 74px); }
.doc-mast .lead { margin-top: 20px; }

/* ---------- Reading column ---------- */
.read { max-width: 720px; margin: 0 auto; }
.read h2 { margin: 0 0 20px; }
.read h3 { margin: 30px 0 10px; }
.read p { font-size: 17.5px; margin-bottom: 18px; line-height: 1.75; }
.lead { font-size: 20px; line-height: 1.7; max-width: 60ch; }
.read .lead { color: var(--ink); }

/* ---------- Feature cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 32px; }
.card { background: #faf5ee; border: 2px solid var(--ink); border-radius: 12px; padding: 28px 28px; box-shadow: 0 2px 10px rgba(29,42,58,.07); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.card:hover { border-color: var(--sunrise); box-shadow: 0 8px 20px rgba(29,42,58,.12); transform: translateY(-3px); }
.card .g { margin-bottom: 12px; }
.card h4 { font-size: 20px; margin-bottom: 8px; }
.card p { font-family: var(--sans); font-size: 14.5px; color: #4a4336; line-height: 1.65; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Steps (survey markers in a row) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.step .disc {
  width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center; position: relative; background: var(--cream); margin-bottom: 16px;
}
.step .disc::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed var(--saddle); }
.step .disc b { font-weight: 900; font-size: 22px; }
.step h4 { font-size: 21px; margin-bottom: 8px; }
.step p { font-family: var(--sans); font-size: 14.5px; color: #4a4336; line-height: 1.65; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Callout (a marked remark) ---------- */
.callout { background: var(--parch); border: var(--border); border-left: 8px solid var(--sunrise); border-radius: 8px; padding: 24px 30px; margin: 28px 0; }
.callout .k { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--sunrise); margin-bottom: 8px; }
.callout p { font-size: 18px; margin: 0; line-height: 1.6; }
.callout p.small { font-size: 15px; font-family: var(--sans); color: var(--saddle); margin-top: 8px; }

/* ---------- What shapes the price ---------- */
.pricepoints { list-style: none; max-width: 660px; margin-top: 6px; }
.pricepoints li { font-family: var(--sans); font-size: 15px; padding: 13px 0; border-bottom: 1px dotted var(--line); display: flex; gap: 14px; line-height: 1.5; }
.pricepoints li::before { content: "\25C6"; color: var(--sunrise); flex-shrink: 0; }
.pricepoints li b { font-weight: 700; }

/* ---------- FAQ (native accordion) ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq .grp { font-family: var(--sans); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--saddle); margin: 40px 0 6px; }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq summary { font-family: var(--display); font-weight: 900; font-size: 20px; cursor: pointer; padding: 18px 44px 18px 0; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 28px; color: var(--sunrise); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq .a { font-family: var(--sans); font-size: 15px; line-height: 1.75; color: #4a4336; padding: 0 40px 20px 0; }
.faq .a a { color: var(--sky); }

/* ---------- Claim band (daylight CTA strip) ---------- */
.claimband { text-align: center; }
.claimband h2 { margin-bottom: 12px; }
.claimband .lede { margin: 0 auto 26px; }

/* ---------- Legal / policy prose ---------- */
.legal { max-width: 720px; margin: 0 auto; }
.legal .updated { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--saddle); margin-bottom: 26px; }
.legal h2 { font-size: 24px; margin: 34px 0 12px; }
.legal h3 { font-size: 18px; margin: 22px 0 8px; font-weight: 700; }
.legal p, .legal li { font-family: var(--sans); font-size: 15px; line-height: 1.75; color: #3a3428; margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 14px; }
.legal .plainnote { font-style: italic; font-family: var(--display); font-size: 16px; color: var(--sky); border-top: 2px solid var(--sunrise); padding-top: 14px; margin-top: 34px; }

/* ---------- Data-stays-home diagram ---------- */
.homefig { display: block; max-width: 560px; margin: 30px auto 0; }

/* ============================================================
   Review pass 2 — masthead grounding, nav stamp, chapters, etc.
   ============================================================ */

/* Masthead: a faint brand watermark fills the open margin (G1) */
.doc-mast { position: relative; overflow: hidden; }
.doc-mast .wrap { position: relative; z-index: 1; }
.doc-mast .brandmark { position: absolute; top: 50%; right: -26px; width: 200px; height: auto; transform: translateY(-50%) rotate(-6deg); opacity: .06; pointer-events: none; z-index: 0; }
@media (max-width: 760px) { .doc-mast .brandmark { right: -64px; width: 150px; opacity: .05; } }

/* A short Sunrise rule grounds the eyebrow (G3) */
.doc-mast .kicker { position: relative; padding-top: 20px; }
.doc-mast .kicker::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; background: var(--sunrise); }

/* Active nav item: a pressed stamp dot, not a thin underline (G2) */
.site-nav .links a { position: relative; }
.site-nav .links a.current { border-bottom-color: transparent; }
.site-nav .links a.current::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 6px; height: 6px; border-radius: 50%; background: var(--sunrise); transform: translateX(-50%); box-shadow: 0 1px 0 rgba(29,42,58,.25); }

/* FAQ: rotating arrow marker + chaptered groups (F1, F2) */
.faq summary::after { content: "\2192"; transition: transform .2s ease; }
.faq details[open] summary::after { content: "\2192"; transform: rotate(90deg); }
.faq .grp { border-top: 2px solid var(--line); padding-top: 22px; margin: 48px 0 4px; }
.faq .grp:first-of-type { margin-top: 6px; }

/* "What shapes your price" as a scannable two-column list (P3) */
.pricepoints li { display: grid; grid-template-columns: 22px 210px 1fr; gap: 2px 10px; align-items: baseline; }
.pricepoints li::before { grid-column: 1; }
.pricepoints .lbl { font-weight: 700; color: var(--ink); }
.pricepoints .exp { color: #4a4336; }
@media (max-width: 600px) { .pricepoints li { grid-template-columns: 22px 1fr; } .pricepoints .exp { grid-column: 2; } }

/* Legal headings read as a document, not a marketing headline (L1) */
.legal h2 { font-weight: 700; }
/* A narrow Sunrise rule opens the legal body (L2) */
.legal::before { content: ""; display: block; width: 56px; height: 3px; background: var(--sunrise); margin-bottom: 24px; }

/* Per-page CTA distinguishing mark (H5, P5, F4) */
.claimband .cta-mark { display: block; margin: 0 auto 16px; }

/* Pull-quotes for the long-form read (S1) — Big Sky italic margin stamps */
.pullquote { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(21px, 2.8vw, 27px); line-height: 1.32; color: var(--sky); max-width: 620px; margin: 36px auto; padding: 6px 0 6px 22px; border-left: 3px solid var(--sunrise); font-variation-settings: "SOFT" 85, "WONK" 1; }

/* A small stamp beside the legal eyebrow (L3) */
.stampette { display: inline-block; vertical-align: middle; margin-right: 8px; }