@charset "utf-8";
/* ============================== LEGAL DOCUMENTS ==============================
   Shared by buyer-privacy-at-a-glance.html, seller-privacy-at-a-glance.html,
   buyer-terms.html and seller-terms.html. Loaded after css/style.css.

   Visual language is privacy-at-a-glance.html's: plum header band with drifting
   orbs, white cards on the pink wash, gold eyebrow, pill chips. Kept in one
   file rather than four inline copies because these pages are lawyer-supplied
   text that will be re-dropped in — the markup of the clauses should stay as
   close to the source as possible, and all presentation lives here.

   The clause markup these pages use (do not rename — it is in the source):
     .card > h2 > .num   section number
     p > .cl             leading clause number on a paragraph
     ul.lettered         list that types its own (a)…(j) markers
     ol[type=a]          lettered list, markers from the browser
   ============================================================================ */

:root{
  --pink:#CA2379; --pink-deep:#9A1A5F; --pink-hot:#F055B1;
  --pink-light:#FBD3EA; --pink-wash:#FDECF6;
  --ink:#2B1A24; --grey:#8A6076; --stone:#F2C2DD;
  --gold:#B58A2E; --gold-lite:#FFDD73;
  --dark1:#3A1028; --dark2:#240A1A; --dark3:#160610;
  --shadow:0 1px 3px rgba(154,26,95,.07), 0 10px 30px rgba(154,26,95,.08);
  --hang:3.2rem;            /* width of the clause-number column */
}
body{line-height:1.7}
/* Measure for reading, not for scanning. These pages are long prose. */
.wrap{max-width:820px}
a{color:var(--pink)}
a:hover{color:var(--pink-deep)}
/* Anchored sections must not land under the sticky nav. */
[id]{scroll-margin-top:5.5rem}

/* ============================== HEAD ============================== */
header.head{position:relative;overflow:hidden;color:#fff;padding:3.4rem 0 3rem;
  background:radial-gradient(120% 90% at 80% -10%,rgba(202,35,121,.30),transparent 58%),
             linear-gradient(165deg,var(--dark1) 0%,var(--dark2) 55%,var(--dark3) 100%)}
header.head .orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
header.head .orb.a{right:-6%;top:-40%;width:min(460px,80vw);aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(240,85,177,.38),transparent 72%);
  animation:drift-a 19s ease-in-out infinite}
header.head .orb.b{left:-14%;bottom:-60%;width:min(400px,70vw);aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(181,138,46,.26),transparent 72%);
  animation:drift-b 26s ease-in-out infinite}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-34px,30px,0) scale(1.10)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(38px,-26px,0) scale(1.08)}}
header.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,221,115,.45),rgba(240,85,177,.35),transparent)}
header.head .wrap{position:relative;z-index:1}
header.head h1{font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 .9rem}

.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lite);margin-bottom:.9rem}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-lite),rgba(255,221,115,.2))}
.meta{display:flex;flex-wrap:wrap;gap:.5rem}
.meta span,.meta a{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.86);text-decoration:none;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.20);
  border-radius:30px;padding:.34rem .9rem}
.meta a{transition:background .3s ease,border-color .3s ease}
.meta a:hover{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,221,115,.55)}

/* ============================== BODY ============================== */
main{padding:2.5rem 0 3.5rem}
.stack{display:flex;flex-direction:column;gap:1.4rem}

.card{background:#fff;border:1px solid var(--stone);border-radius:18px;padding:1.7rem;
  box-shadow:var(--shadow);margin:0}
@media(max-width:640px){.card{padding:1.3rem 1.15rem;border-radius:16px}}

/* Section heading: number as a chip, title in the brand pink, a hairline
   under it so the clause body reads as a separate block. */
.card > h2{display:flex;align-items:flex-start;gap:.7rem;color:var(--pink);
  font-size:1.22rem;line-height:1.3;letter-spacing:-.015em;
  margin:0 0 1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--pink-wash)}
