/* ============================================================
   yap · document pages (privacy, terms, support, deletion)
   Same token set as the landing page. Lower volume:
   the aura is dimmed, there is no hot mode, and the measure
   is a single readable column.
   Tokens sourced from Figma kxV2gSYMn0vSCaDs4Vdtvn
   ============================================================ */

:root{
  --base:#0b0a09;
  --paper:#f7f5ef;
  --paper-82:rgba(247,245,239,.82);
  --paper-55:rgba(247,245,239,.55);
  --ink:#111111;

  --clay:#d85a30;
  --tangerine:#ff8a2b;
  --magenta:#ff2f6e;
  --acid:#e8ff45;

  --panel:rgba(0,0,0,.24);
  --panel-lift:rgba(255,255,255,.06);
  --edge:rgba(255,255,255,.42);
  --hairline:rgba(255,255,255,.10);
  --scrim:rgba(5,5,4,.72);
  --blur:32px;

  --r-glass:28px;
  --r-card:20px;
  --r-pill:999px;
  --gutter:clamp(20px,5vw,56px);

  --rounded:ui-rounded,-apple-system-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;
  --deva:"Baloo 2",var(--rounded);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--base);color:var(--paper-82);
  font-family:var(--rounded);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:var(--paper);text-decoration:underline;text-decoration-color:rgba(247,245,239,.35);text-underline-offset:3px}
a:hover{text-decoration-color:var(--acid)}
:focus-visible{outline:2.5px solid var(--acid);outline-offset:3px;border-radius:4px}

/* ---- atmosphere: same colour field, held back ---- */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(130px)}
.blob--clay{background:var(--clay);width:58vw;height:58vw;left:-20vw;top:-26vw;opacity:.34}
.blob--magenta{background:var(--magenta);width:40vw;height:40vw;right:-14vw;top:10vh;opacity:.20}
.blob--tangerine{background:var(--tangerine);width:46vw;height:46vw;left:4vw;top:72vh;opacity:.16}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--scrim)}
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page{position:relative;z-index:3}

/* ---- chrome ---- */
.wordmark{
  display:inline-flex;align-items:center;line-height:0;
  text-decoration:none;color:var(--paper);
}
.wordmark svg,.wordmark img{display:block;width:auto;height:26px}
.nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;
  padding:14px var(--gutter);
  background:rgba(11,10,9,.66);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hairline);
}
.nav .wordmark svg,.nav .wordmark img{height:26px}
.nav-back{
  margin-left:auto;font-size:14px;font-weight:800;color:var(--paper-55);
  text-decoration:none;
}
.nav-back:hover{color:var(--paper)}

.shell{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
.doc{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(28px,5vw,64px);padding-bottom:120px}

/* ---- masthead ---- */
.masthead{padding:clamp(48px,7vw,86px) 0 clamp(30px,4vw,44px)}
.kicker{
  margin:0 0 18px;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-55);
}
.masthead h1{
  margin:0;font-size:clamp(2.5rem,7vw,4.6rem);font-weight:1000;
  letter-spacing:-.05em;line-height:.92;text-transform:lowercase;color:var(--paper);
}
.stamp{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;
}
.stamp span{
  padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--hairline);background:var(--panel);
  font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--paper-55);
}

/* ---- the short version ---- */
.tldr{
  padding:26px 28px;margin:0 0 clamp(36px,5vw,54px);border-radius:var(--r-glass);
  background:var(--panel);border:1px solid var(--hairline);border-top-color:var(--edge);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
}
.tldr h2{
  margin:0 0 14px;font-size:15px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acid);
}
.tldr ul{margin:0;padding-left:20px;display:grid;gap:9px}
.tldr li{color:var(--paper)}
.tldr p{margin:14px 0 0;font-size:14px;color:var(--paper-55)}

/* ---- table of contents ---- */
.toc{align-self:start;position:sticky;top:96px;font-size:14px}
.toc p{
  margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-55);
}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:toc}
.toc a{
  display:block;padding:5px 0 5px 26px;position:relative;
  text-decoration:none;color:var(--paper-55);line-height:1.35;
}
.toc a::before{
  counter-increment:toc;content:counter(toc);
  position:absolute;left:0;top:5px;font-size:11px;font-weight:800;color:rgba(247,245,239,.3);
}
.toc a:hover{color:var(--paper)}

