/* V3 Legal: a dark document hero with the plain-English summary beside the title, the full text on chalk
   with a sticky side index (a sticky "Jump to section" picker on tablets and phones), and the other policies to end.
   The hub ranks the documents in a rule-divided list, the membership agreement first.
   The legal text itself is never restyled with text-transform or generated text, so what renders is what V2 renders.
   Candidates for v3.css: .crumb, .l-when (one date line), .l-summary (summary card), .toc-g (index groups),
   .l-jump (sticky picker), .l-list and .l-rank (link rows), and the 38em reading measure for long documents. */

/* ---------- 1. Document hero ---------- */
.l-hero{padding-top:calc(68px + env(safe-area-inset-top,0px) + clamp(44px,5.5vw,96px));padding-bottom:clamp(52px,5vw,80px)}
.l-hero .ph-grid{align-items:start}
.l-hero .ph-copy{gap:22px}
.l-hero .h1{max-width:12em}
.l-hero .lead.long{font-size:var(--fs-17);line-height:1.6;max-width:36em}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;color:var(--jade);text-decoration:none}
.crumb a:hover{color:var(--pearl)}
.crumb [aria-current]{color:var(--silver)}
/* when it applies from: one human line */
.l-when{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:var(--fs-15);line-height:1.5;color:var(--silver);font-variant-numeric:tabular-nums}
.l-when span:first-child{color:var(--pearl)}
.l-when .sep{color:var(--dim)}
@media (max-width:480px){.l-when{flex-direction:column;gap:2px}.l-when .sep{display:none}} /* narrow screens: two short lines, no dangling dot */
/* the plain-English summary: the hero's one visual */
.l-summary{padding:clamp(24px,2.3vw,32px);border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(240,243,241,.06),rgba(240,243,241,.02));box-shadow:0 30px 60px -44px rgba(0,0,0,.9)}
.l-summary-t{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.l-summary ul{margin-top:16px}
.l-summary li{position:relative;padding:10px 0 10px 22px;border-top:1px solid var(--line);font-size:var(--fs-15);line-height:1.55;color:var(--silver)}
.l-summary li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--jade)}
.l-summary-note{padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-13);line-height:1.5;color:var(--dim)}
@media (max-width:960px){.l-hero .ph-visual{max-width:none}}

