/* ============================================================
   Features deep-dive page — restructured 2026-05-30.
   Layers on top of index.css (shared tokens, nav, footer,
   container, label, em.serif, reveal, buttons, section-pad,
   section-head, bg-deep/wash/warm, sec-grid/sec-card, stages).
   Strict CSP: classes only — no inline style=/on*=, no <style>.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────── */
.fp-hero { padding: 150px 0 72px; position: relative; overflow: hidden; }
.fp-hero::before {
  content: ''; position: absolute; top: -30%; right: -10%;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(196,154,108,0.07) 0%, transparent 65%);
  border-radius: 50%; pointer-events: none;
}
.fp-hero .fp-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.fp-hero h1 {
  font-weight: 300; font-size: clamp(34px, 5vw, 58px);
  letter-spacing: 0.02em; line-height: 1.08; color: var(--deep); margin-top: 16px;
}
.fp-hero h1 em { font-family: var(--font-accent); font-style: italic; color: var(--copper); font-weight: 400; }
.fp-hero .fp-sub { font-size: clamp(16px, 2vw, 19px); line-height: 1.7; color: var(--smoke); max-width: 600px; margin-top: 22px; }
.fp-hero .fp-sub strong { color: var(--deep); font-weight: 500; }

/* ── Capability jump-index ────────────────────────────── */
.fp-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 52px; position: relative; z-index: 1; }
@media (max-width: 880px) { .fp-index { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fp-index { grid-template-columns: 1fr; } }
.fp-index-card {
  display: block; text-decoration: none; padding: 22px 22px 24px;
  border: 1px solid var(--cloud); border-radius: 14px; background: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.fp-index-card:hover { border-color: var(--pale); box-shadow: 0 8px 32px rgba(10,22,40,0.08); transform: translateY(-2px); }
.fp-index-card .fic-num { font-family: var(--font-mono); font-size: 12px; color: var(--copper); letter-spacing: 0.04em; }
.fp-index-card h3 { font-weight: 400; font-size: 17px; color: var(--deep); margin: 12px 0 7px; line-height: 1.25; }
.fp-index-card h3 em { font-family: var(--font-accent); font-style: italic; color: var(--copper); font-weight: 400; }
.fp-index-card p { font-size: 13px; line-height: 1.55; color: var(--smoke); }

/* ── Capability-area intro ────────────────────────────── */
.cap-intro { max-width: 680px; }
.cap-intro .haiman-h2 {
  font-weight: 300; font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: 0.02em; line-height: 1.16; color: var(--deep);
  margin-top: 14px;
}
.cap-intro .haiman-h2 em { font-family: var(--font-accent); font-style: italic; color: var(--copper); font-weight: 400; }
.bg-deep .cap-intro .haiman-h2 { color: var(--white); }
.cap-intro .cap-lede { font-size: 18px; line-height: 1.7; margin-top: 16px; color: var(--smoke); }
.bg-warm .cap-intro .cap-lede { color: var(--bronze); }
.cap-intro .cap-lede em { font-family: var(--font-accent); font-style: italic; color: var(--copper); font-weight: 400; }

/* ── Feature cards ────────────────────────────────────── */
.feat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 880px) { .feat-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat-cards { grid-template-columns: 1fr; } }
.feat-card {
  padding: 26px 24px; border-radius: 14px; border: 1px solid var(--cloud); background: var(--white);
  box-shadow: 0 1px 2px rgba(10,22,40,0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.feat-card:hover { border-color: var(--pale); box-shadow: 0 8px 32px rgba(10,22,40,0.07); transform: translateY(-2px); }
.feat-card .fc-name { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.feat-card .fc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--copper); flex-shrink: 0; }
.feat-card h4 { font-weight: 500; font-size: 16px; color: var(--deep); letter-spacing: 0.01em; }
.feat-card p { font-size: 14px; line-height: 1.62; color: var(--smoke); }
.feat-card p strong { color: var(--deep); font-weight: 500; }

/* ── "Why it matters" band ────────────────────────────── */
.why-band {
  margin-top: 40px; padding: 28px 32px; border-radius: 14px;
  background: rgba(18,40,75,0.045); border: 1px solid var(--cloud);
}
.why-band .wb-label { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); margin-bottom: 12px; }
.why-band p { font-size: 16px; line-height: 1.72; color: var(--slate); max-width: 760px; }
.why-band p strong { color: var(--deep); font-weight: 500; }
.why-band p em { font-family: var(--font-accent); font-style: italic; color: var(--copper); font-weight: 400; }
/* Warm-sand canvas (Personal-AI area) gets a warm-tinted band. */
.why-band.warm { background: rgba(139,94,60,0.08); border-color: var(--sand); }

/* ── Closing CTA ──────────────────────────────────────── */
.fp-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 860px; margin: 0 auto; }
@media (max-width: 720px) { .fp-cta { grid-template-columns: 1fr; } }
.fp-cta-card { padding: 38px 34px; border-radius: 16px; border: 1px solid var(--cloud); background: var(--white); display: flex; flex-direction: column; }
.fp-cta-card.accent { border-color: var(--copper); box-shadow: 0 8px 32px rgba(10,22,40,0.1); }
.fp-cta-card .cc-label { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); margin-bottom: 12px; }
.fp-cta-card h3 { font-weight: 300; font-size: 26px; color: var(--deep); letter-spacing: 0.01em; margin-bottom: 12px; }
.fp-cta-card h3 em { font-family: var(--font-accent); font-style: italic; color: var(--copper); font-weight: 400; }
.fp-cta-card p { font-size: 15px; line-height: 1.65; color: var(--smoke); margin-bottom: 24px; flex: 1; }
.fp-cta-card .cc-btn { margin-top: auto; justify-content: center; }

