/* /styles.css */
:root{
  --black:#0A0A0A;
  --white:#FFFFFF;
  --gray-50:#F7F7F8;
  --gray-100:#EFF1F3;
  --gray-300:#D6DAE0;
  --gray-600:#6B7280;
  --gold:#C6A15B;    /* adjust to exact brand gold when ready */
  --violet:#6A5ACD;  /* diagrams only per brand guidance */
  --container:1200px;
  --radius:16px;
  --shadow:0 6px 20px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--black);
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, .btn:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;padding:8px 12px;border-radius:8px;z-index:10000}

/* Header */
.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--gray-100);
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{box-shadow:0 3px 12px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand-name{font-size:1.125rem}
.site-nav{display:flex;gap:18px;align-items:center}
.nav-link{padding:8px 6px}
.nav-cta{margin-left:6px}
.nav-toggle{
  display:none;flex-direction:column;gap:4px;background:transparent;border:0;padding:8px;border-radius:8px;
}
.nav-toggle-bar{width:22px;height:2px;background:var(--black);display:block}

/* Hero */
.hero--fullbleed {
  position: relative;
  overflow: clip;
  color: var(--black);
}
.hero--fullbleed .hero-inner { padding: 72px 20px 56px; position: relative; z-index: 1; }

/* Image layer */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }

/* Legibility overlay: keep left side quiet for copy */
.hero--fullbleed::after{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.96) 0%,
    rgba(255,255,255,0.90) 45%,
    rgba(255,255,255,0.55) 68%,
    rgba(255,255,255,0.00) 100%);
}

/* Mobile: either tighter split or stacked version; adjust focal point */
@media (max-width: 720px){
  .hero-media img{ object-position: 60% center; }
  .hero--fullbleed::after{
    background: linear-gradient(180deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.88) 38%,
      rgba(255,255,255,0.00) 100%);
  }
}

/* Contained variant */
.hero--contained { background: var(--white); }
.hero--contained .hero-media { position: static; max-width: 560px; margin-left: auto; }


/* Sections */
.section{padding:56px 0}
.section-alt{background:var(--gray-50)}
.section-head h2{margin:0 0 6px}
.section-sub{color:var(--gray-600);margin:0}

/* Problem list */
.problem-list{list-style:none;display:grid;gap:10px;padding:0;margin:20px 0 0}
.problem-list li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card p{margin:10px 0 0}
.card-graphic{
  margin-top:12px;
  border:1px solid var(--gray-100);
  border-radius:12px;
  background:#fff;
  aspect-ratio:16 / 10;     /* prevents CLS */
  overflow:hidden;
}
.card-graphic img{
  width:100%;
  height:100%;
  object-fit:contain;        /* keep SVG proportions, no crop */
  display:block;
}

/* Video */
.video-wrap{display:grid;gap:8px}
.video-embed{width:100%;aspect-ratio:16/9;border:1px solid var(--gray-100);border-radius:var(--radius);box-shadow:var(--shadow)}
.transcript-link{text-decoration:underline}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.table-wrap{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.pricing-table{width:100%;border-collapse:collapse}
.pricing-table th, .pricing-table td{border-bottom:1px solid var(--gray-100);padding:12px 10px;text-align:left;vertical-align:top}
.pricing-table thead th{background:var(--gray-50)}
.price-notes{color:var(--gray-600);font-size:.95rem;margin:12px 0 0}
.price-sticky{
  position:sticky;top:92px;align-self:start;background:#fff;border:1px solid var(--gray-100);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)
}
.intro-price{font-size:1.125rem;margin:0 0 12px}
.intro-price .strike{text-decoration:line-through;color:var(--gray-600);margin-right:8px}
.intro-price .now{font-weight:700}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.t-card{margin:0;background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.t-card footer{color:var(--gray-600);margin-top:8px}

/* FAQ */
.faq{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:12px 14px;margin:10px 0;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:8px 0 0;color:var(--gray-600)}

/* Bottom hero */
/* Bottom hero */
.bottom-hero { background: var(--black); color: #fff; }

/* Keep the container’s 20px left/right while adding vertical rhythm */
.bottom-hero-inner {
  padding: 40px 20px;   /* was: 40px 0 */
  display: grid;
  gap: 10px;
}
.bottom-hero .btn-gold{justify-self:start}

/* Contact */
.contact-form{display:grid;gap:10px;max-width:560px}
.form-field{
  width:100%;padding:12px 14px;border:1px solid var(--gray-300);border-radius:10px;background:#fff
}
.form-field:focus{border-color:var(--gold)}
.hidden-honeypot{position:absolute;left:-9999px}
.form-note{color:var(--gray-600);font-size:.95rem}
.btn-block{width:100%}

/* Footer */
.site-footer{border-top:1px solid var(--gray-100);padding:28px 0;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--gray-300)}
.social a + a{margin-left:8px}
.legal{color:var(--gray-600);font-size:.95rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:600;text-align:center
}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{filter:brightness(1.1)}
.btn-gold{background:var(--gold);color:#000}
.btn-gold:hover{filter:brightness(1.05)}
.btn-outline-dark{background:transparent;border-color:var(--black);color:var(--black)}
.btn-outline-dark:hover{background:var(--black);color:#fff}

/* Responsive */
@media (max-width: 960px){
  .cards{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
}
@media (max-width: 840px){
  .nav-toggle{display:flex}
  .site-nav{
    position:fixed;inset:64px 0 auto auto;background:#fff;border-bottom:1px solid var(--gray-100);
    display:none;flex-direction:column;gap:0;padding:10px 20px 16px
  }
  .site-nav.open{display:flex}
  .site-nav .nav-link, .site-nav .btn{padding:12px 4px}
}

/* Lite YouTube */
.video-lite{
  position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:16px;
  overflow:hidden; border:1px solid var(--gray-100); box-shadow:var(--shadow);
}
.video-lite-poster{width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.9)}
/* Center the YouTube play icon perfectly */
.video-lite-button{
  position:absolute; inset:0; margin:auto;
  width:74px; height:52px;
  display:grid; place-items:center;           /* centers the pseudo-element */
  border:0; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.92);
}

.video-lite-button::before{
  content:"";
  width:0; height:0;
  border-left:22px solid var(--black);        /* triangle */
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  transform: translateX(2px);                /* tiny optical nudge */
}

.video-lite-button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.video-lite.is-activated .video-lite-poster,
.video-lite.is-activated .video-lite-button{display:none}
.video-embed-iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:16px;
}

/* Optional: tighter list style inside cards */
.tight-list{
  margin: 8px 0 0;
  padding-left: 18px;
}
.tight-list li{
  margin: 6px 0;
}
.proof-link{
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}
.proof-link:hover{ color: var(--gold); }

/* Footer disclaimer */
.disclaimer{
  margin-top:6px;
  font-size:.85rem;
  line-height:1.4;
  color:var(--gray-600);
}
.site-footer .legal{display:flex; flex-direction:column}

figure { margin: 0; }