/* ---------- 2. The full text ---------- */
.l-body{padding-top:clamp(56px,6vw,96px)}
.toc-k,.toc-g{margin:0 0 8px;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.toc-g:not(:first-child){margin-top:22px}
.l-body .toc{scrollbar-width:thin;overscroll-behavior:contain}
.l-body .toc a{padding-block:7px;font-size:var(--fs-13);line-height:1.4}
.l-jump{display:none}
.l-body .doc>*{min-width:0}
/* a comfortable measure (about 70 characters); tables may use the full column */
.l-doc{max-width:none}
.l-doc :is(p,ul,ol,h2,h3,h4,blockquote){max-width:38em}
.l-doc [id]{scroll-margin-top:100px}
.l-doc>section+section,.l-doc>div>section+section,.l-doc>div+section{position:relative;margin-top:3em;padding-top:2.6em}
.l-doc>section+section::before,.l-doc>div>section+section::before,.l-doc>div+section::before{content:"";position:absolute;left:0;top:0;width:min(100%,38em);border-top:1px solid var(--rule)}
.l-doc section>h2:first-child,.l-doc>div:first-child>section:first-child>h2:first-child{margin-top:0}
.l-doc h2{margin-bottom:.7em}
.l-doc h3{font-size:var(--fs-17);font-weight:500}
.l-doc a{overflow-wrap:anywhere}
/* tables: the source already wraps each one in a div, which scrolls sideways when the table is wider than the page */
.l-doc div:has(>table){margin:1.6em 0;overflow-x:auto;border:1px solid var(--rule);border-radius:12px;background:var(--paper)}
.l-doc div:has(>table) table{margin:0;min-width:640px}
.l-doc caption{padding:16px 16px 6px;text-align:left;font-size:var(--fs-13);font-weight:500;color:var(--ink)}
.l-doc th,.l-doc td{padding:12px 16px;font-size:var(--fs-13);line-height:1.5}
.l-doc thead th{background:var(--chalk);color:var(--ink);font-weight:500}
.l-doc tbody tr:last-child>*{border-bottom:0}
/* the two links that close the Health data and Cookie pages */
.l-doc section>div>a{display:inline-block;margin:0 24px 8px 0}
@media (max-width:960px){
  .l-body .doc{grid-template-columns:minmax(0,1fr)}
  .l-body .toc{display:none}
  .l-jump{position:sticky;top:calc(68px + env(safe-area-inset-top,0px));z-index:6;display:flex;align-items:center;gap:14px;margin:0 calc(-1 * var(--gutter)) 36px;padding:10px var(--gutter);background:rgba(240,242,240,.92);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(37,42,43,.1)}
  .l-jump label{flex:none;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
  .l-jump .select{flex:1;min-width:0;min-height:48px;padding-right:44px;font-size:var(--fs-15);background-repeat:no-repeat;background-position:right 16px center;background-size:12px}
  .l-doc [id]{scroll-margin-top:150px}
}
@media (max-width:560px){.l-jump label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:640px){.l-doc{font-size:16px}}

/* ---------- 3. The other policies ---------- */
.l-more{padding-bottom:clamp(72px,8vw,120px)}
.l-list{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.l-list a{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) 24px;gap:8px 48px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line);color:var(--pearl);text-decoration:none}
.ll-t{font-size:var(--fs-h3);font-weight:300;letter-spacing:-.02em;line-height:1.25;transition:color .2s}
.ll-d{font-size:var(--fs-15);line-height:1.55;color:var(--silver);text-wrap:pretty}
.ll-go{justify-self:end;color:var(--jade);transition:transform .18s var(--ease-out)}
.l-list a:hover .ll-t{color:var(--jade)}
.l-list a:hover .ll-go{transform:translateX(4px)}
.l-more-note{margin-top:28px}
.l-more-note a{color:var(--silver)}
@media (max-width:760px){
  .l-list a{grid-template-columns:minmax(0,1fr) 24px;padding:20px 0}
  .ll-d{grid-column:1;grid-row:2}
  .ll-go{grid-column:2;grid-row:1/3;align-self:center}
}

/* ---------- Hub: the documents, ranked ---------- */
.l-index-hero{padding-bottom:clamp(64px,7vw,112px)}
.l-docs{padding-top:clamp(48px,5.5vw,88px)}
.l-rank{border-top:1px solid var(--rule)}
.l-rank li{border-bottom:1px solid var(--rule)}
.l-rank a{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;align-items:center;gap:10px clamp(24px,4vw,64px);padding:26px 0;color:var(--ink);text-decoration:none}
.lr-t{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2;transition:color .2s}
.lr-d{margin-top:8px;font-size:var(--fs-15);line-height:1.55;color:var(--ash);max-width:50em;text-wrap:pretty}
.lr-when{text-align:right;font-size:var(--fs-15);line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.lr-v{margin-top:4px;font-size:var(--fs-13);color:var(--ash)}
.lr-go{justify-self:end;color:var(--emerald);transition:transform .18s var(--ease-out)}
.l-rank a:hover .lr-t{color:var(--emerald)}
.l-rank a:hover .lr-go{transform:translateX(4px)}
/* the binding agreement leads the list */
.lr-primary a{padding:40px 0 44px}
.lr-primary .lr-t{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.035em;line-height:1.06;max-width:14em;text-wrap:balance}
.lr-primary .lr-d{margin-top:16px;font-size:var(--fs-lead);line-height:1.5;max-width:34em}
.l-index-note{margin-top:32px;font-size:var(--fs-15);color:var(--ash)}
.l-index-note a{color:var(--ink);text-underline-offset:3px}
@media (max-width:760px){
  .l-rank a{grid-template-columns:minmax(0,1fr) 24px;gap:14px 16px;padding:22px 0}
  .lr-when{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:2px 12px;text-align:left;white-space:normal;font-size:var(--fs-13)}
  .lr-v{margin-top:0}
  .lr-go{grid-column:2;grid-row:1/3;align-self:center}
  .lr-primary a{padding:30px 0 34px}
}