/* ============================================================
   The CV Method — apex front door
   Layout only. colors/typography/spacing/fonts are the brand token files,
   copied verbatim from the landing project so the two surfaces cannot drift
   in palette or type. See README.md for the sync command.

   Deliberately self-contained beyond those tokens: this page is temporary and
   should be deletable in one move once the dashboards live on
   thecustomerview.com. No shared component layer, no JS.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,p,ul,li{margin:0;padding:0}
ul{list-style:none}
html{-webkit-text-size-adjust:100%}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--leading-body);
  color:var(--text-invert);
  background:var(--ink-900);
  -webkit-font-smoothing:antialiased;
}

/* the same poster treatment as the landing hero, so the two read as one brand */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(55% 55% at 76% 24%,rgba(37,99,235,.42),transparent 62%),
    radial-gradient(50% 50% at 14% 78%,rgba(111,217,192,.22),transparent 60%),
    radial-gradient(75% 75% at 50% 50%,rgba(34,211,238,.26),transparent 66%),
    var(--ink-900);
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,10,18,.72),rgba(5,10,18,.86));
}

.wrap{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:var(--container-narrow);
  margin-inline:auto;
  padding:var(--space-4) var(--space-3) var(--space-3);
}

:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:6px}

/* ---- brand mark (mirrors core/Logo, tone=white) ---- */
.logo{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  min-height:var(--hit-min);
  font-family:var(--font-display);
  letter-spacing:var(--tracking-display);
  line-height:1;
  font-size:1.05rem;
  color:#fff;
  text-decoration:none;
}
.logo svg{flex:none;width:1.75em;height:1.75em}
.logo .t-the{font-weight:var(--fw-display-quiet);color:#8FA3B4}
.logo .t-cv{font-weight:var(--fw-display)}
.logo .t-method{font-weight:var(--fw-display-quiet)}

/* ---- headline ----
   Deliberately --fs-h2, not --fs-h1: this is a signpost, not a hero. The
   landing page does the persuading; this page's whole job is to get someone
   to the right place in one glance. No max-width here — a `ch` limit on this
   wrapper would be measured in the BODY font while the h1 renders in the
   display font, which collapsed it to one word per line. */
.head{margin-top:var(--space-4)}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--mint);
}
h1{
  margin-top:var(--space-2);
  max-width:18ch;                 /* in the display font, where it belongs */
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h2);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  text-wrap:balance;
}
.lede{
  margin-top:var(--space-2);
  max-width:46ch;
  color:rgba(242,247,249,.92);
}

/* ---- the two routes ---- */
.routes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  margin-top:var(--space-4);
}
@media (max-width:719px){.routes{grid-template-columns:1fr}}

.route{
  display:flex;
  flex-direction:column;
  padding:clamp(20px,4vw,28px);
  border:1px solid var(--border-dark);
  border-radius:var(--radius-lg);
  background:var(--surface-card-dark);
}
.route h2{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
}
.route p{margin-top:var(--space-1);color:var(--text-muted-dark)}
.route p + p{margin-top:var(--space-1)}
/* auto margin pins the action to the bottom of whichever card is taller, so
   the two buttons sit on the same line however the copy wraps */
.route .action{margin-top:auto;padding-top:var(--space-3)}

.note{
  margin-top:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid var(--border-dark);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:var(--tracking-mono);
  color:var(--slate-300);
}

/* ---- buttons (mirrors core/Button; --grad-cta is the AA-safe fill) ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:var(--hit-min);
  padding:14px 26px;
  border:none;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:var(--fw-body-strong);
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
}
.btn--primary{
  color:#fff;
  /* same corrected gradient as the landing page: every stop clears 4.5:1
     against white. See cvmethod-landing/css/styles.css for the measurements. */
  background-image:linear-gradient(120deg,#0F766E 0%,#0E7490 45%,#1D4ED8 100%);
  box-shadow:var(--shadow-2);
}
.btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.38);   /* .28 measures 2.39:1 on ink */
  color:var(--text-invert);
}

/* ---- footer ---- */
.foot{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--container-narrow);
  margin-inline:auto;
  padding:var(--space-3);
  border-top:1px solid var(--border-dark);
  font-size:var(--fs-small);
  color:var(--text-muted-dark);
}
.foot a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:#fff}
.foot .contact{
  display:inline-flex;
  align-items:center;
  min-height:var(--hit-min);
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}