/* Long-form pages (support, privacy). Loaded after site.css.
   Legal and help text needs a narrower measure and a plainer rhythm than the
   landing page, so the scale differs -- the palette and fonts do not. */

:root{--wrap:720px; --gutter:clamp(20px,5vw,36px)}
body{font-size:16.5px; line-height:1.72}
a{color:var(--violet)}

h1,h2{font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.15}
h1{font-size:clamp(2.1rem,5vw,3rem); margin:.2em 0 .3em}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem); margin:2.6em 0 .5em}
h3{font-family:var(--sans); font-size:1.02rem; font-weight:600;
  letter-spacing:-.01em; margin:2em 0 .4em}
h4{font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin:1.8em 0 .5em}
p,li{color:var(--ink-2)}
p{margin:0 0 1.15em}
ul,ol{padding-left:1.25em}
li{margin-bottom:.45em}
hr{border:0; border-top:1px solid var(--line); margin:3em 0}

/* A visible way back, because these pages are usually arrived at from an app
   store listing or a deep link rather than from the landing page. */
.crumb{
  display:inline-flex; align-items:center; gap:7px; margin-top:clamp(30px,5vw,48px);
  font-size:14px; color:var(--muted); text-decoration:none; transition:color .2s;
}
.crumb:hover{color:var(--violet)}
.crumb span{font-size:16px; line-height:1}
.pagelede{font-size:1.1rem; color:var(--muted); margin-bottom:2em}

blockquote{
  margin:1.8em 0; padding:16px 20px; background:var(--card);
  border-left:3px solid var(--violet); border-radius:0 12px 12px 0;
  color:var(--muted); box-shadow:var(--shadow);
}
blockquote p:last-child{margin:0}
code{background:var(--violet-soft); padding:2px 6px; border-radius:5px;
  font-size:.88em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tablewrap{overflow-x:auto; margin:1.6em 0; border:1px solid var(--line);
  border-radius:12px}
table{border-collapse:collapse; width:100%; font-size:14.4px; background:var(--card)}
th,td{border-bottom:1px solid var(--line); padding:11px 14px; text-align:left;
  vertical-align:top; color:var(--ink-2)}
th{background:var(--bg-2); font-weight:600; color:var(--ink);
  font-size:13px; letter-spacing:.01em}
tr:last-child td{border-bottom:0}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 26px; margin:1.8em 0; box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card p:last-child{margin:0}

/* ── page header ─────────────────────────────────────── */
/* These pages used to open with a bare <h1> on a white field, which read as a
   document someone had uploaded rather than a page of the site. The header
   borrows the landing page's eyebrow / serif / lede rhythm so the two feel
   like one product. */
.pagehead{
  position:relative; padding:clamp(28px,5vw,44px) 0 clamp(28px,4vw,40px);
  margin-bottom:clamp(28px,4vw,44px); border-bottom:1px solid var(--line);
}
.pagehead::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:200%; z-index:-1;
  background:radial-gradient(40% 50% at 20% 30%,
    color-mix(in srgb,var(--violet) 11%,transparent) 0%, transparent 72%);
  filter:blur(16px); pointer-events:none;
}
.pagehead .eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet); margin:0 0 .9em;
}
.pagehead h1{margin:0 0 .35em}
.pagehead .lede{font-size:1.08rem; color:var(--muted); margin:0; max-width:46ch}
.pagehead .stamp{
  margin:1.4em 0 0; font-size:13px; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:8px 20px;
}

/* prose links: underline that clears the descenders */
main a{text-underline-offset:3px; text-decoration-thickness:1px}
main a:hover{text-decoration-thickness:2px}

/* ── table of contents ───────────────────────────────── */
/* Seventeen numbered sections with no index is a wall. On a wide screen this
   rides alongside the text; on a narrow one it collapses to a summary. */
.toc{
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:20px 22px; margin:0 0 2.4em;
}
.toc summary{
  cursor:pointer; font-weight:600; font-size:14.5px; color:var(--ink);
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+"; font-size:19px; font-weight:400; color:var(--muted)}
.toc[open] summary::after{content:"\2212"}
.toc ol{margin:1.1em 0 0; padding:0; list-style:none; counter-reset:toc}
.toc li{margin:0; counter-increment:toc}
.toc a{
  display:block; padding:7px 0; font-size:14.4px; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid transparent;
}
.toc a:hover{color:var(--violet)}
@media(min-width:1180px){
  /* Wide enough to sit in the margin without crowding the measure. */
  .toc{
    position:fixed; top:110px; left:max(20px, calc(50% - 620px));
    width:238px; margin:0; max-height:calc(100vh - 160px); overflow-y:auto;
    scrollbar-width:thin;
  }
  .toc summary{pointer-events:none}
  .toc summary::after{display:none}
  .toc[open] ol, .toc ol{display:block}
}