/* ============================================================
   v2 "Convergence" layer — features page (2026-06-04).
   Arc emphasis (retires the serif-italic word) + the faint
   two-arc convergence motif behind the hero. The --arc token and
   the motifDraw / motifDot keyframes are defined in index.css,
   which loads before this file.
   ============================================================ */

/* ── Arc emphasis on headings ─────────────────────────── */
.fp-hero h1 em,
.fp-index-card h3 em,
.cap-intro .haiman-h2 em,
.fp-cta-card h3 em {
  font-family: var(--font-body); font-style: normal; font-weight: 500;
  color: var(--deep);
  background-image: var(--arc); background-repeat: no-repeat;
  background-position: left 100%; background-size: 100% 0.26em; padding-bottom: 0.12em;
}
.bg-deep .cap-intro .haiman-h2 em { color: var(--white); }

/* ── Quiet in-body emphasis: drop the serif, keep a light accent ── */
.cap-intro .cap-lede em, .why-band p em {
  font-family: var(--font-body); font-style: normal; font-weight: 500; color: var(--copper);
}
.bg-warm .cap-intro .cap-lede em { color: var(--bronze); }

/* ── Faint convergence motif behind the hero (top-right) ── */
.fp-hero-motif {
  position: absolute; top: 64px; right: -40px; width: 360px; height: 360px;
  z-index: 0; pointer-events: none; opacity: 0.75;
}
@media (max-width: 920px) { .fp-hero-motif { opacity: 0.35; width: 260px; height: 260px; } }
.fp-hero-motif path { fill: none; }
.fp-hero-motif .arc-h, .fp-hero-motif .arc-m { stroke-dasharray: 1; stroke-dashoffset: 0; }
.fp-hero-motif .dot-core, .fp-hero-motif .dot-ring {
  transform: scale(1); transform-origin: center; transform-box: fill-box;
}
@media (prefers-reduced-motion: no-preference) {
  .fp-hero-motif .arc-h, .fp-hero-motif .arc-m { animation: motifDraw 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .fp-hero-motif .arc-m { animation-delay: 0.16s; }
  .fp-hero-motif .dot-core, .fp-hero-motif .dot-ring { animation: motifDot 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s both; }
  .fp-hero-motif .dot-ring { animation-delay: 1.07s; }
}