/* /privacy-policy (v3) — DESIGN-V3 §8.10. Page layout + its one motion signature (§6.5): THE BOOKMARK.
     1 hero       paper hero: crumbs, H1, one line, the Call button and a title block (last updated · covers · follows)
     2 document   ≥ 1024 px: a sticky contents card beside the ten clauses, all open. One gold bookmark tab, clipped over
                  the card's edge, slides down the contents (translateY only) to the clause being read, and that clause's
                  entry darkens (privacy.js, fx.scrub). Nothing draws.
                  < 1024 px: the clauses collapse (one open at a time, privacy.js); the same tab rides in the page margin
                  and slides to the clause that is open; its heading darkens.
   Static (html.a-noanim / a-late): the tab and the darkened entry jump with the reading position, no slide. No JS: every
   clause open, a plain contents list above them on narrow screens, no tab. */

/* ------------------------------------------------------------------ 1 hero (paper, text only) */
.page-privacy .a-head::before { bottom: 0; }   /* the header's fade stays inside its ink band (no grey wash over the paper) */
.a-phero.pv-hero { height: auto; min-height: 0; max-height: none; }   /* a paper hero is as tall as its content (base.css gives heroes 84svh on phones) */
.pv-hero .a-phero__in { padding-top: clamp(28px, 4.2vw, 60px); padding-bottom: clamp(32px, 3.4vw, 48px); }
.pv-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; }
.pv-hero .a-label { margin-bottom: 18px; }
.pv-hero .a-h1 { max-width: none; margin-bottom: 16px; }
.pv-hero .a-lead { margin: 0; max-width: 44ch; }
.pv-hero__ctas { padding-bottom: 2px; }
/* the title block: three cells on the document's own columns (1–4 over the contents, 6 and 9 over the text) */
.pv-meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin: clamp(32px, 3.8vw, 52px) 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.pv-meta > div { grid-column: span 4; min-width: 0; }
.pv-meta > div:nth-child(2) { grid-column: 6 / span 3; }
.pv-meta > div:nth-child(3) { grid-column: 9 / span 4; }
.pv-meta dt { margin-bottom: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pv-meta dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); max-width: 34ch; text-wrap: pretty; }
.pv-meta time { font-weight: 600; }
.a-motion .pv-hero .a-label { animation: aUp .8s .06s var(--ease) both; }
.a-motion .pv-meta > div { animation: aUp .9s .36s var(--ease) both; }
.a-motion .pv-meta > div:nth-child(2) { animation-delay: .44s; }
.a-motion .pv-meta > div:nth-child(3) { animation-delay: .52s; }

/* ------------------------------------------------------------------ 2 the document */
.pv-doc { padding: var(--sec) 0; }   /* the site's section rhythm (as .a-sec) */
.pv-doc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.pv-side { grid-column: 1 / span 4; min-width: 0; }
.pv-text { grid-column: 6 / -1; min-width: 0; }

/* the contents card (sticky) and the bookmark tab */
.pv-toc { position: sticky; top: calc(var(--head-h) + 32px); padding: 22px 24px 14px 0; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-2); }
.pv-toc__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 8px; padding: 0 0 16px 28px; border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pv-toc__head span:last-child { color: var(--muted-2); }
.pv-toc__list { position: relative; }
.pv-toc__a { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; min-height: 44px; padding: 6px 0 6px 28px; font-size: 15px; line-height: 1.3; font-weight: 500;
  color: var(--muted); transition: color .35s ease; }
.pv-toc__n { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--muted-2); font-variant-numeric: tabular-nums; transition: color .35s ease; }
.pv-toc__a:hover { color: var(--text); }
.pv-toc__a:focus-visible { outline-offset: -2px; }
.pv-toc__a.is-current { color: var(--text); }
.pv-toc__a.is-current .pv-toc__n { color: var(--gold-ink); }
/* the tab: a gold ribbon end (notched outside, square inside) clipped over the card's left edge. One element, moved by
   translateY only; the drop shadow follows the notch (filter on the holder, clip-path on the ribbon). */
