/* ============================================
   ReplyStamp — design system
   Concept: the product's own name, taken literally. Reviews arrive like
   mail; replies go out ink-stamped and sent. Ledger structure, postal
   materials, one real ink-stamp signature mark — no gradients, no glass,
   no generic SaaS template.
   ============================================ */

:root {
  /* Color — 5 named values, used deliberately, not decoratively */
  --ink: #16233F;           /* primary dark: headings, nav, footer, tool panel */
  --ink-70: #16233FB3;
  --ink-40: #16233F66;
  --ink-15: #16233F26;
  --ink-12: #16233F1f;
  --ink-08: #16233F14;
  --paper: #FCFBF8;         /* background */
  --paper-dim: #F5F2EA;     /* secondary surface, alt sections */
  --white: #FFFFFF;         /* input fields and mini-card surfaces only */
  --kraft: #D9C9A3;         /* dividers, borders, tertiary surface */
  --kraft-dim: #EDE4CB;
  --kraft-mid: #EFE6D1;
  --stamp: #A8342A;         /* the one accent — CTAs, ink marks */
  --stamp-dark: #832720;
  --stamp-shadow: #A8342A4d;
  --stamp-light: #E8A79F;   /* error text on the dark tool panel only */
  --brass: #B08D3E;         /* reserved for the signature postmark only */

  /* Paper tints, for type and rules on the dark surfaces */
  --paper-70: #FCFBF8B3;
  --paper-60: #FCFBF899;
  --paper-35: #FCFBF859;
  --paper-24: #FCFBF83d;
  --paper-20: #FCFBF833;
  --paper-15: #FCFBF826;
  --paper-12: #FCFBF81f;
  --paper-08: #FCFBF814;

  /* Type */
  --font-display: "Zilla Slab", Georgia, serif;
  --font-body: "Public Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Engraved hatch textures, baked from the design's pattern generator at its
     "subtle" default. Applied through ::before overlays so they never sit in
     an element whose innerHTML gets replaced at runtime. */
  --tex-section: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%3E%3Cg%20stroke%3D'%2316233F'%20stroke-width%3D'0.55'%20fill%3D'none'%20opacity%3D'0.035'%3E%3Cpath%20d%3D'M0%200%20L48%2048'%2F%3E%3Cpath%20d%3D'M48%200%20L0%2048'%2F%3E%3Cpath%20d%3D'M24%200%20L48%2024'%2F%3E%3Cpath%20d%3D'M0%2024%20L24%2048'%2F%3E%3Cpath%20d%3D'M24%200%20L0%2024'%2F%3E%3Cpath%20d%3D'M48%2024%20L24%2048'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tex-tool: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%3E%3Cg%20stroke%3D'%2316233F'%20stroke-width%3D'0.55'%20fill%3D'none'%20opacity%3D'0.018'%3E%3Cpath%20d%3D'M0%200%20L48%2048'%2F%3E%3Cpath%20d%3D'M48%200%20L0%2048'%2F%3E%3Cpath%20d%3D'M24%200%20L48%2024'%2F%3E%3Cpath%20d%3D'M0%2024%20L24%2048'%2F%3E%3Cpath%20d%3D'M24%200%20L0%2024'%2F%3E%3Cpath%20d%3D'M48%2024%20L24%2048'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tex-footer: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%3E%3Cg%20stroke%3D'%23FCFBF8'%20stroke-width%3D'1.4'%20fill%3D'none'%20opacity%3D'0.08'%3E%3Cpath%20d%3D'M0%200%20L48%2048'%2F%3E%3Cpath%20d%3D'M48%200%20L0%2048'%2F%3E%3Cpath%20d%3D'M24%200%20L48%2024'%2F%3E%3Cpath%20d%3D'M0%2024%20L24%2048'%2F%3E%3Cpath%20d%3D'M24%200%20L0%2024'%2F%3E%3Cpath%20d%3D'M48%2024%20L24%2048'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tex-wave: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'32'%3E%3Cg%20stroke%3D'%2316233F'%20stroke-width%3D'0.6'%20fill%3D'none'%20opacity%3D'0.045'%3E%3Cpath%20d%3D'M0%2C6%20Q10%2C-1%2020%2C6%20Q30%2C13%2040%2C6'%2F%3E%3Cpath%20d%3D'M0%2C16%20Q10%2C9%2020%2C16%20Q30%2C23%2040%2C16'%2F%3E%3Cpath%20d%3D'M0%2C26%20Q10%2C19%2020%2C26%20Q30%2C33%2040%2C26'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  --fade-v: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  --fade-footer: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.12; }
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 var(--space-2); max-width: 62ch; }

