/* Shared styles for the legal pages (privacy, terms).
   Palette, type and furniture follow v6-midnight-sintese / v11: the abyss
   canvas, brass accent, film grain and the left cable rail.

   Two departures from the homepage, both for the sake of reading a long
   document rather than scanning a short one:
     - body copy sits at a higher contrast than the homepage's --fog, which
       is pitched for short marketing lines;
     - the header is fixed and solid from the outset instead of fading in on
       scroll, so the language switch stays reachable twenty clauses down. */
:root{
  /* The same Síntese palette the rest of the site is set in, so a reader who
     follows a footer link does not arrive somewhere that looks like a
     different firm. Kept as its own copy rather than shared: these pages load
     one small stylesheet and nothing else, and that is worth more here than
     saving a dozen duplicated lines. */
  --abyss:#f5f1e8;
  --navy:#081a33;
  --navy-soft:#efe9dc;            /* the contents box and the callouts */
  /* A step darker than the gold the home page uses. These pages set gold on
     two grounds, the page and the slightly deeper contents box, and #8f6624
     cleared AA on the first but reached only 4.2:1 on the second. This clears
     both: 5.0:1 and 4.7:1. */
  --brass:#87601f;
  --brass-light:#a97b32;          /* the h1 italic only: 3.4:1 clears large text,
                                     which is why nothing set at body size uses it */
  --pearl:#0d1b2e;
  --fog:#5f6672;
  --read:#2f3846;                 /* long-form body copy, 10.5:1 on the canvas */
  --hairline:#ddd6c6;
  --header-h:74px;
  /* One measure for the document and everything that lines up with it.
     Deliberately a fixed width rather than a vw padding: the earlier rule
     put 6vw of padding inside a 760px box, so the text column got narrower
     the wider the screen became -- 606px at 1280, but 453px at 2560. */
  --measure:580px;
  --gutter:40px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--abyss);color:var(--pearl);font-family:'Jost',sans-serif;font-weight:300;line-height:1.8;overflow-x:hidden}
h1,h2,h3{font-family:'Libre Caslon Text',serif;font-weight:400}
a{color:inherit}
::selection{background:var(--brass);color:#fff}

/* film grain — the same overlay the homepage wears */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:999;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}
@media(prefers-reduced-motion:reduce){body::after{animation:none}}

/* the cable — the homepage's signature rail, here reading as progress
   through the document with one node per clause */
.cable{position:fixed;left:44px;top:var(--header-h);bottom:0;width:1px;z-index:100;pointer-events:none}
.cable .track{position:absolute;inset:0;background:rgba(184,134,59,.2)}
.cable .fill{position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(var(--brass-light),var(--brass));box-shadow:0 0 12px rgba(201,154,69,.55)}
.cable .node{position:absolute;left:50%;width:9px;height:9px;border-radius:50%;border:1px solid var(--brass);background:var(--abyss);transform:translate(-50%,-50%) scale(.4);opacity:0;transition:.6s}
.cable .node.lit{opacity:1;transform:translate(-50%,-50%) scale(1);background:var(--brass);box-shadow:0 0 14px rgba(201,154,69,.8)}
@media(max-width:1100px){.cable{display:none}}

/* header — fixed, so the language switch is never scrolled away */
header.site{position:fixed;top:0;left:0;right:0;z-index:150;min-height:var(--header-h);background:var(--abyss);border-bottom:1px solid var(--hairline);padding:16px 5vw;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.wordmark{font-family:'Libre Caslon Text',serif;font-size:.88rem;color:var(--pearl);display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{height:34px;width:auto;display:block}
.hdr-r{display:flex;align-items:center;gap:22px}
.back{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fog);text-decoration:none;transition:color .25s;white-space:nowrap}
.back:hover{color:var(--brass)}

/* page frame */
main{max-width:calc(var(--measure) + var(--gutter) * 2);margin:0 auto;padding:calc(var(--header-h) + 62px) var(--gutter) 110px}
.eyebrow{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);margin-bottom:18px}
h1{font-size:clamp(2.2rem,5.2vw,3.4rem);line-height:1.16;color:var(--pearl)}
h1 em{font-style:italic;color:var(--brass-light)}
.updated{color:var(--fog);font-size:.8rem;margin-top:18px;letter-spacing:.02em}
.lede{margin-top:30px;font-size:1.12rem;color:var(--read)}
.lede + .lede{margin-top:16px}
.lede a{color:var(--brass)}

