/* The Mustard landing pages: /audit, /privacy (fake-door plan KTD15).
   Dijon per BRAND.md: ink on Dijon for controls, Dijon for marks and rules,
   never white text on Dijon, never Dijon body text. Loaded after app.css. */
.landing {
  --mustard: #D19A0E;
  --mustard-deep: #B8860B;
  --mustard-on: #1E1C16;
}

.landing .site-main { display: flex; flex-direction: column; gap: 56px; max-width: 760px; margin-left: 0; }
.landing .site-header { border-bottom: 3px solid var(--mustard); }
.landing .display { max-width: 16ch; }
.landing a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.landing a:focus-visible, .landing button:focus-visible, .landing input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.landing .btn { background: var(--mustard); color: var(--mustard-on); font-weight: 600; }
.landing .btn:hover { background: var(--mustard-deep); color: var(--mustard-on); }
.landing .btn svg { transition: transform var(--dur) var(--ease-out); }
.landing .btn:hover svg { transform: translateX(3px); }

.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-soft); margin: 0 0 16px; }
.eyebrow .mark { width: 12px; height: 12px; border-radius: 50%; background: var(--mustard); flex: none; }

.landing-hero { display: flex; flex-direction: column; gap: 20px; }
.landing-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.landing-form .btn { align-self: flex-start; }

/* Trap field (R33): off screen for people, still in the form for bots. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.landing-example, .landing-privacy, .privacy-section { border-top: 3px solid var(--mustard); padding-top: 20px; }
.example-quote { margin: 0 0 16px; font-size: 19px; line-height: 1.45; }
.example-quote p { margin: 0; }
.example-quote p + p { margin-top: 10px; }
.example-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.example-list li::marker { color: var(--mustard); }
.landing-privacy p { margin: 0; max-width: 60ch; color: var(--ink-soft); }

.privacy { display: flex; flex-direction: column; gap: 28px; }
.privacy-section ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 60ch; }
.privacy-section li::marker { color: var(--mustard); }

.landing-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 16px; }
.landing-foot a { color: var(--ink-soft); }

.landing input, .landing a, .landing p, .landing li { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .landing .site-main { gap: 40px; }
  .landing-form .btn { align-self: stretch; }
  .example-quote { font-size: 17px; }
}

/* The homepage (root-landing plan U2): a bold brand line, booking first, the
   waitlist below it in a quieter outline style. */
.home-hero { padding: 24px 0 8px; }
.landing .home-hero .display { font-size: clamp(2.8rem, 7vw, 5.4rem); max-width: 13ch; }
.home-hero .display::after { content: ""; display: block; width: 96px; height: 10px; margin-top: 24px; background: var(--mustard); }
.home-hero .lede { max-width: 46ch; margin: 0; }
.landing .home-book { align-self: flex-start; font-size: 18px; padding: 16px 28px; }
.home-join { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--mustard); padding-top: 20px; scroll-margin-top: 24px; }
.home-join h2, .home-join p { margin: 0; }
.home-join .landing-form { max-width: 520px; }

@media (max-width: 720px) {
  .landing .home-book { align-self: stretch; justify-content: center; }
}

/* Lead pages: report, changes and beta reveal (fake-door plan U5). */
.landing .btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.landing .btn-outline:hover { background: var(--paper-deep); color: var(--ink); }
.landing .small-display { max-width: 22ch; }
.landing-message .btn { align-self: flex-start; }

.lead-report { display: flex; flex-direction: column; gap: 8px; }
.lead-report .rsection { border-top: 3px solid var(--mustard); padding-top: 20px; margin-top: 24px; }
.lead-ask { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; border-left: 6px solid var(--mustard); }
.lead-ask h2, .lead-ask p { margin: 0; }

.lead-changes, .lead-next { display: flex; flex-direction: column; gap: 20px; }
.lead-changes .lede, .lead-next .lede { margin: 0; }
.change-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.change { display: flex; gap: 14px; align-items: flex-start; }
.change-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.change-body summary { cursor: pointer; color: var(--ink-soft); margin-top: 4px; }
.change-body .fix-text { white-space: pre-wrap; margin: 8px 0 0; font-size: 14px; }
.tick { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mustard); color: var(--mustard-on); }

.lead-beta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.lead-beta .check { align-items: flex-start; }
.lead-beta .check input { margin-top: 4px; accent-color: var(--ink); }

@media (max-width: 720px) {
  .lead-changes .btn, .lead-next .btn, .landing-message .btn, .lead-ask .btn { align-self: stretch; width: 100%; justify-content: center; }
}

/* Consent banner (fake-door plan U6): a non-modal bar at the bottom. The page
   script pads the body by its height so it never covers the submit button.
   Accept and Decline share one style so neither is the easier choice. */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px max(16px, calc((100vw - 760px) / 2)); background: var(--card); border-top: 3px solid var(--mustard); color: var(--ink); }
.consent-banner[hidden] { display: none; }
.consent-banner p { margin: 0; max-width: 60ch; font-size: 15px; }
.consent-actions { display: flex; gap: 10px; }
.landing .consent-actions .btn { min-height: 44px; padding: 0 22px; background: var(--mustard); color: var(--mustard-on); }
.landing .consent-actions .btn:hover { background: var(--mustard-deep); color: var(--mustard-on); }
.landing .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.landing .link-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 720px) {
  .consent-actions { width: 100%; }
  .landing .consent-actions .btn { flex: 1; }
}