a { color: inherit; }

::placeholder { color: var(--ink-40); }

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8em 1.5em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}
.btn:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-gold, .btn-primary {
  background: var(--stamp);
  color: var(--paper);
  border-color: var(--stamp);
}
.btn-gold:hover, .btn-primary:hover { background: var(--stamp-dark); border-color: var(--stamp-dark); }
.btn-primary { box-shadow: 0 3px 10px var(--stamp-shadow); }
.btn-primary:hover { transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-15);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--ink-08); }

.btn-sm { padding: 0.5em 1em; font-size: 0.85rem; }
.btn-block { width: 100%; }

.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Nav ---------- */

.nav {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 16px #00000026;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--paper);
}
.logo-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  object-fit: contain;
  /* the mark is drawn as dark ink on paper; invert it for the dark bars */
  filter: invert(1) brightness(1.6);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a:not(.btn) {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--paper-70);
  transition: color 150ms ease-out;
}
.nav-links a:not(.btn):hover { color: var(--paper); }
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  .nav-toggle span { width: 22px; height: 2px; background: var(--paper); display: block; }
  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--paper-15);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-2) 24px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { width: 100%; padding: 0.7em 0; border-bottom: 1px solid var(--paper-12); }
  .nav-links a.btn { margin-top: var(--space-2); border-bottom: none; }
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-6) 0 3rem;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

/* the franked edge across the top of the page */
.hero-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(115deg,
    var(--stamp) 0 14px,
    var(--paper) 14px 26px,
    var(--ink) 26px 40px,
    var(--paper) 40px 52px);
}

.hero-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.decor-env, .decor-dot {
  position: absolute;
  border: 1px solid var(--ink-15);
  background: repeating-linear-gradient(135deg, #16233F0f 0 6px, var(--paper) 6px 12px);
}
.decor-env { width: 200px; height: 132px; border-radius: 10px; opacity: 0.42; }
.decor-env-a { right: -20px; top: 6%; transform: rotate(3deg); }
.decor-env-b { right: 150px; bottom: 2%; transform: rotate(-4deg); opacity: 0.4; }
.decor-dot {
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, #16233F14 0 5px, var(--paper) 5px 10px);
}
.decor-dot-a { right: 24%; top: 9%; width: 64px; height: 64px; opacity: 0.42; }
.decor-dot-b { right: 6%; bottom: 20%; width: 52px; height: 52px; opacity: 0.4; }

.decor-letter {
  position: absolute;
  left: -56px;
  top: 2%;
  width: 190px;
  height: 70px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-15);
  background: var(--paper);
  opacity: 0.4;
  padding: 10px 12px;
  transform: rotate(-3deg);
}
.decor-letter span { display: block; height: 7px; border-radius: var(--radius-sm); margin-bottom: 7px; }
.decor-letter span:nth-child(1) { width: 70%; background: var(--ink-12); }
.decor-letter span:nth-child(2) { width: 90%; background: #16233F1a; }
.decor-letter span:nth-child(3) { width: 45%; background: var(--ink-08); margin-bottom: 0; }

.decor-wave {
  position: absolute;
  left: 0;
  top: 76px;
  right: 44%;
  height: 230px;
  z-index: 1;
  background-image: var(--tex-wave);
  background-repeat: repeat;
  background-size: 112px 72px;
  -webkit-mask-image: linear-gradient(105deg, black 0%, black 62%, transparent 96%);
  mask-image: linear-gradient(105deg, black 0%, black 62%, transparent 96%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  align-items: start;
  position: relative;
  z-index: 2;
}
.hero-copy { padding-top: var(--space-1); }
.hero-sub { font-size: 1.1rem; color: var(--ink-70); margin-top: var(--space-2); }
.hero-cta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.hero-note {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-40);
  letter-spacing: 0.02em;
}

.hero-steps {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ink-12);
  flex-wrap: wrap;
}
.hero-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}
.hero-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px dashed var(--stamp);
  color: var(--stamp);
  font-size: 0.68rem;
}
.hero-step-arrow { color: #16233F4d; font-size: 0.9rem; }

.card-stack { position: relative; padding: var(--space-3) 0; }
.reply-card {
  background: var(--paper);
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  position: relative;
  box-shadow: 0 1px 0 var(--ink-08);
}
.card-stack .reply-card + .reply-card { margin-top: -14px; }
.reply-card.c1 { transform: rotate(-1.2deg); }
.reply-card.c2 { transform: rotate(0.8deg); z-index: 1; background: var(--paper-dim); }
.reply-card.c3 { transform: rotate(-0.5deg); z-index: 2; }
.card-stars { font-size: 0.95rem; letter-spacing: 0.05em; color: var(--brass); margin-bottom: 0.4em; }
.card-stars-low { color: #c4463a; }
.card-review { font-style: italic; color: var(--ink-70); font-size: 0.92rem; margin-bottom: 0.5em; padding-right: 60px; }
.card-reply { font-size: 0.92rem; margin: 0; }
.reply-card.c1 .card-reply { padding-right: 62px; }

.stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px dashed var(--stamp);
  color: var(--stamp);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transform: rotate(-10deg);
  line-height: 1.2;
  text-align: center;
}

/* the one signature mark — a real ink postmark */
.postmark {
  position: absolute;
  width: 82px;
  height: 82px;
  opacity: 0.85;
}
.postmark-hero {
  bottom: -30px;
  right: -26px;
  z-index: 3;
  transform: rotate(-9deg);
  pointer-events: none;
}

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

.section { padding: var(--space-6) 0; }
.section-alt { background: var(--paper-dim); position: relative; }
.section-alt > .wrap { position: relative; z-index: 1; }

/* engraved hatch, faded top and bottom so sections still butt together cleanly */
.section-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--tex-section);
  background-repeat: repeat;
  -webkit-mask-image: var(--fade-v);
  mask-image: var(--fade-v);
}

