/*
  Dolly — public site.

  The palette is lifted from the app itself rather than invented: the orange and
  pink are the exact two stops of the login header's gradient, and the navy is
  the wordmark's own ink. Someone who arrives here from the app should not feel
  they have left it.

  No webfont. This is read on a mid-range Android over a patchy connection in
  India, and a font that arrives late — or not at all — costs more than a
  distinctive one gains on a page of legal text.
*/

:root {
  /* Brand, straight from LoginScreen.kt */
  --flame: #FF7A3D;
  --rose: #F31E7A;
  --iris: #6C5CE7;

  /* Neutrals carry a slight violet bias so they sit under the accent
     rather than fighting it. */
  --ink: #141033;
  --body: #3A3552;
  --muted: #6A6480;
  --paper: #FCFBFE;
  --card: #FFFFFF;
  --line: #E9E5F2;
  --wash: #F5F3FA;

  --grad: linear-gradient(115deg, var(--flame), var(--rose));

  --max: 1080px;
  --read: 68ch;
  --radius: 16px;

  --shadow-s: 0 1px 2px rgba(20, 16, 51, .05), 0 4px 14px rgba(20, 16, 51, .05);
  --shadow-m: 0 12px 40px rgba(20, 16, 51, .10);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F4F2FA;
    --body: #C6C1D8;
    --muted: #948DAB;
    --paper: #100E1C;
    --card: #191527;
    --line: #2C2740;
    --wash: #191527;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink: #F4F2FA;
  --body: #C6C1D8;
  --muted: #948DAB;
  --paper: #100E1C;
  --card: #191527;
  --line: #2C2740;
  --wash: #191527;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ink: #141033;
  --body: #3A3552;
  --muted: #6A6480;
  --paper: #FCFBFE;
  --card: #FFFFFF;
  --line: #E9E5F2;
  --wash: #F5F3FA;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.022em;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 750; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0; }

a { color: var(--rose); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--flame); }
a:focus-visible,
button:focus-visible {
  outline: 2.5px solid var(--iris);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 22px; }

/* ------------------------------------------------------------------ header */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex; align-items: center; gap: 18px;
  min-height: 62px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; color: var(--ink); text-decoration: none;
  letter-spacing: -0.02em; font-size: 1.05rem;
  margin-inline-end: auto;
}
.brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.top nav { display: flex; gap: 20px; font-size: .92rem; font-weight: 600; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }

/* -------------------------------------------------------------------- hero */
.hero {
  background: var(--grad);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 96px) 0 clamp(64px, 10vw, 104px);
}
/* Same soft bokeh the app's login header draws in Canvas. */
.hero::before,
.hero::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .11); pointer-events: none;
}
.hero::before { width: 460px; height: 460px; top: -190px; left: -140px; }
.hero::after  { width: 320px; height: 320px; bottom: -170px; right: -80px; }

.hero .wrap { position: relative; }
.hero-grid {
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; }
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lede {
  margin-top: 18px; font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  color: rgba(255, 255, 255, .93); max-width: 46ch; line-height: 1.65;
}
.plate {
  background: #fff; border-radius: 30px; padding: 22px;
  box-shadow: var(--shadow-m);
  width: min(280px, 70vw); margin-inline: auto;
  display: grid; place-items: center;
}
.plate img { width: 100%; height: auto; display: block; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pills span {
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font-size: .8rem; font-weight: 650;
  padding: 6px 13px; border-radius: 999px;
}

/* ----------------------------------------------------------------- content */
.band { padding: clamp(48px, 7vw, 78px) 0; }
.band + .band { border-top: 1px solid var(--line); }
.band.tint { background: var(--wash); }

.label {
  font-size: .74rem; font-weight: 750; letter-spacing: .13em;
  text-transform: uppercase; color: var(--rose); margin-bottom: 12px;
}
.band > .wrap > h2 + p { margin-top: 14px; max-width: var(--read); color: var(--muted); }

.steps {
  margin-top: 34px; padding: 0; list-style: none;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.steps li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-s);
}
/* Numbered because the order is real — you cannot call before you top up. */
.steps .n {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad); color: #fff;
  font-size: .84rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-bottom: 13px;
}
.steps h3 { margin-bottom: 6px; }
.steps p { font-size: .95rem; color: var(--muted); }

