/* ============================================================
   GROWMARK — privacy policy (privacy.html)
   The careers page's frame (paper, nav, footer: css/careers.css), and
   the policy as the method's rows are: a part per row on the site's
   hairlines, its name on the left and its text on the right; one
   column on phones. Nothing moves.
   ============================================================ */

/* a long page: the nav carries the paper from the start, so the text
   scrolls behind it, not through it */
.privacy-page .nav{background:var(--paper)}

/* the legal pages (privacy, GDPR, framework) are Aeonik only, the user
   2026-11-09: the serif rule in css/base.css stops here, and each headline
   goes back to the sans' own tracking */
.privacy-page :is(.display,.csheet__lede,.csheet__head,.csheet__svc-name){
  font-family:var(--sans);
  font-size-adjust:none;
  font-synthesis:weight style;
}
.privacy-page .display{letter-spacing:-.035em}
.privacy-page .csheet__lede{letter-spacing:-.03em}
.privacy-page .csheet__head{letter-spacing:-.02em}
.privacy-page .csheet__svc-name{letter-spacing:-.025em}

.legal{padding-block:clamp(40px,6vw,72px) var(--bay)}

.legal__head{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:44rem;
  margin-bottom:clamp(40px,6vw,72px);
}
.legal__lede{
  max-width:34em;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  line-height:1.5;
  color:var(--muted);
  text-wrap:pretty;
}
.legal__lede .tlink{color:var(--ink)}
.legal__date{
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* the parts: the list opens on the ink rule, as the roles do */
.legal__parts{border-top:1px solid var(--ink)}
.legal__part{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  column-gap:clamp(32px,6vw,96px);
  padding-block:clamp(28px,3.5vw,44px);
  border-bottom:1px solid var(--line);
}
.legal__name{
  font-size:clamp(1.15rem,1.6vw,1.35rem);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.legal__text{
  max-width:40rem;
  font-size:16px;
  line-height:1.65;
  color:var(--muted);
}
.legal__text > * + *{margin-top:.9em}
.legal__text strong{font-weight:500;color:var(--ink)}
.legal__text .tlink{color:var(--ink)}
/* the cookie choice reads as a link in the sentence */
.legal__cookies{
  padding:0 0 2px;
  border:0;
  background:none;
  font:inherit;
  font-weight:500;
  cursor:pointer;
}
/* the list: a square dot, as in the site's dot-matrix icons */
.legal__text ul{display:grid;gap:.5em}
.legal__text li{position:relative;padding-left:1.25em}
.legal__text li::before{
  content:"";
  position:absolute;
  left:0;
  top:.66em;
  width:5px;
  height:5px;
  border-radius:1.5px;
  background:var(--ink);
}
/* a list inside a list item (the GDPR notice's §9): an open square */
.legal__text li > ul{margin-top:.5em}
.legal__text li li::before{background:none;border:1px solid var(--ink)}

/* the short version: in ink, on a hairline, under the intro */
.legal__short{
  max-width:34em;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:clamp(1rem,1.3vw,1.125rem);
  line-height:1.55;
  color:var(--ink);
  text-wrap:pretty;
}
.legal__short strong{font-weight:500}

/* the section's number over its name, as the site numbers its steps */
.legal__no{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--muted);
}
/* a part's own sub-heads (§3, §8) */
.legal__text h3{
  margin-top:1.8em;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
}
.legal__text h3:first-child{margin-top:0}
.legal__text h3 + *{margin-top:.6em}
/* one level under (the framework page's articles and documents) */
.legal__text h4{
  margin-top:1.5em;
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
}
.legal__text h3 + h4{margin-top:.9em}
.legal__text h4 + *{margin-top:.5em}
/* a law's Arabic name under its English one; sits left like the English */
.legal__ar{
  display:block;
  width:fit-content;
  margin-top:8px;
  font-size:.85em;
  letter-spacing:0;
  color:var(--muted);
}
/* the three areas in the head: numbered, in the short version's ink */
.legal__short > * + *{margin-top:.5em}
.legal__areas{display:grid;gap:.25em;padding-left:1.25em;list-style:decimal}

/* the address on a legal page: a press copies it and it reads "Email
   copied" for a moment, in the address's own width (js/foot.js sets
   [data-copied]) */
.legal__mail{
  margin:0;
  padding:0 0 2px;
  border:0;
  background:none;
  font:inherit;
  font-weight:500;
  cursor:pointer;
}
.legal__mail:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.legal__mail-roll{display:inline-grid;justify-items:start;overflow:hidden;vertical-align:bottom}
.legal__mail-roll > span{grid-area:1 / 1;transition:transform .35s var(--ease)}
.legal__mail-done{transform:translateY(105%)}
.legal__mail[data-copied] .legal__mail-text{transform:translateY(-105%)}
.legal__mail[data-copied] .legal__mail-done{transform:none}
@media (prefers-reduced-motion:reduce){
  .legal__mail-roll > span{transition:none}
}

/* who to write to: a label, then the detail */
.legal__facts{display:grid;gap:10px}
.legal__facts > div{
  display:grid;
  grid-template-columns:minmax(0,11rem) minmax(0,1fr);
  gap:4px 20px;
}
.legal__facts dt{color:var(--ink);font-weight:500}
.legal__facts dd{margin:0}

/* tables: hairline rows, the heads in small caps; a narrow screen
   scrolls them sideways rather than crushing them */
.legal__table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal__table{
  width:100%;
  min-width:30rem;
  border-collapse:collapse;
  font-size:14.5px;
  line-height:1.5;
}
.legal__table th{
  padding:0 16px 10px 0;
  border-bottom:1px solid var(--ink);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:left;
  color:var(--muted);
}
.legal__table td{
  padding:12px 16px 12px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.legal__table td:first-child{color:var(--ink)}

/* a detail still to be given or confirmed before publishing */
.legal__todo{
  padding:0 .25em;
  background:var(--wash);
  outline:1px dashed var(--muted);
  outline-offset:-1px;
  color:var(--ink);
}

/* phones: the name over its text */
@media (max-width:760px){
  .legal__part{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .legal__text{font-size:15.5px}
  .legal__facts > div{grid-template-columns:minmax(0,1fr)}
}

/* phones: a table row becomes a little stack, its first cell in ink and
   the others under it, each with its column's name */
@media (max-width:560px){
  .legal__table{min-width:0}
  .legal__table thead{display:none}
  .legal__table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .legal__table tr:first-child{border-top:1px solid var(--ink)}
  .legal__table td{display:block;padding:0;border:0}
  .legal__table td + td{margin-top:4px}
  .legal__table td:first-child{margin-bottom:6px;font-weight:500}
  .legal__table td + td::before{
    content:attr(data-label) ": ";
    color:var(--ink);
    font-weight:500;
  }
}

/* ============================================================
   THE FRAMEWORK PAGE (legal-framework.html, .legal--framework)
   Five times the policy's length, so laid out as a document
   (2026-11-09): the title, the two ledes side by side, the three
   exposures as numbered cards; then a contents column that stays on
   screen on wide screens (js/legal-toc.js marks the part being read)
   and the parts on the rest of the width, each name over its text.
   Prose keeps its reading measure; tables and cards take the width.
   ============================================================ */

/* ---------------------------- head ------------------------- */
.legal--framework .legal__head{max-width:none;margin-bottom:clamp(28px,3.5vw,44px)}
.legal--framework .legal__head .display{max-width:12em}
.legal__intro{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:18px clamp(32px,5vw,88px);
  max-width:76rem;
}
.legal--framework .legal__lede{max-width:none}

/* the three exposures: a card each, on the ink rule, numbered 01-03 */
.legal--framework .legal__short{
  max-width:none;
  margin-top:clamp(40px,5vw,64px);
  padding-top:0;
  border-top:0;
}
.legal--framework .legal__areas{
  counter-reset:area;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:12px;
  margin-top:16px;
  padding-left:0;
  list-style:none;
}
.legal--framework .legal__areas li{
  counter-increment:area;
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.4vw,32px);
  padding:16px 20px 20px;
  border-top:1px solid var(--ink);
  background:var(--wash);
}
.legal--framework .legal__areas li::before{
  content:counter(area,decimal-leading-zero);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--muted);
}

/* ---------------------------- body ------------------------- */
/* the ink rule now opens the body (contents and parts together) */
.legal__body{
  margin-top:clamp(48px,6vw,88px);
  border-top:1px solid var(--ink);
}
.legal--framework .legal__parts{border-top:0}
@media (min-width:1024px){
  .legal__body{
    display:grid;
    grid-template-columns:minmax(0,15rem) minmax(0,1fr);
    column-gap:clamp(40px,5vw,96px);
    align-items:start;
  }
}

/* the contents: §-numbers in a narrow column, the names beside them;
   the part being read in ink, on its own ink line */
.legal__toc{padding-block:clamp(24px,3vw,40px)}
.legal__toc-head{
  margin-bottom:14px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.legal__toc-list{display:grid}
.legal__toc-list a{
  display:grid;
  grid-template-columns:2.6em minmax(0,1fr);
  gap:6px;
  padding:7px 0 7px 14px;
  border-left:1px solid var(--line);
  font-size:14px;
  line-height:1.35;
  color:var(--muted);
  transition:color .2s var(--ease,ease),border-color .2s var(--ease,ease);
}
.legal__toc-list a span{padding-top:.2em;font-size:11px;letter-spacing:.08em}
.legal__toc-list a:hover{color:var(--ink)}
.legal__toc-list a[aria-current]{color:var(--ink);border-left-color:var(--ink)}
@media (min-width:1024px){
  .legal__toc{
    position:sticky;
    top:calc(var(--announce-h,0px) + 70px);
    max-height:calc(100vh - var(--announce-h,0px) - 70px);
    overflow-y:auto;
    scrollbar-width:none;
  }
}
/* narrower: the contents open the body as a list in columns */
@media (max-width:1023px){
  .legal__toc{border-bottom:1px solid var(--line)}
  .legal__toc-list{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
    column-gap:32px;
  }
  .legal__toc-list a{padding-left:0;border-left:0}
}

/* ---------------------------- parts ------------------------ */
.legal--framework .legal__part{
  display:block;
  padding-block:clamp(36px,4.5vw,64px);
  scroll-margin-top:calc(var(--announce-h,0px) + 70px);
}
.legal--framework .legal__name{
  max-width:30em;
  font-size:clamp(1.5rem,2.3vw,2rem);
  line-height:1.15;
  letter-spacing:-.025em;
}
.legal--framework .legal__no{margin-bottom:12px}
.legal--framework .legal__ar{margin-top:10px;font-size:1.0625rem}
.legal--framework .legal__text{
  max-width:none;
  margin-top:clamp(20px,2.4vw,32px);
}
/* prose at its reading measure; tables, cards and lists in columns
   take the part's width */
.legal--framework .legal__text > :is(p,ul,ol,h3,h4){max-width:44rem}
.legal--framework .legal__text h3{margin-top:2.2em;font-size:18px;letter-spacing:-.01em}
.legal--framework .legal__text h3:first-child{margin-top:0}
.legal--framework .legal__text h4{font-size:16px}

/* tables: wider now, the first column (article, law, priority) only
   as wide as its words */
.legal--framework .legal__table{font-size:15px}
.legal--framework .legal__table :is(th,td):first-child{width:1%;padding-right:28px;white-space:nowrap}
.legal--framework .legal__table-wrap{margin-block:1.4em}
.legal--framework .legal__table-wrap:first-child{margin-top:0}

/* a list of short items in columns */
.legal--framework .legal__text ul.legal__list--cols{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
  column-gap:28px;
}
.legal--framework .legal__text ul.legal__list--tight{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));
}

