/* Cachet — full landing page styles.
 * Section rhythm is deliberately uneven: the page is not a stack of equal bands.
 * Color only ever carries a flag (oxblood). A confirmed line is unmarked.
 * Motion: transform/opacity only, reveal-on-scroll via [data-reveal] in base.css.
 * The hero verification sequence is the one signature beat: it is paced slow on
 * purpose, so the labor is watched, not glimpsed. */

/* ============ HERO (Concept A) ============ */
.hero { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
  padding-block: var(--s-9) var(--s-10);
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); padding-block: var(--s-7) var(--s-8); }
}
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-display); letter-spacing: -0.025em;
}
.hero h1 em { font-style: italic; color: var(--n-10); }
.hero .lede {
  margin-top: var(--s-5); max-width: 46ch;
  color: var(--text-secondary); font-size: var(--t-1); line-height: 1.55; letter-spacing: -0.01em;
}
.hero .actions { margin-top: var(--s-7); display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.hero .reassure { margin-top: var(--s-5); color: var(--text-muted); font-size: var(--t--1); }

.doc {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: var(--s-6); box-shadow: var(--shadow-3);
  font-size: 0.95rem; line-height: 1.85; color: var(--text-secondary);
}
.doc-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border);
}
.doc-head .file { font-family: var(--font-mono); font-size: var(--t--1); color: var(--text-muted); overflow-wrap: anywhere; min-width: 0; }
.doc-head .status { font-family: var(--font-mono); font-size: var(--t--1); color: var(--text-muted); display:flex; align-items:center; gap: var(--s-2); }
.doc-head .status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted);
  animation: dot-resolve 3.6s var(--ease-in-out) 1.6s forwards;
}
/* The dot reads as working, then settles to ink. Never green, never a glow. */
@keyframes dot-resolve {
  0%, 8% { background: var(--text-muted); }
  100%   { background: var(--text-primary); }
}
.doc p { margin-bottom: var(--s-4); }
.doc .cite { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
/* The fabricated citation: the one mark on the page, in oxblood. */
.flag {
  position: relative; color: var(--flag); background: var(--flag-wash);
  border-radius: 3px; padding: 0 3px; box-shadow: 0 0 0 1px var(--flag-edge); font-style: normal;
}
/* The scan is a faint graphite line passing slowly over the page: the labor, made visible. */
.scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, hsl(30 20% 28% / 0.4), transparent);
  opacity: 0; animation: sweep 2.6s var(--ease-in-out) 1.6s 1 forwards;
}
@keyframes sweep {
  0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; }
  90% { opacity: 1; } 100% { opacity: 0; transform: translateY(360px); }
}
.verdict {
  position: absolute; right: calc(-1 * var(--s-6)); bottom: var(--s-7); width: 300px;
  background: var(--surface-overlay); border: 1px solid var(--flag-edge);
  border-left: 3px solid var(--flag); border-radius: var(--r-2);
  padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(14px) scale(0.97);
  animation: rise 0.9s var(--ease-out) 5s 1 forwards;
}
@keyframes rise { to { opacity: 1; transform: translateY(0) scale(1); } }
.verdict .label { font-family: var(--font-mono); font-size: var(--t--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--flag); display: flex; align-items: center; gap: var(--s-2); }
.verdict .headline { margin-top: var(--s-3); color: var(--text-primary); font-weight: 500; line-height: 1.35; }
.verdict .detail { margin-top: var(--s-2); font-size: var(--t--1); color: var(--text-secondary); line-height: 1.5; }
.verdict .source { margin-top: var(--s-3); font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); }
@media (max-width: 940px) {
  .verdict { position: static; width: auto; margin-top: var(--s-5); animation-delay: 4.6s; }
  .scan { display: none; }
}

/* ============ Section scaffolding ============ */
.section { position: relative; z-index: 1; padding-block: var(--s-9); }
.section-head { max-width: 60ch; }
.section-head .eyebrow { display: block; margin-bottom: var(--s-4); }
.section-head h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-4);
  letter-spacing: -0.022em; line-height: 1.08;
}
.section-head p { margin-top: var(--s-4); color: var(--text-secondary); font-size: var(--t-1); line-height: 1.55; max-width: 54ch; }
.rule { border: 0; border-top: 1px solid var(--border); }