.section-how { padding: var(--space-6) 0 3rem; }
.section-agencies { padding: 3rem 0; }

.section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: var(--space-1);
}

.section-head {
  max-width: 640px;
  margin: 0 auto var(--space-4);
  text-align: center;
  padding-top: var(--space-3);
  position: relative;
}
.section-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--kraft);
}
.section-head h2 { margin-bottom: var(--space-1); }
.section-head p { margin: 0 auto; }

.section-head-left {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.section-head-left::before { left: 0; transform: none; }
.section-head-left p { margin: 0; max-width: 56ch; }

.section-how .section-head { margin-bottom: var(--space-5); padding-top: var(--space-4); }

/* ---------- Why section ---------- */

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.why-sub { margin: 0; color: var(--ink-70); font-size: 1.05rem; max-width: 48ch; }
.why-note {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-40);
  letter-spacing: 0.02em;
}

/* ---------- "The difference": one circular frame, three images ----------
   All three cards sit on the same spot and only trade opacity as you scroll.
   There is no travel, so nothing drifts and nothing for a reduced-motion
   preference to object to. The photo is masked with a radial gradient so it
   dissolves into the page at the rim instead of ending on a hard edge. */
.proof-stack {
  /* Sized against viewport height as well as width, so on a short window all
     three cards still get a usable stretch of scroll. 170px is the caption
     block plus the dots. */
  --circle: min(460px, 48vh);
  position: relative;
  width: 100%;
  max-width: var(--circle);
  height: calc(var(--circle) + 170px);
  margin: 0 auto;
}

/* The card is only a positioned container. The image and the caption fade on
   their own timelines (below) so the two captions never sit on top of each
   other half-faded, which is unreadable. */
.proof-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.proof-card.is-active { z-index: 2; }

/* The drop shadow lives on this wrapper and the mask on the image inside it:
   a mask and a filter on the same element would clip the shadow away. The
   shadow follows the faded alpha, so it stays soft instead of outlining a disc. */
.proof-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  filter:
    drop-shadow(0 22px 26px rgba(22, 35, 63, 0.20))
    drop-shadow(0 6px 10px rgba(22, 35, 63, 0.10));
  /* the crossfade: the active image comes up while the old one goes down */
  opacity: 0;
  transform: scale(0.965);
  transition:
    opacity 560ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 560ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.proof-card.is-active .proof-media { opacity: 1; transform: none; }
