/*
 * RedactBot marketing stylesheet — shared by every public page.
 * Palette values are copied from the app's Dossier tokens
 * (apps/web/src/styles/tokens.css); the app CSS itself is never imported.
 * Light theme is a committed decision, matching the product.
 */

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/courier-prime-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/courier-prime-latin-700.woff2") format("woff2");
}

:root {
  --manila: #f3ecdc;   /* app background */
  --paper: #fbf7ec;    /* raised surface */
  --sunken: #ece3cd;
  --line: #ddd2b4;
  --line-strong: #cfc19d;
  --ink: #26221c;
  --ink-muted: #5f5847;
  --ink-subtle: #6f6754;
  --stamp: #c22a1e;    /* brand mark only — never a button */
  --font-brand: "Courier Prime", "Courier New", ui-monospace, monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 8px;
  --measure: 68rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--manila);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-brand);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin-top: 0; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }
a { color: inherit; }
main a:not(.btn) { text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
main a:not(.btn):hover { text-decoration-color: var(--ink); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem; }

/* ---- Header / nav ---- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.wordmark svg { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.nav-links a {
  padding: 0.35rem 0.7rem;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 6px;
}

.nav-links a:hover { background: var(--sunken); }

.btn {
  display: inline-block;
  padding: 0.55rem 1.15rem;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
}

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #3a352c; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--sunken); }
.nav-links .btn { padding: 0.4rem 0.95rem; }
.nav-links .btn:hover { background: #3a352c; }

/* ---- Sections ---- */

section, .section { padding: 3rem 0; }
.section-alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.hero { padding: 4.5rem 0 3.5rem; text-align: left; }
.hero p.lede { font-size: 1.15rem; color: var(--ink-muted); max-width: 44rem; }
.hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

.kicker {
  font-family: var(--font-brand);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 0.5rem;
}

.muted { color: var(--ink-muted); }
.small { font-size: 0.85rem; }

/* ---- Cards & grids ---- */

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
/* 18rem, not 14rem: it caps the row at three inside the 68rem measure, so the
   six-card value and industry grids land 3+3 instead of 4+2. */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
/* The top padding is room for .tier-flag, which hangs above its card's border
   (grid-4 carries the plan cards on both the homepage teaser and /pricing).
   Without it the badge is clipped by the section's own padding on mobile. */
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding-top: 0.75rem; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* ---- Hero product image ----
   Placeholder line art until a real Viewer screenshot exists; the frame is
   the same paper-on-manila card the rest of the page uses, so swapping the
   <svg> for an <img> needs no CSS change. */

.hero-media {
  max-width: 48rem;
  margin: 2.25rem 0 0;
  padding: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.hero-media svg, .hero-media img { display: block; width: 100%; height: auto; border-radius: 4px; }
.hero-media figcaption { margin: 0.55rem 0.25rem 0.15rem; font-size: 0.8rem; color: var(--ink-subtle); }

/* ---- Trust line ----
   Text only, deliberately: we have no customer logos to show and a row of
   invented ones would be the first untrue thing on the page. */

.trust {
  max-width: 50rem;
  margin: 2rem 0 0;
  font-family: var(--font-brand);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* ---- How it works ----
   Four steps, each with an inline line drawing of the artefact at that
   stage. The number is generated content, so the drawings stay decorative
   (aria-hidden) and the step order survives with images off. */

.how {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.how li {
  counter-increment: step;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
}
.how svg {
  display: block;
  height: 4rem;
  width: auto;
  margin-bottom: 0.9rem;
}
.how li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--stamp);
  margin-bottom: 0.35rem;
}
.how strong { display: block; margin-bottom: 0.25rem; }
.how p { margin: 0; font-size: 0.92rem; color: var(--ink-muted); }

/* ---- Pricing ---- */

.tier { display: flex; flex-direction: column; position: relative; }
.tier .price { font-family: var(--font-brand); font-size: 1.7rem; font-weight: 700; margin: 0.2rem 0 0.1rem; }
.tier .price small { font-size: 0.85rem; font-weight: 400; font-family: var(--font-body); color: var(--ink-muted); }
.tier ul { margin: 0.75rem 0 1.25rem; padding-left: 1.1rem; font-size: 0.92rem; color: var(--ink-muted); }
.tier ul li { margin-bottom: 0.3rem; }
.tier .btn { margin-top: auto; text-align: center; }
/* Lifted out of the flow and onto the card's top border. In flow it pushed
   the Pro card's heading down by its own height, so the four plan headings
   no longer lined up — the badge must not move the content it labels. */
.tier-flag {
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  margin: 0;
  background: var(--paper);
  font-family: var(--font-brand);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 1px solid var(--stamp);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
}

/* The featured card is marked by weight as well as by the badge, so the
   emphasis survives a grayscale print. */
.tier--featured { border: 2px solid var(--ink); }

/* ---- "Every plan includes" ----
   Two columns at full width, one when there is no room. The check is a
   glyph rather than a colour so the list reads without CSS colour support. */

.universal {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  font-size: 0.92rem;
  color: var(--ink-muted);
}
.universal li { position: relative; padding-left: 1.5rem; }
.universal li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--stamp);
}

/* ---- Closing call to action ---- */

.cta-band {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band h2 { margin-bottom: 0.4rem; }
.cta-band p { max-width: 44rem; color: var(--ink-muted); }
.cta-band .hero-ctas { margin-top: 1.25rem; }

/* ---- Tables ---- */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
table { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--font-brand); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; background: var(--sunken); }
tbody tr:last-child td { border-bottom: none; }
tbody th { font-weight: 600; }

/* ---- FAQ ---- */

details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
}
details summary { font-weight: 600; cursor: pointer; }
details p { margin: 0.7rem 0 0; color: var(--ink-muted); }

/* ---- Legal / prose pages ---- */

.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.2rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.35rem; }

.notice {
  background: var(--paper);
  border: 1.5px dashed var(--stamp);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
  font-size: 0.92rem;
  margin: 1.25rem 0 2rem;
}

/* ---- Footer ---- */

.site-footer {
  margin-top: 3rem;
  padding: 2rem 0 2.5rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.site-footer .wrap { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .copyright { margin-left: auto; }

img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 40rem) {
  .hero { padding: 3rem 0 2.5rem; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .site-footer .copyright { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- Analytics consent notice (_marketing/beacon.js) ----
   A notice, not a modal: it sits at the bottom, does not cover the content,
   does not trap focus, and does not block reading the page. Decline and
   Allow are the same size and weight — a consent choice that steers is not
   a consent choice. */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  max-width: var(--measure);
  margin: 0 auto 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgb(38 34 28 / 14%);
  animation: consent-in 160ms ease-out;
}

.consent__text {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.consent__actions { display: flex; gap: 0.5rem; }
.consent__actions .btn { font-size: 0.85rem; padding: 0.45rem 1rem; cursor: pointer; }
.consent__link { font-size: 0.8rem; color: var(--ink-subtle); }

@keyframes consent-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 40rem) {
  .consent { margin-inline: 0.5rem; }
  .consent__actions { flex: 1 1 auto; }
  .consent__actions .btn { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}