/* ============================================================================
   VocalBridge 7-Day Challenge — DeepLearning.AI
   Shared design system · DeepLearning.AI brand
   Poppins (headings) + Open Sans (body) · warm paper · DL Carnation coral
   (#F65B66) + Indigo 600 (#4F46E5).
   One narrow centered column, one slim sticky header, consistent on every page.
   ========================================================================== */

:root {
  /* — Brand / accent — */
  --coral:        #f65b66;  /* DL Carnation — primary action */
  --coral-strong: #e0454f;  /* hover / active */
  --coral-deep:   #c43d47;  /* coral text on light bg (AA) */
  --coral-soft:   #fdecea;  /* tint surface */
  --coral-line:   #f4d3cf;

  /* — VocalBridge (partner) accent — Indigo 600 — */
  --vb:        #4f46e5;  /* indigo-600 — partner action */
  --vb-strong: #4338ca;  /* indigo-700 — hover / active */
  --vb-deep:   #3730a3;  /* indigo-800 — text on light bg (AA) */
  --vb-soft:   #eef2ff;  /* indigo-50 — tint surface */
  --vb-line:   #c7d2fe;  /* indigo-200 */

  /* — Ink / text (warm) — */
  --ink:    #1a1714;  /* headings — warm near-black */
  --ink-2:  #2b2620;
  --body:   #4a453f;  /* paragraph text */
  --muted:  #6f685f;
  --faint:  #9b9388;

  /* — Surfaces / lines (warm paper) — */
  --paper:     #ffffff;  /* page background */
  --paper-2:   #f3ede4;  /* recessed band */
  --surface:   #ffffff;  /* cards, header */
  --surface-2: #f5f6f8;  /* tinted card */
  --surface-3: #ebedf1;
  --hairline:  #e8eaef;
  --hairline-2:#d9dde4;

  /* — Ink surfaces (terminal / dark bands) — */
  --night:   #14110f;
  --night-2: #221b16;

  /* — Status — */
  --ok:      #0f7a5f;
  --ok-soft: #e4f3ec;
  --ok-line: #b9e2d2;
  --gold:    #d99a1f;

  /* — Radius — */
  --r-xs: 7px;
  --r-sm: 9px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* — Elevation (warm-tinted shadows) — */
  --shadow-sm: 0 1px 2px rgba(40,28,16,.05), 0 2px 8px rgba(40,28,16,.05);
  --shadow:    0 8px 30px rgba(40,28,16,.08);
  --shadow-lg: 0 22px 60px rgba(40,28,16,.14);

  /* — Type — Poppins (headings) + Open Sans (body), DL brand — */
  --display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  /* — Type scale · 1.25 modular (brand spec), optical kerning — */
  --fs-display:  clamp(40px, 8vw, 62.5px);  /* hero / page title · ~2× headline */
  --fs-headline: 31.25px;  /* Poppins SemiBold */
  --fs-subhead:  20px;     /* Poppins Medium */
  --fs-body:     16px;     /* Open Sans Regular */
  --fs-cta:      14px;     /* Poppins SemiBold */

  /* — Layout — */
  --reading: 720px;   /* the single narrow content column */
}

/* ------------------------------------------------------------------ reset */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;            /* "optical" kerning — use the font's kern table */
  font-feature-settings: "kern" 1;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--coral-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; line-height: 1.14; font-kerning: normal; }
h1, h2 { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: var(--fs-headline); line-height: 1.2; letter-spacing: -.01em; }
h3, h4 { font-family: var(--display); font-weight: 500; font-size: var(--fs-subhead); letter-spacing: -.005em; }
p { margin: 0; }
::selection { background: rgba(246,91,102,.22); }
:focus-visible { outline: 3px solid rgba(246,91,102,.45); outline-offset: 2px; border-radius: 6px; }

code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--surface-3);
  color: #5b4a36;
  padding: 1.5px 6px;
  border-radius: 5px;
}

