/* ==========================================================================
   BikeZap — Legal / Policy site
   Single stylesheet for all policy pages (index, terms, privacy-policy,
   community-guidelines, delete-account).

   Colour system
   -------------
   The palette is deliberately anchored to the Android app's own brand
   (navy + orange) so the policy pages and the app read as one product. A
   separate accent colour on the legal site made it look like a third-party
   template.

   Gradients follow two rules so the page looks deliberate rather than
   decorated:
     1. Gradients mark *hierarchy*. The darkest, richest gradient is reserved
        for the hero hairline and the document's top rule — the two things a
        reader should notice. Interactive elements get a lighter ramp.
     2. A gradient never carries meaning on its own. Status colours (ok /
        warn / info) keep a solid hue so they stay readable for colour-blind
        readers; only their background wash is a gradient.
   ========================================================================== */

:root {
  /* Brand ramp — matches AppTheme.navy / navyLight in the Flutter app.
     Defined as a complete scale so a future tweak reuses an existing stop
     instead of inventing a near-duplicate colour. */
  --brand-900: #08173b;
  --brand-800: #0b1f4b;
  --brand-700: #16307a;
  --brand-600: #1e3a8a;
  --brand-500: #2d4bb8;
  --brand-400: #4f46e5;
  --brand-300: #7c74f0;
  --brand-200: #a9a3f7;

  /* Accent — matches AppTheme.orange, used sparingly for warmth. */
  --accent-600: #c2410c;
  --accent-500: #ea580c;
  --accent-400: #fb923c;

  /* Gradients ------------------------------------------------------- */
  --grad-brand: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 48%, #4c1d95 100%);
  --grad-brand-r: linear-gradient(90deg, var(--brand-800) 0%, var(--brand-600) 45%, #4c1d95 100%);
  --grad-cta: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 100%);
  --grad-hairline: linear-gradient(90deg, transparent 0%, var(--brand-400) 22%, var(--brand-300) 48%, var(--accent-500) 74%, transparent 100%);

  /* Surfaces -------------------------------------------------------- */
  --bg: #f4f6fc;
  --surface: #ffffff;
  --surface-2: #f7f9fe;
  --border: #e4e8f4;
  --border-strong: #cdd4e8;

  --text: #0c1226;
  --text-2: #3f4760;
  /* Muted text sits on --bg, not on --surface, so this is the tightest
     contrast pair on the page. #6a7288 measured 4.44:1 here; #646c82 gives
     4.85:1 and keeps AA without making the footer look like body copy. */
  --text-3: #646c82;

  /* Ambient wash behind the page. Low alpha on purpose — this is depth,
     not decoration; the text still sits on a near-solid surface. */
  --amb-1: rgba(79, 70, 229, 0.10);
  --amb-2: rgba(234, 88, 12, 0.07);
  --amb-3: rgba(30, 58, 138, 0.09);

  --brand-soft: rgba(79, 70, 229, 0.11);
  --brand-soft-2: rgba(79, 70, 229, 0.055);

  /* Status ---------------------------------------------------------- */
  --ok-bg: #e9f8f0;
  --ok-fg: #14663a;
  --ok-bar: #1f9d55;
  --warn-bg: #fff5e6;
  --warn-fg: #8a5200;
  --warn-bar: #e0932b;
  --info-bg: #eaf1ff;
  --info-fg: #1a4bb8;
  --info-bar: #3b74e0;

  --radius: 14px;
  --radius-lg: 18px;

  /* Shadows carry a brand tint. A neutral grey shadow on a navy-accented
     page reads as flat; a tinted one reads as the same material. */
  --shadow: 0 1px 2px rgba(12, 18, 38, .04), 0 4px 12px rgba(12, 18, 38, .05), 0 18px 44px rgba(30, 58, 138, .09);
  --shadow-sm: 0 1px 2px rgba(12, 18, 38, .05), 0 6px 18px rgba(30, 58, 138, .07);
  --shadow-lg: 0 2px 4px rgba(12, 18, 38, .05), 0 12px 28px rgba(30, 58, 138, .12), 0 34px 70px rgba(12, 18, 38, .10);
  --glow-brand: 0 10px 30px rgba(30, 58, 138, .32);

  --wrap: 940px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #080b14;
    --surface: #111624;
    --surface-2: #161c2d;
    --border: #222a3d;
    --border-strong: #313a52;

    --text: #eef1f9;
    --text-2: #bcc3d6;
    --text-3: #8b93a9;

    /* Lifted and slightly desaturated so the gradients do not glare against
       a near-black scaffold. */
    --grad-brand: linear-gradient(135deg, #0c1633 0%, #1b2a5c 48%, #2a1b5e 100%);
    --grad-brand-r: linear-gradient(90deg, #0c1633 0%, #1e2a5c 45%, #33205f 100%);
    --grad-cta: linear-gradient(135deg, #3b4fc4 0%, #5b52e8 100%);

    --amb-1: rgba(99, 92, 255, 0.16);
    --amb-2: rgba(234, 88, 12, 0.10);
    --amb-3: rgba(37, 65, 150, 0.18);

    --brand-soft: rgba(124, 116, 240, 0.16);
    --brand-soft-2: rgba(124, 116, 240, 0.08);

    --ok-bg: #0e271b;
    --ok-fg: #6ee7a5;
    --warn-bg: #2b2010;
    --warn-fg: #ffc46b;
    --info-bg: #101c31;
    --info-fg: #8ab4ff;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .38);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 44px rgba(0, 0, 0, .45);
    --glow-brand: 0 10px 34px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* Ambient gradient mesh, fixed so it does not scroll with the document.
     Layering radial washes over a solid base is what stops a long policy
     page from reading as a flat grey wall. */
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 10% -10%, var(--amb-1), transparent 60%),
    radial-gradient(900px 480px at 94% 2%, var(--amb-2), transparent 62%),
    radial-gradient(820px 560px at 50% 108%, var(--amb-3), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-500); }
@media (prefers-color-scheme: dark) { a { color: var(--brand-200); } }
a:hover { text-decoration: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------------------ top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Gradient hairline under the bar — the same ramp as the brand, so the header
   feels like the top of the page rather than a separate chrome element. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--grad-hairline);
  opacity: .55;
}

.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
  box-shadow: 0 2px 10px rgba(30, 58, 138, .30);
}