.proof-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* opaque core, then an eased falloff to nothing at the rim. closest-side
     makes 100% the edge of the circle, whatever size it is. */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, #000 54%, rgba(0, 0, 0, 0.86) 63%, rgba(0, 0, 0, 0.6) 73%, rgba(0, 0, 0, 0.3) 84%, rgba(0, 0, 0, 0.1) 93%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 0%, #000 54%, rgba(0, 0, 0, 0.86) 63%, rgba(0, 0, 0, 0.6) 73%, rgba(0, 0, 0, 0.3) 84%, rgba(0, 0, 0, 0.1) 93%, transparent 100%);
}

/* The caption sits below the circle. Staggered rather than crossfaded: the old
   one is gone in the first 220ms and the new one starts at 260ms, so there is
   never a moment with two captions overlapping. */
.proof-card figcaption {
  margin-top: 30px;
  text-align: center;
  opacity: 0;
  transition: opacity 220ms ease;
}
.proof-card.is-active figcaption {
  opacity: 1;
  transition: opacity 300ms ease 260ms;
}
.proof-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: 0.55em;
}
.proof-dash { width: 18px; height: 1.5px; background: var(--kraft); flex-shrink: 0; }
.proof-card figcaption p { margin: 0 auto; font-size: 0.95rem; color: var(--ink-70); max-width: 38ch; }

.proof-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 5;
}
.proof-dots span {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-15);
  transition: background 350ms;
}
.proof-dots span.is-active { background: var(--ink); }

/* Reduced motion keeps the crossfade, because an opacity change has no
   movement in it, and drops the scale. The blanket rule near the top of this
   file crushes every transition to 0.01ms with !important; a class outranks
   the universal selector, so repeating !important here exempts just this one
   duration and nothing else. */
@media (prefers-reduced-motion: reduce) {
  .proof-media,
  .proof-card.is-active .proof-media {
    transform: none;
    transition-property: opacity;
    transition-duration: 560ms !important;
  }
  .proof-card figcaption { transition-duration: 220ms !important; }
  .proof-card.is-active figcaption { transition-duration: 300ms !important; }
}

/* ---------- Step cards ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.85rem;
  box-shadow: 0 2px 10px #16233F0f;
}
.step-kraft { background: var(--kraft-mid); }
.step-ink { background: var(--ink); border-color: var(--ink); box-shadow: 0 6px 18px #16233F33; }

.step-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--stamp);
  border: 1.5px dashed var(--kraft);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  transform: rotate(-2deg);
}
.step h3 { margin-bottom: 0.4em; }
.step p { color: var(--ink-70); font-size: 0.95rem; margin: 0; }

/* must follow `.step p` — same specificity, so source order decides the winner */
.step-ink h3 { color: var(--paper); }
.step-ink p { color: var(--paper-70); }

.step-visual {
  margin-bottom: var(--space-2);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mini-card {
  background: var(--white);
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.mini-card-stars { color: var(--brass); font-size: 0.85rem; letter-spacing: 0.05em; margin-bottom: 0.3em; }
.mini-card-text { font-style: italic; color: var(--ink-70); font-size: 0.85rem; margin: 0; }

.mini-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #16233F80;
  margin-bottom: 0.6em;
}
.tone-chip-row { display: flex; flex-wrap: wrap; gap: 0.4em; }
.tone-chip {
  font-size: 0.78rem;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  border: 1px solid #16233F3d;
  background: var(--paper);
  color: var(--ink-70);
}
.tone-chip-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.mini-reply {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  background: var(--paper);
  border: 1px solid var(--paper-20);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.7em;
  margin-bottom: 0.4em;
}
.mini-reply:last-child { margin-bottom: 0; }
.mini-reply p { margin: 0; font-size: 0.82rem; color: var(--ink); }
.mini-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 0.15em;
}
.mini-badge-ready { background: var(--ink); color: var(--paper); }
.mini-badge-draft { background: var(--kraft-dim); color: var(--ink-70); }

/* ---------- Agencies section ---------- */

.agencies-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-5);
  align-items: center;
  position: relative;
  z-index: 2;
}
.agencies-grid h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.08; margin-bottom: var(--space-2); }
.agencies-grid p { color: var(--ink-70); font-size: 1.05rem; max-width: 46ch; }
.agencies-grid .why-note { margin-top: 1.25rem; }
.agency-mock {
  background: var(--paper);
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}
.agency-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9em 0.4em;
  border-bottom: 1px solid var(--ink-08);
  font-size: 1rem;
}
.agency-row:last-child { border-bottom: none; }
.mini-badge-active {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
}
.agency-switch { font-size: 0.82rem; color: var(--ink-40); }

