/* ============================================================================
   Marling - landing page styles (complete replacement for static/styles.css)

   Design direction:
   - Palette derived from the Marling logo gradient: deep ink, warm paper,
     and a teal -> indigo -> magenta accent range. Not the generic SaaS blue.
   - Type pairing: a characterful serif for display (signals profession,
     document, trust) + a clean grotesque for body and UI.
   - Signature element: the shorthand -> finished-note transform in the hero.
     Boldness spent there; everything else stays quiet and disciplined.
   - Quality floor: responsive to mobile, visible focus, reduced-motion honored.

   Fonts: uses a system serif/grotesque stack so nothing phones home (keeps the
   privacy-by-default promise). If you want to self-host a display face later
   (e.g. Fraunces, Newsreader, Source Serif), drop the @font-face in and swap
   --font-display - the rest of the scale is built to take it.
   ============================================================================ */

:root {
  /* ---- Palette (from the logo) ---- */
  --ink:        #14161c;   /* near-black primary text / dark sections */
  --ink-soft:   #353a45;   /* secondary dark */
  --paper:      #f6f4ee;   /* warm off-white page background */
  --paper-2:    #efece3;   /* slightly deeper panel */
  --surface:    #ffffff;   /* cards */
  --border:     #e3ded3;   /* hairlines */
  --text:       #1b1d23;   /* body text on paper */
  --text-muted: #5f6470;   /* secondary text */

  /* accent range pulled from the mark's gradient */
  --teal:       #2f8a93;
  --indigo:     #3b3f9e;
  --magenta:    #b5447e;
  --accent:     #2f6f86;   /* primary accent (teal-leaning, professional) */
  --accent-ink: #1f5263;   /* accent text on light */

  /* ---- Type ---- */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Source Serif Pro", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- Layout ---- */
  --maxw: 1080px;
  --maxw-narrow: 680px;
  --radius: 14px;
  --radius-sm: 9px;
  --pad-section: 5.5rem;
  --dev-banner-h: 2.25rem;
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); }

/* ---- Utilities ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.5rem; }
.container.narrow { max-width: var(--maxw-narrow); }
.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: -999px; top: 0; background: var(--ink); color: #fff;
  padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  font: inherit; font-weight: 600; line-height: 1;
  padding: 0.85rem 1.3rem; border-radius: var(--radius-sm); cursor: pointer;
  text-decoration: none; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: #000; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,22,28,.18); }
.btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.btn-sm { padding: 0.5rem 0.95rem; font-size: 0.92rem; }
.btn-lg { padding: 1rem 1.7rem; font-size: 1.05rem; }

/* ---- Dev-environment banner (dev stack only; absent from prod markup) ---- */
.dev-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--dev-banner-h);
  display: flex; align-items: center; justify-content: center;
  background: #d81e1e; color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  letter-spacing: .04em; text-transform: uppercase;
}
body.has-dev-banner { padding-top: var(--dev-banner-h); }
body.has-dev-banner .site-header { top: var(--dev-banner-h); }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.85rem; }
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display);
  font-weight: 600; font-size: 1.25rem; color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.wordmark-img { border-radius: 6px; }
.wordmark-sm { font-size: 1.1rem; }
.header-cta { white-space: nowrap; }
@media (max-width: 30rem) { .header-cta { display: none; } }

/* ---- Sections ---- */
.section { padding-block: var(--pad-section); }
.section-heading {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.3rem); line-height: 1.15;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 1rem;
}
.section-lead { font-size: 1.08rem; color: var(--text-muted); max-width: 60ch; margin: 0 0 2rem; }

/* ============================ HERO ============================ */
.hero { padding-block: 4rem 5rem; border-bottom: 1px solid var(--border);
  background:
    radial-gradient(1200px 400px at 15% -10%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 60%),
    radial-gradient(1000px 360px at 100% 0%, color-mix(in srgb, var(--magenta) 8%, transparent), transparent 55%);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; }
@media (max-width: 60rem) { .hero-inner { grid-template-columns: 1fr; gap: 2.25rem; } }

.hero-eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 0.9rem;
}
.hero-headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.1rem); line-height: 1.08;
  letter-spacing: -0.018em; color: var(--ink); margin: 0 0 1.1rem;
}
.hero-subhead { font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; margin: 0 0 1.6rem; }
.hero-subhead em, .hero-headline em { font-style: normal; font-weight: 700; color: var(--accent-ink); }
.hero-trust { font-size: 0.83rem; color: var(--text-muted); margin: 0.9rem 0 0; }

