/* Long-form pages (privacy, terms, support). Sits beside /site/bread.css and reuses its tokens. */
:root{
  --gutter:clamp(16px,4.4vw,64px);
  --maxw:1320px;
  --measure:680px;
  --line:rgb(216 216 246 / .22);
}
html{overflow-x:hidden}
body{overflow-x:clip;font-size:17px;line-height:1.65}
::selection{background:#fff;color:var(--blue)}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:#fff;color:var(--blue);padding:8px 14px;border-radius:8px;z-index:200;font-family:var(--f-hand);text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- nav (same look as the home page, static) ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px var(--gutter);max-width:calc(var(--maxw) + 2*var(--gutter));margin:auto}
.nav-mark img{height:28px;width:auto}
.nav nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);font:400 19px var(--f-hand)}
.nav a{text-decoration:none}
.nav-link:hover,.nav-lang a:hover{text-decoration:underline;text-underline-offset:4px}
.nav-lang{color:var(--on-2);white-space:nowrap}
.nav-lang a[aria-current]{color:#fff}
.btn-mini{background:#fff;color:var(--blue);padding:7px 18px 8px;border-radius:999px;line-height:1.2;display:inline-block;rotate:2deg;white-space:nowrap}
.btn-mini:hover{rotate:-2deg}

/* ---------- the page ---------- */
.doc{max-width:calc(var(--measure) + 2*var(--gutter));margin:0 auto;padding:clamp(36px,8vh,88px) var(--gutter) clamp(64px,12vh,120px);overflow-wrap:anywhere}
.doc h1{font:400 clamp(46px,8vw,76px)/1 var(--f-hand);margin:0;letter-spacing:-.01em;rotate:-1.5deg;transform-origin:0 50%;overflow-wrap:normal}
.doc .updated{display:inline-block;margin:18px 0 0;background:#fff;color:var(--blue);font:400 18px/1.2 var(--f-hand);padding:.2em .6em .26em;border-radius:4px;rotate:1.2deg;box-shadow:var(--rest)}
.doc .lede{font:400 clamp(21px,2.4vw,25px)/1.3 var(--f-hand);color:var(--on-2);margin:28px 0 0}
.doc h2{font:400 clamp(28px,3.4vw,34px)/1.15 var(--f-hand);margin:2.2em 0 .45em;letter-spacing:-.005em;scroll-margin-top:24px}
.doc h3{font:400 23px/1.2 var(--f-hand);margin:1.6em 0 .3em}
.doc p,.doc li{color:#fff;max-width:var(--measure)}
.doc p{margin:0 0 1em}
.doc ul,.doc ol{margin:0 0 1.1em;padding-left:1.3em}
.doc li{margin:.35em 0}
.doc li::marker{color:var(--on-2)}
.doc strong{font-weight:650}
.doc a{color:#fff;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.doc a:hover{text-decoration-thickness:3px}
.doc .quiet{color:var(--on-2)}

/* the short version: a paper card, like a note stuck on the page */
.summary{background:var(--paper);color:var(--ink);border-radius:18px;padding:22px clamp(20px,4vw,32px) 12px;margin:34px 0 0;box-shadow:var(--lift);rotate:-.6deg}
.summary h2{font:400 26px/1.1 var(--f-hand);color:var(--blue);margin:0 0 .4em}
.doc .summary li,.doc .summary p{color:var(--ink)}
.doc .summary li::marker{color:var(--blue)}
.doc .summary a{color:var(--blue)}

/* on this page */
.toc{margin:34px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.toc p{font:400 20px/1.2 var(--f-hand);color:var(--on-2);margin:0 0 .4em}
.doc .toc ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.doc .toc li{margin:0}
.doc .toc a{display:inline-block;text-decoration:none;font:400 18px/1.2 var(--f-hand);padding:6px 14px 7px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .4)}
.doc .toc a:hover{background:rgb(255 255 255 / .12)}

/* support: numbered steps and the contact card */
.doc ol.steps{list-style:none;padding:0;counter-reset:s}
.doc ol.steps li{counter-increment:s;position:relative;padding-left:42px;margin:.6em 0}
.doc ol.steps li::before{content:counter(s);position:absolute;left:0;top:-.05em;width:29px;height:29px;display:grid;place-items:center;
  background:#fff;color:var(--blue);border-radius:50%;font:400 19px/1 var(--f-hand)}
.contact{margin:2.4em 0 0;padding:24px clamp(20px,4vw,32px);border-radius:18px;background:var(--blue-deep);box-shadow:inset 0 0 0 1px var(--line)}
.contact h2{margin-top:0}
.doc .mail{display:inline-block;margin-top:4px;background:#fff;color:var(--blue);text-decoration:none;font:400 22px/1.2 var(--f-hand);padding:8px 18px 10px;border-radius:999px;rotate:-1.5deg;box-shadow:var(--rest)}
.doc .mail:hover{rotate:1deg}

/* ---------- footer (same as home) ---------- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:26px var(--gutter) 40px;
  max-width:calc(var(--maxw) + 2*var(--gutter));margin:auto;border-top:1px solid var(--line);font:400 15px var(--f-ui);color:var(--on-2)}
.foot a{text-decoration:none;color:#fff}
.foot a:hover,.foot a[aria-current]{text-decoration:underline;text-underline-offset:3px}

@media (max-width:860px){
  .hide-sm{display:none}
  .nav{padding-top:14px}
  .nav-mark img{height:24px}
  .nav nav{font-size:17px;gap:14px}
  .btn-mini{padding:6px 14px 7px}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){.nav-mark img{height:20px}.nav nav{gap:10px}}