/* ═══════════════════════════════════════════════════════════════════════════
   The two things EVERY page on this deployment carries, whichever site it
   belongs to: the cookie sheet, and a route to the legal documents.

   WHY THIS IS A THIRD STYLESHEET. css/style.css dresses the Las Vegas
   invitation and css/site.css dresses the company site. These two components
   have to appear on both, plus the survey, the calculators and the Philippine
   pages — so they cannot live in either one. Every value here is written out
   rather than taken from a custom property, because the event pages do not
   load the file that defines those properties.

   WHAT IT FIXED, 2026-10-09. Fourteen built pages had no link to the privacy
   policy at all — including /interest, /ph, /ph/teams, the team roster form
   and The AI Leverage Check, every one of which collects personal data. That
   was not a rule nobody had written down; it was a rule with nothing enforcing
   it. scripts/inject-chrome.js now writes the strip into any page that does
   not already carry a footer with those links, so a page added next month gets
   one by being built.

   AND IT IS WHAT MAKES THE CONSENT GATE HONEST EVERYWHERE. The analytics
   injector was changed the same day to write a consent gate instead of the two
   tracking tags. Without a sheet on these pages, the gate would never be
   answered and the event pages would silently report zero visitors forever —
   trading one invisible failure for another.

   CLASS NAMES ARE SCOPED SO THEY CANNOT COLLIDE with either of the other two
   stylesheets: .consent*, .legal-strip*, and nothing else.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── THE COOKIE SHEET ──────────────────────────────────────────────────
   A short bar, not a card. It must never cover the page's primary button —
   on a phone that button sits near the bottom of the first screen, so the
   words collapse to one line and the three choices stay on one row. */

.consent {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 150;
  max-width: 1100px;
  margin-inline: auto;
  padding: 16px 20px;
  background: #FFFFFF;
  color: #0F1B2D;
  border: 1px solid #CFCEC7;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(15, 27, 45, .18);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}
.consent[hidden] { display: none; }
.consent a { color: #095993; }
.consent .consent-copy { flex: 1 1 360px; min-width: 0; }
.consent h2 {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #0F1B2D;
  margin: 0 0 4px;
  letter-spacing: 0;
  text-transform: none;
}
.consent p { font-size: 0.88rem; margin: 0; color: #0F1B2D; }

.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.consent-actions button {
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  width: auto;
}
.consent-actions .btn-primary { background: #095993; color: #FFFFFF; border-color: #095993; }
.consent-actions .btn-primary:hover { background: #07487A; }
.consent-actions .btn-ghost { background: transparent; color: #0F1B2D; border-color: #0F1B2D; }
.consent-actions .btn-ghost:hover { background: #0F1B2D; color: #FFFFFF; }

.consent-detail { flex: 1 1 100%; }
.consent-detail[hidden] { display: none; }
.consent-cats { margin: 0 0 14px; padding: 0; list-style: none; font-size: 0.9rem; }
.consent-cats li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.consent-cats label { font-weight: 600; }
.consent-cats .cat-note { display: block; font-weight: 400; color: #61676D; font-size: 0.86rem; }

body.consent-up { padding-bottom: 150px; }

@media (max-width: 620px) {
  /* The long half of the explanation goes, so the bar stays about 145px tall
     and clears the call to action on a 390px screen. The short half still says
     the thing that matters: nothing is set until you choose. */
  .consent .consent-long { display: none; }
  .consent { padding: 14px 16px; gap: 10px; }
  .consent-actions { width: 100%; }
  .consent-actions button { flex: 1 1 0; padding: 12px 8px; }
  body.consent-up { padding-bottom: 190px; }
}

/* ─── THE LEGAL STRIP ───────────────────────────────────────────────────
   For pages that are not part of the company site and therefore do not carry
   its full footer: the event pages, the Philippine pages, the interest form,
   the survey and the calculators. Dark, quiet, and the same links in the same
   order as the full footer's legal column. */

.legal-strip {
  background: #0B1626;
  color: #8D98A5;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  padding: 22px 20px;
}
.legal-strip-inner {
  max-width: 1160px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
}
.legal-strip nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal-strip a { color: #C9D1DB; text-decoration: none; }
.legal-strip a:hover { color: #FFFFFF; text-decoration: underline; }
.legal-strip p { margin: 0; }
.legal-strip button {
  background: none;
  border: 1px solid rgba(201, 209, 219, .35);
  border-radius: 4px;
  color: #C9D1DB;
  font: inherit;
  padding: 5px 11px;
  cursor: pointer;
}
.legal-strip button:hover { border-color: #FFFFFF; color: #FFFFFF; }