.brand-name {
  font-weight: 750;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--text);
  background: var(--grad-brand-r);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Only swap the solid colour for a transparent fill once the clip is known to
   work — otherwise the wordmark would render invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-name { -webkit-text-fill-color: transparent; }
}

.brand-tag {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 560px) { .brand-tag { display: none; } }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  text-align: center;
  padding: 44px 0 10px;
}

.hero-logo {
  width: 82px;
  height: 82px;
  border-radius: 22px;
  display: block;
  margin: 0 auto 20px;
  /* Tight brand-coloured ring + a wide ambient glow. Two shadow layers read as
     a gradient halo; an outline or box-shadow gradient alone would not. */
  box-shadow:
    0 0 0 1.5px var(--brand-200),
    0 0 0 5px color-mix(in srgb, var(--brand-soft) 60%, transparent),
    var(--glow-brand);
}

.hero h1 {
  margin: 0 0 12px;
  font-size: clamp(26px, 5.2vw, 38px);
  line-height: 1.22;
  letter-spacing: -.02em;
  font-weight: 780;
  color: var(--text);
}

/* The one place the deepest gradient is used for text. Falls back to a solid
   brand colour if background-clip is unsupported. */
.hero h1 {
  background: var(--grad-brand-r);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { -webkit-text-fill-color: currentColor; color: var(--brand-600); }
}

.hero .lede {
  margin: 0 auto;
  max-width: 660px;
  color: var(--text-2);
  font-size: 16px;
}

.hero-meta {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.hero-meta .dot { opacity: .5; }

/* --------------------------------------------------------- play store badge */

.playstore {
  margin: 26px auto 0;
  display: inline-block;
  text-decoration: none;
  outline-offset: 4px;
}

.playstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 9px 18px 9px 15px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.playstore:hover .playstore-badge { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }
.playstore svg { display: block; width: 24px; height: 26px; flex: none; }

.playstore-txt {
  display: block;
  text-align: left;
  line-height: 1.15;
  color: #fff;
}

.playstore-txt small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: .82;
}