/* ---- Signup form ---- */
.form-wrap { max-width: 520px; }
.field-row { display: flex; gap: 0.6rem; }
@media (max-width: 26rem) { .field-row { flex-direction: column; } }
.email-input {
  flex: 1; min-width: 0; font: inherit; padding: 0.85rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.email-input:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.form-note { font-size: 0.85rem; color: var(--text-muted); margin: 0.7rem 0 0; }
.form-note-strong { font-weight: 600; color: var(--accent-ink); }
.form-error { font-size: 0.85rem; color: #a23b2e; margin: 0.6rem 0 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Confirmation ---- */
/* The [hidden] attribute must win over the display rules below (JS toggles it). */
[hidden] { display: none !important; }
.confirm { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--teal) 12%, var(--surface)); border: 1px solid var(--teal);
  border-radius: var(--radius-sm); }
.confirm-mark { color: var(--accent-ink); flex: none; margin-top: 2px; }
.confirm-heading { margin: 0 0 0.2rem; font-weight: 700; color: var(--ink); }
.confirm-body { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* ============ SIGNATURE: the shorthand -> note transform ============ */
.demo {
  margin: 0; display: grid; gap: 0.75rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  box-shadow: 0 20px 50px -28px rgba(20,22,28,.4);
  position: relative;
}
.demo-pane { border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.demo-in { background: var(--paper-2); border: 1px solid var(--border); }
.demo-out {
  background: var(--ink); color: #eef0f4;
  border: 1px solid var(--ink);
  position: relative; overflow: hidden;
}
.demo-out::before {
  /* thin gradient seam at the top of the output, echoing the logo */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta));
}
.demo-tag {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 0.55rem; color: var(--text-muted);
}
.demo-out .demo-tag { color: #aeb4c2; }
.demo-shorthand { font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.5; margin: 0; color: var(--ink-soft); }
.demo-note p { margin: 0 0 0.55rem; font-size: 0.9rem; line-height: 1.5; }
.demo-note p:last-child { margin-bottom: 0; }
.demo-note strong { color: #fff; }
.demo-flag { color: #f0c98a; font-style: italic; }
.demo-arrow { display: grid; place-items: center; color: var(--accent); }
.demo-caption { font-size: 0.85rem; color: var(--text-muted); margin: 0.35rem 0 0; text-align: center; }

/* ============================ PROBLEM ============================ */
.problem { background: var(--paper); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 52rem) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.card-step { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); margin: 0 0 0.8rem; letter-spacing: 0.05em; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; margin: 0 0 0.5rem; color: var(--ink); }
.card-body { margin: 0; color: var(--text-muted); font-size: 0.98rem; }

/* ============================ SOLUTION ============================ */
.solution { background: var(--paper-2); border-block: 1px solid var(--border); }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
@media (max-width: 52rem) { .benefits { grid-template-columns: 1fr; } }
.benefit { padding-left: 1rem; border-left: 2px solid var(--teal); }
.benefit-label { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 0 0 0.4rem; color: var(--ink); }
.benefit-body { margin: 0; color: var(--text-muted); font-size: 0.97rem; }

/* ============================ CONTRAST ============================ */
.contrast { background: var(--ink); color: #e9ebf0; }
.contrast .section-heading { color: #fff; }
.contrast .section-lead { color: #aeb4c2; }
.contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 52rem) { .contrast-grid { grid-template-columns: 1fr; } }
.contrast-col { border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.contrast-them { background: #1b1e26; border: 1px solid #2a2e39; }
.contrast-us { background: #fbfaf7; color: var(--text); border: 1px solid #fff; position: relative; overflow: hidden; }
.contrast-us::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta)); }
.contrast-head { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 1.05rem; margin: 0 0 1rem; }
.contrast-them .contrast-head { color: #c4c9d4; }
.contrast-us .contrast-head { color: var(--ink); }
.contrast-mark { border-radius: 5px; }
.contrast-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.contrast-col li { font-size: 0.96rem; line-height: 1.45; padding-left: 1.4rem; position: relative; }
.contrast-them li::before { content: "-"; position: absolute; left: 0; color: #6b7180; }
.contrast-us li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.contrast-us li em { font-style: normal; font-weight: 700; }

/* ============================ PERSONA ============================ */
.persona { background: var(--paper); }
.persona-line {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 1.9rem); line-height: 1.4;
  color: var(--ink); text-align: center; margin: 0; letter-spacing: -0.01em;
}

/* ============================ PRICING ============================ */
.pricing { background: var(--paper-2); border-block: 1px solid var(--border); }
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-bottom: 2.5rem; }
@media (max-width: 52rem) { .price-cards { grid-template-columns: 1fr; } }
.price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.price-card-feature { border-color: var(--accent); box-shadow: 0 12px 30px -20px rgba(47,111,134,.55); position: relative; overflow: hidden; }
.price-card-feature::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta)); }
.price-vertical { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--ink); }
.price-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-ink); background: color-mix(in srgb, var(--teal) 16%, transparent);
  padding: 0.2rem 0.5rem; border-radius: 100px; margin: 0 0 0.6rem; }
