/* ============================================================================
   Vyn — legal and support pages
   Loaded after style.css, which supplies the tokens, the floor, the nav and
   the footer. Nothing here introduces a colour: these are pages of prose, and
   prose on this site is white at four strengths over the same floor as
   everything else.

   The one structural idea is the contents rail. A privacy policy is read by
   somebody looking for one paragraph — what happens to my credentials, who
   receives my viewing history — not from the top, so the headings are a
   standing list beside the prose rather than an anchor block you scroll past
   once. Below 1000px there is no room for a column beside the text, so the
   same list becomes a <details> at the head of the page: still one press from
   any section, and closed by default so it never stands between the reader
   and the first sentence.
   ========================================================================== */

/* ---------- head ---------- */
.legal-head{padding-block:clamp(60px,8vw,104px) clamp(30px,4vw,46px)}
.legal-head h1{font-size:clamp(34px,5.4vw,60px);margin-top:16px}
.legal-head .lede{
  margin-top:22px;font-size:clamp(16.5px,1.45vw,19.5px);color:var(--t2);max-width:60ch;
}
.legal-meta{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13.5px;color:var(--t3);
}
.legal-meta strong{color:var(--t2);font-weight:500}

/* ---------- the two columns ---------- */
.legal-body{padding-bottom:clamp(70px,9vw,120px)}
.legal-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(36px,5vw,76px);align-items:start}
@media (max-width:999px){.legal-grid{grid-template-columns:1fr;gap:34px}}

/* contents — a rail beside the prose on wide screens, a wrapped row of chips
   above it on narrow ones. One list, restyled: a second copy of sixteen
   anchors is a second copy to keep in step, and screen readers would announce
   the contents twice. */
.toc{position:sticky;top:86px}
.toc-h{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);
  margin-bottom:14px;
}
.toc ol{counter-reset:toc;display:grid;gap:1px}
.toc li{counter-increment:toc}
.toc a{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px;
  padding:7px 0;font-size:14px;color:var(--t3);text-decoration:none;
  line-height:1.4;transition:color .2s;
}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);
  font-size:11px;color:var(--t4);letter-spacing:.04em;padding-top:2px}
.toc a:hover,.toc a:focus-visible{color:var(--t1)}
.toc a:hover::before{color:var(--t2)}

@media (max-width:999px){
  .toc{position:static;padding-bottom:4px}
  .toc ol{display:flex;flex-wrap:wrap;gap:8px}
  .toc a{
    display:block;padding:7px 13px;border:1px solid var(--line-soft);
    border-radius:999px;background:var(--surface);font-size:13.5px;
  }
  .toc a::before{content:none}
}

/* ---------- prose ---------- */
.prose{max-width:70ch;font-size:16.5px;color:var(--t2);line-height:1.68}
.prose > section{scroll-margin-top:96px}
.prose > section + section{margin-top:clamp(40px,5vw,64px);padding-top:clamp(34px,4vw,48px);
  border-top:1px solid var(--line-soft)}
.prose h2{
  font-size:clamp(21px,2.4vw,27px);color:var(--t1);margin-bottom:18px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;
}
.prose h2 .n{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--t4);
  letter-spacing:.06em}
.prose h3{font-size:16.5px;color:var(--t1);margin:30px 0 10px;letter-spacing:-.016em}
.prose p{margin:0 0 15px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--t1);font-weight:560}
.prose em{font-style:normal;color:var(--t1)}
.prose a{color:var(--t1);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--t4);transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--t2)}
.prose code{font-family:var(--mono);font-size:.88em;color:var(--t1);
  background:var(--surface-2);border-radius:5px;padding:1.5px 6px}

.prose ul.bul{display:grid;gap:11px;margin:0 0 16px}
.prose ul.bul li{position:relative;padding-left:20px}
.prose ul.bul li::before{content:"";position:absolute;left:2px;top:.72em;
  width:6px;height:1px;background:var(--t4)}
.prose ul.bul ul.bul{margin-top:11px}

/* a fact table — "what is stored, where, and for how long" */
.deftable{
  margin:20px 0 22px;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;display:grid;gap:1px;background:var(--line-soft);
}
.deftable > div{background:rgba(255,255,255,.018);padding:15px 18px;
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:6px 22px;font-size:14.5px}
.deftable dt,.deftable .k{color:var(--t1);font-weight:500;margin:0}
.deftable dd,.deftable .v{margin:0;color:var(--t2);line-height:1.6}
@media (max-width:640px){.deftable > div{grid-template-columns:1fr}}

/* the App Privacy label mirror, and any other "here is the short answer" box */
.callout{
  margin:22px 0;padding:20px 22px;border:1px solid var(--line-soft);
  border-radius:var(--r);background:var(--surface);
}
.callout p{font-size:15px}
.callout p:last-child{margin-bottom:0}
.callout-h{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);
  margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.callout-h::before{content:"";width:20px;height:1px;background:var(--t4)}

/* contact block, used on every page's last section */
.contact-card{
  margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);
}
.contact-card .who{font-size:13px;color:var(--t3);margin-bottom:6px}
.contact-card .addr{font-size:clamp(19px,2.2vw,24px);color:var(--t1);
  letter-spacing:-.02em;text-decoration:none;display:inline-block}
.contact-card .addr:hover{text-decoration:underline;text-underline-offset:4px}
.contact-card .when{font-size:13.5px;color:var(--t3);margin-top:12px}

/* ---------- support page ---------- */
.sup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:clamp(48px,6vw,76px)}
@media (max-width:820px){.sup-grid{grid-template-columns:1fr}}
.sup-grid .card h3{margin-bottom:8px}
.sup-grid .card p{margin:0}
.sup-grid .card a{color:var(--t1)}

.req-list{margin-top:26px;display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;max-width:560px}
.req-list li{background:rgba(255,255,255,.018);padding:13px 18px;display:flex;
  justify-content:space-between;gap:16px;font-size:14.5px}
.req-list span{color:var(--t3)}
.req-list em{font-style:normal;color:var(--t1);font-weight:500}

/* ---------- nav variant ---------- */
.nav-links a[aria-current="page"]{color:var(--t1)}
.nav-back{font-size:14.5px;color:var(--t3);text-decoration:none}
.nav-back:hover{color:var(--t1)}

/* the "see also" line that closes every legal page. A class rather than an
   inline style: the site's CSP is style-src 'self', so a style attribute is
   simply dropped and the spacing would be lost only in production. */
.prose .see-also{margin-top:20px;font-size:15px;color:var(--t3)}

/* ---------- the nav on a narrow legal page ----------
   style.css hides .nav-links below 860px, which is right for the home page:
   those are section anchors on a page you are already scrolling. Here they are
   the only way from the privacy policy to the terms, so on these pages the
   links stay and "Back to Vyn" goes instead — the brand mark beside it already
   goes home, and one of the two was redundant. */
@media (max-width:860px){
  .nav-links{display:flex;margin-left:auto;gap:0 16px;flex-wrap:wrap;
    justify-content:flex-end;font-size:13.5px}
  .nav-back{display:none}
}
@media (max-width:400px){
  .nav-links{gap:0 12px;font-size:13px}
}

/* The support page opens with the contact card in a band of its own, above the
   contents rail. It is the one thing on the page App Review is looking for, so
   it gets the top of the page — but not a full section's worth of air under it. */
.legal-body.tight{padding-bottom:clamp(28px,3.5vw,48px)}