/* Stellar legal pages (privacy policy, terms of service). Built on /_home/rework.css: same tokens, type, nav and footer.
   Long-form reading: one comfortable column, a small table of contents, hairlines between sections.
   Green only as a hint: the underline under one word of the title and the marker of the current section in the side list. */

.kicker{font:500 14px/1.2 var(--font);color:var(--muted);letter-spacing:0}
.gsw{position:relative;display:inline-block;padding-bottom:.1em;white-space:nowrap}
.gsw::after{content:"";position:absolute;inset:auto 0 0;height:.2em;background:var(--green);pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html{scroll-padding-top:96px;scroll-behavior:smooth}

/* page head */
.lh{padding:88px 0 0}
.lh .wrap{max-width:1200px}
.lh h1{margin-top:16px;text-wrap:balance;font:400 clamp(40px,5.4vw,72px)/1.06 var(--font);letter-spacing:-.04em;color:var(--ink)}
.lh .lead{max-width:680px;margin-top:22px;font-size:19px}
.lh-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:40px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 14.5px/1.5 var(--font);color:var(--muted)}
.lh-meta .sep{color:var(--muted)}

/* layout: a small sticky list of sections on the left, the document on the right */
.lg{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;align-items:start;padding-top:56px;padding-bottom:120px}
.rail,:is(nav,aside).legal-nav{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding-right:8px;scrollbar-width:thin}
.rail::-webkit-scrollbar,:is(nav,aside).legal-nav::-webkit-scrollbar{width:4px}
.rail::-webkit-scrollbar-track,:is(nav,aside).legal-nav::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb,:is(nav,aside).legal-nav::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.rail::-webkit-scrollbar-thumb:hover,:is(nav,aside).legal-nav::-webkit-scrollbar-thumb:hover{background:var(--muted)}
/* swarm R34: the side list ran past the screen and its last row was sliced in half at the edge. Fade the bottom 48px and leave room so the final row scrolls clear of the fade. */
.rail,:is(nav,aside).legal-nav{padding-bottom:40px;-webkit-mask-image:linear-gradient(#000 calc(100% - 48px),transparent);mask-image:linear-gradient(#000 calc(100% - 48px),transparent)}
.rail-h{font:500 14px/1.3 var(--font);color:var(--ink);padding-bottom:12px}
:is(.rail,.legal-nav) ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
:is(.rail,.legal-nav) a{display:block;margin-left:-1px;padding:8px 12px 8px 14px;border-left:2px solid transparent;border-radius:0 var(--radius-s,4px) var(--radius-s,4px) 0;font:400 13.5px/1.4 var(--font);color:var(--muted);transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
:is(.rail,.legal-nav) a:hover{color:var(--ink);background:var(--soft)}
:is(.rail,.legal-nav) a:active{transform:translateY(1px)}
:is(.rail,.legal-nav) a:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:var(--radius-0)}
:is(.rail,.legal-nav) a.on{color:var(--ink);border-left-color:var(--green);font-weight:500;background:var(--soft)}

/* details.legal-clause accordions */
details.legal-clause{border-bottom:1px dashed var(--rule-dash);padding:16px 0;transition:padding var(--dur-1) var(--ease)}
details.legal-clause:last-of-type{border-bottom:0}
details.legal-clause summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 8px;font:500 18px/1.35 var(--font);color:var(--ink);cursor:pointer;list-style:none;border-radius:var(--radius-s,6px);transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
details.legal-clause summary::-webkit-details-marker{display:none}
details.legal-clause summary::after{content:"";display:inline-block;width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform var(--dur-2) var(--ease);flex-shrink:0}
details.legal-clause[open] summary::after{transform:rotate(-135deg)}
details.legal-clause summary:hover{color:var(--ink);background:var(--soft)}
details.legal-clause summary:hover::after{border-color:var(--ink)}
details.legal-clause summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
details.legal-clause summary:active{transform:translateY(1px)}
details.legal-clause .clause-body{padding:12px 4px 8px;font:400 16px/1.7 var(--font);color:var(--text);animation:legalClauseOpen var(--dur-2) var(--ease)}
@keyframes legalClauseOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){details.legal-clause summary::after{transition:none}details.legal-clause .clause-body{animation:none}details.legal-clause summary:active{transform:none}}

/* the document */
.doc{min-width:0;max-width:720px;font:400 17px/1.75 var(--font);color:var(--text);overflow-wrap:break-word}
.doc>*{margin:0}
.doc>*+*{margin-top:18px}
.doc h2{margin-top:64px;padding-top:40px;border-top:1px solid var(--line);font:500 26px/1.3 var(--font);letter-spacing:-.022em;color:var(--ink)}
.doc>h2:first-child,.doc>.anc:first-child+h2{margin-top:0;padding-top:0;border-top:0}
.doc h3{margin-top:36px;font:500 19px/1.4 var(--font);letter-spacing:-.012em;color:var(--ink)}
.doc h4{margin-top:28px;font:500 17px/1.45 var(--font);color:var(--ink)}
.doc h2+*,.doc h3+*,.doc h4+*{margin-top:14px}
.doc strong{font-weight:600;color:var(--ink)}
.doc em{font-style:italic}
/* round 7 (content): whole sentences set in bold italic (the privacy summary, "If you are located in the EU or UK")
   read as a heavy block next to the 400-500 system; italic at 500 still stands out */
.doc strong em,.doc em strong{font-weight:500}
.doc a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--muted);overflow-wrap:anywhere}
.doc a:hover{text-decoration-color:currentColor}
.doc a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:var(--radius-0)}
.doc ul{padding-left:22px}
.doc li{padding-left:4px}
.doc li+li{margin-top:8px}
.doc li::marker{color:var(--muted)}
.doc .short{padding-left:18px;border-left:2px solid var(--line-2);color:var(--ink)}
.doc .short em{font-style:normal}
.doc .addr{font-weight:500;color:var(--ink)}
.doc hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.anc{display:block;height:0}

