/* AiB Platform — the legal pages (terms + privacy, EN/BG): an ink page in
   the site's dramaturgy. Wears the aib-site case grammar (case.css /
   sections.css): night canvas, a monument arrival, statement headlines over
   hairlines, the EN/BG language lens. Loaded only by the four legal
   templates, after css/public/public.css. Sodium stays where the discipline
   puts it: the wordmark's tittle, nowhere on this page. */

body.legal-night { background: var(--ink); }

.legal-page {
  --lp-body: rgba(255, 255, 255, 0.78);
  color: var(--white);
}
.legal-page .plus {
  display: inline-block;
  margin-right: 10px;
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
}

/* ----- arrival: the monument ----- */
/* full-bleed out of .public-main's 1080px cage — the word owns the viewport */
.legal-arrival {
  margin-inline: calc(50% - 50vw);
  padding: clamp(24px, 6vh, 72px) var(--pad) clamp(40px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 7vh, 72px);
}
/* both eyebrows sit left — the fixed language lens owns the right edge */
.legal-eyebrows {
  display: flex;
  justify-content: flex-start;
  gap: 14px 32px;
  flex-wrap: wrap;
  color: var(--grey-dark);
}
.legal-word {
  margin: 0 0 0 -0.04em;
  font-family: var(--font-display);
  font-size: clamp(58px, 13.5vw, 250px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
/* a monument of ~18 glyphs (the BG privacy word) — sized down so it still
   fills the line without ever breaking out of it */
.legal-word--long { font-size: clamp(34px, 9vw, 170px); }
.legal-lede {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--lp-body);
}

/* ----- the language lens — the site's Close lens, worn as EN/BG ----- */
/* Ported from aib-site chrome.css (.case-close): the labelled circle a
   sub-page is entered and left through — here the door between the two
   tongues of the terms. Fixed under the header band so the door stays in
   reach for the whole read; the active lens's arc keeps the reader's
   place (_terms_script.html drives it). */
.lang-lens {
  position: fixed;
  top: 82px;
  right: var(--pad);
  z-index: 40;
  display: flex;
  gap: 10px;
}
.lens { position: relative; width: 64px; height: 64px; display: block; color: var(--white); }
.lens-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
  transition: background 0.3s, transform 0.5s var(--ease-out);
}
a.lens:hover .lens-face { background: rgba(255, 255, 255, 0.16); transform: scale(1.06); }
a.lens:active .lens-face { transform: scale(0.92); }
.lens-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.lr-base { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1; }
.lr-arc { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.5; stroke-linecap: round; }
/* two glyphs, not the site's five — the label can afford more voice.
   500 is JetBrains Mono's heaviest shipped cut (fonts.css) — anything
   above would be a synthesized faux bold. */
.lens-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
a.lens .lens-label { color: rgba(255, 255, 255, 0.72); transition: color 0.3s; }
a.lens:hover .lens-label { color: var(--white); }
@media (max-width: 719px) {
  .lang-lens { top: 74px; }
  .lens { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .lens-face, a.lens:hover .lens-face, a.lens:active .lens-face { transition: none; transform: none; }
}

/* ----- the sections: a mono label, a statement, the prose ----- */
.legal-section {
  padding: clamp(44px, 8vh, 84px) 0;
  border-top: 1px solid var(--hairline-dark);
  scroll-margin-top: 84px;
}
.legal-section .sec-ix { margin: 0 0 18px; color: var(--grey-dark); }
.legal-section h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 24ch;
  text-wrap: balance;
  color: var(--white);
}
.legal-section p, .legal-section li {
  max-width: 66ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--lp-body);
}
.legal-section p { margin: 0 0 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 0 0 14px; padding-left: 20px; }
.legal-section li { margin-bottom: 10px; }
.legal-section li::marker { color: var(--grey-dark); }
.legal-section strong { font-weight: 500; color: var(--white); }
.legal-section .ul { color: var(--white); }

/* ----- exit: the door, then the record line ----- */
.legal-exit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px 28px;
  flex-wrap: wrap;
  padding: clamp(44px, 8vh, 88px) 0 clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--hairline-dark);
}
.legal-exit h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
/* the door itself — the site's Platform button (aib-site chrome.css
   .platform-link): hairline ring, glass face, the sodium dot pulsing
   inside, hover warming the ring toward sodium. The page's one action
   wears the one lit accent, exactly as the site's header entrance does. */
.legal-door {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px 10px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  backdrop-filter: blur(2px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.legal-door::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--sodium);
  animation: mark-pulse 3.2s ease-in-out infinite;
}
.legal-door:hover {
  background: color-mix(in srgb, currentColor 15%, transparent);
  border-color: rgba(255, 164, 59, 0.8);
  box-shadow: 0 0 20px rgba(255, 164, 59, 0.22);
}
@media (prefers-reduced-motion: reduce) { .legal-door::before { animation: none; } }
.legal-end { margin: 0 0 10px; color: var(--grey-dark); }

/* ----- the cookie ledger (cookies page): the inventory, named in full ----- */
.cookie-ledger { width: 100%; border-collapse: collapse; margin: 6px 0 18px; }
.cookie-ledger th {
  padding: 0 20px 10px 0;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-dark);
}
.cookie-ledger td {
  padding: 14px 20px 14px 0;
  border-top: 1px solid var(--hairline-dark);
  vertical-align: top;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--lp-body);
}
.cookie-ledger th:last-child, .cookie-ledger td:last-child { padding-right: 0; }
/* the names are literal identifiers — the browser shows them lowercase,
   so the page must too, whatever .mono's uppercase habit says */
.cookie-ledger td.mono { white-space: nowrap; color: var(--white); text-transform: none; }
/* phones: each cookie folds to its own block — name and lifetime on the
   mono row, the job underneath (minmax(0,1fr) per the WebKit wrap rule) */
@media (max-width: 560px) {
  .cookie-ledger thead { display: none; }
  .cookie-ledger tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding: 14px 0;
    border-top: 1px solid var(--hairline-dark);
  }
  .cookie-ledger td { display: block; min-width: 0; padding: 0; border: 0; }
  .cookie-ledger td:nth-child(2) { grid-column: 1 / -1; }
  .cookie-ledger td:last-child {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-dark);
    text-align: right;
  }
}

/* ----- reveal choreography (armed by the page script; no JS = no hiding) ----- */
.legal-page.has-io .rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.legal-page.has-io .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .legal-page.has-io .rv { opacity: 1; transform: none; transition: none; }
}