/* ============================================================
   CLARITY PAGE — Built To Grow (v8)
   Font: Helvetica, Verdana, Arial, sans-serif (system — matches live site)
   Gold: #C79F00 (rgb 199,159,0 — extracted from live chrisguerriero.com/clarity/)
   All sizes/weights extracted via computed styles from the live page
   ============================================================ */

:root {
  --cl-gold: #C79F00;
  --cl-gold-btn: #BAA98C;
  --cl-dark: #111111;
  --cl-white: #ffffff;
  --cl-text: #000000;
  --cl-text-light: #444444;
  --cl-font: Helvetica, Verdana, Arial, sans-serif;
  --cl-max: 1100px;
  --cl-pad: 80px 40px;
  --cl-pad-sm: 60px 24px;
}

body {
  background: var(--cl-white);
  font-family: var(--cl-font);
}

/* ============================================================
   GOLD LABELS
   Most: 32px, 400 — "BUILT TO GROW" variant: 32px, 700
   Smaller labels (What You Get, A Seat At The Table, etc.): 30px, 700
   Hook gold label (Can 1-Day...): 28px, 700
   ============================================================ */
.cl-gold-h {
  font-family: var(--cl-font);
  font-weight: 400;
  color: var(--cl-gold);
  font-size: 32px;
  margin: 0 0 18px 0;
  line-height: 1.5;
}

.cl-gold-h-bold {
  font-weight: 700;
}

.cl-gold-h-sm {
  font-family: var(--cl-font);
  font-weight: 700;
  color: var(--cl-gold);
  font-size: 30px;
  margin: 0 0 18px 0;
  line-height: 1.5;
}

.cl-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cl-gold-text {
  color: var(--cl-gold);
}

/* ============================================================
   SECTION WRAPPERS
   ============================================================ */
.cl-white-section {
  background: var(--cl-white);
  padding: var(--cl-pad);
}

.cl-dark-section {
  background: var(--cl-dark);
  padding: var(--cl-pad);
}

.cl-section-wrap {
  max-width: var(--cl-max);
  margin: 0 auto;
}