.price-detail { font-size: 0.95rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.price-more { display: block; margin-top: 0.5rem; color: var(--accent-ink); font-weight: 600; }

/* ---- Founding callout ---- */
.founding { text-align: center; background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 2.25rem 1.5rem; position: relative; overflow: hidden; }
.founding::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta)); }
.founding-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 0.6rem; }
.founding-headline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem,1rem+1.4vw,1.8rem); line-height: 1.25; max-width: 30ch; margin: 0 auto 0.75rem; color: var(--ink); }
.founding-body { font-size: 0.97rem; line-height: 1.55; max-width: 56ch; margin: 0 auto 1.5rem; color: var(--text-muted); }
.founding-note { margin: 0.9rem 0 0; font-size: 0.83rem; font-weight: 600; color: var(--text-muted); }

/* ============================ SECOND CAPTURE ============================ */
.second-capture { background: var(--paper); text-align: center; }
.second-capture .section-lead { margin-inline: auto; }
.second-capture .form-wrap { margin-inline: auto; }
.second-capture .form-note { text-align: center; }

/* ============================ FOOTER ============================ */
.site-footer { background: var(--ink); color: #c4c9d4; padding-block: 3rem; }
.footer-inner { display: grid; gap: 0.7rem; }
.site-footer .wordmark { color: #fff; }
.footer-built { margin: 0.3rem 0 0; font-weight: 600; color: #e9ebf0; font-size: 0.95rem; }
.footer-privacy, .footer-meta { margin: 0; font-size: 0.86rem; color: #969cab; }
.footer-meta a { color: #c4c9d4; }
.footer-disclaimer { margin: 0.6rem 0 0; font-size: 0.78rem; line-height: 1.5; color: #767c8b; max-width: 64ch; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ============================ SECTION EYEBROW (shared) ============================ */
.section-eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 0.7rem;
}

/* ============================ TEMPLATES ============================ */
.templates { background: var(--paper); }
.tpl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.5rem; }
@media (max-width: 52rem) { .tpl-compare { grid-template-columns: 1fr; } }
.tpl-col { border-radius: var(--radius); padding: 1.5rem 1.6rem; border: 1px solid var(--border); }
.tpl-without { background: var(--paper-2); }
.tpl-with { background: var(--surface); border-color: var(--accent); position: relative; overflow: hidden; }
.tpl-with::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta)); }
.tpl-head { font-weight: 700; font-size: 0.95rem; margin: 0 0 0.6rem; color: var(--ink); }
.tpl-head code { font-family: var(--font-mono); font-size: 0.86em; background: color-mix(in srgb, var(--teal) 14%, transparent);
  padding: 0.1rem 0.4rem; border-radius: 5px; color: var(--accent-ink); }
.tpl-body { margin: 0; color: var(--text-muted); font-size: 0.97rem; line-height: 1.55; }
.tpl-note { font-size: 0.97rem; color: var(--text-muted); max-width: 70ch; margin: 0; }
.tpl-note { border-left: 2px solid var(--teal); padding-left: 1rem; }

/* ============================ DE-IDENTIFICATION ============================ */
.deident { background: var(--paper-2); border-block: 1px solid var(--border); }
.deident-demo { margin: 0 0 1.5rem; }
.deident-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: stretch; }
@media (max-width: 60rem) { .deident-row { grid-template-columns: 1fr; } }
.deident-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.deident-cloud { background: var(--ink); border-color: var(--ink); position: relative; overflow: hidden; }
.deident-cloud::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta)); }
.deident-cloud .demo-tag { color: #aeb4c2; }
.deident-cloud .deident-text { color: #d8dbe2; }
.deident-text { font-size: 0.95rem; line-height: 1.6; margin: 0; color: var(--ink-soft); }
mark.pii { background: color-mix(in srgb, var(--teal) 20%, transparent); color: var(--accent-ink);
  padding: 0.05rem 0.3rem; border-radius: 4px; font-weight: 600; }
mark.masked { background: #2c3140; color: #aee0e6; font-family: var(--font-mono); font-size: 0.85em;
  padding: 0.05rem 0.35rem; border-radius: 4px; font-weight: 600; }
.deident-caption { text-align: center; font-size: 0.88rem; color: var(--text-muted); margin: 1rem 0 0; }
.deident-honest { font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); max-width: 68ch;
  margin: 0; padding: 1rem 1.1rem; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); }