.pv-tab { position: absolute; left: -11px; top: 7px; z-index: 1; width: 25px; height: 30px; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(122, 90, 16, .3)); will-change: transform; }
.pv-tab::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--gold-2), var(--gold)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); border-radius: 0 2px 2px 0; }
.pv-tab::after { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 1px; background: rgba(122, 90, 16, .28); }   /* the card's edge, pressed into the ribbon */
.no-js .pv-tab { display: none; }
.a-motion .pv-tab::before, .a-motion .pv-tab::after { animation: pvTabIn 1.1s .75s var(--ease) both; }   /* the bookmark drops into place on arrival */
@keyframes pvTabIn { from { opacity: 0; transform: translate3d(0, -26px, 0); } to { opacity: 1; transform: none; } }
.a-motion .pv-toc { animation: aUp 1s .5s var(--ease) both; }

/* the clauses (the document layout at every width until privacy.js turns them into an accordion under 1024 px) */
.pv-clauses { --numw: 88px; position: relative; }
.pv-clause { position: relative; padding: clamp(40px, 3.6vw, 52px) 0 clamp(40px, 3.6vw, 52px) var(--numw); border-top: 1px solid var(--line); }
.pv-clause:first-of-type { padding-top: 6px; border-top: 0; scroll-margin-top: 40px; }
.pv-clause:last-of-type { padding-bottom: 0; }
.pv-clause__head { position: relative; }   /* the numeral hangs off the heading block (so the fading block carries it) */
.pv-clause__h { color: var(--text); max-width: 36ch; }
.pv-clause__h .c-chip { font-size: 11px; transform: translateY(-.12em); }
.pv-clause__num { position: absolute; left: calc(-1 * var(--numw)); top: -6px; font-size: 44px; color: transparent; -webkit-text-stroke: 1.2px var(--muted-2); pointer-events: none; }
.pv-clause__t { display: inline; }
.pv-clause__body { margin-top: 20px; max-width: 64ch; font-size: 17px; line-height: 1.65; color: rgba(18, 20, 23, .86); text-wrap: pretty; }
.pv-clause__body > * + * { margin-top: 16px; }
.pv-clause__body strong { font-weight: 600; color: var(--text); }
.pv-clause__body a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--gold); text-underline-offset: 4px; transition: text-decoration-color .25s; }   /* a ≥ 44 px hit box without changing the line height */
.pv-clause__body a:hover { text-decoration-color: currentColor; }
.pv-clause__body code { font: 500 14px/1 var(--mono); padding: 2px 6px; border-radius: 2px; background: var(--paper); white-space: nowrap; }
.pv-list { display: grid; gap: 12px; }
.pv-list li { position: relative; padding-left: 24px; }
.pv-list li::before { content: ''; position: absolute; left: 2px; top: calc(.82em - 3px); width: 6px; height: 6px; background: var(--gold); }
.pv-tools { margin-bottom: 0; border-top: 1px solid var(--line); }
.pv-tools > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: baseline; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pv-tools dt { font-weight: 600; color: var(--text); }
.pv-tools dd { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.pv-address { display: grid; padding: 18px 22px; border-radius: var(--r-2); background: var(--paper-2); border: 1px solid var(--line); font-style: normal; }
.pv-address > span { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.pv-address a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: 0; }
.pv-address .icon { width: 18px; height: 18px; color: var(--gold-ink); }
.pv-address .pv-address__org { display: block; min-height: 0; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.pv-address .c-chip { margin-left: 4px; }

/* ------------------------------------------------------------------ desktop: the contents card is the reader's map */
/* ≥ 1024 px: clause 01 is top-aligned with the contents card (its numeral's box starts on the card's top edge) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pv-side { grid-column: 1 / span 5; }
  .pv-text { grid-column: 6 / -1; }
  .pv-clauses { --numw: 72px; }
  .pv-clause__num { font-size: 38px; }
}

/* ------------------------------------------------------------------ narrow screens (< 1024 px) */
@media (max-width: 1023px) {
  .pv-hero__head { grid-template-columns: 1fr; }
  .pv-doc__grid { display: block; }
  /* no JS: the full document with a plain contents list above it */
  .pv-toc { position: static; margin-bottom: 40px; }
  .pv-toc__list ol { columns: 2; column-gap: 24px; }
  .pv-toc__list li { break-inside: avoid; }
  .pv-clauses { --numw: 64px; }
  .pv-clause__num { font-size: 34px; }
  /* with JS: an accordion (privacy.js adds .is-acc and one button per clause heading). Until privacy.js (deferred) builds
     it, html.js paints the same geometry (.pv-doc:not(.is-acc) below): clause 01 open, or the #clause in the address;
     every other body shut, each heading a 72 px row. So the accordion takes over with no layout shift. If the scripts never
     arrive (html.a-late at 6 s) the start state lets go and every clause shows. */
  :is(.pv-doc.is-acc, .js:not(.a-late) .pv-doc) .pv-side { display: none; }
  :is(.is-acc, .js:not(.a-late) .pv-doc) .pv-clause { padding: 0; border-top: 1px solid var(--line); }
  :is(.is-acc, .js:not(.a-late) .pv-doc) .pv-clause:last-of-type { border-bottom: 1px solid var(--line); }
  :is(.is-acc, .js:not(.a-late) .pv-doc) .pv-clause__h { max-width: none; }
  /* the heading takes the button's box (the full row, 01 · title · +) so nothing it holds moves when the button wraps it */
  .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clause__head { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: center; column-gap: 8px; }
  .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clause__num { position: static; grid-area: 1 / 1; font-size: 30px; }
  .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clause__h { grid-area: 1 / 1 / 2 / -1; display: flex; align-items: center; min-height: 72px; padding: 14px 28px 14px 60px; }
  .a-motion .pv-doc:not(.is-acc) .pv-clause__head[data-reveal] { opacity: 1; }   /* the headings are the phone's contents: shown from the first paint (privacy.js drops their reveal) */
  .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clause:not(:first-of-type) .pv-clause__h { color: var(--muted); }
  .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clause__body { margin-top: 0; padding: 2px 0 36px 60px; }
  .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clause:not(:first-of-type):not(:target) .pv-clause__body,
  .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clauses:has(.pv-clause:target) .pv-clause:first-of-type:not(:target) .pv-clause__body { display: none; }
  .pv-clause__btn { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: center; column-gap: 8px; width: 100%; min-height: 72px; padding: 14px 0;
    text-align: left; letter-spacing: inherit; line-height: inherit; font-weight: inherit; color: var(--muted); transition: color .35s ease; -webkit-tap-highlight-color: transparent; }
  .pv-clause__btn:focus-visible { outline-offset: -2px; }
  .is-acc .pv-clause.is-current .pv-clause__btn, .pv-clause__btn:hover { color: var(--text); }
  .is-acc .pv-clause__num { position: static; font-size: 30px; }
  .pv-clause__pm { position: relative; width: 16px; height: 16px; justify-self: end; color: var(--text); }
  .pv-clause__pm::before, .pv-clause__pm::after { content: ''; position: absolute; left: 0; right: 0; top: 7.25px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
  .pv-clause__pm::after { transform: rotate(90deg); }
  [aria-expanded="true"] > .pv-clause__pm::after { transform: rotate(180deg); }
  .is-acc .pv-clause__body { margin-top: 0; padding: 2px 0 36px 60px; }
  .is-acc .pv-clause__body[hidden] { padding: 0; }   /* hidden="until-found" keeps the box (content-visibility), so no padding while shut */
  /* the tab rides in the page margin, level with the open clause's heading */
  .pv-atab { position: absolute; left: -17px; top: 0; z-index: 1; width: 13px; height: 28px; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(122, 90, 16, .3)); will-change: transform; }
  .pv-atab::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--gold-2), var(--gold)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 5px 50%); border-radius: 0 2px 2px 0; }
  .a-motion .pv-atab { transition: transform .8s var(--ease), opacity .4s ease; }
  .a-motion .pv-atab::before { animation: pvTabIn 1.1s .6s var(--ease) both; }
}
.pv-atab { display: none; }
@media (max-width: 1023px) { .is-acc .pv-atab { display: block; } }
@media (max-width: 767px) {
  .pv-hero .a-lead { max-width: 30ch; }
  .pv-meta { grid-template-columns: 1fr; row-gap: 0; margin-top: 28px; padding-top: 0; }
  .pv-meta > div, .pv-meta > div:nth-child(2), .pv-meta > div:nth-child(3) { grid-column: 1; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .pv-meta dt { margin: 0; line-height: 1.6; font-size: 12px; letter-spacing: .1em; }
  .pv-meta dd { font-size: 15px; line-height: 1.45; }
  .pv-toc__list ol { columns: 1; }
  .pv-clauses { --numw: 0px; }
  .pv-clause__num { position: static; display: block; margin-bottom: 12px; font-size: 30px; }
  .pv-clause__btn { grid-template-columns: 44px minmax(0, 1fr) 20px; min-height: 68px; }
  :is(.is-acc, .js:not(.a-late) .pv-doc) .pv-clause__num { display: block; margin: 0; font-size: 26px; -webkit-text-stroke-width: 1px; }
  .is-acc .pv-clause__body, .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clause__body { padding: 0 0 32px; }
  .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clause__head { grid-template-columns: 44px minmax(0, 1fr) 20px; }
  .js:not(.a-late) .pv-doc:not(.is-acc) .pv-clause__h { min-height: 68px; padding-left: 52px; }
  .is-acc .pv-clause__body[hidden] { padding: 0; }
  .pv-clause__body { font-size: 16px; line-height: 1.62; }
  .pv-clause__body code { font-size: 13px; white-space: normal; }
  .pv-tools > div { grid-template-columns: 1fr; }
  .pv-tools dd { font-size: 15px; }
  .pv-address { padding: 12px 16px; }
  .pv-address > span { font-size: 15px; }
  .pv-atab { left: -16px; width: 12px; }
}
@media (max-width: 359px) { .pv-meta > div, .pv-meta > div:nth-child(2), .pv-meta > div:nth-child(3) { grid-template-columns: 92px minmax(0, 1fr); } }

/* motion off: nothing slides (the tab and the darkened entry still follow the reading position) */
.a-noanim :is(.pv-toc__a, .pv-toc__n, .pv-clause__btn, .pv-atab), .a-late :is(.pv-toc__a, .pv-toc__n, .pv-clause__btn) { transition: none; }

/* ------------------------------------------------------------------ print: the whole policy, no furniture */
@media print {
  .a-head, .a-menu, .a-callbar, .a-foot, .a-skip, .a-crumbs-nav, .pv-hero__ctas, .pv-side, .pv-tab, .pv-atab, .pv-clause__pm { display: none !important; }
  html, body { background: #fff !important; }
  .a-phero--paper::before { display: none; }
  .a-phero.pv-hero, .pv-doc { background: #fff; padding: 0 0 16px; }
  .pv-hero .a-phero__top { padding-top: 0; }
  .pv-doc__grid { display: block; }
  .pv-clause { padding: 20px 0 20px var(--numw); break-inside: avoid-page; }
  .pv-clause__body[hidden] { display: block !important; content-visibility: visible !important; }
  .pv-clause__body a { display: inline; padding: 0; margin: 0; }
  * { animation: none !important; transition: none !important; }
}