/* ---------- Tool panel ---------- */

.tool-panel {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-4);
  align-items: start;
}

/* the form sits on ink, so everything inside it flips to paper-on-dark */
.input-col {
  background-color: #16233FEF;
  border: 1px solid var(--paper-12);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  box-shadow: 0 8px 28px #16233F2e;
}

.field { margin-bottom: 2.25rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.35em;
  color: var(--paper);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 2.25rem; }
.field-row .field { margin-bottom: 0; }
.field-hint { font-size: 0.82rem; color: var(--paper-60); margin: 0.5em 0 0; max-width: none; }
.field-hint.error-note { color: var(--stamp-light); }

.input-col input[type="email"],
.input-col input[type="text"],
.input-col select,
.input-col textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--paper-24);
  border-radius: 10px;
  padding: 0.75em 0.85em;
  box-shadow: 0 1px 2px #0000001f;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.input-col textarea { resize: vertical; min-height: 96px; }
.input-col textarea.textarea-sm { min-height: 64px; }
.input-col input:focus,
.input-col select:focus,
.input-col textarea:focus {
  outline: none;
  border-color: var(--stamp);
  box-shadow: 0 0 0 2px var(--stamp-shadow);
}
.input-col select { appearance: auto; }

/* ghost buttons need to read against ink, not paper */
.input-col .btn-ghost {
  border-color: var(--paper-35);
  color: var(--paper);
  background: transparent;
}
.input-col .btn-ghost:hover:not(:disabled) { border-color: var(--paper); background: var(--paper-08); }

#authSignedOut, #authLinkSent, #authSignedIn {
  border-left: 2px solid var(--kraft);
  padding-left: var(--space-2);
}

.profile-row { display: flex; gap: 0.5em; align-items: center; }
.profile-row select { flex: 1; }

.usage-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--paper-60);
  margin: var(--space-2) 0 0;
  text-align: center;
  max-width: none;
}

/* ---------- Output panel ----------
   .output-wrap stretches to the full grid-row height so .output-col has room
   to travel; the sticky lives on .output-col itself. Do NOT add overflow to
   .output-wrap, .tool-panel, .wrap, or #try-it — an overflow value other than
   `visible` on any ancestor silently kills position: sticky. */

.output-wrap { align-self: stretch; height: 100%; }

.output-col {
  position: sticky;
  top: 92px;
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-md);
  background: var(--paper-dim);
  min-height: 320px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* texture lives on a pseudo-element, so app.js replacing outputCol.innerHTML
   can't wipe it (this is what broke the panel the last two times) */
.output-col::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius-md);
  background-image: var(--tex-tool);
  background-repeat: repeat;
  -webkit-mask-image: var(--fade-v);
  mask-image: var(--fade-v);
}
.output-col > * { position: relative; z-index: 1; }

/* plain state — also what app.js renders for loading and error messages */
.output-empty {
  margin: auto;
  text-align: center;
  color: var(--ink-40);
  font-size: 0.95rem;
  max-width: 32ch;
}
.error-note { color: var(--stamp); font-size: 0.85rem; margin-top: 0.6em; }

/* the richer first-load example, replaced wholesale on the first generate */
.output-example {
  margin: 0;
  max-width: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.output-example-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.example-card {
  opacity: 0.72;
  background: var(--white);
  border: 1px solid #16233F40;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: 0 1px 2px var(--ink-08);
}
.example-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6em;
}
.example-card p { margin: 0; font-size: 0.92rem; color: var(--ink); }
.output-example-note { margin: 0.25rem 0 0; text-align: center; color: var(--ink-40); font-size: 0.85rem; }

/* ---------- Generated output (built by app.js) ---------- */

.option-card {
  background: var(--paper);
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.option-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6em;
}
.option-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.copy-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.8em;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.copy-btn:hover { border-color: var(--stamp); background: var(--ink-08); }

.paywall { margin: auto; text-align: center; max-width: 36ch; }
.paywall h3 { margin-bottom: 0.4em; }
.paywall p { color: var(--ink-70); font-size: 0.95rem; margin: 0 auto; }

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

.section-pricing { overflow: hidden; }
.section-pricing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 62% at 50% 32%, #FFFFFFD9 0%, #FFFFFF66 45%, transparent 78%);
}
.pricing-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pd { position: absolute; height: auto; }
/* Scattered around the plan cards, never onto them and never onto each other.
   The plans occupy roughly the middle 57% of the section, so everything lives
   in the side gutters or in the bands above and below. Verified collision-free
   at 1280px; the marks fade out entirely below 700px. */
