/* ---------- Tokens (shared with the homepage) ----------
   Dark (brand purple) is the default scope; .tone-light redefines the same
   tokens for the white reading column. */
:root{
  --ground:#1C0D2D; --ground-deep:#140822; --surface:#241338; --surface-2:#2E1A45; --tile:#FFFFFF;
  --ink:#F2ECFA; --ink-2:#C9BBDF; --ink-3:#9785B2;
  --line:rgba(176,146,230,.16); --line-2:rgba(176,146,230,.32);
  --brand:#341A6D; --brand-hover:#43248A; --brand-edge:rgba(176,146,230,.34); --on-brand:#FFFFFF;
  --violet:#A98CF5; --violet-soft:rgba(169,140,245,.14);
  --amber:#F2A24A;
  --eyebrow:#C9BBDF;
  --grat:rgba(176,146,230,.085);
  --shadow:0 34px 80px -34px rgba(4,0,12,.85);
  --display:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px; --gutter:clamp(20px,4vw,40px);
  color-scheme:dark;
}
.tone-light{
  --ground:#FFFFFF; --ground-deep:#F5F2FA; --surface:#F5F2FA; --surface-2:#ECE6F6; --tile:#F5F2FA;
  --ink:#1F1330; --ink-2:#4A3D63; --ink-3:#6F6285;
  --line:rgba(52,26,109,.12); --line-2:rgba(52,26,109,.24);
  --brand-edge:#341A6D;
  --violet:#5E3CC8; --violet-soft:rgba(94,60,200,.08);
  --amber:#B9620E;
  --eyebrow:#A8560A;
  --grat:rgba(52,26,109,.06);
  --shadow:0 28px 60px -30px rgba(28,13,45,.38);
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;text-wrap:balance;letter-spacing:-.02em;line-height:1.08}
strong{font-weight:600}
p,li{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-family:var(--font);font-size:.92rem;font-weight:500;line-height:1.35;color:var(--ink-3)}
.label.label-accent{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;padding:13px 20px;font:600 .95rem/1.2 var(--display);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand-edge)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-outline{border-color:var(--line-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink-2)}
.btn-sm{padding:9px 14px;font-size:.9rem}

.section{position:relative;background:var(--ground);color:var(--ink);padding-block:clamp(72px,10vw,128px)}

