/* ============================================================================
   Retirement Made Clear — assets/convert.css  (Phase 4: conversion-point system)
   Spec: `Research/RMC design elevation spec v2 - 2026-07-21.md` §5 — the
   Ramsey lesson, compliantly. Companion logic: assets/convert.js (mounts the
   components from a small per-page-type config; pages only wire the two tags).

   Components (all mounted by convert.js — nothing here renders without it):
     C1  .cv-c1   quiet inline prompt   — mid-article, hairline rules, no box
     C2  .cv-c2   result/end panel      — THE named-firm ink card; carries the
                                          page's ONE .btn.high (amber) + the
                                          adjacent disclosure line
     C3  .cv-c3   hub banner            — quiet strip; Checkup CTA + Talk link;
                                          never the amber button
     C4  .cv-c4   course-progress nudge — ch4 ("Halfway there.") + ch8

   Placement discipline (the anti-Ramsey restraint — enforced in convert.js):
     articles ≤ 1×C1 + 1×C2 · hubs C3 + C2-at-bottom · course C4 on ch4+ch8,
     C2 on ch8 only · learn/basics C3 only. One .btn.high per page, max.
     Never two components adjacent; never inside disclaimers.

   Uses rmc.css tokens + shared classes (.kicker, .btn, .arr) only — no new
   colors, radii, shadows, or type families. Contrast (measured): sub line
   #C0C6CC on Ink #28313B ≈ 7.4:1; disclosure #A9B0B8 on Ink ≈ 5.9:1;
   .btn.high inherits rmc.css's verified 5.87:1 Ink-on-Amber pairing.
   ========================================================================== */

/* ---------------------------------------------- C1 — quiet inline prompt --- */
/* The most restrained thing on the page: text between two hairlines.
   No card, no shadow, no button.                                             */