.card > h2 .num{flex:0 0 auto;min-width:2.3rem;height:1.75rem;padding:0 .45rem;margin:0;
  display:inline-grid;place-items:center;border-radius:9px;
  font-size:.8rem;font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums;
  color:var(--pink-deep);background:var(--pink-wash);border:1px solid var(--stone)}

.card h3{display:flex;align-items:baseline;gap:.5rem;font-size:1rem;color:var(--ink);
  margin:1.6rem 0 .5rem}
.card h3 .num{color:var(--pink-deep);font-weight:700;font-size:.86rem;
  font-variant-numeric:tabular-nums;margin:0}

.card p{margin:0 0 .8rem}
.card > :last-child{margin-bottom:0}

/* Clause-numbered paragraphs get a hanging indent, so the numbers form a
   column and every wrapped line sits under the first word of the sentence. */
.cl{display:inline-block;width:var(--hang);text-indent:0;
  color:var(--pink-deep);font-weight:700;font-size:.86em;font-variant-numeric:tabular-nums}
.card p:has(> .cl:first-child){padding-left:var(--hang);text-indent:calc(var(--hang) * -1)}
/* A list that belongs to a clause is indented to that clause's text. */
.card p:has(> .cl:first-child) + ol,
.card p:has(> .cl:first-child) + ul{margin-left:var(--hang)}
@media(max-width:640px){:root{--hang:2.7rem}}

.card ol,.card ul{padding-left:1.4rem;margin:.2rem 0 1rem}
.card li{margin-bottom:.4rem;padding-left:.25rem}
.card li::marker{color:var(--pink);font-weight:700}
.card ol[type="a"] > li::marker{color:var(--pink-deep);font-size:.92em}

/* The lettered list carries its own (a)…(j) markers, exactly as the source
   document types them, so the list must not add a second set. */
.card ul.lettered{list-style:none;padding-left:.2rem}
.card ul.lettered > li{padding-left:1.9rem;text-indent:-1.9rem}

/* ============================== CONTENTS ==============================
   Short documents get pills, as on privacy-at-a-glance.html. Long ones (terms)
   get a collapsible two-column index — 50 pills would be a wall. */
.toccard > h2{display:block;color:var(--ink);font-size:1.05rem;border:0;padding:0;margin:0}
.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.toc a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-size:.84rem;font-weight:600;
  color:var(--ink);background:#fff;border:1px solid var(--stone);border-radius:30px;
  padding:.38rem .9rem;transition:transform .3s cubic-bezier(.22,1,.36,1),
    border-color .3s ease,color .3s ease}
.toc a:hover{transform:translateY(-2px);border-color:var(--pink-hot);color:var(--pink)}
.toc a .n{color:var(--pink);font-variant-numeric:tabular-nums}

details.toccard > summary{display:flex;align-items:center;gap:.75rem;cursor:pointer;list-style:none;
  font-weight:700;font-size:1.05rem;color:var(--ink)}
details.toccard > summary::-webkit-details-marker{display:none}
details.toccard > summary .count{font-size:.75rem;font-weight:700;color:var(--pink-deep);
  background:var(--pink-wash);border:1px solid var(--stone);border-radius:20px;padding:.12rem .6rem}