.split {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 30px;
}
.split div {
  border-inline-start: 3px solid var(--line);
  padding-inline-start: 18px;
}
.split h3 { margin-bottom: 6px; }
.split p { font-size: .95rem; color: var(--muted); }

.note {
  margin-top: 30px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: .93rem; color: var(--muted);
}
.note strong { color: var(--ink); }

/* --------------------------------------------------------------- legal doc */
.doc { padding: clamp(34px, 5vw, 56px) 0 80px; }
.doc-head { border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 34px; }
.doc-head p.meta {
  margin-top: 14px; color: var(--muted); font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
}
.doc-head p.meta b { color: var(--ink); font-weight: 700; }

.doc-body { display: grid; gap: 46px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) {
  .doc-body { grid-template-columns: 216px minmax(0, 1fr); }
}

.toc { display: none; }
@media (min-width: 940px) {
  .toc {
    display: block; position: sticky; top: 86px;
    font-size: .88rem; line-height: 1.5;
  }
  .toc p {
    font-size: .72rem; font-weight: 750; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
  }
  .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .toc a { color: var(--muted); text-decoration: none; }
  .toc a:hover { color: var(--ink); }
}

.doc article { max-width: var(--read); }
.doc section { scroll-margin-top: 86px; }
.doc section + section { margin-top: 34px; }
.doc section > h2 {
  font-size: 1.12rem; font-weight: 750; letter-spacing: -0.008em;
  margin-bottom: 10px;
}
.doc section > h2 .num {
  color: var(--rose); font-variant-numeric: tabular-nums;
  margin-inline-end: 8px;
}
.doc article p + p { margin-top: 13px; }
.doc article ul { margin: 13px 0 0; padding-inline-start: 22px; }
.doc article li + li { margin-top: 8px; }
.doc article h3 { margin: 20px 0 6px; }
.doc strong { color: var(--ink); }

.callout {
  margin-top: 16px; padding: 16px 18px;
  background: var(--wash); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--rose);
  border-radius: 12px; font-size: .95rem;
}

/* Two-column tables of "what we collect" / "why". */
.tablewrap { overflow-x: auto; margin-top: 16px; border-radius: 12px; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: start; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--wash); color: var(--ink); font-weight: 700; font-size: .85rem; }
tr:last-child td { border-bottom: 0; }

/*
  On a phone these stack instead of scrolling sideways.

  Two columns inside 360px clips the second one, and a legal page is the last
  place to hide half a sentence behind a horizontal swipe nobody knows is
  there. Each row becomes the thing on top and the reason underneath.
*/
@media (max-width: 640px) {
  .tablewrap { overflow-x: visible; border: 0; border-radius: 0; }
  table, tbody, tr, td { display: block; }
  thead { display: none; }
  tr {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--card); padding: 4px 0;
  }
  tr + tr { margin-top: 10px; }
  td { border-bottom: 0; padding: 8px 15px; }
  td:first-child { padding-bottom: 2px; color: var(--ink); }
  td:last-child { padding-top: 0; color: var(--muted); font-size: .9rem; }
}

/* ------------------------------------------------------------------ footer */
footer {
  border-top: 1px solid var(--line);
  background: var(--wash);
  padding: 44px 0 52px;
  font-size: .92rem;
}
.foot {
  display: flex; flex-wrap: wrap; gap: 26px 40px;
  justify-content: space-between; align-items: flex-start;
}
.foot nav { display: grid; gap: 9px; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.foot .who { max-width: 34ch; color: var(--muted); }
.foot .who b { color: var(--ink); display: block; margin-bottom: 6px; font-weight: 750; }
.legalline {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .85rem;
}