/* ---- body ---- */
.body{max-width:70ch}
.body section{padding-top:clamp(34px,4vw,48px);counter-increment:sec}
.body section:first-of-type{padding-top:0}
.body h2{
  margin:0 0 16px;font-size:clamp(1.35rem,2.8vw,1.85rem);font-weight:1000;
  letter-spacing:-.035em;line-height:1.12;text-transform:lowercase;color:var(--paper);
  scroll-margin-top:96px;
}
.body h2::before{
  content:counter(sec) " ";
  color:var(--clay);font-size:.72em;letter-spacing:0;
}
.body{counter-reset:sec}
.body h3{
  margin:28px 0 10px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--paper);
}
.body p{margin:0 0 15px}
.body ul,.body ol{margin:0 0 15px;padding-left:22px;display:grid;gap:8px}
.body li{padding-left:2px}
.body strong{color:var(--paper);font-weight:800}
.body hr{border:0;border-top:1px solid var(--hairline);margin:38px 0}
.deva{font-family:var(--deva);font-weight:500}

/* callouts */
.note{
  padding:18px 20px;margin:0 0 18px;border-radius:var(--r-card);
  background:var(--panel-lift);border:1px solid var(--hairline);
  border-left:3px solid var(--acid);font-size:15.5px;
}
.note--warn{border-left-color:var(--tangerine)}
.note--stop{border-left-color:var(--magenta)}
.note p:last-child{margin-bottom:0}
.note b{color:var(--paper)}

/* placeholder marker — deliberately loud.
   App Review 2.1(a): placeholder text and empty websites must be
   scrubbed before submission. Nothing unresolved should ship quietly. */
mark.todo{
  background:rgba(255,138,43,.22);color:var(--tangerine);
  padding:1px 6px;border-radius:5px;border:1px dashed rgba(255,138,43,.55);
  font-weight:800;font-size:.94em;
}

/* data table */
.tbl{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.tbl caption{
  text-align:left;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-55);padding-bottom:10px;
}
.tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--hairline);vertical-align:top}
.tbl th{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-55);border-bottom-color:var(--edge);
}
.tbl td:first-child{color:var(--paper);font-weight:700;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* support cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:0 0 22px}
.card{
  padding:20px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--hairline);
}
.card h3{margin:0 0 7px}
.card p{margin:0;font-size:14.5px;color:var(--paper-55)}
.card a{font-weight:800}

/* faq disclosure */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  padding:16px 0;cursor:pointer;font-weight:800;color:var(--paper);
  list-style:none;display:flex;gap:12px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--clay);font-weight:1000;flex:0 0 auto}
.faq details[open] summary::before{content:"–"}
.faq .ans{padding:0 0 18px 24px}
.faq .ans p:last-child{margin-bottom:0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 26px;
  border-radius:var(--r-pill);background:var(--clay);color:var(--paper);
  font-size:16px;font-weight:1000;letter-spacing:-.015em;text-decoration:none;
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:none;border:1px solid var(--edge);color:var(--paper)}

/* footer */
.foot{
  border-top:1px solid var(--hairline);padding:32px 0 64px;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  font-size:13px;color:var(--paper-55);
}
.foot nav{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto}
.foot a{text-decoration:none}
.foot a:hover{color:var(--paper)}

@media (max-width:860px){
  .doc{grid-template-columns:1fr;gap:34px}
  .toc{position:static;top:auto;padding:20px;border-radius:var(--r-card);
       background:var(--panel);border:1px solid var(--hairline)}
  .toc ol{grid-template-columns:1fr 1fr;gap:2px 16px}
}
@media (max-width:560px){
  .toc ol{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}
@media print{
  .aura,.scrim,.grain,.nav,.toc{display:none}
  body{background:#fff;color:#111;font-size:11pt}
  .body h2,.body strong,.tldr li{color:#111}
  a{color:#111}
}