/* PureElevate — warm editorial system. Self-hosted type, no runtime network calls. */

@font-face {
  font-family: "Fraunces Var";
  src: url("../fonts/fraunces-variable.woff2?v=20260919") format("woff2-variations"), url("../fonts/fraunces-variable.woff2?v=20260919") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2?v=20260919") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-medium.woff2?v=20260919") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-semibold.woff2?v=20260919") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-bold.woff2?v=20260919") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jbmono-regular.woff2?v=20260919") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jbmono-medium.woff2?v=20260919") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root{
  --paper: #F6F1EA;
  --paper-2: #EFE7D9;   /* sand panel */
  --paper-3: #E7DCC8;   /* deeper sand, borders on sand panels */
  --ink: #1C1917;
  --ink-70: rgba(28,25,23,.70);
  --ink-55: rgba(28,25,23,.55);
  --ink-38: rgba(28,25,23,.38);
  --ink-16: rgba(28,25,23,.14);
  --ink-08: rgba(28,25,23,.08);
  --wine: #7A2336;
  --wine-dark: #5E1A29;
  --wine-tint: rgba(122,35,54,.10);
  --wine-tint-2: rgba(122,35,54,.06);
  --good: #3E5C3A;
  --bad: #8A2A2A;
  --paper-rgb: 246,241,234;

  --serif: "Fraunces Var", "Iowan Old Style", ui-serif, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 66ch;
  --radius: 2px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(56px, 9vw, 112px);

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #1A1613;
    --paper-2: #221C18;
    --paper-3: #2E2620;
    --ink: #F3ECE2;
    --ink-70: rgba(243,236,226,.72);
    --ink-55: rgba(243,236,226,.56);
    --ink-38: rgba(243,236,226,.38);
    --ink-16: rgba(243,236,226,.16);
    --ink-08: rgba(243,236,226,.08);
    --wine: #C7576D;
    --wine-dark: #E07E90;
    --wine-tint: rgba(199,87,109,.16);
    --wine-tint-2: rgba(199,87,109,.10);
    --good: #7FAE79;
    --bad: #D98080;
    --paper-rgb: 26,22,19;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper: #1A1613; --paper-2: #221C18; --paper-3: #2E2620;
  --ink: #F3ECE2; --ink-70: rgba(243,236,226,.72); --ink-55: rgba(243,236,226,.56);
  --ink-38: rgba(243,236,226,.38); --ink-16: rgba(243,236,226,.16); --ink-08: rgba(243,236,226,.08);
  --wine: #C7576D; --wine-dark: #E07E90; --wine-tint: rgba(199,87,109,.16); --wine-tint-2: rgba(199,87,109,.10);
  --good: #7FAE79; --bad: #D98080; --paper-rgb: 26,22,19;
  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ display: block; max-width: 100%; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
p{ margin: 0; }
a{ color: inherit; }
ul, ol{ margin: 0; padding: 0; }
li{ list-style: none; }
button{ font-family: inherit; }

::selection{ background: var(--wine); color: var(--paper); }

/* Focus ring, themed */
:focus-visible{
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 1px;
}
a:focus-visible, button:focus-visible{ outline-offset: 2px; }

/* Custom scrollbar (webkit) */
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: var(--paper); }
::-webkit-scrollbar-thumb{ background: var(--ink-16); border-radius: 8px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover{ background: var(--ink-38); }
* { scrollbar-color: var(--ink-16) var(--paper); scrollbar-width: thin; }

.tabular{ font-variant-numeric: tabular-nums; }
.mono{ font-family: var(--mono); letter-spacing: -0.01em; }

.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.measure{ max-width: var(--measure); }

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

.skip-link{
  position: absolute;
  left: var(--gutter);
  top: -48px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--radius);
  z-index: 200;
  transition: top .15s ease-out;
  font-weight: 600;
}
.skip-link:focus{ top: 12px; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--paper-rgb), .86);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--ink-08);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.wordmark{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark span{ color: var(--wine); }
.site-nav{
  display: none;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}
.site-nav a{
  text-decoration: none;
  font-size: .95rem;
  color: var(--ink-70);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover{ color: var(--ink); border-color: var(--ink-16); }
.header-cta{ display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
@media (min-width: 760px){
  .site-nav{ display: flex; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: .96rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .1s ease-out;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--wine); color: #FBF4F1; }
.btn-primary:hover{ background: var(--wine-dark); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink-16); }
.btn-ghost:hover{ border-color: var(--ink-38); background: var(--ink-08); }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity: .55; cursor: not-allowed; }

/* ---------- Hero ---------- */
.hero{
  padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 7vw, 72px);
}
.hero-grid{
  display: grid;
  gap: clamp(28px, 5vw, 48px);
  align-items: end;
}
.hero h1{
  font-size: clamp(2.5rem, 6.4vw, 4.4rem);
  line-height: 1.02;
  max-width: 15ch;
}
.hero h1 em{
  font-style: italic;
  color: var(--wine);
}
.hero .lede{
  margin-top: clamp(18px, 2.6vw, 26px);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--ink-70);
  max-width: 52ch;
}
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 3.4vw, 34px);
}
.hero-note{
  margin-top: 18px;
  font-size: .86rem;
  color: var(--ink-55);
}