.pd-env-1 { left: -70px; top: 52%; width: 300px; opacity: 0.10; transform: rotate(-9deg); }
.pd-env-2 { right: -80px; top: 6%; width: 320px; opacity: 0.08; transform: rotate(11deg); }
.pd-env-3 { left: 2%; top: 8%; width: 140px; opacity: 0.09; transform: rotate(-7deg); }
.pd-env-4 { right: 3%; bottom: 6%; width: 160px; opacity: 0.09; transform: rotate(13deg); }
.pd-env-5 { left: 34%; bottom: -5%; width: 120px; opacity: 0.08; transform: rotate(19deg); }
.pd-coin-1 { right: 2%; top: 44%; width: 110px; height: 110px; opacity: 0.09; transform: rotate(-8deg); }
.pd-coin-2 { left: 4%; top: 26%; width: 90px; height: 90px; opacity: 0.08; transform: rotate(10deg); }
.pd-coin-3 { left: 14%; bottom: 4%; width: 70px; height: 70px; opacity: 0.08; transform: rotate(-14deg); }

.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: 720px;
  margin: 0 auto;
}
.plan {
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--paper);
  position: relative;
}
.plan.featured { border-color: var(--stamp); background: var(--paper-dim); }
.plan.featured .plan-name { padding-right: 90px; }
.plan-badge {
  position: absolute;
  top: -34px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px dashed var(--stamp);
  background: var(--paper);
  color: var(--stamp);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transform: rotate(8deg);
  line-height: 1.15;
}
.plan-name { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-40); text-transform: uppercase; }
.plan-price { margin: 0.4em 0 0.8em; display: flex; align-items: baseline; gap: 0.3em; }
.plan-price .amount { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; }
.plan-price .period { color: var(--ink-40); font-size: 0.9rem; }
.plan-desc { font-size: 0.9rem; color: var(--ink-70); }
.plan-features { list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0; }
.plan-features li {
  padding: 0.5em 0;
  border-top: 1px solid var(--ink-08);
  font-size: 0.9rem;
}
.plan-features li:first-child { border-top: none; }

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

.faq { max-width: 720px; margin: 0 auto; }
.faq-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--ink-15); }
.faq-item:first-child { border-top: 1px solid var(--ink-15); }
.faq-item h3 { margin-bottom: 0.4em; }
.faq-item p { color: var(--ink-70); font-size: 0.95rem; margin: 0; }

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

.footer {
  background: var(--ink);
  padding: var(--space-5) 0 var(--space-3);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--tex-footer);
  background-repeat: repeat;
  -webkit-mask-image: var(--fade-footer);
  mask-image: var(--fade-footer);
}
.footer > .wrap { position: relative; z-index: 1; }
.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.footer-tagline { margin-top: 10px; font-size: 13px; color: var(--paper-60); max-width: 32ch; }
.footer-contact { margin: 6px 0 0; font-size: 13px; color: var(--paper-60); }
.footer-contact a { color: var(--paper-70); text-decoration: underline; text-underline-offset: 2px; transition: color 150ms ease-out; }
.footer-contact a:hover { color: var(--paper); }
.footer-links { display: flex; gap: var(--space-3); flex-wrap: wrap; align-self: flex-start; }
.footer-links a { text-decoration: none; font-size: 0.88rem; color: var(--paper-70); transition: color 150ms ease-out; }
.footer-links a:hover { color: var(--paper); }
.footer-bottom {
  padding-top: var(--space-3);
  border-top: 1px solid var(--paper-15);
  font-size: 0.8rem;
  color: var(--paper-60);
  font-family: var(--font-mono);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-grid,
  .tool-panel,
  .agencies-grid,
  .why-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .postmark-hero { display: none; }
  .hero-decor { display: none; }
  /* sticky has nothing to stick to once the panel is full-width and stacked */
  .output-col { position: static; }
  .output-wrap { height: auto; }
  .proof-stack { --circle: min(320px, 40vh); margin-bottom: var(--space-4); }
  .agencies-grid p { max-width: none; }
  .why-sub { max-width: none; }
}

@media (max-width: 700px) {
  .plans { grid-template-columns: 1fr; }
  .input-col { padding: var(--space-3) var(--space-2); }
  .pricing-decor { display: none; }
}