/*
  Public landing page — hero slider (Vegas.js, self-hosted, MIT license, v2.6.0 from
  https://vegas.jaysalvat.com/) over real photography (static/img/hero/, themed Marketing/
  Branding/Campaigning/Advertisements/Grow Your Business — sourced from pexels.com, free
  license, see the <link> comment in landing.jsp for photographer credits), plus the
  explainer/how-it-works/platforms/about sections. Loads on top of global.css only — this page
  is public, so it deliberately doesn't use either the admin or client theme.

  Theme (this page only, per explicit request): editorial/paper palette + Switzer typeface,
  modeled on noho.ink's live site (colors/fonts read directly off the running page, not
  guessed from a screenshot). Self-hosted below (static/fonts/switzer/) — Switzer is
  Fontshare's free/commercial-use typeface, no CDN reference at runtime.
*/

@font-face {
  font-family: "Switzer";
  src: url("../../fonts/switzer/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../../fonts/switzer/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../../fonts/switzer/switzer-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../../fonts/switzer/switzer-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
  Re-point global.css's design tokens for this page only. `html body` beats global.css's own
  bare `body`/`main`/`header` element rules on specificity (0,0,0,2 vs 0,0,0,1) regardless of
  the two files' load order (global.css is intentionally loaded last, from footer.jsp — see
  that file's comment — so matching its specificity wouldn't be enough). Every component below
  (buttons, tints, headings) already reads these custom properties via var(...), so retheming
  here ripples through the whole page — including header/footer, since they're rendered inside
  this same page's DOM — without touching any shared CSS/JSP file.
*/
html body {
  --font-family: "Switzer", -apple-system, "Segoe UI", sans-serif;
  --color-primary: #d85a30;
  --color-shade-1: #993c1d;
  --color-shade-2: #2c2c2a;
  --color-tint-1: #f1eee9;
  --color-tint-2: #e7e2da;
  --color-grey-4: #5f5e5a;
  --color-grey-5: #3c3c3c;
  background-color: var(--color-tint-1);
}

html body .heading-primary,
html body .heading-secondary,
html body .heading-tertiary {
  letter-spacing: -0.03em;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  /* main (global.css) has padding: 3.2rem on every side — bleed the hero back out to the
     true viewport edges (and up under where that top padding would leave a gap below the
     header) instead of sitting inset like the content sections below it. */
  margin-top: -3.2rem;
  margin-left: -3.2rem;
  margin-right: -3.2rem;
  width: calc(100% + 6.4rem);
  /* Fixed height, not min-height — a fixed box means the hero can never grow taller than one
     screen from its own content, so it never forces a scroll to see the rest of it, and the
     dark overlay/vignette layers (inset:0 below) always span its full, stable top-to-bottom
     extent instead of however tall the content happened to push it. */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background-color: var(--color-shade-2);
}

/*
  Layered depth: the Vegas-rendered photo sits at the base, a soft top-to-bottom gradient
  (--overlay) keeps the whole slide readable, and a second, tighter vignette (--vignette)
  darkens just the very top and bottom edges a touch more — the combination gives the hero a
  sense of depth instead of one flat tint over a photo.
*/
.hero-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/*
  Vegas wraps #hero's original children into its own .vegas-content-scrollable div on init (see
  the JS comment below on updateHeroUI). vegas.min.css doesn't force that wrapper to fill its
  parent, so it was only as tall/wide as its content — the #hero ID selector beats vegas.min.css's
  own class-only rule regardless of stylesheet load order.
*/
#hero .vegas-content-scrollable {
  width: 100%;
  height: 100%;
}

.hero-layer--overlay {
  /* Flat, full-width dark layer (previously banded top/bottom only, leaving the middle of the
     photo comparatively light) — darkens the whole slide evenly instead of just the edges. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.72) 100%);
}

.hero-layer--vignette {
  /* Smaller transparent center so the darkening reads consistently across the full width,
     not just concentrated at the corners. */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.12) 20%, rgba(0, 0, 0, 0.5) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 80%;
  padding: 4rem 3.2rem 4rem 4.8rem;
  text-align: left;
  color: #fff;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.7rem 1.8rem;
  border-radius: 100px;
  margin-bottom: 1.6rem;
  transition: opacity 0.4s ease;
}

.hero-tagline {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.6rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 4px 18px rgba(0, 0, 0, 0.45);
  transition: opacity 0.4s ease;
}

/*
  #hero-scoped (not just .hero-heading) on purpose: this element also carries global.css's
  .heading-primary class, whose `color: var(--color-grey-5)` is equal specificity (one class
  selector) and loads after landing.css (global.css is loaded last, from footer.jsp) — so on a
  plain .hero-heading selector, global.css's grey silently won the cascade tie and the heading
  never actually rendered white. The #hero ID bumps specificity so this rule always wins.
*/
#hero .hero-heading {
  color: #fff;
  letter-spacing: -1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 8px 28px rgba(0, 0, 0, 0.5);
}

