/* Shared static-page system: guides, tools, and legal pages. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

@font-face {
  font-family: 'Proovd Display';
  src: url('/fonts/manrope-extra-bold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f7f5ef;
  --paper-deep: #ece8de;
  --ink: #20211e;
  --muted: #62645e;
  --line: #d7d3c8;
  --green: #187347;
  --green-deep: #115536;
  --green-wash: #e5f0e8;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Manrope, ui-sans-serif, system-ui, sans-serif;
  --display: 'Proovd Display', Manrope, ui-sans-serif, system-ui, sans-serif;
}

html { background: var(--paper); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  line-height: 1.72;
}
::selection { background: #b9dfc5; color: var(--ink); }
a { color: var(--green) !important; text-underline-offset: 0.18em; }
a:hover { color: var(--green-deep) !important; }

.proovd-nav {
  border-bottom: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--paper) 92%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--sans) !important;
}
.proovd-nav-inner {
  max-width: 76rem !important;
  height: 4.5rem !important;
  padding: 0 2rem !important;
}
.proovd-nav-brand {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: 1.28rem !important;
  letter-spacing: -0.055em;
}
.proovd-nav-brand::after {
  content: '.';
  color: var(--green);
}
.proovd-nav-links { gap: 0.5rem !important; }
.proovd-nav-links a,
.proovd-nav-mobile a {
  color: var(--muted) !important;
  border-radius: 0 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.015em;
}
.proovd-nav-links a:hover,
.proovd-nav-mobile a:hover {
  background: transparent !important;
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--green) !important;
  text-decoration-thickness: 2px !important;
}
.proovd-nav-cta {
  color: var(--paper) !important;
  background: var(--ink);
  padding: 0.54rem 0.8rem;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}
.proovd-nav-cta:hover { color: var(--paper) !important; background: var(--green-deep); text-decoration: none !important; }
.proovd-nav-mobile {
  border-top-color: var(--line) !important;
  background: var(--paper);
}
.proovd-lang { border-radius: 0 !important; border-color: var(--line) !important; background: var(--paper) !important; }

.container {
  width: min(100% - 3rem, 76rem) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(3.2rem, 7vw, 6.5rem) 0 5rem !important;
}
.back {
  display: inline-flex !important;
  align-items: center;
  gap: 0.48rem;
  margin-bottom: clamp(2.6rem, 5vw, 4.5rem) !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 0.75rem !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.back::before { content: '←'; color: var(--green); font-size: 1rem; line-height: 0; }
.back:hover { color: var(--ink) !important; text-decoration: none !important; }

h1, h2, h3 { color: var(--ink) !important; }
h1 {
  max-width: 15ch;
  font-family: var(--display) !important;
  font-size: clamp(2.8rem, 7vw, 5.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.98 !important;
  margin: 0 0 1.35rem !important;
  text-wrap: balance;
}
.sub {
  max-width: 43rem;
  color: var(--muted) !important;
  font-size: clamp(1rem, 1.7vw, 1.24rem) !important;
  line-height: 1.55 !important;
  margin-bottom: clamp(2.8rem, 6vw, 5rem) !important;
}
.destination { color: var(--muted) !important; max-width: 44rem; }
.section-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--green) !important;
  font-family: var(--mono) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  margin: clamp(3.2rem, 7vw, 5rem) 0 1.1rem !important;
  text-transform: uppercase;
}
.section-title::after { content: ''; height: 1px; flex: 1; background: var(--line); }

/* Blog index */
.article-list { max-width: 58rem; }
.article-list li {
  padding: 1.55rem 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.article-list li:first-child { border-top: 1px solid var(--line); }
.article-list a {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: clamp(1.15rem, 2.25vw, 1.65rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.article-list a:hover { color: var(--green) !important; text-decoration: none !important; }
.article-list .meta { color: var(--muted) !important; font-size: 0.9rem !important; margin: 0.55rem 0 0 !important; }
.tool-links { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; border: 1px solid var(--line); }
.tool-links a {
  min-height: 7rem;
  display: flex !important;
  align-items: flex-end;
  padding: 1rem !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.tool-links a:nth-child(3n) { border-right: 0 !important; }
.tool-links a:nth-last-child(-n + 3) { border-bottom: 0 !important; }
.tool-links a:hover { background: var(--green) !important; color: var(--paper) !important; }

/* Articles and policy reading surfaces */
article, .container > h1 + .updated, .container > h1 + .updated + p {
  max-width: 46rem;
}
html[data-i18n-page="privacy"] .container > :not(.back) { max-width: 46rem; }
article .meta, .updated { color: var(--muted) !important; font-family: var(--mono) !important; font-size: 0.8rem !important; letter-spacing: 0.015em; }
article p, .container > p, .container li { color: #43463f !important; }
article h2, .container > h2 {
  font-family: var(--display) !important;
  font-size: clamp(1.45rem, 3vw, 2.15rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  margin: 3.4rem 0 0.8rem !important;
}
article h3, .container > h3 {
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
}
code { border-radius: 0 !important; background: var(--paper-deep) !important; color: var(--ink) !important; font-family: var(--mono) !important; }
pre { border-radius: 0 !important; background: var(--ink) !important; border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--green); }
pre code { background: transparent !important; color: inherit !important; }
.cta, .tl\;dr, .internal-links {
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
}
.cta { border-color: var(--green) !important; }
.tl\;dr { background: var(--green-wash) !important; }
.tl\;dr h3, .internal-links h3 { color: var(--green-deep) !important; font-family: var(--mono) !important; font-size: 0.75rem !important; letter-spacing: 0.04em !important; text-transform: uppercase; }

/* Tools hub and individual utility pages */
.tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; border: 1px solid var(--line); }
.tool-card {
  min-height: 14rem;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.35rem !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.tool-card:nth-child(3n) { border-right: 0 !important; }
.tool-card:hover { background: var(--ink) !important; text-decoration: none !important; }
.tool-card h2 { color: var(--ink) !important; font-family: var(--display) !important; font-size: 1.55rem !important; font-weight: 800 !important; letter-spacing: -0.035em; line-height: 1.08; }
.tool-card p { color: var(--muted) !important; margin-top: 0.75rem !important; }
.tool-card:hover h2, .tool-card:hover p { color: var(--paper) !important; }
.tool-card .badge { align-self: flex-start; border-radius: 0 !important; background: var(--green-wash) !important; border: 0 !important; color: var(--green-deep) !important; font-family: var(--mono); }
.panel, .tool-box {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
}
.panel { margin-bottom: 1.25rem !important; }
.tool-box { text-align: left !important; }
.panel h2, .tool-box h2 {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: clamp(1.25rem, 2.5vw, 1.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
}
.panel label { color: var(--ink) !important; font-family: var(--mono) !important; font-size: 0.75rem !important; letter-spacing: 0.02em; text-transform: uppercase; }
.panel input, .panel select, .panel textarea, .waitlist-form input {
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.panel input:focus, .panel select:focus, .panel textarea:focus, .waitlist-form input:focus { border-color: var(--green) !important; outline: 2px solid var(--green) !important; outline-offset: 2px; }
.panel button, .panel .btn, .tool-box a, .actions .btn {
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-weight: 800 !important;
}
.btn-primary, a.btn-primary, .tool-box a {
  background: var(--green) !important;
  color: var(--paper) !important;
  border: 1px solid var(--green) !important;
}
.btn-primary:hover, a.btn-primary:hover, .tool-box a:hover { background: var(--green-deep) !important; color: var(--paper) !important; }
.btn-secondary, a.btn-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.btn-secondary:hover, a.btn-secondary:hover { background: var(--paper-deep) !important; color: var(--ink) !important; }
.stats div, .plat, .preview-img { border-radius: 0 !important; border-color: var(--line) !important; }
.stats div { background: var(--paper-deep) !important; }
.plat { background: transparent !important; }
.panel .hint, .panel .status, .panel .import-status { color: var(--muted) !important; }
.panel .hint.warn, .panel .status.err, .panel .import-status.err { color: #a9362c !important; }
.panel .hint.ok, .panel .status.ok, .panel .import-status.ok { color: var(--green-deep) !important; }
.waitlist {
  border-radius: 0 !important;
  border: 1px solid var(--ink) !important;
  background: var(--green) !important;
  color: var(--paper) !important;
}
.waitlist h2 { color: var(--paper) !important; font-family: var(--display) !important; letter-spacing: -0.04em; }
.waitlist p, .waitlist-note, .waitlist-note a { color: #dcf1e3 !important; }
.waitlist-form input, .waitlist-form button { border-radius: 0 !important; }
.waitlist-form button { background: var(--ink) !important; }
.footer-links { border-top: 1px solid var(--line); padding-top: 1.5rem; }

:focus-visible { outline: 2px solid var(--green) !important; outline-offset: 3px; }
.waitlist :focus-visible { outline-color: var(--paper) !important; }
@media (max-width: 960px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-card:nth-child(3n) { border-right: 1px solid var(--line) !important; }
  .tool-card:nth-child(2n) { border-right: 0 !important; }
  .tool-card:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 720px) {
  .proovd-nav-inner { padding: 0 1.25rem !important; }
  .container { width: min(100% - 2.5rem, 76rem) !important; }
  .tool-links, .tool-grid { grid-template-columns: 1fr !important; }
  .tool-card:last-child:nth-child(odd) { grid-column: auto !important; }
  .tool-links a, .tool-card { border-right: 0 !important; }
  .tool-links a:not(:last-child), .tool-card:not(:last-child) { border-bottom: 1px solid var(--line) !important; }
  .tool-links a:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line) !important; }
  .tool-links a:last-child, .tool-card:last-child { border-bottom: 0 !important; }
  pre { box-shadow: 5px 5px 0 var(--green); }
}