/* Shared by privacy.html + terms.html. Same brand layer as about / insights / letter:
   Fraunces SemiBold display, Inter text, Mist canvas, white r16 cards with soft
   periwinkle shadows, violet→pink pill actions, pink handwriting accents.
   Loaded after base.css (which uses these tokens), so the :root block lives here. */

:root{
  --mist:#f2f3f9; --ink:#21110c; --ink-2:#676767; --ink-soft:#676767;
  --pink:#ff5ea8; --pink-ink:#c2246d; --pink-deep:#B2166F;
  --violet:#673dd9; --purple:#673dd9; --purple-deep:#512a81;
  --peri-50:#e5eaf4; --peri-100:#cfd8ec; --peri-300:#a0aee9; --blush:#fef7f9; --white:#fff;
  --plum:#2a0a4a; --pink-100:#ffb8d8;
  --grad-action:linear-gradient(90deg,var(--violet) 0%,var(--pink) 100%);
  --shadow-card:0 8px 32px rgba(166,181,214,.25);
  --shadow-action:0 0 8px rgba(33,17,12,.15);
  --r-card:16px; --r-pill:72px; --gap:24px;
  --line:rgba(33,17,12,.12);
  --serif:"Fraunces Variable",Georgia,"Times New Roman","Noto Serif",serif;
  --hand:"Caveat Variable","Segoe Print","Bradley Hand",cursive;
  --num:"Manrope Variable",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter Variable",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --wrap:1240px; --gutter:clamp(16px,4vw,40px);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
img,svg{max-width:100%}
img{height:auto}
h1,h2,h3,p{margin:0}
/* Brand gutter + max-width, overriding base.css's narrower .wrap so these pages
   line up with the rest of the site. */
.wrap{width:auto;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter)}
.kicker,.tag{font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.hand{font:italic 500 clamp(20px,2vw,26px)/1.15 var(--serif);color:var(--pink-ink);font-variation-settings:"opsz" 72,"WONK" 1}

/* ---------- Header ---------- */
header{padding:20px 0 0;position:relative;z-index:3}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{display:inline-flex;color:var(--pink);text-decoration:none}
.wordmark svg{height:34px;width:auto;display:block}
nav{display:flex;align-items:center;gap:6px}
nav a{white-space:nowrap;font:500 15px/1 var(--sans);text-decoration:none;color:var(--ink);padding:12px 14px;border-radius:var(--r-pill)}
nav a:hover,nav a[aria-current="page"]{background:var(--white)}
@media (max-width:600px){header .wrap{gap:14px}.wordmark svg{height:30px}nav{gap:2px}nav a{padding:8px 8px;font-size:13px}}
/* Page kicker ("Privacy policy" / "Terms") sits under the logo, as part of the header. */
.page-kicker{margin:6px auto 14px}
.page-kicker .tag{color:var(--pink-ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding:0 12px 0 28px;border-radius:var(--r-pill);
  background:var(--grad-action);color:var(--white);font:600 16px/1 var(--sans);text-decoration:none;box-shadow:var(--shadow-action);transition:transform .15s,box-shadow .15s}
.btn > span{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);font:400 17px/1 var(--sans)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(103,61,217,.3)}

/* ---------- Hero (mist canvas, dark ink — like the about page) ---------- */
.about{padding:0 0 var(--gap)}
.about .shell{position:relative;container-type:inline-size}
/* The kicker lives in the header; pull the hero up by its height (11px) and restore
   the old pills leading (11 + 28px) as top padding so the title sits where it did. */
.about .top{position:relative;z-index:1;margin-top:-11px;padding:39px 0 24px}
.about .earth{position:absolute;right:0;top:-12px;height:clamp(180px,30vw,320px);width:auto;aspect-ratio:2465/2204;pointer-events:none;z-index:-1}
.about .earth::before{content:"";position:absolute;inset:8%;border-radius:50%;background:var(--peri-300);opacity:.55;filter:blur(48px)}
.about .earth img{position:relative;width:100%;height:100%;display:block;object-fit:contain;object-position:top;transform-origin:60% 45%;animation:ken-burns 18s ease-in-out infinite alternate;will-change:transform}
.about h1{font:600 clamp(28px,6vw + 8px,80px)/1.1 var(--serif);letter-spacing:-.005em;max-width:14ch;text-wrap:balance;font-variation-settings:"opsz" 144}
.about h1::after{content:"";display:block;width:min(280px,62%);aspect-ratio:13/1;margin-top:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 20'%3E%3Cpath d='M3 13c40-9 82-12 124-8s86 6 130-3' fill='none' stroke='%23ff5ea8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center/contain}
.about .note{position:absolute;right:0;z-index:1;margin:0;transform:translateY(-135%) rotate(-6deg);text-align:right;font-size:clamp(20px,2.2vw,28px)}
.about .lede{margin-top:28px;font:400 clamp(17px,1.6vw,20px)/1.4 var(--sans);color:var(--ink);max-width:40rem}
@media (min-width:861px){.about .top{min-height:clamp(180px,30vw,320px)}}

/* ---------- White policy panel ---------- */
.about .board{position:relative;z-index:1;max-width:880px;background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.policy{padding:clamp(28px,5vw,56px)}
.policy h2{display:flex;align-items:center;gap:12px;margin:40px 0 12px;font:600 22px/28px var(--serif);font-variation-settings:"opsz" 36}
.policy h2:first-child{margin-top:0}
.policy h2 i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--blush);color:var(--pink-ink)}
.policy h2 svg{width:18px;height:18px}
.policy p,.policy li{font:400 16px/25px var(--sans);margin:0 0 14px}
.policy > :last-child{margin-bottom:0}
.policy ul{margin:0 0 14px;padding-left:1.3em}
.policy li{margin-bottom:8px}
.policy li::marker{color:var(--pink)}
.policy strong{font-weight:700}
.policy a{color:var(--pink-ink);font-weight:600;text-underline-offset:3px}
/* legal text that must be conspicuous: English and the other Latin-script pages set it in
   capitals; Japanese has no capitals, so it is set in bold instead */
