/* Shared by the privacy and support pages. The tokens, base, nav and footer rules are
   copied from index.html, so the pages look like the site; keep them in step. */
:root{
  --bg:#F2F2F7;
  --card:#FFFFFF;
  --inset:#F2F2F7;
  --ink:#1C1C1E;
  --ink-2:#4F4F57;
  --ink-3:#7E7E86;
  --hair:rgba(60,60,67,.14);
  --shadow:0 1px 2px rgba(28,28,50,.06), 0 12px 32px -14px rgba(28,28,50,.22);
  /* Brand: the icon's two layers */
  --pink:#FF7A9C;
  --pink-ink:#CF3363;
  --pink-strong:#E5457A;
  --green:#77DD77;
  --green-ink:#1E8A38;
  /* The iOS system colours the app paints activities with */
  --blue:#007AFF; --sgreen:#34C759; --orange:#FF9500; --teal:#30B0C7; --cyan:#32ADE6;
  --indigo:#5856D6; --purple:#AF52DE; --spink:#FF2D55; --yellow:#FFCC00; --red:#FF3B30; --gray:#8E8E93;
  /* Liquid Glass chrome */
  --glass:rgba(255,255,255,.66);
  --glass-edge:rgba(255,255,255,.95);
  --glass-shadow:0 6px 20px rgba(20,20,50,.14), 0 1px 2px rgba(20,20,50,.08);
  /* Map */
  --map-land:#EEECE6; --map-street:#FFFFFF; --map-road:#FFFFFF; --map-water:#AAD3F1;
  --map-water-ink:#5A90C2; --map-park:#C4E5B5; --map-label:#9A968D; --map-casing:#FFFFFF;
  --logo-a:#FFFFFF; --logo-b:#E6E6EC;
  /* Type */
  --display:"Fredoka", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body:"Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono:"DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#050507; --card:#1C1C1E; --inset:#2C2C2E; --ink:#F5F5F7; --ink-2:#C4C4CA; --ink-3:#8E8E96;
    --hair:rgba(255,255,255,.1); --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.85);
    --pink-ink:#FF8FAE; --pink-strong:#EE5287; --green-ink:#7BE37B;
    --blue:#0A84FF; --sgreen:#30D158; --orange:#FF9F0A; --teal:#40C8E0; --cyan:#64D2FF;
    --indigo:#5E5CE6; --purple:#BF5AF2; --spink:#FF375F; --yellow:#FFD60A; --red:#FF453A; --gray:#98989F;
    --glass:rgba(44,44,48,.62); --glass-edge:rgba(255,255,255,.14); --glass-shadow:0 6px 20px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
    --map-land:#24262A; --map-street:#2E3136; --map-road:#3B3F46; --map-water:#142B42;
    --map-water-ink:#4F7DA8; --map-park:#1E3A25; --map-label:#71767E; --map-casing:#15171A;
    --logo-a:#2E2E32; --logo-b:#141416;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#050507; --card:#1C1C1E; --inset:#2C2C2E; --ink:#F5F5F7; --ink-2:#C4C4CA; --ink-3:#8E8E96;
  --hair:rgba(255,255,255,.1); --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.85);
  --pink-ink:#FF8FAE; --pink-strong:#EE5287; --green-ink:#7BE37B;
  --blue:#0A84FF; --sgreen:#30D158; --orange:#FF9F0A; --teal:#40C8E0; --cyan:#64D2FF;
  --indigo:#5E5CE6; --purple:#BF5AF2; --spink:#FF375F; --yellow:#FFD60A; --red:#FF453A; --gray:#98989F;
  --glass:rgba(44,44,48,.62); --glass-edge:rgba(255,255,255,.14); --glass-shadow:0 6px 20px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  --map-land:#24262A; --map-street:#2E3136; --map-road:#3B3F46; --map-water:#142B42;
  --map-water-ink:#4F7DA8; --map-park:#1E3A25; --map-label:#71767E; --map-casing:#15171A;
  --logo-a:#2E2E32; --logo-b:#141416;
  color-scheme:dark;
}
@supports (color: color(display-p3 1 1 1)){
  :root{ --pink:color(display-p3 1 .484 .609); --green:color(display-p3 .467 .867 .467); }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
.lucide{width:1em;height:1em;flex:none}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:8px}