/* ---------- Trust strip ---------- */
.trust-strip{
  border-top: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-08);
}
.trust-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink-08);
}
@media (min-width: 700px){
  .trust-list{ grid-template-columns: repeat(4, 1fr); }
}
.trust-item{
  background: var(--paper);
  padding: 22px var(--gutter);
  font-size: .92rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.trust-item svg{ flex: none; color: var(--wine); }

/* ---------- Section shell ---------- */
section{ padding: var(--section-y) 0; }
.section-head{ max-width: 44ch; margin-bottom: clamp(32px, 4.5vw, 52px); }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; }
.section-head p{ margin-top: 14px; color: var(--ink-70); font-size: 1.05rem; }
.rule{ border: 0; border-top: 1px solid var(--ink-08); margin: 0; }

/* ---------- Services ---------- */
.services{ background: var(--paper); }
.service-list{
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-16);
}
.service-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--ink-16);
}
@media (min-width: 700px){
  .service-row{ grid-template-columns: 220px 1fr; align-items: baseline; }
}
.service-row h3{ font-size: 1.2rem; font-weight: 500; }
.service-row p{ color: var(--ink-70); max-width: 58ch; }

/* ---------- Calculator ---------- */
.split{ background: var(--paper-2); border-top: 1px solid var(--paper-3); border-bottom: 1px solid var(--paper-3); }
.split-panel{
  background: var(--paper);
  border: 1px solid var(--ink-16);
  border-radius: 4px;
  padding: clamp(24px, 4vw, 44px);
}
.split-grid{
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}
@media (min-width: 860px){
  .split-grid{ grid-template-columns: 1fr 1fr; align-items: start; }
}
.field-label{
  display: block;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-55);
  margin-bottom: 10px;
}
.earnings-input-row{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ink-16);
  border-radius: 3px;
  padding: 6px 6px 6px 16px;
  background: var(--paper);
}
.earnings-input-row .cur{ font-family: var(--mono); font-size: 1.1rem; color: var(--ink-55); }
#earnings-number{
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  width: 100%;
  padding: 10px 0;
  min-width: 0;
}
#earnings-number:focus{ outline: none; }
.earnings-input-row:focus-within{ border-color: var(--wine); }
input[type="range"]{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--ink-16);
  margin-top: 20px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb{
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--wine);
  border: 3px solid var(--paper);
  box-shadow: 0 1px 2px var(--ink-38);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--wine); border: 3px solid var(--paper);
  box-shadow: 0 1px 2px var(--ink-38); cursor: pointer;
}
.range-scale{ display: flex; justify-content: space-between; margin-top: 8px; font-size: .78rem; color: var(--ink-38); font-family: var(--mono); }

.split-results{ margin-top: 28px; }
.result-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--ink-08);
  gap: 16px;
}
.result-row:first-child{ border-top: 0; }
.result-row .rr-label{ font-size: .96rem; }
.result-row .rr-label small{ display: block; color: var(--ink-55); font-size: .82rem; margin-top: 2px; }
.result-row .rr-value{ font-family: var(--mono); font-size: 1.5rem; font-weight: 500; white-space: nowrap; }
.result-row.you .rr-value{ color: var(--wine); }
.result-row.typical .rr-value{ color: var(--ink-55); }

.split-note{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-08);
  font-size: .86rem;
  color: var(--ink-55);
}
.split-note strong{ color: var(--ink-70); }

