/* ==========================================================================
   Website Special — Free Website landing page
   Implementation of "Free Website Landing.dc.html" from the Marketing Ops
   Claude Design project. Inline styles from the design file are expressed as
   classes here; values are unchanged.
   Mobile breakpoint = 860px (matches the design file's matchMedia query).
   ========================================================================== */

html { scroll-behavior: smooth; }
body { background: #fff; color: var(--color-gray-900); font-family: var(--font-family-sans); }
a { color: var(--color-navy); }
a:hover { color: var(--color-orange); }

*, *::before, *::after { box-sizing: border-box; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--gray { background: var(--color-gray-50); }
.section--white { background: #fff; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head h2 { margin: 0; font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -0.02em; color: var(--color-navy); }
.section-head p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--color-gray-600); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- Header -- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: 72px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header__logo { display: inline-flex; }
.site-header__logo img { width: 160px; height: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a { font-weight: 500; font-size: 15px; text-decoration: none; color: var(--color-gray-700); }
.site-nav a:hover { color: var(--color-orange); }

/* ----------------------------------------------------------------- Hero -- */
.hero { position: relative; overflow: hidden; background: var(--color-navy-dark); }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__glow-a { position: absolute; inset: 0; background: radial-gradient(ellipse 100% 70% at 70% -10%, rgba(42, 63, 106, 0.9), transparent 65%); }
.hero__glow-b { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 15% 100%, rgba(232, 113, 43, 0.12), transparent 70%); }
.hero__grid { position: absolute; inset: 0; }
.hero__inner {
  position: relative; z-index: 10; max-width: 1200px; margin: 0 auto;
  padding: clamp(48px, 8vw, 88px) 24px clamp(48px, 7vw, 72px);
}
.hero__copy { max-width: 768px; display: flex; flex-direction: column; align-items: flex-start; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px;
  border: 1px solid rgba(232, 113, 43, 0.25); background: rgba(232, 113, 43, 0.1);
  padding: 6px 14px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--color-orange);
}
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-orange); }

