/* ==========================================================================
   COVETED — document pages (Privacy, Terms, Support)
   Builds on style.css tokens. Long-form reading layout: a ~68ch measure,
   a sticky table of contents on wide screens, a collapsible one on phones.
   ========================================================================== */

.skip-link{
  position:absolute; left:var(--edge); top:-60px; z-index:60;
  background:var(--ink); color:var(--cream);
  border-radius:999px; padding:10px 18px;
  font-size:14px; font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:14px; }

.doc{
  max-width:var(--container);
  margin:0 auto;
  padding:28px var(--edge) 0;
}

/* ---- Title block ---- */
.doc__head{ padding-bottom:28px; border-bottom:1.5px solid var(--line); }
.doc__head > *:not(.contact-card){ max-width:68ch; }
.doc__head .hero__kicker{ margin-bottom:12px; }
.doc__title{
  font-size:clamp(38px, 6vw, 64px);
  line-height:1.02;
}
.doc__title em{ font-style:italic; color:var(--cobalt); }
.doc__meta{
  display:flex; flex-wrap:wrap; gap:6px 16px;
  margin-top:16px;
  font-size:14px; color:var(--stone);
}
.doc__meta strong{ color:var(--ink); font-weight:600; }
.doc__lede{
  margin-top:18px; max-width:60ch;
  font-size:17px; line-height:1.6; color:var(--ink);
}

/* ---- Body: TOC + article ---- */
.doc__layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:28px;
  padding-top:28px;
}
@media (min-width:960px){
  .doc__layout{ grid-template-columns:240px minmax(0, 68ch); gap:64px; padding-top:40px; }
}

/* Table of contents. On phones it's a collapsed <details>; from 960px it
   opens permanently and sticks under the nav. */
.toc{
  background:var(--paper);
  border-radius:var(--radius-md);
  padding:4px 18px;
}
.toc summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  font-weight:600; font-size:14.5px;
}
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::after{
  content:""; width:8px; height:8px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.toc[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.toc ol{ list-style:none; margin:0; padding:0 0 14px; }
.toc li + li{ margin-top:2px; }
.toc a{
  display:block; padding:6px 0;
  font-size:14px; line-height:1.4; color:var(--stone);
  text-decoration:none;
}
.toc a:hover{ color:var(--ink); }
.toc a[aria-current="true"]{ color:var(--cobalt); font-weight:600; }

@media (min-width:960px){
  .toc{
    position:sticky; top:96px; align-self:start;
    background:none; padding:0 0 0 2px;
    max-height:calc(100vh - 120px); overflow:auto;
  }
  .toc summary{ pointer-events:none; padding:0 0 10px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); }
  .toc summary::after{ display:none; }
  .toc ol{ border-left:1.5px solid var(--line); padding:0; }
  .toc a{ padding:6px 0 6px 16px; margin-left:-1.5px; border-left:1.5px solid transparent; }
  .toc a[aria-current="true"]{ border-left-color:var(--cobalt); }
}

/* ---- Article ---- */
.prose{ min-width:0; }
.prose section{ scroll-margin-top:96px; }
.prose section + section{ margin-top:40px; }
.prose h2{
  font-size:clamp(22px, 2.6vw, 28px);
  line-height:1.2;
}
.prose p{
  margin-top:12px;
  font-size:16.5px; line-height:1.75;
  color:#33312F;
  overflow-wrap:anywhere;
}
.prose a{ color:var(--cobalt); text-underline-offset:3px; }
.prose a:hover{ color:var(--ink); }

/* The website-specific section sits apart from the numbered app policy. */
.prose .doc__aside{
  margin-top:48px;
  padding:22px 24px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.35);
}
.doc__aside h2{ font-size:22px; }

/* ---- Related links + contact strip at the end of every doc ---- */
.doc__next{
  margin-top:56px;
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
.doc-card{
  display:flex; flex-direction:column; gap:4px;
  padding:18px 20px;
  border-radius:var(--radius-md);
  background:var(--paper);
  text-decoration:none; color:var(--ink);
  transition:background .18s ease, transform .18s ease;
}
.doc-card:hover{ background:var(--paleblue); transform:translateY(-1px); }
.doc-card__label{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); }
.doc-card__title{ font-family:var(--serif); font-size:20px; }

/* ---- Support page ---- */
.contact-card{
  margin-top:28px; max-width:820px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px;
  padding:26px 28px;
  border-radius:var(--radius-md);
  background:var(--ink); color:var(--cream);
}
.contact-card__copy{ flex:1 1 260px; }
.contact-card__title{ font-family:var(--serif); font-size:clamp(22px, 3vw, 28px); }
.contact-card__sub{ margin-top:6px; color:#BDBAB4; font-size:15px; line-height:1.55; }
.contact-card__btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cream); color:var(--ink);
  border-radius:999px; padding:13px 24px;
  font-weight:600; font-size:15px; text-decoration:none;
  overflow-wrap:anywhere;
  transition:background .18s ease, color .18s ease;
}
.contact-card__btn:hover{ background:var(--cobalt); color:var(--cream); }
.contact-card__btn:focus-visible{ outline-color:var(--paleblue); }

.faq-group + .faq-group{ margin-top:40px; }
.faq-group h2{ font-size:clamp(22px, 2.6vw, 28px); margin-bottom:8px; }
.faq{
  border-bottom:1.5px solid var(--line);
}
.faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0;
  font-weight:500; font-size:17px; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper);
  font-size:18px; line-height:1;
  transition:transform .18s ease, background .18s ease;
}
.faq summary:hover::after{ background:var(--paleblue); }
.faq[open] summary::after{ transform:rotate(45deg); }
.faq summary:focus-visible{ outline:2.5px solid var(--cobalt); outline-offset:4px; border-radius:6px; }
.faq__body{ padding:0 44px 20px 0; }
.faq__body p{ font-size:16px; line-height:1.7; color:#33312F; }
.faq__body p + p{ margin-top:10px; }
.faq__body a{ color:var(--cobalt); text-underline-offset:3px; }

/* Document-page footer spacing, and stack on phones. */
.footer--doc{ padding-bottom:56px; margin-top:72px; }

@media (max-width:640px){
  .footer__socials{ margin-left:0; flex-wrap:wrap; }
  .contact-card{ padding:22px; }
  .faq__body{ padding-right:0; }
}

.nav__links{ display:flex; align-items:center; gap:18px; }
.nav__text{ font-size:14px; text-decoration:none; color:var(--ink); }
.nav__text:hover{ color:var(--cobalt); }
@media (max-width:480px){
  .nav__text{ display:none; }
}