/* Worti — site styles.
   Follows docs/product/design-constitution.md: typography and spacing carry the
   hierarchy, the green marks few things, nothing is decorative. No gradients, no
   glows, no shadows, no card-per-paragraph. */

:root {
  --ink: #1D2B26;
  --ink-quiet: #5B6B65;
  --paper: #F7F2E8;
  --green: #1D5C47;
  --green-deep: #1E4A3D;
  --cream: #F8F5ED;
  --rule: #E2DCCE;

  /* DC §8 spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ECE7DB;
    --ink-quiet: #9AA8A2;
    --paper: #14201C;
    --green: #3FA885;
    --green-deep: #14201C;
    --cream: #ECE7DB;
    --rule: #2A3A34;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* The one editorial voice — New York on Apple devices, a serif everywhere else.
   Used for the wordmark and page titles only; never for controls or dense text. */
.serif {
  font-family: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---- masthead ---------------------------------------------------------- */

header.mast { padding: var(--s-12) 0 0; }

.brand {
  display: flex; align-items: center; gap: var(--s-3);
  text-decoration: none; color: inherit;
}
.brand img { width: 40px; height: 40px; border-radius: 9px; display: block; }
.brand span { font-size: 21px; }

nav.top { margin-left: auto; display: flex; gap: var(--s-4); font-size: 15px; }
nav.top a { color: var(--ink-quiet); text-decoration: none; }
nav.top a:hover { color: var(--green); }

.mast-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

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

h1.hero {
  font-size: clamp(38px, 7vw, 60px);
  line-height: 1.08;
  margin: var(--s-16) 0 var(--s-4);
  max-width: 15ch;
}

p.deck {
  font-size: clamp(19px, 2.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-quiet);
  margin: 0 0 var(--s-8);
  max-width: 44ch;
}

/* ---- the conversion demo — the product's own composition, in HTML ------- */

.demo {
  margin: var(--s-12) 0;
  padding: var(--s-8) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.slot + .slot { margin-top: var(--s-6); }
.slot .role {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.slot .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 500; color: var(--green); margin-left: var(--s-3);
}
.slot .amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
  margin-top: var(--s-1);
}
.slot.local  .amount { font-size: clamp(34px, 6vw, 44px); font-weight: 600; }
.slot.home   .amount { font-size: clamp(24px, 4vw, 28px); font-weight: 500; }
.slot.ref    .amount { font-size: clamp(20px, 3.4vw, 23px); font-weight: 400; color: var(--ink-quiet); }

.demo .note { font-size: 14px; color: var(--ink-quiet); margin: var(--s-6) 0 0; }

/* ---- sections ---------------------------------------------------------- */

section { margin: var(--s-16) 0; }

h2 { font-size: clamp(26px, 3.6vw, 32px); line-height: 1.2; margin: 0 0 var(--s-4); }
h3 { font-size: 19px; margin: var(--s-8) 0 var(--s-2); }

p { margin: 0 0 var(--s-4); max-width: 60ch; }

ul.plain { list-style: none; padding: 0; margin: 0 0 var(--s-4); max-width: 60ch; }
ul.plain li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
ul.plain li:last-child { border-bottom: 0; }
ul.plain .lede { display: block; font-weight: 600; }
ul.plain .sub { display: block; color: var(--ink-quiet); font-size: 15px; }

.price {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-8);
  margin-top: var(--s-12);
}
.price .figure { font-size: clamp(30px, 5vw, 40px); font-weight: 600; letter-spacing: -0.02em; }
.price .terms { color: var(--ink-quiet); }

/* ---- long-form (policy / support) -------------------------------------- */

.doc h1 { font-size: clamp(32px, 5vw, 42px); line-height: 1.15; margin: var(--s-12) 0 var(--s-2); }
.doc .updated { color: var(--ink-quiet); font-size: 15px; margin: 0 0 var(--s-12); }
.doc h2 { font-size: 21px; margin: var(--s-12) 0 var(--s-3); }
.doc p, .doc li { color: var(--ink); }
.doc ul { padding-left: 1.2em; max-width: 60ch; }
.doc li { margin-bottom: var(--s-2); }
.doc strong { font-weight: 600; }

.callout {
  border-left: 2px solid var(--green);
  padding-left: var(--s-4);
  margin: var(--s-8) 0;
  color: var(--ink-quiet);
}

/* ---- language toggle --------------------------------------------------- */

.lang { margin-left: auto; display: flex; gap: var(--s-1); font-size: 14px; }
.lang button {
  font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--ink-quiet); padding: var(--s-1) var(--s-2); border-radius: 8px;
}
.lang button[aria-pressed="true"] { color: var(--green); font-weight: 600; }
.lang button:hover { color: var(--green); }

[data-lang] { display: none; }
html[lang="en"] [data-lang="en"] { display: block; }
html[lang="es"] [data-lang="es"] { display: block; }
html[lang="en"] li[data-lang="en"], html[lang="es"] li[data-lang="es"] { display: list-item; }
html[lang="en"] span[data-lang="en"], html[lang="es"] span[data-lang="es"],
html[lang="en"] a[data-lang="en"],   html[lang="es"] a[data-lang="es"] { display: inline; }

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

footer {
  margin-top: var(--s-24);
  padding: var(--s-8) 0 var(--s-16);
  border-top: 1px solid var(--rule);
  color: var(--ink-quiet);
  font-size: 15px;
}
footer a { color: var(--ink-quiet); }
footer nav { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }

a { color: var(--green); }

/* ---- accessibility ----------------------------------------------------- */

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}