.hero-subheading {
  font-size: 1.8rem;
  line-height: 1.65;
  color: #fff;
  margin-bottom: 2.4rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.4);
}

.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.8rem;
}

.hero-highlights li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hero-highlights .icon {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  color: #f6d45d;
}

.hero-actions {
  display: flex;
  gap: 1.6rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* ---- Slider navigation — prev/next arrows + dot indicators ---- */
.hero-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(20, 22, 24, 0.38);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-nav .icon {
  width: 2rem;
  height: 2rem;
}

.hero-nav:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.hero-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.hero-nav--prev { left: 1.6rem; }
.hero-nav--next { right: 1.6rem; }

@media (max-width: 780px) {
  .hero-nav { display: none; }
}

.hero-dots {
  position: absolute;
  z-index: 3;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.9rem;
}

.hero-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.25);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-dot:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

.hero-dot--active {
  background-color: #fff;
  transform: scale(1.2);
}

/* ---- CTA buttons — pill-rounded, glass, shadowed, animated on hover ---- */
.hero-actions .btn,
.landing-cta-band .btn {
  border-radius: 100px;
  padding: 1.5rem 3.6rem;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              background-color 0.25s ease;
}

/* Hero-specific: smaller and tighter than the bottom CTA band's buttons — the hero sits over
   a busy photo and reads better as a compact pair, not a full-width block. */
.hero-actions .btn {
  padding: 0.9rem 2rem;
  font-size: 1.3rem;
}

/*
  The landing page's <body> carries neither theme-admin nor theme-client, so it never picks up
  admin-theme.css's/client-theme.css's `body.theme-{x} .btn .icon` sizing rule — the plus/key
  SVGs inside these buttons were rendering at the browser's unstyled default size (a lot bigger
  than the button text), which is why the buttons read as oversized regardless of padding.
*/
.hero-actions .btn .icon,
.landing-cta-band .btn .icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.2rem;
  margin-right: 0.2rem;
}

.hero-actions .btn--full,
.landing-cta-band .btn--full {
  background-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(216, 90, 48, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.hero-actions .btn--full:hover,
.landing-cta-band .btn--full:hover {
  background-color: var(--color-shade-1);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(216, 90, 48, 0.55), 0 4px 10px rgba(0, 0, 0, 0.25);
}

.btn--outline-on-dark {
  background-color: rgba(255, 255, 255, 0.10);
  color: #fff;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55) inset, 0 4px 16px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--outline-on-dark:hover {
  background-color: rgba(255, 255, 255, 0.20);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85) inset, 0 8px 22px rgba(0, 0, 0, 0.22);
}

.hero-actions .btn:active,
.landing-cta-band .btn:active {
  transform: translateY(-1px);
}

/* ---- Scroll-reveal animation — sections fade/slide up as they enter the viewport, card grids
   cascade child-by-child. JS toggles .is-visible via IntersectionObserver in landing.jsp. */
.reveal {
  opacity: 0;
  transform: translateY(2.8rem);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Section rhythm ---- */
.landing-section {
  padding-top: 7.2rem;
  padding-bottom: 7.2rem;
  text-align: center;
}

.landing-section--tint {
  background-color: #fff;
}

.landing-section .subheading {
  display: block;
  margin-bottom: 1rem;
}

.landing-section .heading-secondary {
  margin-bottom: 5.2rem;
  letter-spacing: -0.5px;
}

/* ---- Feature cards ---- */
/*
  #pricing-scoped: global.css's .grid sets row-gap/column-gap longhands at the same specificity
  as a bare .grid--3-cols rule would, and global.css loads after landing.css (footer-loaded), so
  a plain .grid--3-cols selector would lose that tie — same class of bug as the hero heading fix
  above. The #pricing ID guarantees this wins regardless of load order.
*/
#pricing .grid--3-cols {
  gap: 2.8rem;
}

.landing-card {
  text-align: left;
  cursor: default;
  border: 1px solid var(--color-tint-2);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.landing-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 2.8rem 5.2rem rgba(0, 0, 0, 0.1);
}

.icon--feature {
  width: 3.2rem;
  height: 3.2rem;
  color: var(--color-primary);
  margin-bottom: 1.6rem;
}

.landing-card-photo {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  border-radius: var(--radius-default);
  margin-bottom: 2rem;
}

.landing-card .heading-tertiary {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.landing-card p {
  font-size: 1.5rem;
  line-height: 1.65;
  color: var(--color-grey-4);
}

/* ---- Steps — connected stepper illustration ---- */
.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 4.8rem 3.6rem;
  max-width: 104rem;
  margin: 0 auto;
  text-align: left;
}

/* The connecting line sits behind every step-number circle; the circles' opaque background
   paints over it where they overlap, so it reads as one line threading through each node. */
.steps-grid::before {
  content: "";
  position: absolute;
  top: 2.2rem;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-tint-2);
}

@media (max-width: 900px) {
  .steps-grid::before {
    display: none;
  }
}

.step-card {
  position: relative;
  padding-left: 1rem;
}

