/* ------------------------------------------------------------------ */
/* Custom styles for the Astro rebuild.                                */
/* These supplement the copied Webflow stylesheet (clerk.webflow.css). */
/* Brand: orange #ff5c28, text #333.                                   */
/* ------------------------------------------------------------------ */

:root {
  --c-orange: #ff5c28;
  --c-text: #333;
  --c-muted: #6b7280;
  --c-border: #e7e7ea;
  --c-bg-soft: #f7f7f8;
  --c-dark: #14151a;
  --c-maxw: 1200px;
}

* {
  box-sizing: border-box;
}

/* Match the live site's font rendering. Without this, macOS uses subpixel
   smoothing which makes Poppins look heavier/bolder than clerk.io. */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  color: var(--c-text);
  /* Match the Webflow base (body line-height: 1.5). Anything else makes the
     verbatim homepage spacing diverge from the live site. */
  line-height: 1.5;
}

main {
  display: block;
}

a {
  color: inherit;
  /* Mirror the live Webflow base reset so links aren't underlined by the UA
     default. The homepage gets this from its inline global-styles block; this
     line applies the same reset to every other page. */
  text-decoration: inherit;
}

/* Webflow ".hide" utility. The live site uses it to hide helper fields (e.g. the
   hidden "Form" input in the newsletter forms) but the rule isn't in the copied
   Webflow stylesheet, so add it here to stay identical to the live site. */
.hide {
  display: none !important;
}

.u-container {
  width: 100%;
  max-width: var(--c-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ----------------------------- Nav -------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
}
.site-nav__inner {
  max-width: var(--c-maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav__brand {
  display: inline-flex;
  align-items: center;
}
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: space-between;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link,
.site-nav__dropdown > summary {
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  color: var(--c-text);
}
.site-nav__dropdown {
  position: relative;
}
.site-nav__dropdown > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-nav__dropdown > summary::-webkit-details-marker {
  display: none;
}
.site-nav__dropdown > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  margin-top: -3px;
}
.site-nav__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.site-nav__panel a {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  text-decoration: none;
}
.site-nav__panel a:hover {
  background: var(--c-bg-soft);
  color: var(--c-orange);
}
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-button.cc-secondary,
.site-nav__cta-secondary {
  background: #fff !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border) !important;
}
.site-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}
.site-nav__toggle span {
  width: 24px;
  height: 2px;
  background: var(--c-text);
}

@media (max-width: 991px) {
  .site-nav__toggle {
    display: flex;
  }
  .site-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: #fff;
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--c-border);
  }
  .site-nav__menu.is-open {
    display: flex;
  }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .site-nav__panel {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 4px 0 8px 12px;
  }
  .site-nav__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------- Sections ----------------------------- */
.section {
  padding: 72px 0;
}
.section--soft {
  background: var(--c-bg-soft);
}
.section--dark {
  background: var(--c-dark);
  color: #fff;
}
.section__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-orange);
  margin: 0 0 12px;
}
.section h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 16px;
}
.text-color-orange {
  color: var(--c-orange);
}

/* ----------------------------- Hero ------------------------------- */
.hero {
  padding: 80px 0 56px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  line-height: 1.05;
  margin: 0 auto 20px;
  max-width: 14ch;
  font-weight: 700;
}
.hero p {
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: 1.15rem;
  color: var(--c-muted);
}
.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hero__note {
  font-size: 0.9rem;
  color: var(--c-muted);
}
.hero__image {
  display: block;
  max-width: 980px;
  width: 100%;
  margin: 44px auto 0;
  border-radius: 16px;
}

/* --------------------------- Logo bar ----------------------------- */
.logobar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 8px 0;
}
.logobar img {
  height: 30px;
  width: auto;
  opacity: 0.7;
  filter: grayscale(1);
}

/* ----------------------------- Cards ------------------------------ */
.grid {
  display: grid;
  gap: 24px;
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 28px;
}
.card h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}
.card p {
  margin: 0;
  color: var(--c-muted);
}

/* ----------------------------- Stats ------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stats__num {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--c-orange);
  line-height: 1;
}
.stats__label {
  color: var(--c-muted);
  margin-top: 8px;
  font-size: 0.95rem;
}

/* --------------------------- Quote/review ------------------------- */
.quote {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 28px;
}
.quote p {
  font-size: 1.02rem;
  margin: 0 0 16px;
}
.quote__author {
  font-weight: 600;
  font-size: 0.92rem;
}
.quote__role {
  color: var(--c-muted);
  font-size: 0.86rem;
}

/* --------------------------- Blog / listing ----------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.post-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.post-card__img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  background: var(--c-bg-soft);
}
.post-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.post-card__cat {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-orange);
}
.post-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--c-text);
}
.post-card__meta {
  font-size: 0.82rem;
  color: var(--c-muted);
  margin-top: auto;
}

/* --------------------------- Article ------------------------------ */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}
.article__header {
  margin-bottom: 32px;
}
.article__cat {
  color: var(--c-orange);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}
.article h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 12px 0;
}
.article__meta {
  color: var(--c-muted);
  font-size: 0.92rem;
}
.article__hero {
  width: 100%;
  border-radius: 16px;
  margin: 24px 0 8px;
}
.article__body {
  font-size: 1.08rem;
}
.article__body h2 {
  font-size: 1.6rem;
  margin: 36px 0 12px;
}
.article__body h3 {
  font-size: 1.3rem;
  margin: 28px 0 10px;
}
.article__body img {
  max-width: 100%;
  border-radius: 12px;
}
.article__body blockquote {
  border-left: 4px solid var(--c-orange);
  margin: 24px 0;
  padding: 6px 0 6px 20px;
  color: var(--c-muted);
  font-style: italic;
}

/* ------------------------- Breadcrumb ----------------------------- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.breadcrumb a {
  text-decoration: none;
}

/* ----------------------------- Forms ------------------------------ */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 28px;
}
.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lead-form label {
  font-size: 0.88rem;
  font-weight: 500;
}
.lead-form input,
.lead-form textarea {
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font: inherit;
}
.lead-form input:focus,
.lead-form textarea:focus {
  outline: 2px solid var(--c-orange);
  border-color: var(--c-orange);
}
.lead-form button {
  border: 0;
  background: var(--c-orange);
  color: #fff;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.95rem;
}
.lead-form button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.lead-form__status {
  font-size: 0.9rem;
  min-height: 1.2em;
}
.lead-form__status.is-error {
  color: #c0392b;
}

/* ----------------------- Webinar / two-col ------------------------ */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.split ul {
  padding-left: 18px;
}
.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Blog/topic collection hero spacing.
   The Webflow `.padding-section-medium` top padding was designed to sit beneath
   the homepage's FIXED navbar (which overlays the page). On non-homepage pages
   the shared header partial renders a STATIC, in-flow navbar (~66px), so that
   padding stacked on top of the navbar height and doubled the whitespace above
   the featured post. Trim the hero's top padding so the featured post lands
   just below the navbar, matching the live site. */
#blog-header-5 .padding-section-medium {
  padding-top: 12px;
}

/* "Book a FREE site audit" CTA spans the full width of the post grid.
   It lives inside the 3-column `.c-grid`; without an explicit column span it
   collapses into a single narrow column and stretches tall. The live site
   spans it across all columns (grid-column: span 3). */
.c-grid .blog-cta {
  grid-column: 1 / -1;
}

@media (max-width: 991px) {
  .grid--3,
  .grid--4,
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .grid--3,
  .grid--4,
  .post-grid,
  .stats {
    grid-template-columns: 1fr;
  }
}