.split-static-table{ width: 100%; border-collapse: collapse; font-size: .95rem; }
.split-static-table th, .split-static-table td{ text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ink-16); font-family: var(--mono); }
.split-static-table th{ font-family: var(--sans); font-weight: 600; color: var(--ink-55); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Control list ---------- */
.control-list{
  border-top: 1px solid var(--ink-16);
}
.control-item{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ink-16);
}
@media (min-width: 700px){
  .control-item{ grid-template-columns: 260px 1fr; }
}
.control-item .term{ font-weight: 600; font-family: var(--serif); font-size: 1.08rem; }
.control-item .desc{ color: var(--ink-70); }
.control-item .desc .fig{ font-family: var(--mono); color: var(--wine); font-weight: 500; }

/* ---------- Comparison table ---------- */
.compare{ background: var(--paper-2); border-top: 1px solid var(--paper-3); border-bottom: 1px solid var(--paper-3); }
.compare-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: var(--paper);
  border: 1px solid var(--ink-16);
}
.compare-table th, .compare-table td{
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--ink-08);
  font-size: .95rem;
  vertical-align: top;
}
.compare-table thead th{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-55);
  border-bottom: 1px solid var(--ink-16);
  font-weight: 600;
}
.compare-table td:first-child{ color: var(--ink-70); }
.compare-table td.no{ color: var(--bad); }
.compare-table td.yes{ color: var(--good); font-weight: 600; }
.compare-table tbody tr:last-child td{ border-bottom: 0; }
.mark{ font-family: var(--mono); margin-right: 8px; }

/* ---------- How it works ---------- */
.steps{
  display: grid;
  gap: 0;
}
@media (min-width: 760px){
  .steps{ grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 48px); }
}
.step{
  padding: 24px 0;
  border-top: 1px solid var(--ink-16);
}
@media (min-width: 760px){
  .step{ border-top: 0; padding: 0; border-left: 1px solid var(--ink-16); padding-left: 24px; }
  .step:first-child{ border-left: 0; padding-left: 0; }
}
.step h3{ font-size: 1.15rem; font-weight: 500; margin-bottom: 10px; }
.step p{ color: var(--ink-70); }

/* ---------- Who we work with ---------- */
.fit-list{ display: grid; gap: 14px; margin-top: 20px; }
.fit-item{ display: flex; gap: 12px; align-items: flex-start; font-size: 1.02rem; }
.fit-item svg{ flex: none; margin-top: 3px; color: var(--wine); }