/* Body text white sections: 22px, 400, black */
.cl-section-wrap p,
.cl-white-section p {
  font-family: var(--cl-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 16px 0;
  color: var(--cl-text);
}

/* Body text dark sections: 22px, 400, white */
.cl-dark-section .cl-section-wrap p {
  color: rgba(255,255,255,0.88);
}

/* ============================================================
   HERO — dark bg, CG logo + 2-col (book left / form right)
   ============================================================ */
.cl-hero {
  background: #1a1a1a;
  padding: 50px 40px 60px;
}

.cl-hero-logo-row {
  text-align: center;
  margin-bottom: 36px;
}

.cl-hero-logo {
  height: 70px;
  width: auto;
  display: inline-block;
}

.cl-hero-inner {
  max-width: var(--cl-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.cl-hero-book {
  flex: 0 0 auto;
  width: 220px;
}

.cl-hero-book img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.cl-hero-form {
  flex: 0 0 auto;
  text-align: center;
  max-width: 440px;
}

/* "Growth and Valuation Checklist": 30px, 700, white, center */
.cl-hero-form-title {
  font-family: var(--cl-font);
  font-weight: 700;
  color: #ffffff;
  font-size: 30px;
  margin: 0 0 24px 0;
  line-height: 1.45;
  text-align: center;
}

/* Gold filled button */
.cl-download-btn {
  display: inline-block;
  background: var(--cl-gold);
  color: #000000;
  border: 1px solid var(--cl-gold);
  font-family: var(--cl-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  margin-bottom: 14px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.cl-download-btn:hover {
  background: #a88700;
  border-color: #a88700;
  color: #000;
}

/* "Your checklist will automatically download...": 16px, 700, white, center */
.cl-hero-note {
  font-family: var(--cl-font);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 12px 0 0 0;
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   ARROWS + GRABBED HEADING — white section, centered
   "YOU JUST GRABBED THE CHECKLIST": 50px, 700, gold, uppercase
   "NOW HERE'S HOW TO ACTUALLY USE IT...": 35px, 700, black, uppercase
   ============================================================ */
.cl-arrows {
  background: var(--cl-white);
  padding: 60px 40px 50px;
  text-align: center;
}

.cl-arrows-inner {
  max-width: 900px;
  margin: 0 auto;
}

.cl-arrows-img {
  height: 60px;
  width: auto;
  margin: 0 auto 32px;
  display: block;
}

.cl-grabbed-heading {
  font-family: var(--cl-font);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cl-gold);
  font-size: 50px;
  margin: 0 0 16px 0;
  line-height: 1.2;
  text-align: center;
}

.cl-grabbed-sub {
  font-family: var(--cl-font);
  font-weight: 700;
  font-size: 35px;
  color: var(--cl-text);
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

/* ============================================================
   HOOK — white, 2-column
   Gold label: 28px, 700
   Body: 22px, 400, black
   ============================================================ */
.cl-hook {
  background: var(--cl-white);
  padding: 60px 40px 70px;
}

.cl-hook-inner {
  max-width: var(--cl-max);
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.cl-hook-text {
  flex: 0 0 55%;
}

.cl-hook-text .cl-gold-h {
  font-size: 28px;
  font-weight: 700;
}

.cl-hook-text p {
  font-family: var(--cl-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cl-text);
  margin: 0 0 16px 0;
}

.cl-hook-photo {
  flex: 1;
}

.cl-hook-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   BANNER — dark, centered
   "A ONE-DAY IN-PERSON STRATEGY SESSION...": 48px, 400, white, uppercase
   ============================================================ */
.cl-banner {
  background: var(--cl-dark);
  padding: 70px 40px;
  text-align: center;
}

.cl-banner-inner {
  max-width: 900px;
  margin: 0 auto;
}

.cl-banner-headline {
  font-family: var(--cl-font);
  font-weight: 400;
  font-size: 48px;
  color: var(--cl-white);
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

/* ============================================================
   BTG subtitle — 22px, 700, black
   ============================================================ */
.cl-btg-subtitle {
  font-family: var(--cl-font);
  font-weight: 700;
  font-size: 22px;
  color: var(--cl-text);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

/* ============================================================
   BUILT TO GROW SPLIT — dark, portrait left / text right
   Body: 20px, 400, white (matches live)
   ============================================================ */
.cl-btg-split {
  background: var(--cl-dark);
  padding: 0;
}

.cl-btg-split-inner {
  max-width: var(--cl-max);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.cl-btg-portrait {
  flex: 0 0 42%;
  overflow: hidden;
}

.cl-btg-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  min-height: 500px;
}

.cl-btg-split-text {
  flex: 1;
  padding: 60px 50px 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cl-btg-split-text p {
  font-family: var(--cl-font);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
  margin: 0 0 18px 0;
}

.cl-btg-split-text p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   BULLETS — 22px, 400, black
   ============================================================ */
.cl-bullets {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 24px 0;
}

.cl-bullets li {
  font-family: var(--cl-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cl-text);
  margin-bottom: 10px;
}

/* ============================================================
   THINK DIFFERENTLY — LEFT JUSTIFIED
   "The Most Successful Founders Think Differently": 48px, 700, black, uppercase
   Body: 22px, 400, black
   ============================================================ */
.cl-think {
  text-align: left;
}

.cl-think-headline {
  font-family: var(--cl-font);
  font-weight: 700;
  font-size: 48px;
  color: var(--cl-text);
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 32px 0;
}

.cl-think .cl-bullets {
  margin-bottom: 28px;
}

.cl-think p {
  font-family: var(--cl-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cl-text);
  margin: 0 0 16px 0;
}

/* ============================================================
   PRICING — dark
   Headline "THERE'S ONLY 2 WAYS TO GET IN": 48px, 400, white, uppercase
   Card title: 30px, 400, white
   Card button: outlined, #BAA98C, 20px, 700, uppercase
   ============================================================ */
.cl-pricing {
  background: var(--cl-dark);
  padding: 70px 40px 80px;
}

.cl-pricing-inner {
  max-width: var(--cl-max);
  margin: 0 auto;
}

.cl-pricing-headline {
  font-family: var(--cl-font);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 48px;
  color: var(--cl-white);
  text-align: center;
  margin: 0 0 50px 0;
  line-height: 1.4;
}

.cl-cards-row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.cl-card {
  flex: 1;
  border: 1px solid rgba(199, 159, 0, 0.4);
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
}

.cl-card-title {
  font-family: var(--cl-font);
  font-weight: 400;
  font-size: 30px;
  color: var(--cl-white);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.cl-card-title .cl-gold-text {
  font-weight: 700;
}

.cl-spots {
  font-size: 0.75em;
  opacity: 0.8;
}

.cl-card-note {
  font-family: var(--cl-font);
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  margin: 0 0 14px 0;
}

.cl-card-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 32px 0;
  flex: 1;
}

.cl-card-list li {
  font-family: var(--cl-font);
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
  margin-bottom: 10px;
}

.cl-card-btn {
  display: block;
  text-align: center;
  border: 1px solid var(--cl-gold-btn);
  color: var(--cl-gold-btn);
  font-family: var(--cl-font);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 20px;
  transition: background 0.2s, color 0.2s;
  margin-top: auto;
}

.cl-card-btn:hover {
  background: var(--cl-gold-btn);
  color: #000;
}

/* ============================================================
   TESTIMONIALS — white
   "CEO's AND THOUGHT LEADERS...": 30px, 700, gold, uppercase, center
   ============================================================ */
.cl-testimonials {
  background: var(--cl-white);
  padding: 70px 40px 80px;
}

.cl-testimonials-inner {
  max-width: var(--cl-max);
  margin: 0 auto;
}

.cl-testimonials-heading {
  font-family: var(--cl-font);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cl-gold);
  font-size: 30px;
  text-align: center;
  margin: 0 0 50px 0;
  line-height: 1.4;
}

.cl-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cl-video-item {
  background: #000;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}

.cl-video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   A SEAT AT THE TABLE — white, 2-col + button
   Body: 22px, 400, black
   Button: 26px, 400, black, uppercase, outlined
   ============================================================ */
.cl-seat {
  text-align: left;
}

.cl-seat-inner {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  margin-bottom: 40px;
}

.cl-seat-text {
  flex: 1;
}

.cl-seat-text p {
  font-family: var(--cl-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cl-text);
  margin: 0 0 16px 0;
}

.cl-seat-photo {
  flex: 0 0 42%;
}

.cl-seat-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.cl-seat-cta {
  text-align: center;
  margin-top: 10px;
}

/* "Secure Your Spot Now": 26px, 400, black, uppercase */
.cl-btn-outline-dark {
  display: inline-block;
  border: 1px solid var(--cl-text);
  color: var(--cl-text);
  font-family: var(--cl-font);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 48px;
  transition: background 0.2s, color 0.2s;
}

.cl-btn-outline-dark:hover {
  background: var(--cl-text);
  color: var(--cl-white);
}

/* ============================================================
   CLOSING — headshot left / text right
   Photo: 300px wide (matches live — much larger than default)
   Body: 22px, 400, black
   ============================================================ */
.cl-closing .cl-section-wrap {
  border-top: 1px solid #eee;
  padding-top: 40px;
}

.cl-closing-inner {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.cl-closing-photo {
  flex: 0 0 300px;
}

.cl-closing-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.cl-closing-text {
  flex: 1;
}

.cl-sig {
  max-width: 200px;
  height: auto;
  display: block;
  margin-top: 16px;
}

.cl-closing-text p {
  font-family: var(--cl-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cl-text);
  margin: 0 0 16px 0;
}

/* ============================================================
   LOGOS ROW
   ============================================================ */
.cl-logos-row {
  margin: 32px 0 0 0;
}

.cl-logos-row img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   FAQ
   Title: 50px, 800, black, uppercase, center
   Questions: 28px, 700, black
   Answers: 20px, 400, dark gray
   ============================================================ */
.cl-faq {
  background: var(--cl-white);
  padding: 70px 40px 80px;
  border-top: 1px solid #eee;
}

.cl-faq-inner {
  max-width: var(--cl-max);
  margin: 0 auto;
}

.cl-faq-title {
  font-family: var(--cl-font);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--cl-text);
  font-size: 50px;
  margin: 0 0 40px 0;
  text-align: center;
  line-height: 1.2;
}

.cl-faq-item {
  border-bottom: 1px solid #ddd;
  padding: 28px 0 24px;
}

.cl-faq-q {
  font-family: var(--cl-font);
  font-size: 28px;
  font-weight: 700;
  color: var(--cl-text);
  margin: 0 0 12px 0;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cl-faq-q::before {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: #2d2d2d;
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--cl-font);
  flex-shrink: 0;
  margin-top: 4px;
}

.cl-faq-a {
  font-family: var(--cl-font);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cl-text-light);
  margin: 0 0 10px 0;
  padding-left: 48px;
}

.cl-faq-a:last-child {
  margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .cl-hero { padding: 40px 24px 50px; }
  .cl-hero-inner { flex-direction: column; gap: 36px; }
  .cl-hero-book { width: 180px; margin: 0 auto; }
  .cl-hero-form { max-width: 100%; }

  .cl-hook-inner,
  .cl-btg-split-inner,
  .cl-seat-inner,
  .cl-closing-inner { flex-direction: column; }

  .cl-btg-portrait { flex: none; width: 100%; }
  .cl-btg-portrait img { max-height: 400px; width: 100%; }
  .cl-btg-split-text { padding: 40px 24px; }
  .cl-cards-row { flex-direction: column; }
  .cl-video-grid { grid-template-columns: 1fr; }
  .cl-seat-photo { flex: none; width: 100%; }
  .cl-closing-photo { flex: none; width: 200px; }
  .cl-white-section, .cl-dark-section { padding: var(--cl-pad-sm); }
  .cl-hook { padding: 40px 24px 50px; }
  .cl-hook-text { flex: none; width: 100%; }
  .cl-hook-photo { width: 100%; }
  .cl-banner { padding: 50px 24px; }
  .cl-pricing { padding: 50px 24px 60px; }
  .cl-testimonials { padding: 50px 24px 60px; }
  .cl-arrows { padding: 40px 24px; }
  .cl-faq { padding: 50px 24px 60px; }
}

@media (max-width: 768px) {
  .cl-grabbed-heading { font-size: 32px; }
  .cl-grabbed-sub { font-size: 22px; }
  .cl-banner-headline { font-size: 28px; }
  .cl-think-headline { font-size: 32px; }
  .cl-pricing-headline { font-size: 32px; }
  .cl-faq-title { font-size: 32px; }
  .cl-faq-q { font-size: 20px; }
  .cl-hero-form-title { font-size: 22px; }
  .cl-gold-h { font-size: 24px; }
  .cl-gold-h-sm { font-size: 22px; }
  .cl-card-btn { font-size: 16px; padding: 13px 14px; }
  .cl-section-wrap p,
  .cl-white-section p,
  .cl-hook-text p,
  .cl-seat-text p,
  .cl-closing-text p,
  .cl-bullets li { font-size: 18px; }
}