.step-number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.9rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 18px rgba(216, 90, 48, 0.35);
}

.step-card .heading-tertiary {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.step-card p {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-grey-4);
}

.how-it-works-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: fit-content;
  margin: 4rem auto 0;
  padding: 1.1rem 2.4rem;
  font-size: 1.4rem;
}

/* Same fix as .hero-actions/.landing-cta-band's .btn .icon above — this page never loads
   the theme files that would otherwise size a .btn's .icon child, so every button icon on
   this page needs its own explicit rule or it renders at the browser's unstyled default size. */
.how-it-works-more-link .icon {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

/* ---- Platforms — one big photo with floating glass cards instead of two plain boxes ---- */
.platforms-showcase {
  position: relative;
  min-height: 52rem;
  max-width: 104rem;
  margin: 0 auto;
  border-radius: var(--radius-medium);
  overflow: hidden;
  box-shadow: var(--shadow-default);
}

.platforms-showcase-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platforms-showcase-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(20, 20, 19, 0.75) 0%, rgba(20, 20, 19, 0.15) 55%, rgba(20, 20, 19, 0) 75%);
}

.platform-float {
  position: absolute;
  z-index: 2;
  width: 30rem;
  max-width: calc(50% - 3rem);
  text-align: left;
  padding: 2.4rem;
  border-radius: var(--radius-medium);
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.platform-float:hover {
  transform: translateY(-6px);
  box-shadow: 0 2.8rem 5.2rem rgba(0, 0, 0, 0.3);
}

.platform-float--meta {
  top: 3.2rem;
  left: 3.2rem;
}

.platform-float--google {
  bottom: 3.2rem;
  right: 3.2rem;
}

.platform-float .heading-tertiary {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

.platform-float p {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-grey-4);
}

.platform-float-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: var(--radius-default);
  background-color: var(--color-tint-1);
  margin-bottom: 1.4rem;
}

.platform-float-icon {
  width: 3.2rem;
  height: 3.2rem;
  animation: platformIconFloat 3s ease-in-out infinite;
}

.platform-float:hover .platform-float-icon {
  animation-duration: 1.1s;
}

@keyframes platformIconFloat {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  50% { transform: translateY(-0.5rem) scale(1.08) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .platform-float-icon {
    animation: none;
  }
}

@media (max-width: 780px) {
  .platforms-showcase {
    min-height: 0;
  }

  .platform-float {
    position: static;
    max-width: 100%;
    width: 100%;
    margin: 1.6rem;
  }

  .platforms-showcase-wash {
    display: none;
  }
}

/* ---- About ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.8rem;
  align-items: center;
  max-width: 110rem;
  margin: 0 auto;
  text-align: left;
}

.about-grid .subheading {
  display: block;
  margin-bottom: 1rem;
}

.about-grid p {
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--color-grey-4);
}

.about-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.2rem;
  height: 36rem;
}

.about-collage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-medium);
  transition: transform 0.4s ease;
}

.about-collage-img:hover {
  transform: scale(1.04);
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-collage {
    height: 28rem;
    order: -1;
  }
}

/* ---- Bottom CTA band ---- */
.landing-cta-band {
  /* Reuses the hero's own "Grow Your Business" photo — same photo set, same license, no new
     asset — with a dark gradient layered on top (multiple backgrounds, first listed on top)
     so the white heading/button stay readable over it. */
  background: linear-gradient(135deg, rgba(44, 44, 42, 0.88) 0%, rgba(20, 20, 19, 0.92) 100%),
              url("../../img/hero/hero-growth.jpg") center / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 6.4rem 3.2rem;
}

.landing-cta-band .heading-tertiary {
  color: #fff;
  margin-bottom: 2.8rem;
  letter-spacing: -0.3px;
}

@media (max-width: 640px) {
  .landing-cta-band .btn {
    padding: 1.3rem 2.6rem;
    font-size: 1.5rem;
  }

  .hero-actions .btn {
    padding: 0.8rem 1.8rem;
    font-size: 1.2rem;
  }

  /*
    The hero is a fixed `height: 100vh` on desktop (explicit "don't scroll" request) — on a
    narrow phone screen that's a real overflow risk: the heading/tagline/subheading/highlights/
    buttons stack combined with `overflow: hidden` would silently clip content instead of just
    scrolling. min-height here lets it grow if it needs to, since "fits one screen exactly" was
    never the ask on mobile, only "don't clip/cut off." Width/padding also reset — 80% width
    plus a 4.8rem left inset leaves very little room on a 375px viewport.
  */
  .hero {
    height: auto;
    min-height: 100vh;
  }

  .hero-content {
    width: 100%;
    padding: 8rem 2rem 4rem;
  }

  #hero .hero-heading {
    font-size: 3.2rem;
  }

  .hero-tagline {
    font-size: 1.6rem;
  }

  .hero-subheading {
    font-size: 1.5rem;
  }

  .hero-highlights li {
    font-size: 1.3rem;
  }
}