/* the document's own table of contents */
.toc{margin-top:48px!important;padding:28px 0 8px;border-top:1px solid var(--line)}
.doc>.toc:first-child{margin-top:0!important;padding-top:0;border-top:0}
.doc .toc h2{margin:0;padding:0;border:0;font-size:20px}
.toc ol{list-style:none;margin:16px 0 0;padding:0;counter-reset:none}
.toc li{border-bottom:1px solid var(--line)}
.toc li+li{margin-top:0}
.doc .toc a{display:block;padding:11px 0;font:400 16px/1.45 var(--font);color:var(--text);text-decoration:none;transition:color var(--dur-1) var(--ease),text-decoration-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.doc .toc a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:currentColor}
.doc .toc a:active{transform:translateY(1px)}

/* the CCPA table: hairlines only, scrolls sideways on small screens */
.tbl{overflow-x:auto;border-top:1px solid var(--line)}
.tbl table{width:100%;min-width:560px;border-collapse:collapse;font:400 15px/1.6 var(--font)}
.tbl th{padding:12px 16px 12px 0;text-align:left;font:500 14px/1.4 var(--font);color:var(--ink);border-bottom:1px solid var(--line-2)}
.tbl td{padding:14px 16px 14px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl td:first-child{width:32%;color:var(--ink)}
.tbl td:last-child,.tbl th:last-child{width:14%;padding-right:0}
.tbl td strong{font-weight:500}

@media (max-width:1100px){
  .lg{grid-template-columns:minmax(0,1fr);gap:0}
  .rail{display:none}
  .doc{max-width:760px;margin-inline:auto;width:100%}
  .lh .wrap{max-width:824px}
  .lg{max-width:824px}
}
@media (max-width:720px){
  .lh{padding-top:48px}
  .lh h1{font-size:clamp(34px,9.6vw,44px);line-height:1.1}
  .lh .lead{font-size:17px;line-height:1.65}
  .lh-meta{margin-top:28px}
  .lg{padding-top:40px;padding-bottom:88px}
  .doc{font-size:16px;line-height:1.72}
  .doc h2{margin-top:48px;padding-top:32px;font-size:22px}
  .doc h3{font-size:18px}
  .doc .toc a{font-size:15px;min-height:44px;display:flex;align-items:center}
  /* the table stacks: one block per category, the column names as small grey labels */
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;min-width:0;width:auto}
  .tbl thead{display:none}
  .tbl tr{padding:14px 0 16px;border-bottom:1px solid var(--line)}
  .tbl td,.tbl td:first-child,.tbl td:last-child{width:auto;padding:0;border:0}
  .tbl td::before{content:attr(data-label);display:block;margin-top:10px;font:500 13px/1.4 var(--font);color:var(--muted)}
  .tbl td:first-child::before{display:none}
  .tbl td:first-child{font-weight:500}
}