details.toccard > summary::after{content:"";margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:translateY(-3px) rotate(45deg);transition:transform .3s ease}
details.toccard[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
details.toccard > summary:focus-visible{outline:2px solid var(--pink-hot);outline-offset:6px;border-radius:6px}
.toclist{columns:2;column-gap:2rem;list-style:none;margin:1.1rem 0 0;padding:1.1rem 0 0;
  border-top:1px solid var(--pink-wash)}
@media(max-width:640px){.toclist{columns:1}}
.toclist li{break-inside:avoid;margin:0}
.toclist a{display:flex;gap:.6rem;padding:.34rem .5rem;border-radius:8px;text-decoration:none;
  font-size:.9rem;line-height:1.4;color:var(--ink);transition:background .2s ease,color .2s ease}
.toclist a:hover{background:var(--pink-wash);color:var(--pink)}
.toclist .n{flex:0 0 2rem;color:var(--pink);font-weight:700;font-variant-numeric:tabular-nums}

/* ============================== BACK TO TOP ============================== */
.totop{position:fixed;right:1.1rem;bottom:1.1rem;z-index:40;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  box-shadow:0 10px 24px rgba(154,26,95,.32);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.totop:hover{color:#fff;transform:translateY(-3px)}
.totop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================== MOTION ============================== */
[data-reveal] .sr{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0s)}
[data-reveal] .sr.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  header.head .orb{animation:none}
  .toc a,.toclist a,.totop,details.toccard > summary::after{transition:none}
  .toc a:hover,.totop:hover{transform:none}
  [data-reveal] .sr{opacity:1;transform:none;transition:none}
}

/* ============================== PRINT ==============================
   Legal pages get printed and saved as PDF. Drop the chrome, keep the text. */
@media print{
  nav.top,footer,.toccard,.totop,header.head .orb{display:none !important}
  body{background:#fff}
  header.head{background:none;color:var(--ink);padding:0 0 1rem}
  header.head::after{display:none}
  header.head .eyebrow{color:var(--grey)}
  .meta span,.meta a{color:var(--ink);border-color:#ccc;background:none}
  main{padding:0}
  .card{box-shadow:none;border:0;border-radius:0;padding:0 0 1rem}
  .card > h2{break-after:avoid}
  [data-reveal] .sr{opacity:1;transform:none}
}

/* ============================== CONTACT ==============================
   The "Ask us" panel that closes each document — same block as
   privacy-at-a-glance.html. Inside .stack, after the last legal card. */
.contact{position:relative;overflow:hidden;border-radius:20px;padding:1.7rem;color:#fff;
  background:linear-gradient(135deg,var(--pink) 0%,var(--pink-deep) 100%);
  box-shadow:0 20px 44px rgba(154,26,95,.28)}
.contact::after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;
  border-radius:50%;pointer-events:none;border:1px solid rgba(255,221,115,.35);
  box-shadow:0 0 0 40px rgba(255,221,115,.06),0 0 0 41px rgba(255,221,115,.18)}
.contact .eyebrow{color:var(--gold-lite)}
.contact p{color:rgba(255,255,255,.85);margin:0 0 .9rem}
.contact .mail{display:inline-block;font-size:clamp(1rem,2.6vw,1.2rem);font-weight:800;color:#fff;
  text-decoration:none;letter-spacing:-.01em;word-break:break-word;
  border-bottom:2px solid rgba(255,221,115,.55);padding-bottom:2px;transition:border-color .3s}
.contact .mail:hover{color:#fff;border-color:var(--gold-lite)}
@media(prefers-reduced-motion:reduce){.contact .mail{transition:none}}
@media print{.contact{display:none}}

/* ============================== PHONE READING MODE ==============================
   At phone width these pages are mostly opened from inside the apps, so they
   read as a bare document: no site nav, no header band, no footer, no
   contents box — the page starts at clause 1 and ends with the "Ask us" panel.

   When it switches on — js/reading-mode.js sets html.mread from device
   signals (phone UA, client hint, webview, touch-only phone screen, or
   ?view=app). The ≤640px media query is the fallback for when that script
   does not run; html.mread-off (?view=full) disables both. Keep the two rule
   sets below identical. */
html.mread nav.top,html.mread footer,html.mread .toccard,html.mread header.head{display:none !important}
html.mread main{padding-top:1.2rem}
@media(max-width:640px){
  html:not(.mread-off) nav.top,html:not(.mread-off) footer,html:not(.mread-off) .toccard,
  html:not(.mread-off) header.head{display:none !important}
  html:not(.mread-off) main{padding-top:1.2rem}
}