.cv-c1{
  margin:2.6rem 0;
  padding:1.1rem 0.1rem 1.2rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cv-c1 .kicker{margin-bottom:0.5rem;}
.cv-c1-line{
  font-size:1.0313rem; line-height:1.6; color:var(--ink); margin:0;
}
.cv-go{
  white-space:nowrap; font-weight:600; color:var(--deep);
  display:inline-flex; align-items:center; gap:0.4em;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:transparent;
  transition:color .15s var(--ease-out), text-decoration-color .25s ease-in-out;
}
.cv-go .arr{color:var(--clear); transition:transform .15s var(--ease-out);}
.cv-go:hover{color:var(--clear); text-decoration-color:currentColor;}
.cv-go:hover .arr{transform:translateX(3px);}

/* ------------------------------------------------ C2 — result/end panel --- */
/* The named-firm card (Ramsey P2, at RMC restraint): Ink panel, serif
   headline, ONE amber .btn.high, quiet Checkup alternative, disclosure line
   inside the panel — adjacent to the CTA it governs, not only in the footer. */
.cv-c2{
  background:var(--ink); border-radius:var(--r-lg);
  padding:2rem 2rem 1.7rem; margin-top:2.8rem;
  box-shadow:var(--shadow-2);
}
.cv-c2-head{
  font-family:var(--font-display); font-weight:600;
  font-size:1.5rem; line-height:1.25; letter-spacing:-0.01em;
  color:var(--paper); margin:0 0 0.7rem; max-width:30ch;
}
.cv-c2-sub{
  color:var(--on-dark); font-size:1rem; line-height:1.65;
  margin:0 0 1.5rem; max-width:58ch;
}
.cv-c2-actions{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  margin:0 0 1.3rem;
}
.cv-c2-alt{
  color:var(--paper); font-weight:500; font-size:0.9375rem;
  display:inline-flex; align-items:center; gap:0.45em;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(250,249,245,0.4);
  transition:text-decoration-color .25s ease-in-out;
}
.cv-c2-alt:hover{color:var(--paper); text-decoration-color:var(--paper);}
.cv-c2-alt .arr{color:var(--on-dark); transition:transform .15s var(--ease-out);}
.cv-c2-alt:hover .arr{transform:translateX(3px);}
.cv-c2-disclosure{
  font-size:0.78125rem;              /* 12.5px — footer .disclosure scale */
  font-style:italic; line-height:1.6; color:#A9B0B8;
  border-top:1px solid rgba(250,249,245,0.14);
  padding-top:0.9rem; margin:0; max-width:72ch;
}

/* hub variant: the panel sits in its own band at the page bottom (replacing
   the retired ink .who band — the panel IS the page's dark moment)          */
.cv-c2-band{padding:56px 0 4px;}
.cv-c2-band .cv-c2{margin-top:0;}

/* --------------------------------------------------- C3 — hub banner --- */
/* Browsing context, not a decision moment: kicker + one line + outline
   button + quiet Talk link. Never the amber button.                        */
.cv-c3{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem 2rem; flex-wrap:wrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.4rem 0.1rem 1.5rem;
}
.cv-c3-copy{max-width:56ch;}
.cv-c3-copy .kicker{margin-bottom:0.45rem;}
.cv-c3-line{font-size:1.0313rem; line-height:1.6; color:var(--ink); margin:0;}
.cv-c3-actions{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;}
/* placed under a hub's quick-ref section, in its own quiet strip */
.cv-c3-band{padding:44px 0 2px;}
/* replacing the end-of-page card on learn/basics (inside the section wrap) */
.cv-c3--end{margin-top:2.6rem;}

/* ------------------------------------- C4 — course-progress nudge --- */
/* Pure encouragement (no ask): mono kicker, thin Clear-blue progress bar,
   serif line. Sits after the takeaways box on ch4 and ch8 only.            */
.cv-c4{
  margin:2.4rem 0;
  padding:1.2rem 0.1rem 1.3rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cv-c4 .kicker{margin-bottom:0.75rem;}
.cv-c4-bar{
  height:6px; background:var(--line); border-radius:var(--r-pill);
  overflow:hidden; margin:0 0 0.9rem;
}
.cv-c4-fill{
  display:block; height:100%; width:var(--cvw,100%);
  background:var(--clear); border-radius:var(--r-pill);
}
.cv-c4-head{
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:1.3rem; line-height:1.2; color:var(--ink); margin:0 0 0.3rem;
}
.cv-c4-sub{font-size:0.9375rem; color:var(--ink-soft); line-height:1.55; margin:0;}

/* ------------------------------------------------------ reveal motion --- */
/* Own reveal system (convert.js) — deliberately independent of motion.js's
   observer, which has already initialized by the time these mount. Same
   grammar: 20px rise, .6s, --ease-reveal, once. The C4 bar draws in on
   reveal (.7s — inside the sanctioned duration set).                       */
.cv-pre{opacity:0; transform:translateY(20px);}
.cv-anim{transition:opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal);}
.cv-in{opacity:1; transform:none;}
.cv-pre .cv-c4-fill{width:0;}
.cv-anim .cv-c4-fill{transition:width .7s var(--ease-draw) .15s;}
.cv-in .cv-c4-fill{width:var(--cvw,100%);}

@media (prefers-reduced-motion:reduce){
  .cv-pre,.cv-anim{opacity:1 !important; transform:none !important; transition:none !important;}
  .cv-pre .cv-c4-fill,.cv-anim .cv-c4-fill{width:var(--cvw,100%) !important; transition:none !important;}
}

/* -------------------------------------------------------- responsive --- */
@media (max-width:600px){
  .cv-c2{padding:1.5rem 1.3rem 1.4rem;}
  .cv-c2-actions{flex-direction:column; align-items:stretch; gap:0.9rem;}
  .cv-c2-actions .btn{width:100%;}
  .cv-c2-alt{align-self:center;}
  .cv-c3{flex-direction:column; align-items:stretch;}
  .cv-c3-actions{flex-direction:column; align-items:stretch; gap:0.9rem;}
  .cv-c3-actions .btn{width:100%;}
  .cv-c3-actions .cv-go{align-self:center;}
  .cv-c2-band{padding:44px 0 2px;}
  .cv-c3-band{padding:36px 0 0;}
}