/* =============================================================
   O'Budget website: inner pages (privacy, cookies, terms, contact, 404)
   Loads after site.css and reuses its nav, hero panel, horizon, buttons and footer.
   Breakpoints: desktop ≥1200 · tablet 810–1199 · phone ≤809
   ============================================================= */

/* ---------- Page panel: the homepage hero, cut down to a heading ---------- */
.hero__card--page { min-height: 0; padding-bottom: 190px; }
.hero__card--page .arc { top: calc(100% - 130px); }
.page-head {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  max-width: 900px; margin: 0 auto; padding: 64px var(--page-x) 0; text-align: center;
}
.page-head__eyebrow { font: 700 18px/1.2 var(--ob-font); color: var(--lilac); }
.page-title { font-size: var(--h2-xl); line-height: 1.04; text-wrap: balance; }
.page-head__meta { font: 500 15px/1.5 var(--ob-font); color: var(--ob-text-secondary); }
.page-head__sub { font: 500 18px/1.55 var(--ob-font); color: var(--ob-text-muted); max-width: 460px; text-wrap: balance; }

/* Legal tabs: the app's mode chips, sized to their labels */
.legal__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 6px; }
.legal__tabs a {
  padding: 9px 16px; border-radius: var(--ob-radius-pill); border: 1px solid rgb(255 255 255 / .14);
  font: 600 14px/20px var(--ob-font); color: var(--ob-text-muted);
  transition: color var(--ob-dur-fast) var(--ob-ease), border-color var(--ob-dur-fast) var(--ob-ease), background var(--ob-dur-fast) var(--ob-ease);
}
.legal__tabs a:hover { color: var(--ob-text); border-color: rgb(255 255 255 / .3); }
.legal__tabs a[aria-current="page"] { background: var(--ob-purple-16); border-color: var(--ob-purple); color: var(--ob-text); font-weight: 700; }

@media (max-width: 1199.98px) { .hero__card--page { padding-bottom: 170px; } }
@media (max-width: 809.98px) {
  .hero__card--page { padding-bottom: 130px; }
  .hero__card--page .arc { top: calc(100% - 96px); }
  .page-head { padding-top: 44px; gap: 18px; }
  .page-head__eyebrow { font-size: 16px; }
  .page-head__sub { font-size: 16px; }
}

/* ---------- Legal pages: a single readable column ---------- */
.legal { max-width: calc(760px + 2 * var(--page-x)); margin: 0 auto; padding: 72px var(--page-x) 160px; display: flex; flex-direction: column; gap: 40px; }
.legal__draft {
  padding: 16px 20px; border-radius: var(--ob-radius-field); border: 1px dashed var(--ob-purple-55); background: var(--ob-purple-5);
  font: 500 15px/1.55 var(--ob-font); color: var(--ob-text-muted);
}
.legal__summary { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: var(--ob-radius-card); background: var(--ob-surface); }
.legal__summary .t-tag { font: 700 13px/1.2 var(--ob-font); letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); }
.legal__summary ul, .legal__body ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.legal__summary li { font: 600 17px/1.5 var(--ob-font); color: var(--ob-text); }
.legal__summary li::marker, .legal__body li::marker { color: var(--ob-purple); }
.legal__body { display: flex; flex-direction: column; gap: 44px; }
.legal__body section { display: flex; flex-direction: column; gap: 14px; }
.legal__body h2 { font: 700 24px/1.3 var(--ob-font); letter-spacing: -0.01em; color: var(--ob-text); }
.legal__body p, .legal__body li { font: 400 16px/1.75 var(--ob-font); color: var(--ob-text-muted); }
.legal strong { color: var(--ob-text); font-weight: 700; }
.legal a { color: var(--ob-purple); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:hover { color: var(--lilac); }
.todo { background: var(--ob-purple-16); color: var(--lilac); padding: 1px 6px; border-radius: 6px; font-weight: 600; }
@media (max-width: 809.98px) {
  .legal { padding-top: 48px; padding-bottom: 110px; gap: 32px; }
  .legal__summary { padding: 24px 20px; }
  .legal__summary li { font-size: 16px; }
  .legal__body { gap: 36px; }
  .legal__body h2 { font-size: 20px; }
}

/* ---------- Contact: the form sits on the horizon ---------- */
.hero__card--contact { padding-bottom: 260px; }
.contact { position: relative; z-index: 2; max-width: calc(560px + 2 * var(--page-x)); margin: -170px auto 0; padding: 0 var(--page-x) 160px; }
.form {
  display: flex; flex-direction: column; gap: 16px; padding: 28px;
  border-radius: var(--ob-radius-dialog); background: var(--ob-surface-raised);
  box-shadow: 0 30px 80px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .05);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { font: 600 14px/1 var(--ob-font); color: var(--ob-text-secondary); }
.field input, .field textarea {
  width: 100%; padding: 14px 16px; outline: none; resize: vertical;
  background: var(--ob-field-fill); border: 1px solid var(--ob-field-border); border-radius: var(--ob-radius-field);
  color: var(--ob-text); font: 600 16px/24px var(--ob-font);
  transition: border-color var(--ob-dur-fast) var(--ob-ease), box-shadow var(--ob-dur-fast) var(--ob-ease);
}
.field input:focus, .field textarea:focus { border-color: var(--ob-purple); box-shadow: 0 0 0 3px var(--ob-purple-16); }
.form .btn { margin-top: 6px; }
@media (max-width: 809.98px) {
  .hero__card--contact { padding-bottom: 190px; }
  .contact { margin-top: -96px; padding-bottom: 96px; }
  .form { padding: 20px; }
}

/* ---------- 404: the panel is the whole page ---------- */
.hero__card--404 { padding-bottom: 320px; }
.hero__card--404 .page-head { padding-top: 110px; }
.hero__card--404 .arc { top: calc(100% - 200px); }
@media (max-width: 809.98px) {
  .hero__card--404 { padding-bottom: 220px; }
  .hero__card--404 .page-head { padding-top: 72px; }
  .hero__card--404 .arc { top: calc(100% - 140px); }
}
.hero:has(.hero__card--404) { padding-bottom: 80px; }