/* ==========================================================================
   Privacy policy
   A long legal document that has to stay readable. Two things carry it: a
   measure narrow enough to read, and a table of contents that stays put on
   desktop so section 14 is one click away from section 3.
   ========================================================================== */

/* Same dark band and the same 141px that folds the fixed nav into the padding
   rather than offsetting the page. See contact.css for why. */
.p-intro{background:var(--dark);padding:141px 52px 64px;}

.p-title{
  font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-0.035em;
  line-height:1.05;color:#fff;margin:0 0 18px;
}
.p-sub{font-size:1.0625rem;line-height:1.7;color:rgba(255,255,255,0.62);max-width:46ch;margin:0 0 22px;}
.p-updated{font-size:0.8125rem;color:rgba(255,255,255,0.45);margin:0;}

.p-body{background:var(--light);padding:56px 52px 96px;}

/* Contents beside the text on desktop, above it on smaller screens. Sticky so
   it stays reachable through a document this long: the whole point of a table
   of contents is being able to jump again without scrolling back. */
/* The cap lives on the container, not the layout.

   Capping .p-layout left the content at 980px inside a 1440px container, so
   the page ran down the left and the right third was dead: the same mistake
   made on the job detail page. .container carries margin:0 auto, so moving the
   cap up a level centres it and the hero band's text lines up with the body
   beneath it. */
.p-intro .container,
.p-body .container{max-width:980px;}

.p-layout{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:64px;align-items:start;
}
.p-side{position:sticky;top:110px;}

/* stylesheet.css styles the site header with a bare element selector,
   `nav{position:fixed;top:0;...;z-index:100}`, so it catches ANY nav on the
   page. The contents list is genuinely a navigation landmark and should stay a
   <nav>, so the inherited positioning is undone here instead. Left as it was,
   the list went fixed, collapsed .p-side to zero height, and painted itself
   over the page heading.

   A class beats an element selector on specificity, so no !important. */
.p-toc{
  position:static;top:auto;left:auto;right:auto;
  padding:0;z-index:auto;
  /* stylesheet.css line 149 sets nav{background:#0C0916;border-bottom:...} inside
     a mobile media query, so the reset has to cover paint as well as position.
     On a phone the contents block rendered as a dark slab with unreadable grey
     text on it. A class beats an element selector in any media query, so one
     declaration here covers both. */
  background:none;border-bottom:none;
}

.p-toc-title{
  font-size:0.6875rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:#6A6A6A;margin:0 0 14px;
}
.p-toc-list{
  list-style:none;margin:0;padding:0;
  counter-reset:toc;
}
.p-toc-list li{counter-increment:toc;margin-bottom:9px;}
.p-toc-list a{
  display:flex;gap:9px;
  font-size:0.8125rem;line-height:1.4;color:#5A5A5A;text-decoration:none;
  transition:color 200ms ease;
}
.p-toc-list a::before{
  content:counter(toc) '.';
  color:#9A9AA5;font-variant-numeric:tabular-nums;flex-shrink:0;
}
.p-toc-list a:hover{color:var(--purple);}
.p-toc-list a:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:3px;}

/* 34em, not ch: Inter's zero is far wider than its average lowercase, so a ch
   measure reads much longer than it sounds. Same fix as the contact page.

   min-width:0 is load bearing. A grid item defaults to min-width:auto, which
   refuses to shrink below its content's intrinsic minimum, and the two tables
   below carry min-width:440px. On a 375px phone that forced this track to
   440px inside a 327px container: 89px of overflow, invisible only because
   html and body carry overflow-x:clip from the iOS honeypot fix. The
   .p-tablewrap scroller cannot help, because the track is sized before it
   gets a say. */
.p-main{max-width:34em;min-width:0;}

/* ── At a glance ── */

/* "At a glance" was marked visually-hidden, on the assumption that
   .visually-hidden was available. It is defined in the stylesheet this page is
   developed against but NOT in the one the live site serves, so the heading
   rendered as a bare unstyled h2 with no spacing under it. Visible on purpose
   now: it labels the summary and gives the page an opening, which the document
   itself has. */
.p-glance-title{
  font-size:1.25rem;font-weight:800;letter-spacing:-0.025em;
  color:var(--dark);margin:0 0 14px;
}

/* Defined here as well, because the live stylesheet does not carry it. Without
   this, anything marked visually-hidden on a standalone page renders in full.
   Clip based, so the text stays in the accessibility tree. */
.visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