/* ============ LEDGER (Concept C) ============ */
.ledger { margin-top: var(--s-7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-2); overflow: hidden; }
.ledger-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--t--1); color: var(--text-muted); letter-spacing: 0.04em; }
.ledger-head > span:not(.summary) { overflow-wrap: anywhere; min-width: 0; }
.ledger-head .summary { display: flex; gap: var(--s-5); flex-wrap: wrap; }
/* The confirmed count is plain ink: the pass is quiet. */
.ledger-head .summary b { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.ledger-head .summary .warn { color: var(--flag); }
.row { display: grid; grid-template-columns: 132px 1fr 220px; gap: var(--s-5); align-items: baseline; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: 0; }
.row .verdict-cell { font-family: var(--font-mono); font-size: var(--t--1); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: var(--s-2); }
/* Verified rows are unmarked: muted ink, no color. Only the flagged row draws the eye. */
.row.ok .verdict-cell { color: var(--text-muted); }
.row.bad .verdict-cell { color: var(--flag); }
.row .cite { font-family: var(--font-mono); font-size: 0.86rem; color: var(--text-primary); }
.row .note { font-size: var(--t--1); color: var(--text-secondary); }
/* The one flagged line: a faint oxblood wash and an inset oxblood margin rule
 * (inset, so it marks the line without shifting the grid). */
.row.bad { background: var(--flag-wash); box-shadow: inset 3px 0 0 var(--flag); }
.row.bad .cite { color: var(--flag); }
.tick { width: 14px; height: 14px; display: inline-grid; place-items: center; }
@media (max-width: 820px) {
  .row { grid-template-columns: 110px 1fr; }
  .row .note { grid-column: 2; }
}

/* ============ STAKES (problem framing) ============ */
.stakes { padding-block: var(--s-10); }
.stakes .pull {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.1rem); line-height: 1.18;
  letter-spacing: -0.02em; max-width: 22ch; color: var(--text-primary);
  text-wrap: balance;
}
.stakes .pull .accent { color: var(--flag); font-style: italic; }
.stakes .attribution { margin-top: var(--s-6); display: flex; gap: var(--s-4); align-items: baseline; flex-wrap: wrap; }
.stakes .attribution .mono { color: var(--text-muted); font-size: var(--t--1); }
.stakes .attribution .src { color: var(--text-secondary); font-size: var(--t-0); max-width: 48ch; }

/* ============ HOW (what Cachet checks) ============ */
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
@media (max-width: 820px) { .checks { grid-template-columns: 1fr; } }
.check {
  padding: var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  transition: border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.check:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.check .num { font-family: var(--font-mono); font-size: var(--t--1); color: var(--text-muted); letter-spacing: 0.1em; }
.check h3 { margin-top: var(--s-4); font-family: var(--font-display); font-weight: 500; font-size: var(--t-2); letter-spacing: -0.015em; }
.check p { margin-top: var(--s-3); color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; }
.refusal-note {
  margin-top: var(--s-6); padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--flag); background: var(--flag-wash);
  border-radius: var(--r-1); max-width: 56ch;
}
.refusal-note p { font-family: var(--font-display); font-size: var(--t-2); font-weight: 400; letter-spacing: -0.015em; color: var(--text-primary); line-height: 1.3; }

/* ============ TRUST (objection handling) ============ */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-7); }
@media (max-width: 820px) { .trust { grid-template-columns: 1fr; gap: var(--s-5); } }
.trust .item { padding: var(--s-5); border-radius: var(--r-2); transition: background var(--dur-3) var(--ease-out); }
.trust .item:hover { background: var(--surface); }
.trust .item h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-1); letter-spacing: -0.01em; }
.trust .item p { margin-top: var(--s-3); color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; }
.trust .item .k { font-family: var(--font-mono); font-size: var(--t--1); color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }

/* ============ FINAL CTA ============ */
.cta { text-align: center; padding-block: var(--s-10); }
.cta h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -0.025em; }
.cta p { margin: var(--s-5) auto 0; max-width: 48ch; color: var(--text-secondary); font-size: var(--t-1); }
.cta .actions { margin-top: var(--s-7); display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }

/* ============ Reduced-motion: resolve animated-in elements to final state ============ */
@media (prefers-reduced-motion: reduce) {
  .verdict, .row { opacity: 1 !important; transform: none !important; }
  .scan { display: none !important; }
  .doc-head .status .dot { background: var(--text-primary) !important; }
}