.hero__title {
  margin: 20px 0 0; font-size: clamp(34px, 5.5vw, 60px); line-height: 1.05;
  letter-spacing: -0.03em; font-weight: 700; color: #fff;
}
.hero__title-accent {
  background: linear-gradient(90deg, var(--color-orange), var(--color-orange-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  margin: 20px 0 0; max-width: 620px; font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6; color: var(--color-gray-300);
}
.hero__actions { margin-top: 28px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero__reassurance { font-size: 14px; color: var(--color-gray-400); }

.hero__stats {
  margin-top: clamp(40px, 6vw, 64px); max-width: 768px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero__stat { padding: 20px 32px 0 0; }
.hero__stat + .hero__stat { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.hero__stat:last-child { padding-right: 0; }
.hero__stat-value { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.hero__stat-value span { font-size: 16px; font-weight: 500; color: var(--color-gray-400); }
.hero__stat-label { margin-top: 4px; font-size: 14px; color: var(--color-gray-400); }

/* ------------------------------------------------------------- Includes -- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.feature-card {
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 32px;
  transition: transform 250ms var(--ease-out-expo), box-shadow 250ms;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.feature-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgb(27 42 74 / 0.06); color: var(--color-navy);
}
.feature-card__icon--orange { background: rgba(232, 113, 43, 0.1); color: var(--color-orange); }
.feature-card h3 { margin: 18px 0 8px; font-size: 19px; color: var(--color-navy); }
.feature-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-gray-600); }

/* --------------------------------------------------------- How it works -- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.step { display: flex; flex-direction: column; gap: 16px; padding: 8px; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-navy); color: #fff; font-size: 20px; font-weight: 700;
}
.step h3 { margin: 0; font-size: 20px; color: var(--color-navy); }
.step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-gray-600); }

/* -------------------------------------------------------------- Compare -- */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 880px; margin: 0 auto; }
.compare__card {
  background: #fff; border: 1px solid var(--color-gray-100); border-radius: 16px;
  box-shadow: var(--shadow-card); padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.compare__card h3 { margin: 0; font-size: 18px; color: var(--color-gray-600); font-weight: 600; }
.compare__rows { display: flex; flex-direction: column; gap: 14px; }
.compare__row { display: flex; justify-content: space-between; gap: 16px; }
.compare__row + .compare__row { }
.compare__row--divided { padding-bottom: 14px; border-bottom: 1px solid var(--color-gray-100); }
.compare__label { font-size: 15px; color: var(--color-gray-600); }
/* Let the label wrap before the price does — "$249/month all-in" must stay whole. */
.compare__value { font-size: 15px; font-weight: 600; color: var(--color-navy); text-align: right; flex-shrink: 0; }

.compare__card--offer {
  background: var(--color-navy); border: none; border-radius: 16px;
  box-shadow: 0 8px 40px rgba(232, 113, 43, 0.25); padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.compare__card--offer h3 { margin: 0; font-size: 18px; color: #fff; font-weight: 600; }
.compare__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compare__tag {
  border-radius: 9999px; background: rgba(232, 113, 43, 0.15);
  border: 1px solid rgba(232, 113, 43, 0.3); color: var(--color-orange);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 4px 10px;
}
.compare__card--offer .compare__row--divided { border-bottom-color: rgba(255, 255, 255, 0.1); }
.compare__card--offer .compare__label { color: var(--color-gray-300); }
.compare__card--offer .compare__value { color: #fff; }
.compare__value--free { font-weight: 700; color: var(--color-orange); }

.compare__note { margin: 24px auto 0; max-width: 640px; text-align: center; font-size: 14px; color: var(--color-gray-500); }

/* ----------------------------------------------------------------- Form -- */
.form-section { scroll-margin-top: 88px; }
.form-shell { max-width: 640px; margin: 0 auto; }
.form-placeholder {
  border: 2px dashed var(--color-gray-200); border-radius: 16px;
  background: var(--color-gray-50); padding: 48px 24px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.form-placeholder__title { font-size: 15px; font-weight: 600; color: var(--color-navy); }
.form-placeholder__hint { font-size: 14px; color: var(--color-gray-500); }
/* GHL iframes report their own height via form_embed.js; keep them fluid. */
.form-shell iframe { width: 100%; min-height: 520px; border: none; display: block; }
.form-shell__alt { margin: 20px 0 0; text-align: center; font-size: 15px; color: var(--color-gray-500); }
.form-shell__alt a { color: var(--color-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ FAQ -- */
.faq { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 8px 28px; }
.faq__item { border-bottom: 1px solid var(--color-gray-100); }
.faq__item:last-child { border-bottom: none; }
.faq__heading { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.faq__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; background: none; border: none; padding: 20px 0; cursor: pointer;
  text-align: left; font-family: inherit;
}
.faq__trigger:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 4px; border-radius: 4px; }
.faq__q { font-size: 16px; font-weight: 600; color: var(--color-navy); }
.faq__chevron {
  display: inline-flex; width: 20px; height: 20px; color: var(--color-gray-500);
  flex-shrink: 0; transition: transform 200ms;
}
.faq__trigger[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
.faq__a { margin: 0; padding: 0 32px 20px 0; font-size: 15px; line-height: 1.65; color: var(--color-gray-600); }
.faq__panel[hidden] { display: none; }

/* ------------------------------------------------------------ Final CTA -- */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1B2A4A, #2A3F6A 40%, #111D35);
  padding: clamp(56px, 8vw, 96px) 0;
}
.cta__bg { position: absolute; inset: 0; pointer-events: none; }
.cta__orb-a { position: absolute; left: -80px; top: -80px; width: 256px; height: 256px; border-radius: 50%; background: rgba(232, 113, 43, 0.05); filter: blur(64px); }
.cta__orb-b { position: absolute; right: -80px; bottom: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(232, 113, 43, 0.05); filter: blur(64px); }
.cta__inner { position: relative; z-index: 10; max-width: 640px; margin: 0 auto; padding: 0 24px; text-align: center; }
.cta__inner h2 { margin: 0; font-size: clamp(28px, 4.5vw, 38px); font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.cta__sub { margin: 16px 0 0; font-size: 18px; line-height: 1.65; color: var(--color-gray-300); }
.cta__actions { margin-top: 32px; display: flex; justify-content: center; }
.cta__phone { margin: 24px 0 0; font-size: 14px; color: var(--color-gray-400); }
.cta__phone a { color: var(--color-gray-300); }
.cta__phone a:hover { color: var(--color-orange-light); }

/* --------------------------------------------------------------- Footer -- */
.site-footer { background: var(--color-navy); color: #fff; }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 64px 24px 48px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; margin-bottom: 48px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.site-footer__brand img { width: 180px; height: auto; display: block; }
.site-footer__brand p { margin: 0; color: var(--color-gray-400); font-size: 14px; line-height: 1.7; }
.site-footer h3 { color: #fff; font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer__contact { font-size: 14px; color: var(--color-gray-400); }
.site-footer a { color: var(--color-gray-400); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--color-orange-light); }
.site-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--color-gray-400);
}

/* ---------------------------------------------------------- Sticky CTA --- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--color-navy); box-shadow: 0 -4px 24px rgb(27 42 74 / 0.3);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sticky-cta__title { font-size: 14px; font-weight: 700; color: #fff; }
.sticky-cta__sub { font-size: 12px; color: var(--color-gray-400); }
.sticky-cta__text { display: flex; flex-direction: column; }

/* ---------------------------------------------------------- Responsive --- */
/* Desktop-only nav, mirroring the design file's `isDesktop` guard. */
.sticky-cta { display: none; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .sticky-cta { display: flex; }
  /* Reserve room so the fixed bar never covers the footer. */
  body.has-sticky-cta { padding-bottom: 76px; }
  /* Once the stats wrap, per-item top rules read better than left rules
     (a left rule on the first item of a wrapped row looks like a stray mark). */
  .hero__stats { border-top: none; }
  .hero__stat,
  .hero__stat + .hero__stat {
    padding: 20px 20px 0 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (min-width: 861px) {
  .sticky-cta { display: none !important; }
}

/* Narrow phones: price rows have no room side by side. */
@media (max-width: 420px) {
  .compare__row { flex-direction: column; gap: 2px; }
  .compare__value { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .feature-card, .faq__chevron { transition: none; }
  .feature-card:hover { transform: none; }
}