/* --------------------------------------------------------------- layout */
.reading { width: 100%; max-width: var(--reading); margin: 0 auto; padding: 0 24px; }
.reading--slim { max-width: 620px; }  /* long-form pages: narrower measure, more side air */
.section { padding: 56px 0; }
.section--tight { padding: 36px 0; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* ====================================================== co-brand bar */
/* First element on every page, directly under the DL.AI platform navbar.
   Slim full-width hairline band — label and logos on one line. */
.collab { border-bottom: 1px solid var(--hairline); background: var(--surface); }
.collab__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 26px 24px; text-align: center;
}
.collab__lbl {
  font-size: 23px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.collab__logos { display: inline-flex; align-items: center; gap: 15px; }
.collab__dlai { display: block; height: 30px; width: auto; }
.collab__x { font-size: 15px; color: var(--hairline-2); }
.collab__vb { display: block; height: 28px; width: auto; }

/* --------------------------------------------------------------- eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--coral-deep); background: var(--coral-soft);
  border: 1px solid var(--coral-line);
  padding: 6px 14px; border-radius: var(--r-pill);
}
.eyebrow--live { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.eyebrow--neutral { color: var(--muted); background: var(--surface-3); border-color: var(--hairline-2); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.eyebrow--live .dot { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 24px;
  font: 600 var(--fs-cta)/1 var(--display); letter-spacing: 0;
  border: 1.5px solid transparent; border-radius: 11px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .04s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--coral); color: #fff; box-shadow: 0 6px 18px rgba(246,91,102,.25); }
.btn--primary:hover { background: var(--coral-strong); box-shadow: 0 8px 22px rgba(246,91,102,.32); }
.btn--secondary { background: var(--surface); color: var(--coral-deep); border-color: var(--coral-line); }
.btn--secondary:hover { background: var(--coral-soft); border-color: var(--coral); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--hairline-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--vb { background: var(--vb); color: #fff; box-shadow: 0 6px 18px rgba(79,70,229,.24); }
.btn--vb:hover { background: var(--vb-strong); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); }
.btn--lg { height: 56px; padding: 0 30px; }
.btn--block { width: 100%; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================== HERO */
.hero { padding: 64px 0 8px; text-align: center; }
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 {
  font-size: var(--fs-display); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.08; margin: 0 0 20px;
}
.hero h1 .hl { color: var(--coral); font-style: italic; }
/* prominent challenge dates, directly under the title */
.dateline {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(20px, 3.2vw, 25px); color: var(--coral-deep);
  margin: 0 0 18px;
}
.dateline svg { width: 22px; height: 22px; flex: none; }
.hero .lede { font-size: var(--fs-subhead); color: var(--muted); line-height: 1.5; max-width: 560px; margin: 0 auto; }
.trust-line { font-size: 13.5px; color: var(--faint); margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.trust-line b { color: var(--muted); font-weight: 600; }
.hero-course { font-size: 14.5px; color: var(--muted); margin: 20px auto 0; line-height: 1.55; max-width: 480px; }
.hero-course a { font-weight: 600; }

.hero-art { display: flex; justify-content: center; margin: 40px auto 0; }
.hero-art figure { margin: 0; width: 100%; max-width: 360px; filter: drop-shadow(0 30px 50px rgba(40,28,16,.18)); }
.hero-art svg { width: 100%; height: auto; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }

/* ----------------------- secondary CTA: slim course pill under the form */
.course-line {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 9px 18px 9px 14px;
  background: var(--coral-soft); border: 1px solid var(--coral-line);
  border-radius: var(--r-pill);
  font-size: 13.5px; color: var(--coral-deep);
  transition: border-color .15s, box-shadow .15s;
}
.course-line:hover { border-color: var(--coral); box-shadow: var(--shadow-sm); text-decoration: none; }
.course-line__k {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding-right: 10px; border-right: 1px solid var(--coral-line); white-space: nowrap;
}
.course-line__t b { font-weight: 700; }
.course-line .arrow { transition: transform .15s; }
.course-line:hover .arrow { transform: translateX(3px); }

/* ------------------------------------------------- email capture (swap pt) */
.email-capture { max-width: 440px; margin: 28px auto 0; }
.email-form { display: flex; gap: 10px; }
.email-form .field {
  flex: 1; min-width: 0; height: 54px; padding: 0 16px;
  border: 1.5px solid var(--hairline-2); border-radius: 11px;
  font: 400 15.5px/1 var(--sans); color: var(--ink); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.email-form .field::placeholder { color: var(--faint); }
.email-form .field:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(246,91,102,.14); }
.email-form .btn { flex: none; }
.email-note { font-size: 12.5px; color: var(--faint); margin-top: 10px; }

/* HubSpot embed styling — DISABLED for now to debug the bare form with no custom CSS.
   These negative-margin hacks slid the iframe up behind the dateline and pulled the
   note up under the button. Re-enable once the form is confirmed working.
.email-capture:has(.hs-form-frame) { margin-top: 8px; }
.hs-form-frame { display: block; line-height: 0; margin-top: -50px; }
.hs-form-frame + .email-note { margin-top: -30px; }
*/

.email-success {
  background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: var(--r);
  padding: 20px 22px; text-align: left; animation: rise .3s ease both;
}
.email-success h3 { font-size: 16.5px; display: flex; align-items: center; gap: 8px; margin: 0 0 5px; }
.email-success p { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.reflink { display: flex; gap: 8px; }
.reflink input {
  flex: 1; height: 42px; padding: 0 12px; font: 400 13px/1 var(--mono);
  border: 1px solid var(--ok-line); border-radius: var(--r-sm); background: #fff; color: var(--muted);
}
.reflink button { flex: none; height: 42px; padding: 0 16px; background: var(--ink); color: #fff; border: none; border-radius: var(--r-sm); font: 600 13px/1 var(--sans); cursor: pointer; }
.reflink button:hover { background: var(--ink-2); }
.email-success:focus { outline: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------- essentials */
.essentials { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.tile .lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 8px; }
.tile p { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.tile p small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------- recap */
.recap-stats { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; }
.recap-stats .stat { font-family: var(--display); font-size: 52px; font-weight: 600; letter-spacing: -.02em; color: var(--coral); line-height: 1; }
.recap-stats .lab { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

.section-label { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 22px; }

.winners { display: grid; gap: 12px; }
.wcard {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 16px 20px; box-shadow: var(--shadow-sm);
}
.medal { flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; font-family: var(--display); }
.medal--1 { background: #e0a124; } .medal--2 { background: #a6a097; } .medal--3 { background: #bd7a3c; }
.wcard .wn { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.wcard .wd { font-size: 13.5px; color: var(--muted); }
.wcard .ghub { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--coral-deep); background: var(--coral-soft); border: 1px solid var(--coral-line); padding: 7px 12px; border-radius: var(--r-sm); white-space: nowrap; }

/* dark CTA band */
.cta-band { background: linear-gradient(155deg, var(--night), #2a2018); color: #fff; border-radius: var(--r-xl); padding: 46px 32px; text-align: center; box-shadow: var(--shadow-lg); }
.cta-band h2 { color: #fff; font-size: var(--fs-headline); font-weight: 600; margin: 0 0 8px; }
.cta-band p { color: #cabfb2; font-size: 15.5px; margin: 0 0 24px; }
.cta-band .email-capture { margin: 0 auto; }
.cta-band .email-form .field { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
.cta-band .email-form .field::placeholder { color: #998e80; }

/* soft, on-brand sign-up panel (matches the light theme) */
.signup-cta { background: var(--coral-soft); border: 1px solid var(--coral-line); border-radius: var(--r-xl); padding: 38px 32px; text-align: center; }
.signup-cta .k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-deep); }
.signup-cta h2 { font-size: var(--fs-headline); margin: 10px 0 8px; }
.signup-cta p { font-size: 15.5px; color: var(--muted); margin: 0 auto 22px; max-width: 420px; }
.signup-cta .email-capture { margin: 0 auto; }

/* recommended-course card */
.coursecard { display: flex; align-items: center; gap: 20px; border: 1px solid var(--hairline-2); border-radius: var(--r-lg); padding: 20px 24px; background: linear-gradient(180deg, #fff7f6, var(--surface)); transition: border-color .15s, box-shadow .15s; }
.coursecard:hover { border-color: var(--coral-line); box-shadow: var(--shadow); text-decoration: none; }
.coursecard__ico { flex: none; width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--coral-soft); color: var(--coral-deep); }
.coursecard__ico svg { width: 26px; height: 26px; }
.coursecard__tx { flex: 1; min-width: 0; }
.coursecard__lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--coral-deep); margin: 0 0 5px; }
.coursecard__h { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin: 0 0 4px; }
.coursecard__sub { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.coursecard__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--coral-deep); white-space: nowrap; }
.coursecard .arrow { transition: transform .15s; }
.coursecard:hover .arrow { transform: translateX(3px); }
@media (max-width: 680px) { .coursecard { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* ============================================================ PAGE / PROSE */
.page { padding-bottom: 88px; }
.subnav { padding-top: 26px; }
.backlink { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--muted); }
.backlink:hover { color: var(--coral-deep); text-decoration: none; }

.page-head { padding: 12px 0 4px; text-align: center; }
.page-head .eyebrow { margin-bottom: 18px; }
.page-head h1 { font-size: var(--fs-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin-bottom: 12px; }
.page-head .sub { font-family: var(--display); font-weight: 500; font-size: var(--fs-subhead); color: var(--muted); max-width: 560px; margin: 0 auto; }

/* section header within a page (e.g. Part 1 / Part 2 of the combined guide) */
.sec-head { text-align: center; margin-bottom: 26px; }
.sec-head .section-label { margin-bottom: 14px; }
.sec-head h2 { font-size: var(--fs-headline); font-weight: 600; letter-spacing: -.01em; }
.sec-head .sub { font-family: var(--display); font-weight: 500; font-size: var(--fs-subhead); color: var(--muted); margin: 8px auto 0; max-width: 520px; }

/* divider label between major page sections */
.rule { display: flex; align-items: center; gap: 16px; margin: 8px 0; color: var(--faint); }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: var(--hairline); }
.rule span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* long-form reading content */
.prose { color: var(--body); }
.prose > * + * { margin-top: 14px; }
.prose h2 {
  font-size: var(--fs-headline); font-weight: 600; margin-top: 46px;
  padding-top: 28px; border-top: 1px solid var(--hairline);
}
.prose h2:first-of-type { border-top: none; padding-top: 0; }
.prose h3 { font-size: 18px; font-weight: 700; margin-top: 26px; letter-spacing: -.01em; }
.prose p { font-size: 16.5px; line-height: 1.72; }
.prose ul { margin: 0; padding-left: 22px; }
.prose li { font-size: 16.5px; line-height: 1.65; margin-bottom: 9px; }
.prose li b, .prose p b { color: var(--ink); font-weight: 700; }
.prose a { font-weight: 600; color: var(--vb-deep); text-decoration: underline; text-decoration-color: var(--vb-line); text-underline-offset: 2px; }
.prose a:hover { text-decoration-color: var(--vb); }
.prose .ph { color: var(--faint); font-style: italic; }

/* callouts */
.callout { border-radius: var(--r); padding: 14px 18px; font-size: 15px; line-height: 1.55; }
.callout--vb { background: var(--vb-soft); border: 1px solid var(--vb-line); color: var(--vb-deep); }
.callout--vb b { color: var(--vb-deep); }
.callout--todo { background: #faf0d6; border: 1px dashed #d9b257; color: #876012; }
.callout--ok { background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok); }

/* "what's a SKILL?" explainer */
.skillbox { background: var(--surface-2); border: 1px solid var(--hairline); border-left: 3px solid var(--vb); border-radius: var(--r); padding: 20px 24px; box-shadow: var(--shadow-sm); }
.skillbox__k { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vb-deep); margin: 0 0 10px; }
.skillbox p { font-size: 15.5px; line-height: 1.66; color: var(--ink-2); margin: 0 0 10px; }
.skillbox p:last-child { margin-bottom: 0; }
.skillbox a { color: var(--vb-deep); font-weight: 600; }

/* the standoff scenario block */
.standoff { background: linear-gradient(155deg, var(--night), #2c211a); color: #ece6df; border-radius: var(--r-lg); padding: 28px 30px; box-shadow: var(--shadow); }
.standoff .ring { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ff9d8f; margin: 0 0 12px; }
.standoff .q { font-family: var(--display); font-size: 19px; line-height: 1.5; color: #fff; font-weight: 500; margin: 0 0 14px; }
.standoff .q em { color: #ffd9b0; }
.standoff .r { font-size: 15px; color: #c3b8ab; margin: 0; }
.standoff .r b { color: #fff; }

/* code block */
.codeblock {
  background: var(--night); color: #e6ddd2; border-radius: var(--r);
  padding: 18px 20px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  border: 1px solid #322821;
}
.codeblock .c { color: #f6a58a; } .codeblock .s { color: #a7d99a; } .codeblock .m { color: #9b8f80; }

/* three-up / two-up cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.minicard { border: 1px solid var(--hairline); border-radius: var(--r); padding: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.minicard h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.minicard p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5; }

.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.scorecard { border: 1px solid var(--hairline); border-top: 4px solid var(--vb); border-radius: var(--r-lg); padding: 22px; background: var(--surface); box-shadow: var(--shadow-sm); }
.scorecard--b2 { border-top-color: var(--coral); }
.scorecard .pt { display: inline-block; font-size: 12px; font-weight: 700; color: var(--vb-deep); background: var(--vb-soft); padding: 4px 11px; border-radius: var(--r-pill); margin-bottom: 12px; }
.scorecard--b2 .pt { color: var(--coral-deep); background: var(--coral-soft); }
.scorecard h4 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.scorecard ul { margin: 8px 0 0; padding-left: 18px; }
.scorecard li { font-size: 14px; color: var(--muted); margin-bottom: 7px; }

/* scoring table */
.table-wrap { border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
table.scoring { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--surface); }
table.scoring th, table.scoring td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.scoring thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 700; background: var(--surface-2); }
table.scoring tbody tr:last-child td { border-bottom: none; }
.yes { color: var(--ok); font-weight: 700; white-space: nowrap; }
.no  { color: var(--coral-deep); font-weight: 700; white-space: nowrap; }

/* "don't" principles */
.dont { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--hairline); }
.dont:last-child { border-bottom: none; }
.dont .x { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--coral-soft); color: var(--coral-deep); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.dont .t { font-size: 16px; line-height: 1.5; }
.dont .t b { color: var(--ink); font-weight: 700; }

/* cross-CTA / forward-step card */
.xcta {
  display: flex; align-items: center; gap: 20px;
  border: 1px solid var(--hairline-2); border-left: 4px solid var(--vb);
  border-radius: var(--r-lg); padding: 20px 24px;
  background: linear-gradient(180deg, #faf8ff, var(--surface));
}
.xcta--coral { border-left-color: var(--coral); background: linear-gradient(180deg, #fff7f6, var(--surface)); }
.xcta .tx { flex: 1; }
.xcta .lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--vb-deep); margin-bottom: 4px; }
.xcta--coral .lbl { color: var(--coral-deep); }
.xcta .h { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.xcta .h small { display: block; font-size: 13.5px; font-weight: 500; color: var(--muted); margin-top: 4px; }

/* ============================================================ REGISTER FLOW */
.reg-flow { margin: 0 auto; }
.rstep { position: relative; display: flex; gap: 22px; align-items: flex-start; padding-bottom: 32px; }
.rstep:last-child { padding-bottom: 0; }
.rstep:not(:last-child)::before {
  content: ""; position: absolute; left: 28px; top: 30px; bottom: 2px;
  transform: translateX(-50%); width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--vb-line), var(--vb-soft));
}
.rnode {
  position: relative; z-index: 1; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(140deg, var(--vb), #6366f1); color: #fff; font-family: var(--display);
  font-size: 24px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px rgba(79,70,229,.30);
}
.rcontent { flex: 1; padding-top: 3px; }
.rhost { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 6px; margin-bottom: 10px; }
.rhost--dl { background: var(--coral-soft); color: var(--coral-deep); }
.rhost--vb { background: var(--vb-soft); color: var(--vb-deep); }
.rhl { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 7px; }
.rbd { font-size: 16px; line-height: 1.62; color: var(--body); margin: 0; }
.rbd b { color: var(--ink); }
.rplace { display: inline-flex; align-items: center; gap: 9px; margin-top: 15px; }
.rplace .pl { font-weight: 600; font-size: 11.5px; font-style: italic; background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: 5px; }

/* indented subtask within a registration step */
.substep { display: flex; gap: 12px; margin-top: 16px; padding: 13px 16px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r); }
.substep__mark { flex: none; color: var(--vb); font-weight: 800; font-size: 15px; line-height: 1.5; }
.substep__h { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 0 0 3px; }
.substep__b { font-size: 14px; line-height: 1.55; color: var(--body); margin: 0; }
.substep__b .ph { color: var(--faint); font-style: italic; }

/* ============================================ SIGN-UP / SYSTEM DIAGRAMS */
.diaglabel { text-align: center; margin-bottom: 24px; }
.diaglabel .k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vb-deep); }
.diaglabel h2 { font-size: var(--fs-headline); margin-top: 10px; }
.diaglabel h2 code { font-size: .8em; }
.diaglabel p { font-size: 15px; color: var(--muted); margin: 9px auto 0; max-width: 520px; line-height: 1.55; }
/* when the loop diagram sits inside the brief's prose, don't inherit prose-h2 chrome */
.prose .diaglabel { margin-top: 40px; }
.prose .diaglabel h2 { border-top: none; padding-top: 0; }

.systemcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 28px 26px; box-shadow: var(--shadow); }
.systemcard__cap { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; line-height: 1.5; }
.systemcard__cap b { color: var(--ink); }

/* the phone-call loop diagram */
.loop { display: flex; align-items: stretch; gap: 8px; }
.loop__node { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px 14px; text-align: center; }
.loop__ico { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.loop__ico svg { width: 23px; height: 23px; }
.loop__node b { display: block; font-size: 14.5px; color: var(--ink); margin-top: 12px; letter-spacing: -.01em; }
.loop__node span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.loop__node--alert .loop__ico { background: var(--coral-soft); color: var(--coral-deep); }
.loop__node--call  .loop__ico { background: var(--vb-soft);   color: var(--vb-deep); }
.loop__node--ok    .loop__ico { background: var(--ok-soft);   color: var(--ok); }
.loop__arrow { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 2px; }
.loop__arrow .lab { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.loop__arrow .chev { width: 22px; height: 12px; color: var(--hairline-2); flex: none; }
.loop__return { margin-top: 16px; text-align: center; font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.loop__return .lp { color: var(--vb); font-weight: 800; font-size: 16px; }

/* anatomy of a vb call: command -> structured response */
.callanatomy { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.callanatomy figure { margin: 0; min-width: 0; }
.callanatomy figcaption { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); text-align: center; margin-bottom: 9px; }
.callanatomy .codeblock { font-size: 11.5px; padding: 14px 15px; }
.callanatomy__arrow { display: flex; align-items: center; justify-content: center; color: var(--vb); }
.callanatomy__arrow svg { width: 26px; height: 16px; }

/* seamless high-level spec strip (replaces boxed tiles) */
.specs { display: flex; flex-wrap: wrap; justify-content: center; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.specs__item { flex: 1; min-width: 130px; padding: 18px 16px; text-align: center; position: relative; }
.specs__item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--hairline); }
.specs__item .k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--coral-deep); }
.specs__item .v { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 6px; line-height: 1.3; }
.specs__item .v small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* perk cards — soft, on-brand highlights (free credits · feedback · prizes) */
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.perk { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 22px 20px; box-shadow: var(--shadow-sm); }
.perk__ico { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.perk__ico svg { width: 22px; height: 22px; }
.perk__h { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 6px; color: var(--ink); }
.perk__b { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.perk--credits .perk__ico  { background: var(--coral-soft); color: var(--coral-deep); }
.perk--feedback .perk__ico { background: var(--vb-soft); color: var(--vb-deep); }
.perk--prize .perk__ico    { background: #fbf0d6; color: #a86f0c; }

@media (max-width: 680px) { .perks { grid-template-columns: 1fr; } }

/* submit → feedback → live leaderboard mockup */
.ladder { max-width: 460px; margin: 0 auto; }
.ladder__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; }
.ladder__head .ttl { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ladder__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.ladder__live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 1.8s ease-in-out infinite; }
.ladder__row { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); margin-top: 8px; }
.ladder__row .rk { flex: none; width: 25px; height: 25px; border-radius: 7px; background: var(--surface-3); color: var(--muted); font: 700 13px/1 var(--display); display: flex; align-items: center; justify-content: center; }
.ladder__row .nm { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ladder__row .up { font-size: 11px; font-weight: 700; color: var(--ok); margin-left: 7px; }
.ladder__row .sc { flex: none; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.ladder__row--you { border-color: var(--coral); background: var(--coral-soft); box-shadow: 0 8px 20px rgba(246,91,102,.16); }
.ladder__row--you .rk { background: var(--coral); color: #fff; }
.ladder__row--you .nm, .ladder__row--you .sc { color: var(--coral-deep); }

/* phase preview toggle (before / during / after) */
.phase-switch { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: inline-flex; align-items: center; gap: 3px; background: var(--surface); border: 1px solid var(--hairline-2); border-radius: var(--r-pill); padding: 5px; box-shadow: var(--shadow-lg); }
.phase-switch__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 6px 0 10px; }
.phase-switch button { border: none; background: transparent; cursor: pointer; font: 600 13px/1 var(--sans); color: var(--muted); padding: 8px 14px; border-radius: var(--r-pill); transition: background .15s, color .15s; }
.phase-switch button:hover { color: var(--ink); }
.phase-switch button[aria-pressed="true"] { background: var(--coral); color: #fff; }

@media (max-width: 680px) {
  .loop { flex-direction: column; }
  .loop__arrow { flex-direction: row; gap: 8px; }
  .loop__arrow .chev { transform: rotate(90deg); }
  .callanatomy { grid-template-columns: 1fr; }
  .callanatomy__arrow svg { transform: rotate(90deg); }
  .specs { flex-direction: column; }
  .specs__item { padding: 14px 0; }
  .specs__item:not(:first-child)::before { left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 1px; }
}

/* ----------------------------------------------------- entrance animation */
@media (prefers-reduced-motion: no-preference) {
  .reveal > * { opacity: 0; animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .reveal > :nth-child(1) { animation-delay: .04s; }
  .reveal > :nth-child(2) { animation-delay: .10s; }
  .reveal > :nth-child(3) { animation-delay: .16s; }
  .reveal > :nth-child(4) { animation-delay: .22s; }
  .reveal > :nth-child(5) { animation-delay: .28s; }
  .reveal > :nth-child(6) { animation-delay: .34s; }
  .reveal > :nth-child(7) { animation-delay: .40s; }
  .reveal > :nth-child(8) { animation-delay: .46s; }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 680px) {
  .collab__lbl { font-size: 16px; }
  .collab__logos { flex-wrap: wrap; justify-content: center; }
  .collab__dlai { height: 24px; }
  .collab__vb { height: 22px; }
  .section { padding: 44px 0; }
  .hero { padding: 48px 0 4px; }
  .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .recap-stats { gap: 28px; }
  .xcta { flex-direction: column; align-items: flex-start; }
  .xcta .btn { width: 100%; }
  .email-form { flex-direction: column; }
  .email-form .btn { width: 100%; }
}
@media (max-width: 460px) {
  .essentials { grid-template-columns: 1fr; }
  .recap-stats .stat { font-size: 42px; }
}

/* honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}