.wrap{max-width:1200px;margin-inline:auto;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font:700 1rem/1 var(--body);text-decoration:none;border:0;cursor:pointer;border-radius:999px;padding:.95em 1.4em;transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn .lucide{width:1.15em;height:1.15em}
.btn-pink{background:var(--pink-strong);color:#fff;box-shadow:0 10px 24px -10px var(--pink-strong), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-glass{background:var(--glass);color:var(--ink);border:.5px solid var(--glass-edge);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6)}

/* ---------- Nav ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;padding-block:12px}
.nav{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:999px;background:var(--glass);border:.5px solid var(--glass-edge);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 1.3rem/1 var(--display);letter-spacing:-.01em;margin-right:auto}
.brand svg{width:34px;height:34px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))}
.nav-links{display:flex;gap:2px}
.nav-links a{font:700 .95rem/1 var(--body);text-decoration:none;color:var(--ink-2);padding:.7em .9em;border-radius:999px;transition:background .2s,color .2s}
.nav-links a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.nav .btn{padding:.75em 1.15em;font-size:.95rem}
@media (max-width:760px){.nav-links{display:none}}

/* ---------- Footer ---------- */
footer.site{padding-block:28px calc(36px + env(safe-area-inset-bottom,0px))}
.foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;border-top:1px solid var(--hair);padding-top:26px;font-size:.92rem;color:var(--ink-3)}
.foot .brand{font-size:1.15rem;color:var(--ink);margin:0}
.foot .brand svg{width:28px;height:28px}
.foot .mono{font:500 .78rem/1.5 var(--mono);letter-spacing:.03em}

/* ---------- Text pages: privacy policy, support ---------- */
.nav-links a[aria-current="page"]{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.doc{max-width:46rem;margin-inline:auto;padding-block:clamp(28px,6vw,64px) clamp(64px,9vw,112px)}
.doc-head{display:grid;gap:18px;justify-items:start}
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font:500 .8rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);padding:.6em .9em;border-radius:999px;background:var(--card);box-shadow:var(--shadow)}
.eyebrow .lucide{color:var(--c,var(--pink-ink));width:1.15em;height:1.15em;stroke-width:2.4}
.doc h1{font-size:clamp(2.6rem,7vw,4.2rem);line-height:1;letter-spacing:-.025em}
.doc .lead{font-size:clamp(1.08rem,1.6vw,1.24rem);line-height:1.55;color:var(--ink-2);max-width:36em}
.updated{font:500 .8rem/1.4 var(--mono);color:var(--ink-3);letter-spacing:.03em}
.doc h2{font-size:clamp(1.55rem,3vw,2rem);line-height:1.15;margin:clamp(44px,7vw,64px) 0 14px}
.doc h3{font-size:1.15rem;font-weight:600;margin:28px 0 10px}
.doc p,.doc li{color:var(--ink-2)}
.doc p + p{margin-top:14px}
.doc ul{margin:14px 0 0;padding-left:1.3em;display:grid;gap:10px}
.doc li{padding-left:.2em}
.doc li::marker{color:var(--pink-ink)}
.doc strong{color:var(--ink);font-weight:800}
.doc a{color:var(--pink-ink);font-weight:700;text-decoration-thickness:.08em;text-underline-offset:.18em}
.doc a:hover{color:var(--pink-strong)}

/* Cards, as in the site's privacy section */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(28px,5vw,44px)}
.card{background:var(--card);border-radius:22px;padding:20px;box-shadow:var(--shadow);display:grid;gap:12px;align-content:start}
.card h2,.card h3{font-size:1.2rem;font-weight:600;margin:0}
.card p{font-size:.98rem;line-height:1.5}
.card.wide{grid-column:1 / -1}
.fi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.fi .lucide{width:20px;height:20px;stroke-width:2.3}
@media (max-width:640px){.cards{grid-template-columns:minmax(0,1fr)}}

/* Support: the address and the button to write */
.contact{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;justify-content:space-between}
.contact .who{display:flex;gap:14px;align-items:flex-start;min-width:0}
.contact .who > div{display:grid;gap:4px;min-width:0}
.contact .addr{font:500 1rem/1.3 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.doc .btn{color:#fff;text-decoration:none}
.doc .btn:hover{color:#fff}

/* Questions and answers */
.faq{display:grid;gap:12px;margin-top:16px}
.faq details{background:var(--card);border-radius:20px;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font:700 1.05rem/1.35 var(--body);color:var(--ink);display:flex;gap:16px;align-items:center;justify-content:space-between;border-radius:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex:none;margin-right:4px;border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq .answer{padding:0 20px 20px}
.faq .answer p + p{margin-top:10px}
@media (prefers-reduced-motion: reduce){.faq summary::after{transition:none}}

/* Footer links */
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-links a{color:var(--ink-2);font-weight:700;text-decoration:none}
.foot-links a:hover{color:var(--ink)}