/* ---------- Apply form ---------- */
.apply{ background: var(--paper-2); border-top: 1px solid var(--paper-3); }
.apply-panel{
  background: var(--paper);
  border: 1px solid var(--ink-16);
  border-radius: 4px;
  padding: clamp(24px, 4vw, 48px);
}
.form-grid{ display: grid; gap: 18px; }
@media (min-width: 700px){
  .form-grid.two{ grid-template-columns: 1fr 1fr; }
}
.field{ display: flex; flex-direction: column; gap: 8px; }
.field label{ font-size: .88rem; font-weight: 600; color: var(--ink-70); }
.field .hint{ font-size: .8rem; color: var(--ink-55); }
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field select,
.field textarea{
  border: 1px solid var(--ink-16);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  min-height: 46px;
  width: 100%;
}
.field select{ appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231C1917' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.field textarea{ min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px var(--wine-tint); }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--bad); }
.field-error{ font-size: .82rem; color: var(--bad); display: none; }
.field.has-error .field-error{ display: block; }

.checks{ display: grid; gap: 12px; margin-top: 6px; }
.check-row{ display: flex; align-items: flex-start; gap: 12px; }
.check-row input[type="checkbox"]{
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  accent-color: var(--wine);
}
.check-row label{ font-size: .92rem; color: var(--ink-70); }
.check-row a{ color: var(--wine); text-decoration: underline; text-underline-offset: 2px; }

.hp-field{ position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status{ margin-top: 18px; padding: 14px 16px; border-radius: 3px; font-size: .92rem; display: none; }
.form-status.show{ display: block; }
.form-status.error{ background: rgba(138,42,42,.1); color: var(--bad); border: 1px solid rgba(138,42,42,.25); }
.form-status.info{ background: var(--wine-tint-2); color: var(--ink-70); border: 1px solid var(--wine-tint); }

.form-success{ text-align: left; padding: 8px 0; }
.form-success h3{ font-size: 1.5rem; margin-bottom: 10px; }
.form-success p{ color: var(--ink-70); max-width: 54ch; }

.apply-submit{ margin-top: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.apply-submit .fine{ font-size: .82rem; color: var(--ink-55); }

/* ---------- FAQ ---------- */
.faq-list{ border-top: 1px solid var(--ink-16); }
.faq-item{ border-bottom: 1px solid var(--ink-16); }
.faq-item summary{
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-weight: 600;
  font-size: 1.04rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .plus{
  flex: none;
  width: 22px; height: 22px;
  position: relative;
}
.faq-item summary .plus::before, .faq-item summary .plus::after{
  content: ""; position: absolute; background: var(--ink); border-radius: 2px;
}
.faq-item summary .plus::before{ left: 3px; right: 3px; top: 50%; height: 2px; transform: translateY(-1px); }
.faq-item summary .plus::after{ top: 3px; bottom: 3px; left: 50%; width: 2px; transform: translateX(-1px); transition: transform .18s ease-out; }
.faq-item[open] summary .plus::after{ transform: translateX(-1px) rotate(90deg); opacity: 0; }
.faq-item .faq-a{ padding: 0 0 22px; color: var(--ink-70); max-width: 66ch; }
.faq-item .faq-a p + p{ margin-top: 10px; }

@media (prefers-reduced-motion: no-preference){
  .faq-item summary .plus::after{ transition: transform .18s ease-out, opacity .18s ease-out; }
}

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--ink-16); padding: clamp(40px, 6vw, 64px) 0 32px; }
.footer-grid{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer-brand .wordmark{ font-size: 1.1rem; }
.footer-brand p{ margin-top: 12px; color: var(--ink-55); font-size: .9rem; max-width: 34ch; }
.footer-links{ display: flex; gap: clamp(32px, 6vw, 64px); flex-wrap: wrap; }
.footer-col h4{ font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-55); font-weight: 600; margin-bottom: 12px; }
.footer-col a{ display: block; text-decoration: none; color: var(--ink-70); font-size: .92rem; padding: 5px 0; }
.footer-col a:hover{ color: var(--ink); text-decoration: underline; }
.footer-bottom{ margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--ink-08); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .8rem; color: var(--ink-38); }

/* ---------- Simple page shell (agreement/privacy/imprint/thanks/404) ---------- */
.page-hero{ padding: clamp(48px, 8vw, 80px) 0 clamp(20px, 4vw, 32px); }
.page-hero h1{ font-size: clamp(2rem, 5vw, 3rem); max-width: 20ch; }
.page-hero .dek{ margin-top: 14px; color: var(--ink-70); font-size: 1.05rem; max-width: 60ch; }
.doc{ padding-bottom: clamp(48px, 8vw, 80px); }
.doc h2{ font-size: 1.35rem; margin-top: clamp(36px, 5vw, 52px); margin-bottom: 12px; }
.doc h2:first-child{ margin-top: 0; }
.doc p{ color: var(--ink-70); max-width: var(--measure); margin-top: 12px; }
.doc p:first-of-type{ margin-top: 0; }
.doc ul{ margin-top: 12px; max-width: var(--measure); }
.doc ul li{ list-style: none; padding-left: 22px; position: relative; color: var(--ink-70); margin-top: 8px; }
.doc ul li::before{ content: "—"; position: absolute; left: 0; color: var(--ink-38); }
.doc .callout{ background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 3px; padding: 18px 20px; margin-top: 24px; font-size: .92rem; color: var(--ink-70); max-width: var(--measure); }
.doc .callout strong{ color: var(--ink); }
.doc-meta{ font-size: .84rem; color: var(--ink-55); margin-top: 6px; }

.not-found{ min-height: 60vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(48px,10vw,96px) 0; }
.not-found .code{ font-family: var(--mono); color: var(--wine); font-size: 1.1rem; }
.not-found h1{ font-size: clamp(2rem, 5vw, 3rem); margin-top: 10px; }
.not-found p{ color: var(--ink-70); margin-top: 14px; max-width: 50ch; }
.not-found .btn{ margin-top: 24px; width: fit-content; }

/* thanks page */
.thanks-box{ max-width: 640px; }
.thanks-list{ margin-top: 28px; display: grid; gap: 14px; }
.thanks-list li{ display: flex; gap: 12px; color: var(--ink-70); }
.thanks-list li::before{ content: "—"; color: var(--ink-38); flex: none; }

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity: 0; transform: translateY(10px); transition: opacity .5s ease-out, transform .5s ease-out; }
  .reveal.in{ opacity: 1; transform: none; }
}