/* Tilted graticule: rows spaced wider than columns, like latitude and longitude */
.graticule{position:absolute;inset:-35% -25%;pointer-events:none;transform:rotate(-7deg);
  background-image:linear-gradient(to bottom,var(--grat) 1px,transparent 1px),linear-gradient(to right,var(--grat) 1px,transparent 1px);
  background-size:100% 104px,64px 100%;
  -webkit-mask-image:radial-gradient(ellipse 48% 42% at 42% 46%,#000 25%,transparent 78%);
          mask-image:radial-gradient(ellipse 48% 42% at 42% 46%,#000 25%,transparent 78%)}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--ground);border-bottom:1px solid transparent;transition:border-color .3s}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:inline-flex;color:var(--ink);width:104px;flex:none}
.logo svg{width:100%;height:auto;display:block}
.nav{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav-links{display:flex;align-items:center;gap:30px;margin-right:18px}
.nav-links a{text-decoration:none;color:var(--ink-2);font-size:.96rem;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.iconbtn{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.iconbtn:hover{color:var(--ink);border-color:var(--line-2)}
.iconbtn svg{width:18px;height:18px}
.menubtn{display:none}
/* The two bars cross into an X while the menu is open. Driven entirely by
   aria-expanded, so the markup stays honest and no JS touches the icon. */
.menubtn svg line{transform-box:view-box;transform-origin:12px 12px;transition:transform .22s ease}
.menubtn[aria-expanded="true"] .mi-top{transform:rotate(45deg) translateY(4px)}
.menubtn[aria-expanded="true"] .mi-bot{transform:rotate(-45deg) translateY(-4px)}

/* ---------- Masthead ---------- */
.legal-head{position:relative;overflow:hidden;background:var(--ground);padding-block:clamp(48px,7vw,84px) clamp(44px,6vw,72px)}
.legal-head .wrap{position:relative;z-index:2}
.legal-head h1{font-size:clamp(2.4rem,4.6vw,3.7rem);line-height:1.02;letter-spacing:-.032em;margin-top:14px}
.legal-org{margin-top:16px;color:var(--ink-2);font-size:clamp(1.02rem,1.3vw,1.14rem);max-width:46em}
.legal-dates{list-style:none;margin:clamp(28px,4vw,40px) 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 44px}
.legal-dates div{display:grid;gap:3px}
.legal-dates dt{font:600 .78rem/1.35 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.legal-dates dd{margin:0;font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--ink)}

/* ---------- Language toggle ---------- */
.lang-pane[hidden]{display:none}
.langtoggle{margin-top:clamp(26px,3.5vw,34px);display:inline-flex;gap:4px;padding:4px;border-radius:100px;border:1px solid var(--line);background:var(--surface)}
.langtoggle button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:600 .88rem/1 var(--font);padding:9px 17px;border-radius:100px;cursor:pointer;transition:background-color .2s,color .2s}
.langtoggle button:hover{color:var(--ink)}
.langtoggle button[aria-pressed="true"]{background:var(--brand);color:#FFFFFF}

/* Japanese text sets its own rhythm: no balanced wrapping, looser leading,
   and no negative tracking, which hurts kana and kanji. */
[lang="ja"] h1,[lang="ja"] h2,[lang="ja"] h3,[lang="ja"] h4{letter-spacing:0;line-height:1.38;text-wrap:auto}
[lang="ja"] .legal-org,[lang="ja"] p,[lang="ja"] li,[lang="ja"] dd{text-wrap:auto;line-height:1.85}
[lang="ja"] .legal-content h2{line-height:1.4}
/* The Japanese contents list runs much taller than the English one, because
   entries wrap to two lines. Left alone it outgrows the sticky column and
   clips its last entries, so it gets a wider column and tighter metrics.
   Guarded above the breakpoint: this selector outranks the stacked-layout
   rule below and would otherwise force a sidebar onto phones. */
@media (min-width:981px){
  [lang="ja"] .legal-layout{grid-template-columns:minmax(0,258px) minmax(0,1fr)}
}
[lang="ja"] .toc a{font-size:.82rem;line-height:1.45;padding:4px 10px}
[lang="ja"] .toc ol{gap:1px}
.toc{padding-right:6px}

/* Latin tracking applied to kana and kanji reads as broken spacing. */
[lang="ja"] .toc > p,[lang="ja"] .callout-lead,[lang="ja"] .legal-dates dt,[lang="ja"] .label.label-accent{letter-spacing:.04em}
.mt-note{margin-top:12px;font-size:.88rem;color:var(--ink-3);line-height:1.7}

/* ---------- Reading layout ---------- */
.legal-body{padding-block:clamp(56px,7vw,88px)}
.legal-layout{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);gap:clamp(32px,6vw,84px);align-items:start}

.toc{position:sticky;top:92px;display:grid;gap:12px;max-height:calc(100vh - 124px);overflow-y:auto;overscroll-behavior:contain}
.toc > p{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:5px 10px;margin-left:-10px;border-radius:6px;text-decoration:none;color:var(--ink-3);font-size:.875rem;line-height:1.4;transition:color .2s,background-color .2s}
.toc a:hover{color:var(--ink);background:var(--surface)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:600;background:var(--surface)}

.legal-content{max-width:72ch;min-width:0}
.legal-content > section + section{margin-top:clamp(44px,5.5vw,68px)}
.legal-content h2{font-size:clamp(1.42rem,2.3vw,1.8rem);scroll-margin-top:96px}
.legal-content h3{font-size:1.1rem;margin-top:30px;letter-spacing:-.012em;line-height:1.35}
.legal-content p{margin-top:15px;color:var(--ink-2)}
.legal-content h2 + p,.legal-content h3 + p{margin-top:13px}
.legal-content strong{color:var(--ink);font-weight:600}
.legal-content a{color:var(--eyebrow);text-underline-offset:3px}
.legal-content a:hover{color:var(--ink)}
.legal-content ul,.legal-content ol{margin:15px 0 0;padding-left:23px;display:grid;gap:9px;color:var(--ink-2)}
.legal-content li{padding-left:3px}
.legal-content li::marker{color:var(--ink-3)}

/* Label + description pairs, used heavily in both documents */
.deflist{margin-top:18px;display:grid;gap:15px}
.deflist > div{display:grid;gap:3px}
.deflist dt{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.35}
.deflist dd{margin:0;color:var(--ink-2)}
.deflist.compact{gap:11px}
.deflist.compact dt{font-size:.96rem}

/* Emphasis blocks */
.callout{margin-top:22px;padding:clamp(20px,3vw,26px);border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.callout > :first-child{margin-top:0}
.callout-alert{border-left:3px solid var(--amber)}
.callout-alert .callout-lead{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.callout-alert .callout-lead + p{margin-top:10px}

.contact-card{margin-top:20px;padding:clamp(20px,3vw,26px);border-radius:14px;background:var(--surface)}
.contact-card .org{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.contact-card .deflist{margin-top:16px}

/* Version history (Terms) */
.vh-scroll{overflow-x:auto;margin-top:18px}
.vh{width:100%;min-width:520px;border-collapse:separate;border-spacing:0}
.vh th,.vh td{text-align:left;padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.vh thead th{font:600 .95rem/1.3 var(--display);color:var(--ink);border-bottom-color:var(--line-2)}
.vh th:first-child,.vh td:first-child{padding-left:0;width:74px}
.vh tbody th{font-family:var(--display);font-weight:600;color:var(--ink);font-size:1rem}
.vh tbody tr:last-child th,.vh tbody tr:last-child td{border-bottom:0}

/* Back-to-top */
.legal-foot{margin-top:clamp(48px,6vw,72px);padding-top:26px;border-top:1px solid var(--line)}
.textlink{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:600;font-size:.95rem}
.textlink svg{width:16px;height:16px;transition:transform .2s}
.textlink:hover svg{transform:translateY(-2px)}

/* ---------- Press index ---------- */
.press-year{margin-top:clamp(46px,6vw,70px);margin-bottom:16px;font-family:var(--font);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.press-year:first-of-type{margin-top:0}
.press-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.press-list li{border-bottom:1px solid var(--line)}
.press-list a{display:grid;grid-template-columns:minmax(0,206px) minmax(0,1fr) 20px;gap:10px 36px;align-items:start;padding:26px 4px;text-decoration:none}
.press-meta{display:grid;gap:4px;align-content:start}
.press-list time{font:500 .88rem/1.45 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
.press-outlet{font:500 .92rem/1.45 var(--font);color:var(--ink-2)}
.press-body{display:grid;gap:9px;min-width:0}
.press-title{font-family:var(--display);font-size:clamp(1.05rem,1.5vw,1.2rem);font-weight:600;line-height:1.36;letter-spacing:-.012em;text-wrap:pretty}
.press-excerpt{font-size:.95rem;line-height:1.62;color:var(--ink-2);max-width:64ch;text-wrap:pretty}
.press-list a:hover .press-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.press-list svg{width:18px;height:18px;color:var(--ink-3);align-self:center;flex:none}
.press-list a:hover svg{color:var(--ink)}

/* ---------- 404 ---------- */
.nf{position:relative;overflow:hidden;background:var(--ground);display:grid;align-items:center;min-height:clamp(500px,74vh,780px);padding-block:clamp(64px,9vw,110px)}
.nf .wrap{position:relative;z-index:2}
.nf-inner{display:grid;gap:20px;max-width:640px}
.nf h1{font-size:clamp(2.3rem,4.8vw,3.6rem);line-height:1.04;letter-spacing:-.032em}
.nf p{color:var(--ink-2);font-size:clamp(1.02rem,1.3vw,1.16rem);max-width:44em}
.nf .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.nf-suggest{margin-top:clamp(30px,4vw,44px);padding-top:22px;border-top:1px solid var(--line);display:grid;gap:12px}
.nf-suggest ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 30px}
.nf-suggest a{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink-2);text-decoration:none;transition:color .2s}
.nf-suggest a:hover{color:var(--ink)}

/* ---------- Footer ---------- */
.footer{background:var(--ground-deep);color:var(--ink);border-top:1px solid var(--line);padding-block:48px 28px}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.social{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.social p{color:var(--ink-2);font-size:.95rem;margin-right:6px}
.social a{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-2);transition:color .2s,border-color .2s}
.social a:hover{color:var(--ink);border-color:var(--line-2)}
.social svg{width:17px;height:17px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:22px;font-size:.88rem;color:var(--ink-3)}
.footer-bottom nav{display:flex;gap:22px}
.footer-bottom a{color:var(--ink-2);text-decoration:none}
.footer-bottom a:hover{color:var(--ink)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .toc{position:static;max-height:none;padding:20px;border-radius:14px;background:var(--surface)}
  .toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .legal-content{max-width:none}
}
@media (max-width:900px){
  .nav-links{position:absolute;top:68px;left:0;right:0;margin:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 18px;background:var(--ground);border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .menubtn{display:grid}
}
@media (max-width:760px){
  .press-list a{grid-template-columns:minmax(0,1fr) 20px;gap:8px 16px}
  .press-meta{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;gap:4px 10px}
  .press-meta time::after{content:"·";margin-left:10px;color:var(--ink-3)}
  .press-body{grid-column:1;grid-row:2}
  .press-list svg{grid-column:2;grid-row:1/span 2;align-self:start;margin-top:3px}
}
@media (max-width:560px){
  .btn-partner{display:none}
  .toc ol{grid-template-columns:minmax(0,1fr)}
  .legal-dates{gap:14px 28px}
}