/* bizwithai.ai marketing site — layout only. Colour/type/components all come
   from brand/tokens.css + brand/components.css. */

/* ---- Nav ---- */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(7,13,24,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{ display:flex; align-items:center; gap:32px; padding:16px 24px }
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:650; font-size:var(--fs-16) }
.nav-brand svg{ display:block }
.nav-links{ display:flex; align-items:center; gap:26px; margin-left:12px; flex:1 }
.nav-links a{ text-decoration:none; color:var(--muted); font-size:var(--fs-15); font-weight:550 }
.nav-links a:hover, .nav-links a.active{ color:var(--text) }
.nav-cta{ margin-left:auto }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); padding:8px 10px; cursor:pointer }

/* ---- Hero ---- */
.hero{ padding:64px 0 56px }
.hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center }
.hero h1{ font-size:var(--fs-60); line-height:1.06; margin:14px 0 20px }
.hero .sub{ font-size:var(--fs-19); color:var(--muted); max-width:560px; margin:0 0 32px }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px }
.trust-row{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; padding-top:20px; border-top:1px solid var(--line-soft) }
.trust-row .cred-badge{ display:flex; align-items:center; gap:8px; font-size:var(--fs-13); color:var(--muted) }
.trust-row .cred-badge b{ color:var(--text) }

/* ---- Section scaffolding ---- */
.section{ padding:64px 0 }
.section-tight{ padding:40px 0 }
.section-head{ max-width:var(--maxw-read); margin-bottom:36px }
.section-head h2{ margin:8px 0 12px }
.section-head p{ color:var(--muted); font-size:var(--fs-19) }
.band{ background:var(--navy-800); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }

/* ---- Problem section ---- */
.problem-quote{ font-size:var(--fs-24); line-height:1.4; max-width:820px; margin:0 0 40px; letter-spacing:-.01em }
.problem-quote .stat{ color:var(--accent); font-weight:700 }
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.problem-card{ text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:10px }
.problem-card .num{ color:var(--warn); font-weight:700; font-size:var(--fs-13); letter-spacing:.1em; text-transform:uppercase }
.problem-card p{ color:var(--muted); margin:0 }
.problem-card .goto{ margin-top:auto; font-size:var(--fs-13); color:var(--accent-soft); font-weight:650 }

/* ---- Free course feature ---- */
.course-feature{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:44px }
.course-feature .eyebrow{ margin-bottom:10px }
.course-feature h2{ margin:0 0 14px }
.course-modules{ list-style:none; margin:20px 0; padding:0; display:grid; gap:8px }
.course-modules li{ display:flex; gap:10px; font-size:var(--fs-15); color:var(--muted) }
.course-modules li b{ color:var(--text); font-weight:600 }
.course-visual{ background:var(--navy-750); border:1px solid var(--line); border-radius:var(--r); padding:28px; text-align:center }
.course-visual .big-num{ font-size:var(--fs-60); font-weight:750; color:var(--accent); line-height:1 }
.course-visual .cap{ color:var(--dim); font-size:var(--fs-13); margin-top:6px }

/* ---- Hero service (Claude Training) ---- */
.hero-service{ padding:56px; border:1px solid var(--accent); position:relative }
.ladder{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0 }
.rung{ background:var(--navy-750); border:1px solid var(--line); border-radius:var(--r); padding:24px }
.rung.featured{ border-color:var(--accent) }
.rung .price{ font-size:var(--fs-32); font-weight:750; color:var(--accent); margin:8px 0 4px }
.rung h4{ margin:0 0 4px }
.rung ul{ margin:14px 0 0; padding-left:18px; font-size:var(--fs-13); color:var(--muted) }
.rung li{ margin-bottom:6px }
.rung .for-who{ font-size:12.5px; color:var(--dim); margin-top:14px; font-style:italic }

/* ---- Service grid (5 supporting services) ---- */
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.service-card{ text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:10px }
.service-card .icon{ margin-bottom:4px }
.service-card h3{ margin:0; font-size:var(--fs-19) }
.service-card p{ color:var(--muted); margin:0; font-size:var(--fs-15) }
.service-card .goto{ margin-top:auto; font-size:var(--fs-13); color:var(--accent-soft); font-weight:650 }

/* ---- Why us ---- */
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px }
.why-item{ display:flex; gap:16px }
.why-item .mark-i{ flex:0 0 auto; color:var(--accent) }
.why-item h4{ margin:0 0 6px }
.why-item p{ margin:0; color:var(--muted) }

/* ---- Footer ---- */
.site-footer{ border-top:1px solid var(--line); padding:48px 0 32px }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px }
.footer-col h5{ font-size:var(--fs-12); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 14px }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.footer-col a{ color:var(--muted); text-decoration:none; font-size:var(--fs-15) }
.footer-col a:hover{ color:var(--text) }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid var(--line-soft); padding-top:24px; font-size:var(--fs-13); color:var(--dim) }

/* ---- Service page (interior) layout ---- */
.svc-hero{ padding:56px 0 44px; border-bottom:1px solid var(--line) }
.svc-hero .badge-row{ display:flex; gap:10px; margin-bottom:16px }
.svc-hero h1{ font-size:var(--fs-44) }
.included-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.included-grid .card{ display:flex; gap:12px }
.included-grid .tick{ color:var(--ok); flex:0 0 auto }

/* ---- Mobile ---- */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr }
  .problem-grid, .service-grid, .why-grid, .included-grid, .ladder{ grid-template-columns:1fr }
  .course-feature{ grid-template-columns:1fr; padding:28px }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:24px }
  .nav-links{ display:none }
  .nav-toggle{ display:inline-flex }
  .nav-cta .btn{ padding:10px 16px; font-size:13px }
}
@media (max-width:480px){
  .hero{ padding:40px 0 36px }
  .hero h1{ font-size:var(--fs-32) }
  .section{ padding:44px 0 }
  .footer-grid{ grid-template-columns:1fr }
  .hero-service, .course-feature{ padding:24px }
}

/* ---- Survey form ---- */
.survey-card{ padding:32px }
.field{ margin-bottom:22px }
.field label{ display:block; font-weight:650; font-size:var(--fs-15); margin-bottom:8px }
.field .req{ color:var(--warn); margin-left:2px }
.field .hint{ font-size:12.5px; color:var(--dim); margin-top:6px }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--font); font-size:var(--fs-15); background:var(--navy-700); color:var(--text);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
.field textarea{ resize:vertical; min-height:76px }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips .chip{
  border:1px solid var(--line); background:var(--navy-700); color:var(--muted);
  padding:8px 15px; border-radius:999px; font-size:13px; cursor:pointer; font-family:var(--font);
}
.chips .chip:hover{ border-color:var(--accent); color:var(--accent-soft) }
.chips .chip.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:650 }
.slider-row{ display:flex; align-items:center; gap:12px }
.slider-row input[type="range"]{ flex:1; accent-color:var(--accent) }
.slider-val{ font-weight:700; color:var(--accent) }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.survey-error{ color:var(--warn); font-size:13px; margin-top:14px; text-align:center; min-height:18px }
.survey-foot{ text-align:center; color:var(--dim); font-size:12.5px; margin-top:20px; line-height:1.6 }

/* ---- Mobile nav drawer ---- */
.nav-drawer{
  display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:200; background:var(--navy-900);
  padding:24px; overflow-y:auto; box-sizing:border-box;
}
.nav-drawer.open{ display:block }
.nav-drawer .drawer-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:32px }
.nav-drawer a{ display:block; padding:14px 0; font-size:var(--fs-19); color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-soft) }