/* legal.css — About / Contact / Privacy Policy / Terms of Use.

   ONE sheet for four pages, because they are one component with four payloads. The tab row
   is L4's look with REAL LINKS behind it: each page is its own URL, so a reviewer, an app
   store or a payment processor can be pointed at `privacy.html` on its own — which is the
   single thing four tabs on one page cannot do.

   The tab wears E5, the treatment the events and missions rows now carry, so this is the
   site's own control rather than a new one. The skew is on the ELEMENT with the label
   counter-skewed, which is why the 4px rail leans with the plate.
--------------------------------------------------------------------------------------- */

/* THE PAGE PAINTS ITS OWN BACKGROUND, and it has to.

   `nav.css` does NOT set one -- every other page on this site declares its own in an inline
   <style>, and these four are generated with no inline style at all. Without this they
   rendered TRANSPARENT: white page, black text, gold headings on white.

   It was invisible in testing because the screenshot harness puts the page in an iframe
   inside a wrapper with `background:#0b0d13` -- the harness's own dark background showed
   straight through. THE HARNESS CAN HIDE EXACTLY THIS BUG. Measure
   `getComputedStyle(body).backgroundColor` on the real page rather than trusting the
   picture: `rgba(0,0,0,0)` is the tell. */
:root{
  --bg:#0b0d13; --bg2:#12151d;
  --line:rgba(255,255,255,.09);
  --text:#EDF1F8; --dim:#9aa3b4; --faint:#6c7484;
  --gold:var(--acc,#FFD84A); --orange:var(--acc-deep,#F4A500);
}
*{box-sizing:border-box;}
html{background:var(--bg);}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Rajdhani',sans-serif;min-height:100vh;
  -webkit-font-smoothing:antialiased;}

.lwrap{max-width:900px;margin:0 auto;padding:0 20px 110px;}

.lpage-title{font-family:'Black Han Sans',sans-serif;font-style:italic;
  color:var(--acc,#FFD84A);font-size:clamp(1.8rem,5vw,2.5rem);text-align:center;
  margin:30px 0 18px;letter-spacing:1px;}

/* ── the tab row: four links, not four buttons ─────────────────────────────── */
.ltabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 26px;}
.ltab{display:inline-flex;align-items:center;transform:skewX(-12deg);
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.86rem;letter-spacing:1.5px;
  text-transform:uppercase;text-decoration:none;
  padding:9px 18px 9px 16px;border-radius:4px;color:#8d94a6;
  background:#12151d;
  border:1px solid rgba(255,255,255,.10);
  border-left:4px solid rgba(255,255,255,.12);
  transition:color .15s,border-left-color .18s,background .15s,border-color .15s;}
.ltab > span{transform:skewX(12deg);}
.ltab:hover{color:#fff;border-left-color:rgba(var(--acc-rgb,255,216,74),.55);
  border-color:rgba(255,255,255,.16);}
/* the page you are on: the rail goes full accent and the plate takes a 10% wash */
.ltab.on{color:#fff;background:rgba(var(--acc-rgb,255,216,74),.10);
  border-color:rgba(255,255,255,.14);
  border-left-color:var(--acc,#FFD84A);
  text-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.6);}

/* ── the document ──────────────────────────────────────────────────────────── */
.ldoc{border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:26px 28px 30px;
  background:linear-gradient(180deg,#12151d,#0a0c11);}
.ldoc .lupd{font-family:'Oswald',sans-serif;font-size:.58rem;letter-spacing:1.6px;
  text-transform:uppercase;color:#6c7484;margin:0 0 4px;}
/* THE SECTION HEADINGS ARE TITLES, NOT LABELS.

   They were Oswald 600 at .72rem uppercase — 11px, which is this site's CAPTION size (the
   STA/EXP chips, the Total plates). At that size a heading does not lead a section, it
   annotates it, and a nine-section privacy policy reads as one undifferentiated wall.

   They are the site's own title face now: Black Han Sans italic in the accent, the same
   thing every page title and `.bp-sec h3` on frontier.html wears. Sentence case rather
   than uppercase — Black Han Sans has ONE weight and it is heavy, so shouting it as well
   is too much at nine repetitions. */
.ldoc h2{font-family:'Black Han Sans',sans-serif;font-style:italic;font-weight:400;
  font-size:1.25rem;letter-spacing:.6px;color:var(--acc,#FFD84A);
  margin:30px 0 11px;line-height:1.3;}
.ldoc h2:first-of-type{margin-top:16px;}
/* PROSE IS INTER on this site -- the house rule for body text */
.ldoc p,.ldoc li{font-family:Inter,sans-serif;font-size:.86rem;line-height:1.78;color:#C9D1DE;}
.ldoc p{margin:0 0 11px;}
.ldoc ul{margin:0 0 11px;padding-left:20px;}
.ldoc li{margin:0 0 6px;}
.ldoc b{color:#EDF1F8;font-weight:600;}
.ldoc a{color:var(--acc,#FFD84A);text-underline-offset:3px;}
.ldoc a:hover{text-decoration:none;}
.ldoc ul.lcontact{list-style:none;padding-left:0;}
.ldoc ul.lcontact li{font-size:.95rem;margin:0 0 7px;}

/* THE SLOTS. Deliberately loud: these are the four things only the owner can supply, and a
   quiet placeholder is one that ships to production still saying "your contact email". */
.slot{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.85em;font-weight:700;color:#0b0d13;background:var(--acc,#FFD84A);
  border-radius:3px;padding:0 6px;}

@media (max-width:600px){
  .lwrap{padding:0 14px 90px;}
  .ldoc{padding:20px 17px 24px;border-radius:10px;}
  .ltab{font-size:.78rem;padding:8px 13px 8px 12px;}
}