/* ============================ OFFICE / ONE BOX ============================ */
.office { background: var(--ink); color: #e9ebf0; }
.office .section-heading { color: #fff; }
.office .section-lead { color: #aeb4c2; }
.office-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
@media (max-width: 52rem) { .office-grid { grid-template-columns: 1fr; } }
.office-item { padding-left: 1rem; border-left: 2px solid var(--teal); }
.office-label { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 0 0 0.4rem; color: #fff; }
.office-body { margin: 0; color: #aeb4c2; font-size: 0.97rem; line-height: 1.55; }

/* ---- De-id layered-story chips in the caption ---- */
.deident-chip { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem;
  background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--accent-ink);
  padding: 0.12rem 0.5rem; border-radius: 100px; font-weight: 600; white-space: nowrap; }
.deident-plus { color: var(--text-muted); font-weight: 700; margin: 0 0.15rem; }
.deident-caption { line-height: 1.9; }

/* ============================================================================
   FEATURES PAGE
   ============================================================================ */

.header-nav { display: flex; align-items: center; gap: 1.25rem; }
.header-link { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.header-link:hover { color: var(--ink); }
@media (max-width: 30rem) { .header-link { display: none; } }

/* ---- Page hero ---- */
.feat-hero { padding-block: 3.5rem 2.5rem; border-bottom: 1px solid var(--border);
  background:
    radial-gradient(1000px 340px at 12% -10%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 60%),
    radial-gradient(900px 320px at 100% 0%, color-mix(in srgb, var(--magenta) 7%, transparent), transparent 55%);
}
.feat-hero-headline { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.7rem); line-height: 1.1; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 1rem; max-width: 20ch; }
.feat-hero-sub { font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch; margin: 0 0 1.6rem; }
.feat-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.feat-jump a { font-size: 0.88rem; font-weight: 600; color: var(--accent-ink); text-decoration: none;
  border: 1px solid var(--border); background: var(--surface); padding: 0.4rem 0.85rem; border-radius: 100px; }
.feat-jump a:hover { border-color: var(--accent); }

/* ---- Sections ---- */
.feat-section { padding-block: 4.5rem; }
.feat-alt { background: var(--paper-2); border-block: 1px solid var(--border); }
.feat-dark { background: var(--ink); color: #e9ebf0; }
.feat-dark .feat-kicker { color: #aee0e6; }
.feat-dark .feat-h2 { color: #fff; }
.feat-dark .feat-lead { color: #aeb4c2; }
.feat-dark .feat-h3 { color: #fff; }
.feat-dark .feat-p { color: #aeb4c2; }
.feat-dark .feat-lead em { color: #fff; font-style: normal; font-weight: 700; }
.feat-dark .feat-list li { border-left-color: var(--teal); }

.feat-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 0.7rem; }
.feat-h2 { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 1.5rem; }
.feat-lead { font-size: 1.08rem; color: var(--text-muted); max-width: 64ch; margin: 0 0 2rem; }
.feat-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.45rem; color: var(--ink); }
.feat-p { margin: 0 0 0.8rem; color: var(--text-muted); font-size: 0.99rem; line-height: 1.6; }
.feat-p-muted { font-size: 0.92rem; }
.feat-soft { color: var(--accent-ink); font-weight: 600; }

/* ---- Feature block: copy + demo side by side ---- */
.feat-block { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-bottom: 1.75rem; }
.feat-block-reverse .feat-block-copy { order: 2; }
.feat-block-reverse .feat-demo { order: 1; }
@media (max-width: 56rem) {
  .feat-block { grid-template-columns: 1fr; gap: 1.5rem; }
  .feat-block-reverse .feat-block-copy { order: 1; }
  .feat-block-reverse .feat-demo { order: 2; }
}
.feat-demo { margin: 0; display: grid; gap: 0.75rem; }
.feat-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent-ink); background: color-mix(in srgb, var(--teal) 16%, transparent);
  padding: 0.2rem 0.55rem; border-radius: 100px; margin: 0 0 0.6rem; }

/* de-id panes reused from main page; ensure they work standalone here */
.feat-demo .deident-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.feat-demo .deident-cloud { background: var(--ink); border-color: var(--ink); position: relative; overflow: hidden; }
.feat-demo .deident-cloud::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta)); }
.feat-demo .deident-caption { text-align: left; margin-top: 0.4rem; }

/* ---- Template form mock ---- */
.tpl-form { background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; position: relative; overflow: hidden; }
.tpl-form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta)); }
.tpl-form .demo-tag { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink);
  letter-spacing: 0.02em; text-transform: none; margin: 0 0 0.85rem; font-weight: 700; }
