/* Cuap — Ink & Candy, lifted from cuap-ios/design/cuap.html */
:root{
  --ink:#12110E;
  --ink-soft:#5B564A;
  --ink-faint:#9A9384;
  --paper:#EDE7D9;
  --card:#FFFFFF;
  --card-2:#E8E1D1;
  --rule:#12110E;          /* ink stroke ON candy — near-black always */
  --edge:#12110E;          /* border on neutral surfaces — lightens in dark */
  --shadow:#12110E;

  --lime:#9FE870;
  --forest:#163300;
  --pink:#F392C2;
  --sky:#50BCFB;
  --acid:#DEF239;
  --grape:#7A42EB;
  --coral:#EB344A;
  --tang:#FFA243;

  --bw:2.5px;
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --drop:5px 5px 0 var(--shadow);
  --drop-sm:3px 3px 0 var(--shadow);

  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-hand:"Shantell Sans","Comic Sans MS",cursive;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F6F2E6; --ink-soft:#B3AC9A; --ink-faint:#7C766A;
    --paper:#17160F; --card:#232219; --card-2:#2D2B20;
    --rule:#0A0A07; --edge:#5F5948; --shadow:#000000;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#F6F2E6; --ink-soft:#B3AC9A; --ink-faint:#7C766A;
  --paper:#17160F; --card:#232219; --card-2:#2D2B20;
  --rule:#0A0A07; --edge:#5F5948; --shadow:#000000;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.6;
  font-variation-settings:"wdth" 100;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--pink)}
:focus-visible{outline:3px solid var(--grape);outline-offset:3px;border-radius:6px}

.wrap{max-width:860px;margin:0 auto;padding:0 16px}