/* contents */
.toc{margin:46px 0 8px;padding:26px 30px;background:var(--navy-soft);border:1px solid var(--hairline);border-radius:5px}
.toc p{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.toc ol{margin:0;padding-left:20px}
.toc li{font-size:.94rem;margin:7px 0;color:var(--fog)}
.toc a{color:var(--fog);text-decoration:none;transition:color .2s}
.toc a:hover{color:var(--pearl)}

/* body copy */
section.clause{margin-top:52px;scroll-margin-top:calc(var(--header-h) + 18px)}
section.clause h2{font-size:1.62rem;color:var(--pearl);line-height:1.3}
section.clause h2 .num{color:var(--brass);font-style:italic;margin-right:12px}
section.clause h3{font-size:1.08rem;color:var(--pearl);margin-top:26px}
section.clause p{margin-top:15px;color:var(--read);font-size:1.08rem}
section.clause p b,section.clause li b{color:var(--pearl);font-weight:500}
section.clause ul{margin-top:14px;padding-left:20px;list-style:none}
section.clause ul li{color:var(--read);font-size:1.08rem;margin:10px 0;position:relative;padding-left:18px}
section.clause ul li::before{content:"—";position:absolute;left:0;color:var(--brass)}
section.clause a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
section.clause a:hover{color:var(--pearl)}

/* definition-style rows, used for identifiers and retention periods */
.rows{margin-top:20px;border-top:1px solid var(--hairline)}
.rows div{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--hairline);font-size:1rem;color:var(--read)}
.rows dt,.rows .k{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);padding-top:6px}
@media(max-width:640px){.rows div{grid-template-columns:1fr;gap:4px}}

/* callout */
.note{margin-top:22px;padding:22px 26px;background:var(--navy-soft);border-left:3px solid var(--brass);border-radius:0 4px 4px 0}
.note p{margin-top:0;color:var(--pearl)}
.note p + p{margin-top:12px}

/* unresolved detail — must not survive to production, so it stays loud */
.todo{background:rgba(201,154,69,.17);border-bottom:1px dashed var(--brass);padding:1px 5px;border-radius:2px;color:var(--brass);font-weight:400}

/* language switch — sits beside "back to the site" in the header */
.langsw{display:inline-flex;align-items:center;gap:1px;border:1px solid var(--hairline);border-radius:99px;padding:3px}
.langsw a{font-family:'Jost',sans-serif;font-weight:300;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fog);border-radius:99px;padding:5px 10px;text-decoration:none;transition:background .25s,color .25s}
.langsw a:hover{color:var(--brass)}
.langsw a.on{background:var(--brass);color:var(--abyss)}

/* footer — squared off against the same measure as the text, so the page
   reads as one column rather than a narrow document on a wider base */
footer.site{border-top:1px solid var(--hairline);padding:34px var(--gutter);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:.78rem;color:var(--fog);max-width:calc(var(--measure) + var(--gutter) * 2);margin:0 auto}
footer.site a{color:var(--fog);text-decoration:none}
footer.site a:hover{color:var(--brass)}
footer.site .fl{display:flex;gap:22px;flex-wrap:wrap}

/* below the measure there is nothing left to cap, so fall back to a
   proportional gutter rather than a fixed one */
@media(max-width:700px){
  :root{--gutter:6vw}
  section.clause p,section.clause ul li{font-size:1.02rem}
  .lede{font-size:1.06rem}
}

@media(max-width:560px){
  :root{--header-h:66px}
  header.site{padding:12px 5vw;gap:12px}
  .wordmark{font-size:.78rem}
  .logo-img{height:29px}
  .back{display:none}          /* the wordmark already goes home */
}