.tpl-fields { list-style: none; margin: 0 0 0.85rem; padding: 0; display: grid; gap: 0.45rem; }
.tpl-fields li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem;
  padding-bottom: 0.45rem; border-bottom: 1px solid var(--border); }
.tpl-fields li:last-child { border-bottom: 0; padding-bottom: 0; }
.tpl-fields span { color: var(--ink-soft); font-weight: 600; }
.tpl-fields i { color: var(--text-muted); font-style: normal; font-family: var(--font-mono); font-size: 0.82rem; }
.tpl-returns { margin: 0; font-size: 0.9rem; color: var(--accent-ink); line-height: 1.5; font-weight: 500; }

/* ---- Honest framing ---- */
.feat-honest { font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); max-width: 74ch;
  margin: 0 0 2rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.feat-dark .feat-honest { background: #1b1e26; border-color: #2a2e39; color: #aeb4c2; }

/* ---- Feature lists ---- */
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.feat-list-2col { grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; }
@media (max-width: 52rem) { .feat-list-2col { grid-template-columns: 1fr; } }
.feat-list > li { padding-left: 1rem; border-left: 2px solid var(--teal); }

/* ---- Features CTA ---- */
.feat-cta { background: var(--paper-2); border-top: 1px solid var(--border); padding-block: 4.5rem; text-align: center; }
.feat-cta-head { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem,1.2rem+1.5vw,2rem);
  color: var(--ink); margin: 0 0 0.75rem; }
.feat-cta-sub { font-size: 1.05rem; color: var(--text-muted); max-width: 52ch; margin: 0 auto 1.5rem; }
.feat-cta-note { margin: 0.9rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--accent-ink); }
/* ============================================================================
   INTERACTION LAYER (hover-to-interact + reveal-on-scroll)

   Pairs with static/interact.js. Everything degrades cleanly:
   - `.js` is set only when the script runs, so no-JS gets the static page.
   - `.motion` is set only when the user does NOT prefer reduced motion,
     so all opacity/transform choreography is gated behind it.
   - Hover effects sit behind (hover: hover) so touch devices keep the
     plain layout.
   ============================================================================ */

/* ---- Reveal-on-scroll: sections fade/slide up as they enter ---- */
.motion .hero, .motion .section,
.motion .feat-hero, .motion .feat-section, .motion .feat-cta {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.motion .hero.in, .motion .section.in,
.motion .feat-hero.in, .motion .feat-section.in, .motion .feat-cta.in {
  opacity: 1; transform: none;
}

/* ---- Cascade: children of card grids rise in one after another ---- */
.motion .stagger { opacity: 0; }
.motion .in .stagger { animation: m-rise .55s cubic-bezier(.2,.7,.2,1) both; }
.motion .in .stagger.risen { animation: none; opacity: 1; }
@keyframes m-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Hero ambient flow field (canvas injected by interact.js) ---- */
.hero { position: relative; overflow: hidden; }
.hero .hero-flow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; }