/* Structural rules and data tables stay square in both themes. */
.tbl,.tbl table,.lh-meta,.toc,.rail ol{border-radius:var(--radius-0)}
@media (pointer:coarse){
  .doc .toc a,:is(.rail,.legal-nav) a{min-height:44px;display:flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rail a,:is(.rail,.legal-nav) a,.doc .toc a{transition:none}
  :is(.rail,.legal-nav) a:active,.doc .toc a:active{transform:none}
}

/* prop-calc-misc 2026-10-22 (today's home page system). The page head is a paper band with the faint graph-paper grid
   that fades at every edge (system .sx-band--paper .sx-grid-bg); the document reads on white below it. The document's
   own table of contents and the CCPA table sit on white sheets (16px corners, rest shadow); the table is compact like
   the home comparison table (7px by 16px cells, dashed rules between rows, 15px text). */
.lh.sx-band{padding-block:88px 56px}
.lg{padding-top:72px}
.toc{padding:24px 24px 12px;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--sheet);box-shadow:var(--shadow-rest)}
.doc>.toc:first-child{padding-top:24px;border-top:1px solid var(--line)}
.toc li{border-bottom:1px dashed var(--rule-dash)}
.toc li:last-child{border-bottom:0}
.tbl{border:1px solid var(--line);border-radius:var(--radius-l);background:var(--sheet);box-shadow:var(--shadow-rest)}
.tbl th{padding:10px 16px 9px;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 16px;border-bottom:1px dashed var(--rule-dash)}
.tbl tr:last-child td{border-bottom:0}
@media (max-width:720px){.lh.sx-band{padding-block:56px 40px}.lg{padding-top:48px}.toc{padding:18px 16px 8px}.tbl td{padding:8px 16px}}
/* the document reads on the white band in both themes (the body ground is paper in dark mode) */
main#main{background:var(--band-white)}
/* swarm R12: the fold of the table of contents (legal.js). R49: it now applies up to 1100px, where the side rail is
   hidden, so tablets no longer get the full 20+ row list before the first paragraph. Desktop keeps the rail. */
.toc-more{display:none}
@media (max-width:1100px){
  .toc.is-folded li:nth-child(n+7){display:none}
  .toc.is-folded li:nth-child(6){border-bottom:1px dashed var(--rule-dash)}
  .toc-more{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;margin:0;padding:12px 4px 10px;border:0;background:none;font:500 15px/1.45 var(--font);color:var(--ink);cursor:pointer;text-align:left}
  .toc-more:hover span{text-decoration:underline;text-underline-offset:3px}
  .toc-more:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:var(--radius-s,6px)}
  .toc-more svg{transition:rotate var(--dur-1) var(--ease)}
  .toc-more[aria-expanded="true"] svg{rotate:180deg}
}
@media (prefers-reduced-motion:reduce){.toc-more svg{transition:none}}
@media (max-width:1100px){.toc:not(.is-folded) .toc-more{border-top:1px dashed var(--rule-dash)}}
/* swarm R50: the floating "Contents" pill (legal.js) for phones and tablets, where the side rail is hidden. Light
   popup style: a white sheet pill with a hairline and the float shadow, 44px tall, out of the way bottom right */
.toc-jump{display:none}
@media (max-width:1100px){
  .toc-jump{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;border:1px solid var(--sheet-edge,var(--line));border-radius:999px;background:var(--sheet);box-shadow:var(--shadow-float);font:500 14px/1 var(--font);color:var(--ink);text-decoration:none;opacity:0;visibility:hidden;translate:0 12px;transition:opacity var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
  .toc-jump.on{opacity:1;visibility:visible;translate:0 0;transition:opacity var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),visibility 0s}
  .toc-jump b{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
  .toc-jump b:empty{display:none}
  .toc-jump svg{color:var(--muted)}
  .toc-jump:hover{translate:0 -1px}
  .toc-jump:active{scale:.98}
  .toc-jump:focus-visible{outline:2px solid var(--green);outline-offset:2px}
}
@media (max-width:1100px) and (prefers-reduced-motion:reduce){.toc-jump,.toc-jump.on{transition:none;translate:none}}
/* swarm R52: on desktop the sticky side rail and the document's own table of contents listed the same 28 sections
   side by side. Where the rail shows (above 1100px) a contents list that opens the document is hidden and the first
   section starts level with the rail. A list placed later in the text (privacy, which links back to #toc) stays. */
@media (min-width:1101px){
  .doc>.toc:first-child{display:none}
  .doc>.toc:first-child+h2{margin-top:0;padding-top:0;border-top:0}
}