.playstore-txt strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
}

.playstore-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}

/* --------------------------------------------------------------- lang toggle */

.langbar {
  display: flex;
  justify-content: center;
  margin: 24px 0 0;
}

.langbar button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  transition: all .18s ease;
}

.langbar button + button { border-left: none; }
.langbar button:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.langbar button:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }

.langbar button.active {
  background: var(--grad-cta);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, .32);
}

.langbar button:hover:not(.active) { border-color: var(--brand-400); color: var(--brand-500); }

/* ---------------------------------------------------------------- doc tabs */

.tabs {
  position: sticky;
  top: 62px;
  z-index: 40;
  display: flex;
  gap: 6px;
  margin: 28px 0 24px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.tabs::-webkit-scrollbar { display: none; }

.tabs a, .tabs button {
  flex: 1 0 auto;
  text-align: center;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.tabs a:hover, .tabs button:hover { background: var(--brand-soft-2); color: var(--brand-500); }

/* Active tab is the page's single strongest interactive signal, so it gets a
   solid gradient with white text rather than a faint tint. */
.tabs .active {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, .30);
}

.tabs a.active:hover, .tabs button.active:hover { background: var(--grad-cta); color: #fff; }

/* ---------------------------------------------------------------- the doc */

.doc {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px clamp(20px, 4vw, 44px) 38px;
  box-shadow: var(--shadow);
}

/* Gradient rule along the top edge of the document. Rounded on the top corners
   only, so no overflow:hidden is needed (which would create a scroll
   container and break the sticky tab bar's scroll-into-view offsets). */
.doc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--grad-brand);
}

.doc > h2 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -.01em;
}

.doc-meta {
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-3);
}

.doc h3 {
  margin: 34px 0 10px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  scroll-margin-top: 130px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

/* Section numbers get a soft gradient plate so a 12-section document stays
   scannable without the numeral shouting. */
.doc h3 .n {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  padding: 1px 8px;
  border-radius: 7px;
  color: var(--brand-500);
  background: var(--brand-soft);
}

@media (prefers-color-scheme: dark) {
  .doc h3 .n { color: var(--brand-200); }
}

.doc h4 {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.doc p { margin: 0 0 12px; color: var(--text-2); }
.doc p strong { color: var(--text); }
.doc p:last-child { margin-bottom: 0; }

.doc ul, .doc ol { margin: 0 0 12px; padding-left: 22px; color: var(--text-2); }
.doc li { margin-bottom: 7px; }
.doc li:last-child { margin-bottom: 0; }
.doc ul ul, .doc ol ol, .doc ul ol, .doc ol ul { margin-top: 7px; }

/* Gradient underline on body links. Implemented as a background on the
   underline box so it does not shift layout on hover. */
.doc a, .toc a, .foot-links a {
  text-decoration: none;
  background-image: linear-gradient(var(--brand-400), var(--brand-400));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .18s ease;
}

.doc a:hover, .toc a:hover, .foot-links a:hover {
  background-size: 100% 1.5px;
}

/* -------------------------------------------------------------- callouts */

.callout {
  position: relative;
  border: 1px solid var(--border);
  background: var(--brand-soft-2);
  border-radius: var(--radius);
  padding: 16px 18px 16px 20px;
  margin: 16px 0;
  overflow: hidden;
}

/* Gradient accent bar. A border-image gradient would be cleaner but is
   inconsistent across engines; a 3px pseudo bar is reliable everywhere. */
.callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad-cta);
}

.callout > :last-child { margin-bottom: 0; }
.callout .callout-title { font-weight: 700; color: var(--text); margin-bottom: 6px; display: block; font-size: 14.5px; }

/* Status variants keep a solid hue on the bar — the colour *is* the meaning
   here, so it must not be carried by a gradient. Only the wash is a gradient. */