/* ---- Hero demo: shorthand types itself, then the note drafts in ---- */
.type-cursor { display: inline-block; font-weight: 400; animation: m-blink 1.05s steps(1) infinite; }
@keyframes m-blink { 50% { opacity: 0; } }
.motion .demo.demo-prep .demo-arrow,
.motion .demo.demo-prep .demo-out,
.motion .demo.demo-prep .demo-caption {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.motion .demo.demo-done .demo-arrow { opacity: 1; transform: none; }
.motion .demo.demo-done .demo-out { opacity: 1; transform: none; transition-delay: .15s; }
.motion .demo.demo-done .demo-caption { opacity: 1; transform: none; transition-delay: .6s; }

/* ---- Hover lift: cards answer the cursor (accent border + rise) ---- */
@media (hover: hover) {
  .card, .price-card, .tpl-col, .contrast-col, .deident-pane, .founding {
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  .card:hover, .price-card:hover, .tpl-col:hover, .deident-pane:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 14px 34px -22px rgba(47,111,134,.55);
  }
  .contrast-col:hover { transform: translateY(-3px); }
  .contrast-them:hover { border-color: #3d4250; }
  .benefit, .office-item { transition: border-color .16s ease, padding-left .16s ease; }
  .benefit:hover, .office-item:hover {
    border-left-color: var(--magenta);
    padding-left: 1.2rem;
  }
  .header-link { transition: color .12s ease; }
}
.card:focus-within, .price-card:focus-within, .tpl-col:focus-within {
  border-color: var(--accent);
}

/* ---- De-identification: hover a pane and it takes the stage ---- */
@media (min-width: 60rem) and (hover: hover) {
  .js .deident-row { display: flex; align-items: stretch; }
  .js .deident-pane {
    flex: 1 1 0; min-width: 0;
    transition: flex-grow .5s cubic-bezier(.2,.7,.2,1),
                transform .16s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .js .deident-row:hover .deident-pane { flex-grow: 0.74; }
  .js .deident-pane:hover, .js .deident-pane:focus-within {
    flex-grow: 2.4; transform: none;
  }
}

/* ---- Pricing: verticals sit folded; hover unfolds the details ---- */
@media (min-width: 52rem) and (hover: hover) {
  .js .price-card .price-detail {
    max-height: 2.6em; overflow: hidden;
    transition: max-height .5s cubic-bezier(.2,.7,.2,1);
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
            mask-image: linear-gradient(180deg, #000 45%, transparent);
  }
  .js .price-card:hover .price-detail,
  .js .price-card:focus-within .price-detail {
    max-height: 24em;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ---- The positioning card (problem card 02) carries standing emphasis ----
   The gradient seam is the site's established "this is the point" motif
   (demo output, Marling contrast column, featured pricing card). Static by
   design so the emphasis survives no-JS and reduced-motion. */
.card-key { position: relative; overflow: hidden; border-color: var(--accent);
  box-shadow: 0 12px 30px -20px rgba(47,111,134,.55); }
.card-key::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta)); }
.card-key .card-step { color: var(--magenta); }

/* One-time gradient sheen sweeps across on hover (no strobe/flash). */
.card-key::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%,
    color-mix(in srgb, var(--teal) 12%, transparent) 50%, transparent 60%);
  transform: translateX(-130%); }
@media (hover: hover) {
  .card-key:hover::after { transition: transform .7s ease; transform: translateX(130%); }
}

/* Scroll choreography: cards cascade in, then a beat later the key card
   asserts itself and its neighbors step back (interact.js adds .spot). */
.motion .cards .card { transition: transform .5s cubic-bezier(.2,.7,.2,1),
  opacity .5s cubic-bezier(.2,.7,.2,1), border-color .16s ease, box-shadow .3s ease; }
.motion .spot .cards .card-key { transform: translateY(-5px) scale(1.025);
  box-shadow: 0 22px 44px -24px rgba(47,111,134,.65); }
.motion .spot .cards .card:not(.card-key) { opacity: .78; transform: scale(.99); }
@media (hover: hover) {
  .motion .spot .cards .card:not(.card-key):hover { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .card-key::after { display: none; }
}

/* ---- Touch: tap stands in for hover (interact.js toggles .is-active) ---- */
@media (hover: none) {
  .card, .price-card, .tpl-col, .deident-pane, .benefit, .office-item {
    transition: transform .16s ease, border-color .16s ease,
                box-shadow .16s ease, padding-left .16s ease;
  }
  .card.is-active, .price-card.is-active, .tpl-col.is-active, .deident-pane.is-active {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 14px 34px -22px rgba(47,111,134,.55);
  }
  .benefit.is-active, .office-item.is-active {
    border-left-color: var(--magenta);
    padding-left: 1.2rem;
  }
  /* Pricing folds on touch too; tap unfolds one card at a time. */
  .js .price-card .price-detail {
    max-height: 2.6em; overflow: hidden;
    transition: max-height .5s cubic-bezier(.2,.7,.2,1);
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
            mask-image: linear-gradient(180deg, #000 45%, transparent);
  }
  .js .price-card.is-active .price-detail {
    max-height: 24em;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ---- Dot-grid texture: quiet page-boundary rhythm across sections ---- */
.problem, .templates, .persona, .second-capture {
  background-image: radial-gradient(circle, rgba(20,22,28,0.05) 1px, transparent 1.4px);
  background-size: 24px 24px;
}
.solution, .pricing, .deident {
  background-image: radial-gradient(circle, rgba(20,22,28,0.045) 1px, transparent 1.4px);
  background-size: 24px 24px;
}
.contrast, .office {
  background-image: radial-gradient(circle, rgba(233,235,240,0.05) 1px, transparent 1.4px);
  background-size: 24px 24px;
}

/* ---- Persona line: phrases rise one after another (spans by interact.js) ---- */
.motion .persona-line .phrase {
  display: inline-block; opacity: 0; transform: translateY(10px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.motion .persona.in .persona-line .phrase { opacity: 1; transform: none; }

/* ---- De-identification story (interact.js adds dd-prep, then dd-run) ---- */
.motion .deident-demo.dd-prep .deident-cloud mark.masked {
  opacity: 0; transform: scale(1.18);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.motion .deident-demo.dd-prep .deident-row .deident-pane:last-child {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease 2.2s, transform .5s ease 2.2s;
}
.motion .deident-demo.dd-run .deident-cloud mark.masked { opacity: 1; transform: none; }
.motion .deident-demo.dd-run .deident-row .deident-pane:last-child { opacity: 1; transform: none; }
.motion .deident-demo.dd-run .deident-row .deident-pane:first-child mark.pii {
  animation: pii-pulse .7s ease both;
}
@keyframes pii-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,138,147,0); }
  45%  { box-shadow: 0 0 0 5px rgba(47,138,147,.25); }
  100% { box-shadow: 0 0 0 0 rgba(47,138,147,0); }
}

/* ---- Contrast: Marling's checkmarks tick in; the other column stays flat ---- */
.motion .contrast .contrast-us li {
  opacity: 0; transform: translateX(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.motion .contrast.in .contrast-us li { opacity: 1; transform: none; }
.motion .contrast .contrast-us li::before { opacity: 0; }
.motion .contrast.in .contrast-us li::before { animation: tick-pop .35s cubic-bezier(.2,.7,.2,1) both; }
.motion .contrast.in .contrast-us li:nth-child(1) { transition-delay: .55s; }
.motion .contrast.in .contrast-us li:nth-child(1)::before { animation-delay: .65s; }
.motion .contrast.in .contrast-us li:nth-child(2) { transition-delay: .67s; }
.motion .contrast.in .contrast-us li:nth-child(2)::before { animation-delay: .77s; }
.motion .contrast.in .contrast-us li:nth-child(3) { transition-delay: .79s; }
.motion .contrast.in .contrast-us li:nth-child(3)::before { animation-delay: .89s; }
.motion .contrast.in .contrast-us li:nth-child(4) { transition-delay: .91s; }
.motion .contrast.in .contrast-us li:nth-child(4)::before { animation-delay: 1.01s; }
.motion .contrast.in .contrast-us li:nth-child(5) { transition-delay: 1.03s; }
.motion .contrast.in .contrast-us li:nth-child(5)::before { animation-delay: 1.13s; }
@keyframes tick-pop {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Hero note: the review flag glows once after the note draws ---- */
.motion .demo.demo-done .demo-flag {
  animation: flag-pulse 1.4s ease 1.1s 1;
  border-radius: 3px;
}
@keyframes flag-pulse {
  0%, 100% { background: transparent; box-shadow: none; }
  35%      { background: rgba(240,201,138,.18); box-shadow: 0 1px 0 0 #f0c98a; }
}

/* ---- Reduced motion: belt and braces on top of the .motion gate ---- */
@media (prefers-reduced-motion: reduce) {
  .stagger, .hero, .section, .feat-hero, .feat-section, .feat-cta {
    opacity: 1 !important; transform: none !important;
    animation: none !important; transition: none !important;
  }
  .hero .hero-flow { display: none; }
  .type-cursor { animation: none; }
}