/* ---------------------------------------------------------------------------
   Kada — the standing pages (privacy, terms, refunds, delivery, support,
   account deletion, 404).

   These are plain HTML on purpose: the stores and the payment gateway point at
   fixed URLs here, so they must keep working with no build step. The look is
   the same design system the React site uses (web/src/styles/app.css) — the
   market flavor out of mobile/lib/theme/design_system.dart: deep teal chrome,
   lime accent, paper ground, Inter. Keep the two in step.
   --------------------------------------------------------------------------- */

:root {
  --teal:       #0C3D36;
  --teal-mid:   #2F6B5E;
  --lime:       #C0E85B;
  --lime-deep:  #9ECC3B;

  --paper:      #FDFDFB;
  --cream:      #F4E7D3;

  --ink:        #14201C;
  --ink-soft:   #5F6B66;
  --mute:       #9BA5A0;

  --line:       #E6E9E3;
  --line-soft:  #F1F3EE;
  --red:        #E14B4B;

  --shell: 14px;
  --radius-shell: 34px;
  --wrap: 1180px;
  --prose: 44rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::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: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.032em; line-height: 1.15; font-weight: 600; }

::selection { background: var(--lime); color: var(--ink); }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; z-index: 10; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--lime-deep); outline-offset: 3px; border-radius: 6px;
}

/* ---------- the teal panel: header + page title read as one block ---------- */

.site-head {
  margin: var(--shell) var(--shell) 0;
  background: var(--teal);
  color: var(--paper);
  border-radius: var(--radius-shell) var(--radius-shell) 0 0;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0 4px;
}

.brand { display: inline-flex; align-items: center; }
.brand img { height: 29px; width: auto; }
.brand:hover { text-decoration: none; }

.nav {
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(253, 253, 251, 0.07);
  box-shadow: inset 0 0 0 1px rgba(253, 253, 251, 0.09);
}
.nav a {
  padding: 9px 17px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 500;
  color: rgba(253, 253, 251, 0.72);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav a:hover { color: var(--paper); background: rgba(253, 253, 251, 0.08); text-decoration: none; }

.doc {
  margin: 0 var(--shell) 56px;
  padding: 52px 0 62px;
  /* flat teal, same as .site-head above it — a gradient starting here draws a
     visible seam across the join between the two blocks */
  background: var(--teal);
  color: var(--paper);
  border-radius: 0 0 var(--radius-shell) var(--radius-shell);
}
.doc-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  max-width: 20ch;
}
.doc-meta {
  margin: 18px 0 0;
  color: rgba(253, 253, 251, 0.58);
  font-size: 1rem;
  max-width: var(--prose);
}
.doc-meta a { color: var(--lime); }

/* ---------- the prose ---------- */

.doc-body { padding-bottom: 24px; }
.doc-body > * { max-width: var(--prose); }

.doc-body h2 {
  font-size: 1.42rem;
  font-weight: 700;
  margin: 56px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.doc-body > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.doc-body h3 { font-size: 1.06rem; font-weight: 600; margin: 30px 0 8px; }

.doc-body p, .doc-body ul, .doc-body ol { margin: 0 0 16px; color: var(--ink-soft); }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body ul, .doc-body ol { padding-left: 1.15rem; }
.doc-body li { margin-bottom: 8px; }
.doc-body li::marker { color: var(--mute); }
.doc-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.doc-body a:hover { color: var(--ink); }

.lede { font-size: 1.06rem; color: var(--ink-soft); }

.eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mute);
}

/* ---------- tables ---------- */

table {
  width: 100%; max-width: var(--prose);
  border-collapse: collapse;
  margin: 4px 0 28px;
  font-size: 0.95rem;
}
thead th {
  text-align: left;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--line);
}
tbody td {
  padding: 15px 16px 15px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: top;
}
tbody td:first-child { color: var(--ink); font-weight: 500; }

/* the label column of the definition-style tables (support: business details) */
tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  padding: 15px 28px 15px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  white-space: nowrap;
}

/* ---------- callout, contents, buttons ---------- */

.callout {
  max-width: var(--prose);
  margin: 0 0 32px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime-deep);
  border-radius: 4px 14px 14px 4px;
}
.callout p { margin: 0; color: var(--ink-soft); }
.callout strong { color: var(--ink); }

.toc {
  max-width: var(--prose);
  margin: 0 0 40px;
  padding: 22px 24px;
  background: var(--line-soft);
  border-radius: 16px;
}
.toc h2 {
  font-size: 0.72rem !important; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute); margin: 0 0 12px !important; border: 0 !important; padding: 0 !important;
}
.toc ul, .toc ol { columns: 2; column-gap: 36px; margin: 0; padding-left: 1.3rem; }
.toc ul { list-style: none; padding-left: 0; }
.toc li::marker { color: var(--mute); font-size: 0.85em; }
.toc li { margin-bottom: 7px; break-inside: avoid; }
.toc a { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 34px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; padding: 14px 26px;
  font-weight: 600; font-size: 0.95rem;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--teal); }
.btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* Anything still to be filled in before publishing. */
.todo {
  background: #FFF6D6; color: #6B4A00;
  padding: 1px 7px; border-radius: 5px;
  font-size: 0.92em; font-weight: 500;
}

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

.site-foot { padding: 78px 0 40px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.foot-grid .brand img { height: 34px; }
.foot-grid p { margin: 18px 0 0; color: var(--ink-soft); max-width: 21rem; font-size: 0.94rem; }
.foot-mal { margin-top: 14px !important; font-size: 0.85rem; color: var(--mute) !important; }
.foot-mal b, .foot-mal strong { font-weight: 600; color: var(--ink-soft); }
.site-foot h4 {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute); font-weight: 600; margin-bottom: 16px;
}
.site-foot ul { margin: 0; padding: 0; list-style: none; }
.site-foot li { margin-bottom: 10px; }
.site-foot li a { color: var(--ink-soft); font-size: 0.94rem; }
.site-foot li a:hover { color: var(--ink); text-decoration: none; }
.site-foot address {
  font-style: normal; margin-top: 14px;
  color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5;
}
.foot-bar {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: var(--mute); font-size: 0.85rem;
}

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

@media (max-width: 820px) {
  :root { --shell: 8px; --radius-shell: 26px; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .nav-hide { display: none; }
  .nav a { padding: 9px 13px; font-size: 0.86rem; }
  .doc { padding: 44px 0 56px; }
  .doc-body h2 { margin-top: 44px; }
  .toc ul { columns: 1; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
  .site-foot { padding-top: 56px; }
}

@media (max-width: 520px) {
  .site-head .wrap { flex-wrap: wrap; gap: 14px; }
  .nav { width: 100%; justify-content: space-between; }
  table, thead, tbody, tr, td, th { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  tbody td { border: 0; padding: 3px 0; }
  tbody td:first-child { font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}