/* ---------- type ---------- */
.display{
  font-weight:900;
  font-stretch:120%;
  font-variation-settings:"wdth" 120;
  letter-spacing:-.02em;
  line-height:.98;
  margin:0;
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--font-hand);
  font-weight:600;
  font-size:1.05rem;
  color:var(--ink-soft);
  margin:0 0 .4rem;
}
.hand{font-family:var(--font-hand)}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;gap:10px;
  padding:18px 0;
}
.logo{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;
  font-weight:900;font-stretch:120%;font-variation-settings:"wdth" 120;
  font-size:1.5rem;letter-spacing:-.02em;
}
.logo svg{width:38px;height:38px;color:var(--ink)}
.logo:hover svg{animation:chirp .5s cubic-bezier(.2,.9,.3,1.3)}
.nav-spacer{flex:1}
.nav a.pill{
  text-decoration:none;
  font-weight:700;font-size:.92rem;
  padding:7px 14px;
  border:var(--bw) solid var(--edge);
  border-radius:999px;
  background:var(--card);
}
.nav a.pill[aria-current="page"]{background:var(--acid);color:#12110E;border-color:var(--rule)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:800;font-size:1.05rem;
  text-decoration:none;
  padding:14px 22px;
  border:var(--bw) solid var(--rule);
  border-radius:999px;
  box-shadow:var(--drop);
  cursor:pointer;
  transition:transform .12s cubic-bezier(.2,.9,.3,1.3),box-shadow .12s;
}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow)}
.btn-lime{background:var(--lime);color:var(--forest)}
.btn-pink{background:var(--pink);color:#12110E}
.btn-card{background:var(--card);color:var(--ink);border-color:var(--edge)}

/* ---------- cards ---------- */
.card{
  background:var(--card);
  border:var(--bw) solid var(--edge);
  border-radius:var(--r-lg);
  box-shadow:var(--drop);
}

/* ---------- speech bubble ---------- */
.bubble{
  position:relative;
  display:inline-block;
  font-family:var(--font-hand);
  font-weight:700;
  background:var(--card);
  color:var(--ink);
  border:var(--bw) solid var(--edge);
  border-radius:18px;
  padding:8px 14px;
  box-shadow:var(--drop-sm);
}
.bubble::after{
  content:"";position:absolute;left:22px;bottom:-11px;
  width:16px;height:16px;
  background:inherit;
  border-right:var(--bw) solid var(--edge);
  border-bottom:var(--bw) solid var(--edge);
  transform:rotate(45deg);
  border-bottom-right-radius:4px;
}

/* ---------- legal pages ---------- */
.legal-hero{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:12px 24px;
  padding:28px 0 32px;
}
.legal-hero h1{font-size:clamp(2.6rem,9vw,5rem)}
.legal-hero .meta{
  margin:14px 0 0;
  color:var(--ink-soft);
  font-size:.95rem;
}
.legal-hero .bird-wrap{position:relative;width:150px}
.legal-hero .bird-wrap .bubble{position:absolute;top:-18px;left:-46px;white-space:nowrap;font-size:.95rem;transform:rotate(-6deg)}
.legal-hero .bird{width:150px;animation:bob 3.2s ease-in-out infinite}

.tldr{
  background:var(--acid);
  color:#12110E;
  border-color:var(--rule);
  padding:22px 24px 20px;
  margin:0 0 40px;
}
.tldr h2{font-size:1.6rem;margin-bottom:12px}
.tldr ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tldr li{display:flex;gap:12px;align-items:flex-start;font-weight:600;line-height:1.4}
.tldr li .tick{
  flex:none;width:26px;height:26px;margin-top:1px;
  display:grid;place-items:center;
  background:#fff;color:#12110E;
  border:var(--bw) solid var(--rule);border-radius:8px;
  font-size:.85rem;font-weight:900;
}
.tldr li .tick.no{background:var(--coral);color:#fff}

.toc{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 40px;padding:0;list-style:none;
}
.toc a{
  display:inline-block;
  text-decoration:none;
  font-size:.88rem;font-weight:700;
  padding:6px 12px;
  background:var(--card-2);
  border:var(--bw) solid var(--edge);
  border-radius:999px;
}
.toc a:hover{background:var(--pink);color:#12110E;border-color:var(--rule)}

.section{
  scroll-margin-top:20px;
  padding:0 0 36px;
  margin:0 0 36px;
  border-bottom:var(--bw) dashed var(--ink-faint);
}
.section:last-of-type{border-bottom:0}
.section h2{
  display:flex;align-items:center;gap:12px;
  font-size:clamp(1.5rem,4.5vw,2rem);
  margin-bottom:16px;
}
.section h2 .num{
  flex:none;
  display:grid;place-items:center;
  width:42px;height:42px;
  font-size:1.1rem;font-stretch:100%;font-variation-settings:"wdth" 100;
  border:var(--bw) solid var(--rule);
  border-radius:12px;
  box-shadow:var(--drop-sm);
  color:#12110E;
}
.section p,.section li{color:var(--ink);max-width:68ch}
.section ul{padding-left:1.2em}
.section li{margin:.3em 0}
.section li::marker{color:var(--pink)}
.section strong{font-weight:800}

.aside{
  display:flex;gap:12px;align-items:flex-start;
  margin:18px 0 6px;
  max-width:62ch;
}
.aside .mini{flex:none;width:44px;height:44px;margin-top:2px}
.aside .say{
  font-family:var(--font-hand);
  font-size:1rem;
  line-height:1.45;
  background:var(--card);
  border:var(--bw) solid var(--edge);
  border-radius:4px 18px 18px 18px;
  padding:10px 14px;
  box-shadow:var(--drop-sm);
}

.table{
  width:100%;
  border-collapse:separate;border-spacing:0;
  margin:14px 0;
  font-size:.95rem;
  background:var(--card);
  border:var(--bw) solid var(--edge);
  border-radius:var(--r-md);
  overflow:hidden;
}
.table th,.table td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1.5px solid var(--card-2)}
.table tr:last-child td{border-bottom:0}
.table th{background:var(--card-2);font-weight:800}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.contact{
  background:var(--sky);
  color:#12110E;
  border-color:var(--rule);
  padding:24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  margin:8px 0 0;
}
.contact h2{font-size:1.6rem;flex:1 1 260px}
.contact p{margin:6px 0 0;font-weight:600;font-stretch:100%}
.contact .btn{border-color:var(--rule)}

/* ---------- footer ---------- */
.footer{
  padding:40px 0 48px;
  margin-top:48px;
  border-top:var(--bw) solid var(--edge);
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  color:var(--ink-soft);font-size:.92rem;
}
.footer .spacer{flex:1}
.footer a{font-weight:700;color:var(--ink)}


/* On the dark ground the bird's ink outline vanishes; a thin halo in --edge keeps it a sticker. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .legal-hero .bird{filter:drop-shadow(2px 0 0 var(--edge)) drop-shadow(-2px 0 0 var(--edge)) drop-shadow(0 2px 0 var(--edge)) drop-shadow(0 -2px 0 var(--edge))}
}
:root[data-theme="dark"] .legal-hero .bird{filter:drop-shadow(2px 0 0 var(--edge)) drop-shadow(-2px 0 0 var(--edge)) drop-shadow(0 2px 0 var(--edge)) drop-shadow(0 -2px 0 var(--edge))}

/* ---------- motion ---------- */
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes chirp{0%{transform:rotate(0)}40%{transform:rotate(-16deg) scale(1.15)}70%{transform:rotate(12deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

@media (max-width:600px){
  body{font-size:16px}
  .legal-hero{grid-template-columns:1fr}
  .legal-hero .bird-wrap{order:-1;width:110px;margin-left:auto;margin-right:8px}
  .legal-hero .bird{width:110px}
  .legal-hero .bird-wrap .bubble{left:-70px}
  .nav a.pill{padding:6px 11px;font-size:.85rem}
  .logo span{display:none}
}