.p-glance{margin-bottom:48px;}
.p-glance-lead{font-size:1rem;line-height:1.75;color:#4A4A4A;margin:0 0 24px;}
.p-glance-grid{display:grid;gap:14px;}
.p-card{
  background:#fff;border:1px solid rgba(12,9,22,0.10);border-radius:14px;padding:18px 20px;
}
.p-card h3{
  font-size:0.875rem;font-weight:800;letter-spacing:-0.01em;
  color:var(--dark);margin:0 0 6px;
}
.p-card p{font-size:0.875rem;line-height:1.6;color:#5A5A5A;margin:0;}

/* ── Sections ── */

.p-sec{
  padding-top:36px;margin-top:36px;
  border-top:1px solid rgba(12,9,22,0.10);
  /* Clears the fixed nav when a contents link jumps here, otherwise the
     heading lands underneath it. */
  scroll-margin-top:96px;
}

.p-sec-title{
  display:flex;gap:12px;align-items:baseline;
  font-size:1.125rem;font-weight:800;letter-spacing:-0.02em;
  color:var(--dark);margin:0 0 14px;
}
.p-sec-num{
  color:var(--purple);font-variant-numeric:tabular-nums;
  font-size:0.9375rem;flex-shrink:0;
}

.p-sec p{font-size:0.9375rem;line-height:1.75;color:#4A4A4A;margin:0 0 14px;}
.p-sec p:last-child{margin-bottom:0;}
.p-sec strong{color:var(--dark);font-weight:700;}

.p-sec ul{margin:0 0 14px;padding-left:20px;}
.p-sec li{font-size:0.9375rem;line-height:1.7;color:#4A4A4A;margin-bottom:9px;}
.p-sec li::marker{color:var(--purple);}

.p-sec a{
  color:var(--purple);text-decoration:none;
  border-bottom:1px solid rgba(123,79,224,0.3);transition:border-color 200ms ease;
}
.p-sec a:hover{border-color:var(--purple);}

.p-address{
  font-style:normal;font-size:0.9375rem;line-height:1.8;color:#4A4A4A;
}

/* ── Tables ──
   Two of these carry the lawful bases and the retention periods, which are the
   parts anyone actually comes here to check. They scroll inside their own box
   rather than making the page scroll sideways. */
.p-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;}
.p-tablewrap table{border-collapse:collapse;width:100%;min-width:440px;}
.p-tablewrap th{
  text-align:left;font-size:0.6875rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:#6A6A6A;
  padding:0 16px 9px 0;border-bottom:1px solid rgba(12,9,22,0.14);
}
.p-tablewrap td{
  font-size:0.875rem;line-height:1.6;color:#4A4A4A;vertical-align:top;
  padding:12px 16px 12px 0;border-bottom:1px solid rgba(12,9,22,0.07);
}
.p-tablewrap tr:last-child td{border-bottom:none;}

@media(max-width:900px){
  /* One column, contents first and unpinned: sticky in a stacked layout would
     follow you down the whole document for no benefit. */
  .p-layout{grid-template-columns:1fr;gap:36px;}
  .p-side{position:static;}
  .p-toc-list{columns:2;column-gap:28px;}
  .p-toc-list li{break-inside:avoid;}
}

@media(max-width:768px){
  .p-intro{padding:125px 24px 48px;}
  .p-body{padding:40px 24px 72px;}
  .p-toc-list{columns:1;}
}

@media(min-width:640px){
  .p-glance-grid{grid-template-columns:repeat(3,1fr);}
}

/* ==========================================================================
   Standalone page repairs
   The live site inlines most of its CSS into index.html and this page does not
   load that, so two things the homepage takes for granted were missing here.
   Both fixes live in privacy.css rather than the shared stylesheet, so
   index.html is untouched.
   ========================================================================== */

/* THE NAV. On the homepage it is transparent at the top and gains a background
   on scroll, driven by JavaScript. This page has no JavaScript at all, so past
   the dark band the nav became white text sitting on a light page: the logo
   and both links effectively vanished. Solid from the start instead, which is
   right for a page whose header band is only a few hundred pixels tall. */
nav{
  background:var(--dark);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

/* THE FOOTER. The shared stylesheet carries only `footer{padding:32px 24px}`
   inside a mobile media query. The real rule, with the background and the top
   border, is inlined in index.html. Without it this footer rendered with no
   background and no padding: dark text on the light page ground, and the
   statutory disclosure along with it. Transcribed from index.html; the mobile
   padding override in stylesheet.css still applies on top. */
footer{
  background:var(--dark);
  padding:36px 52px;
  border-top:1px solid rgba(255,255,255,0.06);
}