/* the source under a table, smaller */
.legal__source{font-size:13.5px}

/* a part's priority: a small ink label */
.legal__flag{
  width:fit-content;
  padding:5px 10px 4px;
  background:var(--ink);
  color:var(--ground);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* cards: controller and processor, the three kinds of asset */
.legal__cards{display:grid;gap:12px}
.legal--framework .legal__text > .legal__cards{margin-top:1.4em}
.legal--framework .legal__text > .legal__cards + *{margin-top:1.4em}
.legal__cards--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.legal__cards--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.legal__card{
  padding:18px 22px 22px;
  border-top:1px solid var(--ink);
  background:var(--wash);
}
.legal__card > * + *{margin-top:.7em}
.legal--framework .legal__card h4{margin:0 0 .2em}
.legal__eg{
  padding-top:.8em;
  border-top:1px solid var(--line);
  font-size:14.5px;
  line-height:1.55;
}

/* a dated development: set off on a wash, an ink line on its left */
.legal--framework .legal__text > .legal__note{
  max-width:44rem;
  margin-top:2.2em;
  padding:22px 26px 24px;
  border-left:2px solid var(--ink);
  background:var(--wash);
}
.legal__note > * + *{margin-top:.9em}

/* the six documents: a card each, two or three to a row; the laws
   they answer to at the foot, on a hairline */
.legal__docs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  gap:12px;
}
.legal--framework .legal__text > .legal__docs{margin-top:1.2em}
.legal__doc{
  display:flex;
  flex-direction:column;
  padding:18px 22px 20px;
  border-top:1px solid var(--ink);
  background:var(--wash);
}
.legal--framework .legal__doc h4{margin:0;font-size:17px;line-height:1.3}
.legal__doc-no{
  display:block;
  margin-bottom:18px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--muted);
}
.legal--framework .legal__doc h4 + p{margin-top:.5em}
.legal__doc-label{
  margin-top:1.1em;
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.legal--framework .legal__doc ul{gap:.35em;margin:.6em 0 1.4em;font-size:14.5px;line-height:1.5}
.legal__doc-law{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  line-height:1.5;
}

/* the final recommendation: the page's last word, set in reverse */
.legal--framework .legal__final{
  margin-top:clamp(36px,4.5vw,64px);
  padding:clamp(28px,4vw,52px);
  border-bottom:0;
  background:var(--ground);
  color:var(--ink);
}
.legal--framework .legal__final .legal__text{
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.6;
  color:var(--ink);
}

@media (max-width:760px){
  .legal--framework .legal__text{font-size:15.5px}
  .legal__card,.legal__doc{padding:16px 18px 18px}
  .legal--framework .legal__text > .legal__note{padding:18px 18px 20px}
}
/* phones: the stacked table rows don't need the first column's width */
@media (max-width:560px){
  .legal--framework .legal__table :is(th,td):first-child{width:auto;padding-right:0;white-space:normal}
}