/* ==========================================================================
   NexCam — content/SEO page styles.
   Net-new components only. Tokens, fonts, background, nav, footer, badge,
   .eyebrow, .display, .lead and .card all come from styles.css (loaded first).
   Spotlight throughout: one amber light, Instrument Serif display, Inter body.
   ========================================================================== */

:root {
  /* Hairlines — warm, low-alpha bone to match the Spotlight neutrals. */
  --line:        rgba(239,235,226,0.10);
  --line-strong: rgba(239,235,226,0.18);
  /* Readable long-form body, matching the legal pages' warm body ink. */
  --prose-ink:   #C9C6BE;
}

/* --- Page scaffold -------------------------------------------------------- */
/* The shared nav is position:fixed; the breadcrumb is always first inside
   .wrap, so it carries the clearance for every content page. */
.crumb {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pewter);
  padding: 100px 0 0;
}
.crumb a { color: var(--pewter); transition: color var(--t-micro) var(--ease-out); }
.crumb a:hover { color: var(--bone); }
.crumb span { color: var(--bone); }

/* --- Content hero (distinct from the homepage .hero) ---------------------- */
.page-hero { padding: 24px 0 40px; }
.page-hero h1, article.prose h1 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  line-height: 1.0; color: var(--bone);
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin: var(--s4) 0 0;
}
.page-hero h1 em, article.prose h1 em { font-style: italic; color: var(--bone); } /* restrained, like the homepage */
.lede {
  color: var(--pewter); line-height: 1.55; max-width: 60ch;
  font-size: clamp(1.08rem, 1.7vw, 1.32rem); margin-top: var(--s5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); }
.price-line { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--pewter); margin-top: var(--s5); }
.price-line b { color: var(--bone); font-weight: 500; }
.price-line a { color: var(--spotlight); text-underline-offset: 3px; }
.price-line a:hover { text-decoration: underline; }
.byline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--pewter); margin-top: var(--s4); }
.byline b { color: var(--bone); font-weight: 500; }

/* --- Eyebrow dot ---------------------------------------------------------- */
/* The shared .eyebrow renders its dot from a .dot child element. The content
   pages' eyebrows have no child, so synthesise the glowing amber dot here.
   Scoped to content pages only (this sheet is loaded only by them). */
.eyebrow::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--spotlight); box-shadow: 0 0 8px 1px rgba(232,181,71,0.7);
}

/* --- Section rhythm ------------------------------------------------------- */
.prose, .faq, .related { padding: 34px 0; border-top: 1px solid var(--line); }
.page-hero { border-top: none; }
/* Long-form articles nest their own <section>s. */
article.prose { padding: 0; border-top: none; }
article.prose > section { padding: 30px 0; border-top: 1px solid var(--line); }
article.prose > section:first-child { border-top: none; }

/* --- Headings inside content --------------------------------------------- */
.prose h2, .faq h2, .related h2, .cta-band h2 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em;
  line-height: 1.05; color: var(--bone);
  font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 0.5em;
}
article.prose h2 { margin-top: 0.4em; }
.prose h3 { font-family: var(--font-display); font-weight: 400; color: var(--bone);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 0 0 0.3em; }

/* --- Prose body ----------------------------------------------------------- */
.prose p { color: var(--prose-ink); margin: 0 0 1.05em; max-width: 68ch; line-height: 1.7; }
.prose p strong { color: var(--bone); font-weight: 600; }
.prose ul { list-style: none; margin: 0 0 1.2em; max-width: 68ch; padding: 0; }
.prose ul li { position: relative; padding-left: 24px; margin: 0.5em 0; color: var(--prose-ink); line-height: 1.65; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--spotlight); }
.prose ul li strong { color: var(--bone); font-weight: 600; }
.prose a { color: var(--spotlight); text-underline-offset: 3px; }
.prose a:hover { text-decoration: underline; }

/* --- Comparison table ----------------------------------------------------- */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; margin-top: var(--s3); font-size: 0.94rem;
  border: 1px solid var(--line); border-radius: var(--r-compact); overflow: hidden; }
.cmp th, .cmp td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pewter); background: var(--slate); font-weight: 500; }
.cmp thead th.you { color: var(--spotlight); }
.cmp td:first-child { color: var(--bone); font-weight: 500; }
.cmp td.you { color: var(--bone); }
.cmp td.you b { color: var(--spotlight); }
.cmp tr:last-child td { border-bottom: none; }
.cmp .yes { color: var(--spotlight); font-weight: 600; }
.cmp .no { color: var(--pewter); }
.cmp-note { font-family: var(--font-mono); font-size: 11px; color: var(--pewter);
  letter-spacing: 0.02em; margin-top: var(--s4); line-height: 1.5; }

/* --- FAQ accordion -------------------------------------------------------- */
.faq details { border: 1px solid var(--line); border-radius: var(--r-compact);
  background: var(--onyx); margin-bottom: var(--s3); overflow: hidden; }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 600; font-size: 1.01rem;
  color: var(--bone); list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--spotlight);
  font-size: 1.3rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .a { padding: 14px 18px 18px; color: var(--prose-ink); font-size: 0.97rem; line-height: 1.65; }
.faq .a p { margin: 0 0 0.7em; max-width: 68ch; }
.faq .a p:last-child { margin: 0; }

/* --- Callout -------------------------------------------------------------- */
.callout { background: var(--onyx); border: 1px solid var(--line); border-left: 2px solid var(--spotlight);
  border-radius: var(--r-compact); padding: 20px 22px; margin: var(--s5) 0; }
.callout .eyebrow { margin-bottom: var(--s3); }
.callout p { margin: 0; color: var(--prose-ink); line-height: 1.65; }
.callout a { color: var(--spotlight); text-underline-offset: 3px; }
.callout a:hover { text-decoration: underline; }

/* --- Card grid (commitments, related) ------------------------------------ */
.grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  margin-top: var(--s4); }
.prose .card { padding: var(--s5); }
.card .n { font-family: var(--font-mono); font-size: 12px; color: var(--spotlight);
  letter-spacing: 0.1em; margin-bottom: var(--s3); display: block; }
.card h3 { font-family: var(--font-display); font-weight: 400; color: var(--bone);
  font-size: 1.2rem; margin: 0 0 0.3em; line-height: 1.1; }
.card p { color: var(--pewter); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* --- Related links -------------------------------------------------------- */
.related .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.related .card { padding: var(--s5); display: block; }
.related .card:hover { transform: translateY(-2px); }
.related .card h3 { font-size: 1.05rem; margin-bottom: 0.35em; }
.related .card .go { font-family: var(--font-mono); font-size: 11px; color: var(--spotlight);
  letter-spacing: 0.05em; text-transform: uppercase; margin-top: var(--s3); display: inline-block; }

/* --- Final CTA band ------------------------------------------------------- */
.cta-band { text-align: center; border-top: 1px solid var(--line); padding: 56px 0 64px; }
.cta-band h2 { margin: 0 auto var(--s6); max-width: 18ch; }
.cta-band .badge { margin-inline: auto; }

/* --- Entrance motion ------------------------------------------------------ */
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.up { animation: up 0.6s var(--ease-out) both; }
.up.d1 { animation-delay: 0.06s; } .up.d2 { animation-delay: 0.12s; }
.up.d3 { animation-delay: 0.18s; } .up.d4 { animation-delay: 0.24s; }

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

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 720px) {
  .crumb { padding-top: 84px; }
  .page-hero { padding-top: 16px; }
}