/* Shared styles for the secondary pages (legal, thank-you). Tokens match index.html. */
:root {
  --green: #1E4D2B; --green-900: #143620; --green-950: #0E2717;
  --teal: #1B6E8C; --gold: #C99A2E; --gold-soft: #E9D6A6;
  --cream: #F6F5F0; --ink: #17231B; --muted: #55625A; --line: #DAD7CB; --white: #FFFFFF;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65;
  color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: Montserrat, Inter, sans-serif; letter-spacing: -.01em; line-height: 1.2; color: var(--green-900); }
a { color: var(--teal); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 24px; }

.top { background: var(--green-950); color: var(--white); }
.top .wrap { max-width: 1180px; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.brand svg { width: 38px; height: 38px; flex: none; }
.brand b { font: 800 16px Montserrat, sans-serif; letter-spacing: .2em; }
.top-r { display: flex; align-items: center; gap: 16px; }
.back { color: rgba(255,255,255,.82); text-decoration: none; font-size: 15px; font-weight: 500; }
.back:hover { color: var(--white); text-decoration: underline; }
.lang { display: inline-flex; border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; padding: 3px; }
.lang button {
  font: 700 12px/1 Montserrat, sans-serif; letter-spacing: .08em; border: 0; background: transparent;
  color: rgba(255,255,255,.8); padding: 7px 11px; border-radius: 999px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--gold); color: var(--green-950); }

.doc { padding: 64px 0 96px; }
.doc .eyebrow { font: 700 12.5px Montserrat, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); }
.doc h1 { font-size: clamp(32px, 5vw, 46px); margin: 12px 0 10px; }
.doc .updated { color: var(--muted); font-size: 15px; margin: 0 0 40px; }
.doc h2 { font-size: 22px; margin: 44px 0 12px; scroll-margin-top: 24px; }
.doc p, .doc li { color: #2c3a31; }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.doc th, .doc td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font: 700 13px Montserrat, sans-serif; color: var(--green-900); background: #EDEBE2; }
.doc tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
.note { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 16px 18px; font-size: 15.5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 15px Montserrat, sans-serif; letter-spacing: .02em; padding: 15px 26px; border-radius: 999px;
  border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--green-950); }
.btn-gold:hover { background: #d8aa3d; }
.btn-line { border-color: var(--line); color: var(--green-900); background: var(--white); }
.btn-line:hover { border-color: var(--green-900); }

.foot { background: var(--green-950); color: rgba(255,255,255,.7); font-size: 14px; padding: 28px 0; }
.foot .wrap { max-width: 1180px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.foot a { color: rgba(255,255,255,.85); text-decoration: none; margin-left: 18px; }
.foot a:first-child { margin-left: 0; }
.foot a:hover { color: var(--white); text-decoration: underline; }

[data-l] { display: none; }
html[lang="en"] [data-l="en"], html[lang="es"] [data-l="es"] { display: revert; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .top .wrap { height: 64px; }
  .back span { display: none; }
  .doc { padding: 44px 0 72px; }
  .doc h2 { font-size: 20px; margin-top: 36px; }
}