/* Shared styling for the document pages — pricing, contact and the four
   policies. These pages are read by two very different audiences: a payment
   gateway's compliance reviewer, who is scanning for specific headings, and a
   seller who is deciding whether to trust us. Both are served by plain
   typography and no cleverness, so this file is deliberately small and there
   is no JavaScript anywhere on it. Tokens are copied from index.html so the
   pages sit in the same design system without importing its whole stylesheet. */

:root {
  --ground:  #FBFAF7;
  --surface: #FFFFFF;
  --raised:  #F2F4F1;
  --ink:     #12211B;
  --muted:   #5F6E66;
  --hair:    #E3E7E2;
  --accent:  #047857;
  --accent-2:#DCEFE7;
  --warn-ink:#7C3E06;
  --warn-bg: #FDF3E3;
  --warn-line:#E4B778;
  --todo-ink:#7A2E0E;
  --todo-bg: #FEE9DC;
  --shadow:  0 1px 2px rgba(18,33,27,.05), 0 10px 30px -14px rgba(18,33,27,.2);
  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:  #0B120F;
    --surface: #131B17;
    --raised:  #1A241F;
    --ink:     #E9EFEB;
    --muted:   #8FA098;
    --hair:    #232F29;
    --accent:  #0EA97A;
    --accent-2:#0E2C22;
    --warn-ink:#F0C489;
    --warn-bg: #2A1E0C;
    --warn-line:#6B4A18;
    --todo-ink:#FFC6A3;
    --todo-bg: #35190C;
    --shadow:  0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --ground:  #0B120F;
  --surface: #131B17;
  --raised:  #1A241F;
  --ink:     #E9EFEB;
  --muted:   #8FA098;
  --hair:    #232F29;
  --accent:  #0EA97A;
  --accent-2:#0E2C22;
  --warn-ink:#F0C489;
  --warn-bg: #2A1E0C;
  --warn-line:#6B4A18;
  --todo-ink:#FFC6A3;
  --todo-bg: #35190C;
  --shadow:  0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }

/* ---- nav ------------------------------------------------------------ */
nav {
  border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 20;
  background: var(--ground);
}
nav .wrap { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand {
  display: flex; align-items: center; gap: 10px; font-weight: 600;
  margin-right: auto; color: var(--ink); text-decoration: none;
}
.brand svg { display: block; }
nav a.nl { color: var(--muted); text-decoration: none; font-size: .9rem; }
nav a.nl:hover { color: var(--ink); }
@media (max-width: 700px) { nav a.nl { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 9px; border-radius: 9px;
  padding: 11px 20px; font-size: .94rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--hair); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-sm { padding: 8px 15px; font-size: .875rem; }

/* ---- document body --------------------------------------------------- */
.doc { max-width: 760px; margin: 0 auto; padding: 62px 28px 40px; }
.eyebrow {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px;
}
.doc h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 2.9rem); line-height: 1.06;
  letter-spacing: -.025em; margin: 0 0 14px; text-wrap: balance;
}
.updated { color: var(--muted); font-size: .88rem; margin: 0 0 40px; }
.doc h2 {
  font-family: var(--display); font-weight: 700; font-size: 1.32rem;
  letter-spacing: -.015em; margin: 44px 0 10px; padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.doc h2:first-of-type { border-top: none; padding-top: 0; }
.doc h3 { font-size: 1.02rem; font-weight: 600; margin: 26px 0 6px; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc strong { font-weight: 600; }
.lede { font-size: 1.08rem; color: var(--muted); margin-bottom: 32px; }

/* ---- fact table (contact details, plan contents) --------------------- */
.facts {
  width: 100%; border-collapse: collapse; margin: 0 0 24px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 12px;
  overflow: hidden;
}
.facts th, .facts td {
  text-align: left; padding: 13px 16px; vertical-align: top;
  border-bottom: 1px solid var(--hair); font-size: .95rem;
}
.facts tr:last-child th, .facts tr:last-child td { border-bottom: none; }
.facts th {
  width: 38%; font-weight: 500; color: var(--muted);
  background: var(--raised); white-space: nowrap;
}
@media (max-width: 560px) {
  .facts th, .facts td { display: block; width: 100%; white-space: normal; }
  .facts th { border-bottom: none; padding-bottom: 2px; }
}

/* ---- callouts -------------------------------------------------------- */
.note {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 12px; padding: 18px 20px; margin: 0 0 24px;
}
.note p:last-child { margin-bottom: 0; }
.warn {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: var(--warn-ink); border-radius: 12px; padding: 18px 20px; margin: 0 0 24px;
}
.warn p:last-child { margin-bottom: 0; }

/* Placeholder for a detail only the owner can supply. Loud on purpose: one of
   these left on a live page is a failed payment-gateway review. */
.todo {
  background: var(--todo-bg); color: var(--todo-ink); border-radius: 5px;
  padding: 1px 7px; font-family: var(--mono); font-size: .84em;
  font-weight: 500;
}

/* ---- pricing --------------------------------------------------------- */
.plans { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin: 0 0 30px; }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 14px; padding: 24px; box-shadow: var(--shadow);
}
.plan.lead { border-color: var(--accent); }
.plan h3 { margin: 0 0 4px; font-size: 1.05rem; }
.price {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: 2.3rem; line-height: 1.1; margin: 10px 0 2px;
}
.price small { font-family: var(--body); font-weight: 500; font-size: .9rem; color: var(--muted); }
.was { color: var(--muted); text-decoration: line-through; font-size: 1rem; margin-left: 8px; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 0; }
.plan li { padding-left: 24px; position: relative; font-size: .94rem; }
.plan li::before {
  content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}

/* ---- footer ---------------------------------------------------------- */
footer {
  border-top: 1px solid var(--hair); margin-top: 70px; padding: 30px 0 60px;
  color: var(--muted); font-size: .85rem;
}
footer .row {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  justify-content: space-between;
}
footer .links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .disclaimer { margin-top: 20px; }
footer .disclaimer p { max-width: 78ch; font-size: .8rem; line-height: 1.6; margin: 0; }