.policy p.conspicuous:lang(ja){font-weight:700}
.policy .updated{margin:36px 0 0;padding-top:20px;border-top:1px solid var(--peri-50);font:400 13px/19px var(--sans);color:var(--ink-2)}
/* table of contents: closed by default, opened by tapping "see table of contents" */
.policy .toc{margin:0 0 32px;padding-bottom:16px;border-bottom:1px solid var(--peri-50)}
.policy .toc summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:6px 0;font:600 15px/22px var(--sans);color:var(--pink-ink)}
.policy .toc summary::-webkit-details-marker{display:none}
.policy .toc summary::after{content:"\203A";font-size:22px;line-height:1;transition:transform .2s}
.policy .toc[open] summary::after{transform:rotate(90deg)}
.policy .toc summary:focus-visible{outline:2px solid var(--pink-ink);outline-offset:4px;border-radius:4px}
.policy .toc ol{margin:12px 0 0;padding-left:1.6em;columns:2 15rem;column-gap:2.5rem}
.policy .toc li{margin:0 0 6px;break-inside:avoid;font:400 15px/22px var(--sans)}
.policy .toc li::marker{color:var(--pink)}
.policy .toc a{font-weight:500}
.policy .toc + h2{margin-top:0}
.policy h2[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){.policy .toc summary::after{transition:none}}

/* ---------- Petition band (helpOrkutBand, dark plum) ---------- */
/* Sits at the foot of the page here, so the bottom padding sets the gap to "back to top"
   (same as about/insights). */
.helpOrkutBand{padding:0 0 18px}
.helpOrkutBand .banner{position:relative;overflow:hidden;color:var(--white);border-radius:var(--r-card);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:32px;padding:clamp(32px,5vw,72px);
  background:
    linear-gradient(90deg,rgba(26,8,48,.92) 0%,rgba(26,8,48,.7) 45%,rgba(26,8,48,.1) 100%),
    url(/assets/images/plum-globe.webp) center 60%/cover no-repeat,
    var(--plum);
  box-shadow:0 20px 60px rgba(103,61,217,.25)}
.helpOrkutBand .earth{display:none}
.helpOrkutBand .lead,.helpOrkutBand .side{position:relative;z-index:1;min-width:0}
.helpOrkutBand .badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);font:500 13px/1 var(--sans);margin:0 0 24px}
.helpOrkutBand .badge .beat{flex:none;width:22px;height:22px;fill:var(--pink);filter:drop-shadow(0 0 6px rgba(255,94,168,.55));
  transform-origin:50% 55%;animation:heartbeat 1.1s ease-in-out infinite}
@keyframes heartbeat{0%,40%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1.02)}32%{transform:scale(1.14)}}
.helpOrkutBand h2{font:600 clamp(34px,3.6vw,48px)/1.08 var(--serif);letter-spacing:-.005em;margin-bottom:14px;max-width:20ch;text-wrap:balance;font-variation-settings:"opsz" 144}
.helpOrkutBand .sub{font:400 17px/25px var(--sans);color:rgba(255,255,255,.82);max-width:36rem}
.helpOrkutBand .side{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.helpOrkutBand .facts{display:flex;flex-direction:column;gap:14px}
.helpOrkutBand .stat{display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.12)}
.helpOrkutBand .stat svg{width:22px;height:22px;flex:none;color:var(--pink-100)}
.helpOrkutBand .stat b{display:block;font:800 24px/1.05 var(--num);letter-spacing:.01em}
.helpOrkutBand .stat small{display:block;margin-top:4px;font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.helpOrkutBand .note{display:flex;align-items:center;gap:8px;font:italic 500 18px/1.25 var(--serif);color:var(--pink-100);max-width:16rem;font-variation-settings:"opsz" 72,"WONK" 1}
.helpOrkutBand .note svg{width:20px;height:20px;flex:none}
@media (max-width:860px){.helpOrkutBand .banner{grid-template-columns:minmax(0,1fr)}}

/* ---------- Back to top ---------- */
.site-foot{padding:4px 0 40px}
.site-foot .backlink{margin:0;text-align:left;font:600 14px/1 var(--sans)}
.site-foot .backlink a{color:var(--pink-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:15px 12px;margin:-15px -12px}
.site-foot .backlink a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Smaller screens ---------- */
/* The pinned note + earth stay at every width (they scale via their own clamps),
   exactly like the about/insights heroes. */
@keyframes ken-burns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.24) translate(-6%,-4%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}