/* ==========================================================================
   VyroPlus — privacy notice (DESIGN.md §7.5). Page-only styles; extends the
   shared classes in css/style.css, never redefines them.
   Layout: 260px sticky "On this page" rail + reading column at --w-narrow;
   one column ≤ 860px where the rail becomes a horizontal chip row.
   ========================================================================== */

/* ---------- Hero band tweak: the "Last updated" pill ---------- */
.hero--slim .tag{margin-top:.15rem}

/* ---------- Layout ---------- */
.privacy{padding:clamp(40px,6vw,72px) 0 var(--section)}
.privacy > .wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:start}

/* ---------- "On this page" rail ---------- */
/* overflow-anchor:none — otherwise the always-visible sticky rail is what scroll anchoring holds still
   while the web font swaps in, and a #fragment landing drifts past its heading (see privacy.js). */
.toc{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;min-width:0;overflow-anchor:none}
.toc .eyebrow{margin-bottom:.9rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.toc a{display:flex;align-items:center;gap:.7rem;min-height:44px;padding:.55rem .85rem;border-radius:var(--r-pill);font-size:.92rem;font-weight:600;line-height:1.25;color:var(--text-2);transition:background-color var(--t-fast),color var(--t-fast)}
.toc a .n{flex:none;width:1.7em;font-size:var(--fs-tag);font-weight:700;letter-spacing:.08em;color:var(--text-3);transition:color var(--t-fast)}
.toc a:hover{background:var(--paper);color:var(--text)}
.toc a[aria-current]{background:var(--tint);color:var(--text-green)}
.toc a[aria-current] .n{color:var(--text-green)}

/* ---------- Reading column ---------- */
.pv-body{max-width:var(--w-narrow)}
.pv{padding-block:clamp(28px,3.5vw,44px);border-top:1px solid var(--line)}
.pv:first-child{border-top:0;padding-top:0}
.pv h2{font-size:clamp(1.45rem,2.4vw,1.9rem);letter-spacing:-.02em;margin:.55rem 0 1rem;max-width:none}
.pv p{color:var(--text-2);line-height:1.65}
.pv p + p,.pv ul + p,.pv p + ul,.pv .pv-addr{margin-top:1rem}
.pv p a{color:var(--text-green);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.pv p a:hover{color:var(--text)}
.pv-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pv-list li{position:relative;padding-left:1.45rem;color:var(--text-2);line-height:1.6}
.pv-list li::before{content:"";position:absolute;left:.15rem;top:.6em;width:9px;height:9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--g1)}
.pv-list strong{color:var(--text);font-weight:700}
.pv-addr{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.pv-addr > div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.25rem}
.pv-addr h3{font-size:var(--fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--text-green);font-weight:700;margin-bottom:.45rem}
.pv-addr address{color:var(--text-2);line-height:1.6}
.pv-addr > div:nth-child(3){grid-column:1 / -1}
.pv-addr address a{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--g1);text-decoration-thickness:2px;text-underline-offset:3px;display:inline-block;padding:.3rem 0}
.pv-ask{margin-top:clamp(28px,3.5vw,44px)}
.pv-ask .btn{justify-self:start;margin-top:.4rem}

/* ---------- ≤ 860px: one column, rail becomes a horizontal chip row ---------- */
@media (max-width:860px){
  .privacy{padding-top:clamp(28px,5vw,48px)}
  .privacy > .wrap{grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,32px)}
  .toc{position:static}
  .toc .eyebrow{margin-bottom:.6rem}
  .toc ol{display:flex;gap:.4rem;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:6px 6px 10px;margin-inline:-6px;scrollbar-width:thin}
  .toc li{flex:none;scroll-snap-align:start}
  .toc a{background:var(--card);border:1px solid var(--line);padding:.5rem .95rem;white-space:nowrap}
  .toc a[aria-current]{border-color:var(--tint-2)}
  .pv-body{max-width:none}
}
@media (max-width:560px){
  .pv-addr{grid-template-columns:1fr}
}

/* ---------- Reduced motion: rail highlight is a colour change only (already ≤ .15s via style.css) ---------- */