/* Styles for the static answer pages (/how-it-works, /faq, /vs-alternatives,
   /pricing). These pages are plain HTML on purpose: the homepage is a
   client-rendered scroll film, so it ships no prose that a non-rendering
   crawler can read. These carry the words.

   ponytail: hand-written CSS, not a second Tailwind build. Four static pages
   do not justify a build step of their own.

   The @font-face block is the same self-hosted subset as src/fonts.css, cut to
   the four weights these pages use. Same reason as there: no visitor IP reaches
   fonts.gstatic.com. If you change the font files, change both. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 560;
  font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
}

:root {
  --night: #17130e;
  --night-2: #241d15;
  --cream: #f3e9d8;
  --cream-dim: rgba(243, 233, 216, 0.66);
  --cream-faint: rgba(243, 233, 216, 0.32);
  --line: rgba(243, 233, 216, 0.14);
  --terra: #c4744e;
  --terra-bright: #d98a5f;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html {
  background: var(--night);
  color: var(--cream);
  scrollbar-color: #9c5230 var(--night);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--terra);
  color: var(--night);
  padding: 0.6rem 1rem;
  border-radius: 6px;
}

/* ---------- chrome ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 5vw, 3rem);
  background: rgba(23, 19, 14, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top img { height: 26px; width: auto; display: block; }
.top a { text-decoration: none; }
.cta {
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: var(--terra);
  color: #17130e;
  white-space: nowrap;
}
.cta:hover { background: var(--terra-bright); }

/* ---------- layout ---------- */

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 5vw, 3rem) 4rem;
}

.crumb {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 0 0 1.4rem;
}
.crumb a { color: var(--cream-dim); }

h1 {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

/* The answer-first paragraph. Every page states the answer here, in full
   sentences, before any build-up. This is the block an answer engine quotes. */
.answer {
  font-size: 1.19rem;
  line-height: 1.6;
  color: var(--cream);
  border-left: 2px solid var(--terra);
  padding-left: 1.1rem;
  margin: 0 0 2.6rem;
}

h2 {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 2.8rem 0 0.85rem;
}

h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.03rem;
  margin: 1.9rem 0 0.5rem;
}

p { margin: 0 0 1.05rem; color: var(--cream-dim); }
p strong, li strong { color: var(--cream); font-weight: 600; }
main > p:first-of-type { color: var(--cream); }

a { color: var(--terra-bright); }
a:hover { color: var(--terra); }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.25rem; color: var(--cream-dim); }
li { margin-bottom: 0.45rem; }

/* ---------- components ---------- */

.steps { list-style: none; padding: 0; counter-reset: s; }
.steps > li {
  counter-increment: s;
  position: relative;
  padding-left: 2.9rem;
  margin-bottom: 1.5rem;
}
.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--terra);
  color: var(--terra-bright);
  font-family: var(--serif);
  font-size: 0.95rem;
}

.msg {
  margin: 1.6rem 0 0.6rem;
  padding: 1.15rem 1.25rem;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.96rem;
  line-height: 1.55;
}
.msg p { margin: 0 0 0.7rem; }
.msg p:last-child { margin: 0; }
.msg .why { color: var(--cream); }
.msg .opt { color: var(--cream-faint); font-size: 0.85rem; }

figcaption {
  font-size: 0.88rem;
  color: var(--cream-faint);
  margin-top: 0.5rem;
}
figure { margin: 0 0 1.6rem; }

/* The 5-column comparison does not fit the 44rem reading measure. It scrolls
   inside .wrap on narrow screens, and breaks out past the measure on wide ones
   so the last column is not permanently off-screen. */
.wrap { overflow-x: auto; margin: 0 0 1.4rem; }
@media (min-width: 62rem) {
  .wrap { width: 56rem; margin-left: -6rem; }
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 40rem;
  font-size: 0.93rem;
}
tbody th { width: 11rem; }
th, td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--cream-dim);
}
th {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
tbody th { text-transform: none; letter-spacing: 0; font-size: 0.93rem; }

details {
  border-bottom: 1px solid var(--line);
  padding: 0.95rem 0;
}
summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--cream);
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--terra); font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: '\2212'; }
details > *:not(summary) { margin-top: 0.75rem; }

.note {
  font-size: 0.9rem;
  color: var(--cream-faint);
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  margin-top: 2.8rem;
}
.note a { color: var(--cream-dim); }
.note ol { font-size: 0.9rem; color: var(--cream-faint); }

.next {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
}
.next a {
  display: block;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--cream-dim);
}
.next a:hover { border-color: var(--terra); color: var(--cream); }

footer {
  border-top: 1px solid var(--line);
  padding: 2rem clamp(1rem, 5vw, 3rem);
  font-size: 0.88rem;
  color: var(--cream-faint);
}
footer nav {
  max-width: 44rem;
  margin: 0 auto 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}
footer p { max-width: 44rem; margin: 0 auto; color: var(--cream-faint); }

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