/* ============ FOOTER ============ */
.footer { border-top: 1px solid var(--border); padding-block: var(--s-7); margin-top: var(--s-8); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; color: var(--text-muted); font-size: var(--t--1); }
.footer .brand { font-size: var(--t-5); }
.footer a { color: var(--text-muted); text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
.footer .links a { display: inline-flex; align-items: center; min-height: 44px; } /* 44px hit area */
.footer a:hover { color: var(--text-secondary); }
.footer .links { display: flex; gap: var(--s-5); }

/* ============ Hero verification sequence ============
   The brief reads as plain text, then Cachet checks it, slowly: the scan passes,
   the verified citation confirms (underline draws in and it settles to ink), and
   the fabricated one is caught (it goes oxblood) last, just before the verdict
   lands. Paced deliberately so the labor is watched. The base rule is the
   resolved look, so reduced-motion and no-animation show the final result with no
   movement. transform/opacity and a brief paint on two inline spans only; no
   layout, composites fine. */
@keyframes cite-confirm { from { text-decoration-color: transparent; color: var(--text-secondary); } }
@keyframes flag-catch {
  0%   { color: var(--text-secondary); background: transparent; box-shadow: 0 0 0 0 hsl(351 50% 40% / 0); }
  50%  { box-shadow: 0 0 0 4px hsl(351 50% 40% / 0.18); }
  100% { color: var(--flag); background: var(--flag-wash); box-shadow: 0 0 0 1px var(--flag-edge); }
}
.doc .cite { animation: cite-confirm 0.9s var(--ease-out) 2.8s both; }
.doc .flag { animation: flag-catch  0.9s var(--ease-out) 4s both; }
@media (prefers-reduced-motion: reduce) {
  .doc .cite, .doc .flag { animation: none; }
}

/* ============ Filmstrip: a cinematic plate, an exhibit on the desk ============
   A still of the catch at the danger->discipline seam (after .stakes). On paper
   the warm-dark photo is framed as a photographic plate (hairline, soft shadow,
   small radius) rather than feathered into the page, so it reads as evidence set
   on the desk. object-position favors the upper frame, which crops the image's
   bottom-right corner (and the generation watermark) out of view. A faint inner
   vignette gives the plate depth. The only hue is the single oxblood mark inside
   the photo. No motion of its own beyond the shared scroll reveal. */
.filmstrip {
  position: relative; z-index: 1; margin-block: var(--s-9); overflow: hidden;
}
.filmstrip img {
  display: block; width: 100%;
  height: clamp(300px, 44vh, 500px);
  object-fit: cover; object-position: 50% 30%;
  /* A slight zoom toward the upper frame clips the bottom-right corner, which
   * carries the image's generation watermark, cleanly out of view. The asset
   * is left untouched. */
  transform: scale(1.1); transform-origin: 45% 12%;
  filter: saturate(0.96) contrast(1.02);
}
/* No hard frame: the still emerges from the page and settles back into it, its
 * four edges feathered to the paper. The bottom and right fades, with the scale
 * crop above, keep the generation watermark out of view. */
.filmstrip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 15%, transparent 76%, var(--bg) 100%),
    linear-gradient(to right,  var(--bg) 0%, transparent 8%,  transparent 92%, var(--bg) 100%);
}
@media (max-width: 820px) {
  .filmstrip img { height: clamp(220px, 40vh, 360px); }
}

/* ============ Brand: the wordmark shortens into the mark on scroll ============
   At the top the header shows the full "Cachet" wordmark. On first scroll (the
   shared .scrolled state) the word collapses and the real two-arc mark draws
   itself in: a one-shot path-draw (slowed to 1700ms, slow then accelerating) on
   the genuine open-ring C. The shape is never altered and never takes color;
   currentColor keeps it the same ink as the wordmark. Reduced-motion holds the
   finished mark with no draw. Footer brand is untouched (scoped to header). */
.site-header .brand { gap: 0; --cachet-dur-reveal: 1700ms; --cachet-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.site-header .brand-word {
  display: inline-block; white-space: nowrap; overflow: hidden;
  max-width: 8em; opacity: 1;
  transition: max-width var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out);
}
.site-header .brand-mark {
  display: block; flex: none; width: 0; height: 0.82em; opacity: 0;
  color: var(--text-primary); transform: scale(1.2); transform-origin: left center;
  transition: width var(--dur-4) var(--ease-out), opacity var(--dur-4) var(--ease-out),
              transform var(--dur-4) var(--ease-out);
}
.site-header .brand-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.site-header.scrolled .brand-word { max-width: 0; opacity: 0; }
.site-header.scrolled .brand-mark { width: 0.82em; opacity: 1; transform: scale(1.5); }
.site-header.scrolled .brand-mark path {
  animation: cachet-reveal var(--cachet-dur-reveal) var(--cachet-ease-in) forwards;
}
@keyframes cachet-reveal { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .site-header .brand-mark path { stroke-dashoffset: 0; }
}