.callout.warn { background: linear-gradient(180deg, var(--warn-bg), color-mix(in srgb, var(--warn-bg) 45%, var(--surface))); }
.callout.warn::before { background: var(--warn-bar); }

.callout.ok { background: linear-gradient(180deg, var(--ok-bg), color-mix(in srgb, var(--ok-bg) 45%, var(--surface))); }
.callout.ok::before { background: var(--ok-bar); }

.callout.info { background: linear-gradient(180deg, var(--info-bg), color-mix(in srgb, var(--info-bg) 45%, var(--surface))); }
.callout.info::before { background: var(--info-bar); }

/* ------------------------------------------------------------------ table */

.table-scroll { overflow-x: auto; margin: 14px 0 16px; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}

th, td {
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-2);
}

th {
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--brand-soft-2) 60%, var(--surface-2)));
  font-weight: 700;
  color: var(--text);
  font-size: 13px;
  letter-spacing: .01em;
}

/* Zebra rows make a 4-column data table readable without heavy borders. */
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--brand-soft-2) 45%, transparent); }

td:first-child { font-weight: 600; color: var(--text); }

/* --------------------------------------------------------------- pill/yesno */

.tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .01em;
  white-space: nowrap;
}

.tag.yes { background: var(--ok-bg); color: var(--ok-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok-bar) 30%, transparent); }
.tag.no { background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn-bar) 32%, transparent); }
.tag.opt { background: var(--info-bg); color: var(--info-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info-bar) 30%, transparent); }

/* --------------------------------------------------------------- toc list */

.toc { list-style: none; padding: 0; margin: 0 0 8px; }
.toc li { margin-bottom: 6px; }
.toc a { font-size: 14.5px; }

/* ------------------------------------------------------------ contact card */

.contact {
  margin-top: 26px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px clamp(20px, 4vw, 34px);
  box-shadow: var(--shadow-lg);
}

/* Soft brand glow in the corner so the contact block — the page's only
   conversion point — gets a little visual lift. */
.contact::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-soft) 0%, transparent 70%);
  pointer-events: none;
}

.contact h3 { margin: 0 0 4px; font-size: 17px; scroll-margin-top: 130px; }
.contact dl { margin: 14px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
.contact dt { font-weight: 700; color: var(--text); font-size: 14px; }
.contact dd { margin: 0; color: var(--text-2); font-size: 14.5px; }
.contact dd a { word-break: break-word; }

/* ----------------------------------------------------------------- footer */

.foot {
  position: relative;
  margin-top: 40px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}

/* Gradient hairline on top of the footer, echoing the topbar. A pseudo
   element is used rather than `border-image` because border-image applies to
   all four edges and behaves inconsistently on zero-width borders. */
.foot::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--grad-hairline);
  opacity: .5;
}

.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 10px; }
.foot-links a { font-weight: 600; }
.foot p { margin: 0 0 6px; }

/* ---------------------------------------------------------------- helpers */

.hidden { display: none !important; }
.mt0 { margin-top: 0 !important; }
.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 640px) {
  .doc { padding: 26px 18px 30px; border-radius: 14px; }
  .doc::before { border-radius: 14px 14px 0 0; }
  .doc h3 { font-size: 16.5px; margin-top: 28px; }
  .hero { padding: 30px 0 6px; }
  .hero-logo { width: 66px; height: 66px; border-radius: 18px; }
  .tabs { margin: 20px 0 18px; border-radius: 18px; }
  .contact dl { grid-template-columns: 1fr; gap: 2px 0; }
  .contact dd { margin-bottom: 10px; }
}

@media print {
  .topbar, .tabs, .langbar, .playstore, .foot { display: none !important; }
  body {
    background: #fff;
    /* background-attachment:fixed + gradients are meaningless on paper and
       some print engines drop them, leaving stray colour blocks. */
    background-image: none;
  }
  .doc, .contact { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
  .doc::before, .callout::before, .contact::before, .foot::before { display: none; }
  .doc h1, .hero h1 { -webkit-text-fill-color: #000; color: #000; background: none; }
  .doc h3 .n { color: #000; background: none; box-shadow: inset 0 0 0 1px #999; }
}