/*
 * gusapp.css — site-specific customisations.
 * Loaded AFTER assets/css/style.css to override template defaults.
 *
 * IMPORTANT — colour-source provenance:
 *   --gusapp-teal / --gusapp-orange : extracted from
 *     brand/Logo Files/Wordmark File/PNGs & SVGs/SVG/Asset 1.svg
 *     (the colour wordmark — fill: #0c635c + #e29344).
 *   --pin-purple : per user direction ("royal purple winner-pin")
 *     — NOT from the wordmark. Confirm against brand/Brand Book.pdf
 *     during Day 2 redline.
 */

:root {
  /* ========== gusapp brand palette (from logo SVG) ========== */
  --gusapp-teal:         #0c635c;
  --gusapp-teal-dark:    #0a4f49;
  --gusapp-teal-light:   #1d8077;

  --gusapp-orange:       #e29344;
  --gusapp-orange-dark:  #c97c2e;
  --gusapp-orange-light: #f0a865;

  --gusapp-cream:        #faf6ed;
  --gusapp-ink:          #121117;

  /* ========== Coming Soon winner-pin (royal purple per user) ========== */
  --pin-purple:          #6b21a8;
  --pin-purple-light:    #9333ea;
  --pin-purple-deep:     #4c1d95;
  --pin-gold:            #d4a85a;

  /* ========== Override template defaults ========== */
  --primary-color:       var(--gusapp-teal);
  --secondary-color:     var(--gusapp-orange);
}

/* ============================================================
 * HERO — lead-capture form (left column)
 * ============================================================ */

/* Honeypot: visually hidden, still in DOM for bots to fill */
.lead-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.lead-capture-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--border-radius-md, 1rem);
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-top: 1.5rem;
}

.lead-phone-group .input-group-text {
  background: rgba(255, 255, 255, 0.95);
  color: var(--gusapp-teal);
  font-weight: 600;
  border: none;
  letter-spacing: 0.02em;
}
.lead-phone-group .form-control {
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--gusapp-ink);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.lead-app-radio {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.lead-app-radio label.btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--border-radius-sm, 0.5rem);
  padding: 0.6rem 1rem;
  font-weight: 500;
  margin: 0;
  cursor: pointer;
  transition: all 150ms ease;
}
.lead-app-radio label.btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.lead-app-radio .btn-check:checked + label.btn {
  background: var(--gusapp-orange);
  border-color: var(--gusapp-orange);
  color: #fff;
}

.lead-capture-card .form-select {
  background-color: rgba(255, 255, 255, 0.95);
  border: none;
  color: var(--gusapp-ink);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--border-radius-sm, 0.5rem);
}
.lead-capture-card .form-select:disabled {
  background-color: rgba(255, 255, 255, 0.4);
  color: rgba(18, 17, 23, 0.5);
}

.lead-capture-card .form-label,
.lead-capture-card legend.form-label {
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

.lead-submit {
  background: var(--gusapp-teal);
  border: 1px solid var(--gusapp-teal);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.85rem 1rem;
  border-radius: var(--border-radius-sm, 0.5rem);
  letter-spacing: 0.02em;
  transition: all 200ms ease;
  margin-top: 0.5rem;
}
.lead-submit:hover,
.lead-submit:focus {
  background: var(--gusapp-teal-dark);
  border-color: var(--gusapp-teal-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(12, 99, 92, 0.40);
}
.lead-submit .icon { transition: transform 200ms ease; }
.lead-submit:hover .icon { transform: translateX(4px); }

/* ============================================================
 * HERO — mockup + Coming Soon pin (right column)
 * ============================================================ */

.hero-mockup-wrap {
  position: relative;
  width: 280px;
  max-width: 100%;
  aspect-ratio: 280 / 580;
  margin: 0 auto;
}

.hero-mockup-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
}

/* Screenshot layer — sits behind the SVG frame, fills the screen cutout */
.hero-mockup-screenshot {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: 24px;
  background:
    linear-gradient(155deg,
      var(--gusapp-teal-light) 0%,
      var(--gusapp-teal) 45%,
      var(--gusapp-teal-dark) 100%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.hero-mockup-placeholder-text {
  font-family: var(--primary-font, "Poppins", sans-serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.hero-mockup-placeholder-text small {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  margin-top: 0.5rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ============================================================
 * Coming Soon winner-pin — CSS-only, circular, shimmer
 * ============================================================ */

.coming-soon-pin {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 3;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%,
      rgba(255, 255, 255, 0.22) 0%,
      transparent 35%),
    conic-gradient(from 35deg,
      var(--pin-purple-light) 0%,
      var(--pin-purple) 25%,
      var(--pin-purple-deep) 50%,
      var(--pin-purple) 75%,
      var(--pin-purple-light) 100%);
  border: 2px solid var(--pin-gold);
  box-shadow:
    0 10px 24px rgba(76, 29, 149, 0.50),
    inset 0 0 0 4px rgba(255, 255, 255, 0.06);
  transform: rotate(-8deg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.coming-soon-pin-inner {
  position: relative;
  z-index: 2;
  font-family: var(--primary-font, "Poppins", sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #fff;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Diagonal shimmer sweep across the pin */
.coming-soon-pin::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.34) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  animation: gusapp-pin-shimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gusapp-pin-shimmer {
  0%   { left: -150%; }
  60%  { left: 250%;  }
  100% { left: 250%;  }
}

/* Mobile sizing */
@media (max-width: 767.98px) {
  .coming-soon-pin {
    width: 64px;
    height: 64px;
    top: -12px;
    right: -12px;
    border-width: 1.5px;
  }
  .coming-soon-pin-inner {
    font-size: 0.55rem;
    letter-spacing: 0.06em;
  }
  .hero-mockup-wrap {
    width: 220px;
    margin-top: 2rem;
  }
}

/* ============================================================
 * Hero gradient overlay — tweak to gusapp brand
 * (template uses --primary-color in .overlay-gradient)
 * ============================================================ */

.hero-section.layout-5.has-overlay.overlay-gradient::before {
  /* Override the template's purple gradient with a brand teal-deep blend */
  background: linear-gradient(135deg,
    var(--gusapp-teal-dark) 0%,
    var(--gusapp-ink) 70%) !important;
}

/* ============================================================
 * Day 3 polish:
 *   - Kill the template's welcome-bg-2.jpg watermark (1920x1280 text)
 *   - Tighten hero so the form + mockup fit a 768px viewport
 *   - Replace placeholder text inside the mockup with the gusapp
 *     logomark (splash-screen style)
 * ============================================================ */

/* Watermark: template ships welcome-bg-N.jpg files (1920x1280 stock
   placeholders with dimensions baked in) on every hero layout AND on
   .download-area, .contact-area, .work-section. Kill them all globally. */
.hero-section[class*="layout-"],
.download-area,
.contact-area {
  background-image: none !important;
}
.hero-section.layout-5 {
  background-color: var(--gusapp-teal-dark);
}

/* Hero overall: ensure it fits the viewport without scroll on common laptops.
   Template default is vh-90 (90vh). Capped to 100vh max. */
.hero-section.layout-5.vh-90 {
  min-height: 0;
  height: auto;
  padding-top: 6rem;     /* clear navbar */
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .hero-section.layout-5.vh-90 {
    height: 100vh;
    min-height: 720px;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* Smaller h1 inside the hero so the form fits below it */
.hero-section.layout-5 .hero-content h1 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.hero-section.layout-5 .hero-content .sub-heading {
  font-size: 0.98rem;
  line-height: 1.5;
  margin-top: 0.25rem !important;
  margin-bottom: 1rem !important;
}

/* Form card: tighter padding + slightly slimmer field rhythm */
.lead-capture-card {
  padding: 1.1rem 1.25rem;
  margin-top: 0.75rem;
}
.lead-capture-card .mb-3 { margin-bottom: 0.65rem !important; }
.lead-capture-card fieldset.mb-3 { margin-bottom: 0.65rem !important; }
.lead-capture-card .form-label,
.lead-capture-card legend.form-label {
  font-size: 0.7rem;
  margin-bottom: 0.25rem;
}
.lead-capture-card .form-select,
.lead-phone-group .form-control,
.lead-phone-group .input-group-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.95rem;
}
.lead-app-radio label.btn { padding: 0.5rem 0.85rem; font-size: 0.95rem; }
.lead-submit { padding: 0.7rem 1rem; font-size: 1rem; margin-top: 0.25rem; }
.lead-capture-card .form-text {
  font-size: 0.72rem;
  margin-top: 0.55rem !important;
  line-height: 1.4;
}

/* Hide the empty Turnstile mount until a site key is set,
   so it doesn't reserve vertical space. */
#turnstile-widget:empty,
#turnstile-widget[data-sitekey=""] { display: none; }

/* Mockup: the screenshot layer is now a splash screen — logomark centred */
.hero-mockup-wrap {
  width: 240px;             /* slightly slimmer than 280 to give breathing room */
}
@media (min-width: 992px) {
  .hero-mockup-wrap { width: 260px; }
}

.hero-mockup-screenshot {
  /* deeper teal so the white logomark pops, screen fills bezel-to-bezel */
  background:
    radial-gradient(circle at 30% 20%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 55%),
    linear-gradient(160deg,
      var(--gusapp-teal) 0%,
      var(--gusapp-teal-dark) 60%,
      #062a26 100%);
  top: 6px !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  border-radius: 26px !important;
}
/* Mini-mockup screen also matches the new thinner bezel */
.gusapp-mini-mockup .mini-screenshot {
  top: 6px !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  border-radius: 26px !important;
}

.hero-mockup-logo {
  width: 38%;
  height: auto;
  display: block;
  opacity: 0.96;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

/* ============================================================
 * FEATURES section — Visible / Trusted / Local
 * ============================================================ */
.features-section .gusapp-feature-icon {
  font-size: 3rem;
  color: var(--gusapp-orange);
  display: block;
  margin: 0 auto 0.5rem;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.gusapp-feature-card {
  background: var(--gusapp-cream);
  border: 1px solid rgba(12, 99, 92, 0.08);
  border-radius: var(--border-radius-md, 1rem);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.gusapp-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(12, 99, 92, 0.12);
}

/* ============================================================
 * WORK section — numbered step circles
 * ============================================================ */
.work-section .gusapp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--gusapp-orange);
  color: var(--gusapp-orange);
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--primary-font, "Poppins", sans-serif);
}
.work-section.has-overlay.overlay-gradient::before {
  background: linear-gradient(135deg,
    var(--gusapp-teal-dark) 0%,
    #062a26 100%) !important;
}

/* ============================================================
 * Mini phone mockup — used in Content sections (For shoppers / For vendors)
 * Same look as the hero mockup, smaller. Logomark splash inside.
 * ============================================================ */
.gusapp-mini-mockup {
  position: relative;
  width: 220px;
  max-width: 100%;
  aspect-ratio: 280 / 580;
  margin: 0 auto;
}
.gusapp-mini-mockup .mini-screenshot {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 20%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 55%),
    linear-gradient(160deg,
      var(--gusapp-teal) 0%,
      var(--gusapp-teal-dark) 60%,
      #062a26 100%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gusapp-mini-mockup .mini-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.30));
}
.gusapp-mini-mockup .mini-logo {
  width: 38%;
  height: auto;
  display: block;
  opacity: 0.96;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

/* CTA button used across body sections (matches hero submit colour) */
.gusapp-cta-primary,
.gusapp-cta-primary:focus {
  background: var(--gusapp-teal);
  border: 1px solid var(--gusapp-teal);
  color: #fff;
}
.gusapp-cta-primary:hover {
  background: var(--gusapp-teal-dark);
  border-color: var(--gusapp-teal-dark);
  color: #fff;
}

/* On the .content-section.primary-bg (was template purple) — make it teal-light cream */
.content-section.primary-bg {
  background: var(--gusapp-cream) !important;
}
.content-section.primary-bg h2,
.content-section.primary-bg span,
.content-section.primary-bg p {
  color: var(--gusapp-ink);
}
.content-section.primary-bg .icon.layout-2 .material-symbols-outlined {
  color: var(--gusapp-teal);
}

/* ============================================================
 * Section eyebrow (small uppercase label above headlines)
 * ============================================================ */
.gusapp-section-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gusapp-orange);
}

/* ============================================================
 * ROADMAP cards (replaces Reviews)
 * ============================================================ */
.gusapp-roadmap-section { background: #fff; }
.gusapp-roadmap-card {
  background: var(--gusapp-cream);
  border: 1px solid rgba(12, 99, 92, 0.08);
  border-left: 4px solid rgba(12, 99, 92, 0.18);
  border-radius: var(--border-radius-md, 1rem);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.gusapp-roadmap-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(12, 99, 92, 0.12);
}
.gusapp-roadmap-card--current { border-left-color: var(--gusapp-teal); }
.gusapp-roadmap-card--next    { border-left-color: var(--gusapp-orange); }
.gusapp-roadmap-card h4 {
  color: var(--gusapp-ink);
  font-weight: 700;
}
.gusapp-roadmap-card p {
  color: var(--gusapp-ink);
  opacity: 0.78;
}
.gusapp-phase-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(12, 99, 92, 0.08);
  color: var(--gusapp-teal-dark);
}
.gusapp-roadmap-card--current .gusapp-phase-tag {
  background: var(--gusapp-teal);
  color: #fff;
}
.gusapp-roadmap-card--next .gusapp-phase-tag {
  background: rgba(226, 147, 68, 0.18);
  color: var(--gusapp-orange-dark);
}

/* ============================================================
 * PRICING cards
 * ============================================================ */
.gusapp-pricing-section { background: var(--gusapp-cream) !important; }
.gusapp-pricing-card {
  background: #fff;
  border: 1px solid rgba(12, 99, 92, 0.08);
  border-radius: var(--border-radius-md, 1rem);
  position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.gusapp-pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(12, 99, 92, 0.14);
}
.gusapp-pricing-card .package-type {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gusapp-orange);
  margin-top: 0.5rem;
}
.gusapp-pricing-card .package-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gusapp-ink);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}
.gusapp-pricing-card .package-price small {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gusapp-ink);
  opacity: 0.6;
}
.gusapp-pricing-list {
  margin: 0 0 1rem 0;
  padding: 0;
}
.gusapp-pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0;
  font-size: 0.94rem;
  color: var(--gusapp-ink);
  border-bottom: 1px solid rgba(12, 99, 92, 0.06);
}
.gusapp-pricing-list li:last-child { border-bottom: 0; }
.gusapp-tick {
  font-size: 1.15rem;
  color: var(--gusapp-teal);
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.gusapp-pricing-card--featured {
  border-color: var(--gusapp-teal);
  box-shadow: 0 18px 40px rgba(12, 99, 92, 0.20);
  transform: translateY(-6px);
}
.gusapp-pricing-card--featured:hover { transform: translateY(-9px); }
.gusapp-pricing-flag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gusapp-orange);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(226, 147, 68, 0.4);
}
.gusapp-cta-outline {
  background: transparent;
  border: 1px solid var(--gusapp-teal);
  color: var(--gusapp-teal);
  font-weight: 600;
  transition: all 180ms ease;
}
.gusapp-cta-outline:hover,
.gusapp-cta-outline:focus {
  background: var(--gusapp-teal);
  color: #fff;
  border-color: var(--gusapp-teal);
}

/* ============================================================
 * PARTNERS / INVESTORS section
 * ============================================================ */
.gusapp-partners-section {
  background: var(--gusapp-ink);
  color: rgba(255, 255, 255, 0.92);
  padding: 5rem 0;
}
.gusapp-partners-section h2 { color: #fff; }
.gusapp-partners-section p  { color: rgba(255, 255, 255, 0.78); }
.gusapp-partner-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-md, 1rem);
  transition: all 180ms ease;
}
.gusapp-partner-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(226, 147, 68, 0.5);
  transform: translateY(-2px);
}
.gusapp-partner-card h5 { color: #fff; font-weight: 700; }
.gusapp-partner-card p  { color: rgba(255, 255, 255, 0.7); }
.gusapp-partner-icon {
  font-size: 2.2rem;
  color: var(--gusapp-orange);
  display: block;
}
.gusapp-partner-link {
  display: inline-block;
  font-weight: 600;
  color: var(--gusapp-orange);
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 147, 68, 0.3);
  padding-bottom: 1px;
  transition: all 180ms ease;
}
.gusapp-partner-link:hover {
  color: var(--gusapp-orange-light);
  border-bottom-color: var(--gusapp-orange-light);
}

/* ============================================================
 * DOWNLOAD teaser (Coming Soon)
 * ============================================================ */
.gusapp-download-teaser.has-overlay.overlay-dark::before {
  background: linear-gradient(135deg,
    var(--gusapp-teal-dark) 0%,
    var(--gusapp-ink) 100%) !important;
  opacity: 0.95;
}
.gusapp-download-badges { gap: 0.75rem; flex-wrap: wrap; }
.gusapp-coming-badge {
  display: inline-block;
  position: relative;
  filter: grayscale(0.8) brightness(0.65);
  opacity: 0.85;
  cursor: not-allowed;
  pointer-events: none;
}
.gusapp-coming-badge img {
  display: block;
  max-height: 56px;
  width: auto;
}
.gusapp-coming-badge::after {
  content: "Coming";
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--pin-purple);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(76, 29, 149, 0.45);
}

/* ============================================================
 * CONTACT cards (simple v1.0 — no form yet)
 * ============================================================ */
.gusapp-contact-section { background: var(--gusapp-cream) !important; padding-bottom: 4rem; }
.gusapp-contact-section h2,
.gusapp-contact-section p,
.gusapp-contact-section span { color: var(--gusapp-ink); }
.gusapp-contact-card {
  background: #fff;
  border: 1px solid rgba(12, 99, 92, 0.08);
  border-radius: var(--border-radius-md, 1rem);
  transition: all 180ms ease;
}
.gusapp-contact-card:hover {
  border-color: var(--gusapp-teal);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(12, 99, 92, 0.10);
}
.gusapp-contact-card h5 { color: var(--gusapp-ink); font-weight: 700; }
.gusapp-contact-card a {
  color: var(--gusapp-teal);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 99, 92, 0.25);
}
.gusapp-contact-card a:hover {
  color: var(--gusapp-teal-dark);
  border-bottom-color: var(--gusapp-teal-dark);
}
.gusapp-contact-icon {
  font-size: 2rem;
  color: var(--gusapp-orange);
  display: block;
}

/* ============================================================
 * FOOTER
 * ============================================================ */
.gusapp-footer {
  background: var(--gusapp-ink) !important;
  color: rgba(255, 255, 255, 0.85);
}
.gusapp-footer .footer-top { padding: 4rem 0 2rem; }
.gusapp-footer .footer-title {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.gusapp-footer .nav-link {
  padding: 0.35rem 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  transition: color 150ms ease;
}
.gusapp-footer .nav-link:hover { color: var(--gusapp-orange); }
.gusapp-footer .slug { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; }
.gusapp-footer .small { color: rgba(255, 255, 255, 0.55); }
.gusapp-footer-icon {
  font-size: 1rem;
  vertical-align: middle;
  margin-right: 0.25rem;
  color: var(--gusapp-orange);
}
.gusapp-footer .social-icons .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  margin-right: 0.5rem;
  transition: all 180ms ease;
}
.gusapp-footer .social-icons .icon:hover {
  background: var(--gusapp-orange);
  color: #fff;
  transform: translateY(-2px);
}
.gusapp-footer-cta {
  color: var(--gusapp-orange);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 147, 68, 0.4);
  padding-bottom: 1px;
}
.gusapp-footer-cta:hover { color: var(--gusapp-orange-light); }
.gusapp-footer .footer-bottom {
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gusapp-footer .copyright-area span,
.gusapp-footer .copyright-area a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  text-decoration: none;
}
.gusapp-footer .copyright-area a:hover { color: var(--gusapp-orange); }
.gusapp-footer-tagline {
  font-style: italic;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
 * Lead form: inline messages + thank-you state
 * ============================================================ */
.lead-message {
  margin-top: 0.85rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--border-radius-sm, 0.5rem);
  font-size: 0.92rem;
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.lead-message--error {
  background: rgba(220, 53, 69, 0.20);
  border-color: rgba(220, 53, 69, 0.45);
  color: #ffe7e9;
}

.lead-thanks {
  text-align: center;
  padding: 2rem 1.25rem 1.25rem;
  color: #fff;
  animation: gusapp-thanks-in 380ms ease-out both;
}
.lead-thanks-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gusapp-orange);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  box-shadow: 0 12px 28px rgba(226, 147, 68, 0.45);
}
.lead-thanks-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: #fff;
}
.lead-thanks-msg {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.96rem;
  line-height: 1.5;
}
@keyframes gusapp-thanks-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * MOBILE — lastref hero re-layer
 *   Form floats on top, mockup spans behind it scaled-up.
 *   Backdrop-filter on the form card naturally blurs the mockup
 *   where they overlap — that's the "slightly out of focus"
 *   effect (browser-native, no per-pixel masking).
 * ============================================================ */
@media (max-width: 767.98px) {

  .hero-section.layout-5 > .container > .row.justify-content-center {
    position: relative;
    min-height: 78vh;
  }

  /* Right col (mockup) → absolute behind, centred */
  .hero-section.layout-5 > .container > .row > .col-12.col-md-5.col-lg-6 {
    position: absolute;
    inset: 0;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .hero-section.layout-5 .hero-mockup-wrap {
    width: 320px !important;
    max-width: 86vw !important;
    margin-top: 0;
    opacity: 0.92;
  }

  /* Coming Soon pin scales with the bigger mockup; needs taps */
  .hero-section.layout-5 .coming-soon-pin {
    width: 78px;
    height: 78px;
    top: -14px;
    right: -14px;
    pointer-events: auto;
  }

  /* Left col (headline + form) → on top */
  .hero-section.layout-5 > .container > .row > .col-12.col-md-7.col-lg-6 {
    position: relative;
    z-index: 2;
  }

  /* Glassy form card. backdrop-filter blurs the mockup behind it
     where the two overlap. Lift edges with a soft shadow. */
  .hero-section.layout-5 .lead-capture-card {
    background: rgba(8, 50, 46, 0.62) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  }

  /* Headline + subhead readable against the mockup gradient */
  .hero-section.layout-5 .hero-content h1 {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  }
  .hero-section.layout-5 .hero-content .sub-heading {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  }
}

/* ============================================================
 * FOOTER mobile: stack columns 1-per-row, list items fully visible
 * ============================================================ */
.gusapp-footer .nav.flex-column .nav-item { display: list-item; list-style: none; }
.gusapp-footer .nav.flex-column .nav-link { display: inline-block; }
@media (max-width: 575.98px) {
  .gusapp-footer .row.items > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.25rem;
  }
  .gusapp-footer .footer-top { padding: 3rem 0 1rem; }
  .gusapp-footer .footer-title { margin-top: 0.75rem; }
}

/* ============================================================
 * MOBILE MENU modal — breathy, right-aligned, larger tap targets
 * ============================================================ */
@media (max-width: 991.98px) {
  #menu .modal-body { padding: 2rem 1.5rem; }
  #menu .menu .items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
    min-height: 65vh;
    padding-right: 0.5rem;
  }
  #menu .menu .items .nav-item {
    width: 100%;
    text-align: right;
    list-style: none;
  }
  #menu .menu .items .nav-link {
    font-size: 1.55rem !important;
    font-weight: 600 !important;
    padding: 0.9rem 0.4rem !important;
    color: var(--gusapp-ink) !important;
    border-bottom: 1px solid rgba(12, 99, 92, 0.08);
    transition: color 150ms ease;
  }
  #menu .menu .items .nav-item:last-child .nav-link { border-bottom: none; }
  #menu .menu .items .nav-link:hover,
  #menu .menu .items .nav-link:active,
  #menu .menu .items .nav-link.active { color: var(--gusapp-orange) !important; }
  #menu .menu .items .icon-arrow-down,
  #menu .menu .items .nav-item.disabled { display: none !important; }
}

/* ============================================================
 * WORK SECTION (Order in four taps): hide chevron between steps,
 * stack 1-per-row on phones
 * ============================================================ */
@media (max-width: 991.98px) {
  .work-section .item::after,
  .work-section .icon-box::after,
  .work-section .row.items > .col:not(:last-child)::after,
  .work-section .row.items > [class*="col-"]:not(:last-child)::after { display: none !important; }
}
@media (max-width: 767.98px) {
  .work-section .row.items > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.75rem;
  }
}

/* ============================================================
 * CONTENT SECTIONS — bullet alignment, icon column locked,
 * row min-height for visual rhythm across both content blocks
 * ============================================================ */
.content-section .list-group-item.d-flex {
  align-items: flex-start;
  gap: 0.55rem;
}
.content-section .list-group-item .icon.layout-2 {
  flex: 0 0 28px;
  width: 28px;
  margin-right: 0;
}
.content-section .list-group-item .icon.layout-2 .material-symbols-outlined {
  font-size: 1.4rem;
  line-height: 1;
}
.content-section .list-group-item > span {
  flex: 1;
  min-height: 3em;             /* equalises rows row-by-row */
  display: inline-block;
  line-height: 1.5;
}
@media (max-width: 991.98px) {
  .content-section .gusapp-mini-mockup { margin-top: 2rem; margin-bottom: 0.5rem; }
}

/* ============================================================
 * PRICING tier list — row alignment safety
 * ============================================================ */
.gusapp-pricing-list li {
  min-height: 2.8em;
  align-items: flex-start;
}

/* ============================================================
 * FEATURE cards — equalise body paragraph height so titles align
 * ============================================================ */
.gusapp-feature-card .content p {
  min-height: 5.4em;
}

/* ============================================================
 * Lock the partners/investors block per the "looks good on mobile,
 * leave it" ref. Do not regress.
 * ============================================================ */
/* (intentionally empty — no overrides for .gusapp-partners-section) */

/* ============================================================
 * Day 5 pass A — overrides
 *   1. Hero form: more translucent default, opaque on focus
 *   2. Hero h1 bump
 *   3. Hide both stacked mini-mockups on mobile
 *   4. Hamburger menu: big-finger tap target, 3x icon
 *   5. Coming Soon pin v2 (gold scalloped rim + purple medallion + flailing red ribbons, bottom-left)
 * ============================================================ */

/* 1) Hero form translucent default → opaque on focus-within */
@media (max-width: 767.98px) {
  .hero-section.layout-5 .lead-capture-card {
    background: rgba(8, 50, 46, 0.32) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20) !important;
    transition: background 250ms ease, backdrop-filter 250ms ease, box-shadow 250ms ease;
  }
  .hero-section.layout-5 .lead-capture-card:focus-within {
    background: rgba(8, 50, 46, 0.78) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45) !important;
  }
}

/* 2) Hero h1 bump (mobile + desktop) */
@media (max-width: 767.98px) {
  .hero-section.layout-5 .hero-content h1 {
    font-size: clamp(2.1rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em;
  }
}
@media (min-width: 768px) {
  .hero-section.layout-5 .hero-content h1 {
    font-size: clamp(2.4rem, 5vw, 4rem) !important;
    line-height: 1.05 !important;
  }
}

/* 3) Hide both stacked content mockups on phones — the icon + text
      already do the work, no need for the device frame to compete */
@media (max-width: 991.98px) {
  .content-section .gusapp-mini-mockup,
  .content-section .row.justify-content-between > [class*="col-lg-5"] {
    display: none !important;
  }
  .content-section .row.justify-content-between > [class*="col-lg-6"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* 4) Hamburger menu: big-finger tap target.
       Glyph drawn in raw CSS (3 white bars) so we don't depend on the
       template's icon-menu icon-font glyph loading correctly on every
       browser. The original <i class="icon-menu"> stays in the DOM
       but is hidden — its parent .nav-link gets the bars instead. */
@media (max-width: 1199.98px) {
  /* Force the hamburger column visible (template hides it >=lg) */
  header .navbar-nav.toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
  }
  header .navbar-nav.toggle .nav-item {
    list-style: none;
    display: list-item;
  }
}
@media (max-width: 991.98px) {
  header .navbar-nav.toggle .nav-link {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 150ms ease, transform 100ms ease;
  }
  header .navbar-nav.toggle .nav-link:hover,
  header .navbar-nav.toggle .nav-link:active {
    background: rgba(0, 0, 0, 0.45);
    transform: scale(0.97);
  }
  /* Hide the icon-font glyph and draw a guaranteed-visible bars icon */
  header .navbar-nav.toggle .nav-link .icon-menu { display: none !important; }
  header .navbar-nav.toggle .nav-link::before {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    box-shadow:
      0 -8px 0 #fff,
      0  8px 0 #fff;
  }
}

/* Belt-and-braces: ensure the nav-brand logo is always visible */
header .navbar-brand,
header .navbar-brand img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 5) Coming Soon pin v2 — fully overrides v1 */
.hero-mockup-wrap .coming-soon-pin {
  position: absolute !important;
  bottom: -22px !important;
  left: -22px !important;
  top: auto !important;
  right: auto !important;
  width: 96px !important;
  height: 96px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: rotate(-6deg);
  z-index: 4;
  display: block;
  pointer-events: auto;
}
.hero-mockup-wrap .coming-soon-pin::before { content: none !important; }

.coming-soon-pin-rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(75, 50, 0, 0.45));
}

.coming-soon-pin-medallion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Larger medallion -> thinner gold rim showing around it */
  width: 80%;
  height: 80%;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.24) 0%, transparent 40%),
    conic-gradient(from 35deg,
      var(--pin-purple-light) 0%,
      var(--pin-purple) 25%,
      var(--pin-purple-deep) 50%,
      var(--pin-purple) 75%,
      var(--pin-purple-light) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.10),
    inset 0 -4px 10px rgba(40, 15, 80, 0.40);
}

.coming-soon-pin-medallion::before {
  content: "";
  position: absolute;
  top: 0;
  left: -160%;
  width: 65%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%);
  transform: skewX(-22deg);
  animation: gusapp-pin-shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gusapp-pin-shimmer {
  0%   { left: -160%; }
  55%  { left: 280%;  }
  100% { left: 280%;  }
}

.coming-soon-pin-inner {
  position: relative;
  z-index: 3;
  font-family: var(--primary-font, "Poppins", sans-serif);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff2c2;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.coming-soon-pin-ribbon {
  position: absolute;
  top: 62%;
  width: 16px;
  /* Doubled length — ribbons trail further below the medal */
  height: 76px;
  background:
    linear-gradient(180deg, #cc1f1f 0%, #a01717 50%, #6a0c0c 85%, #3d0707 100%);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  z-index: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.32);
}
.coming-soon-pin-ribbon::after {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 35%);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.coming-soon-pin-ribbon--left {
  left: 24%;
  transform-origin: 50% 0;
  transform: rotate(-15deg);
  animation: gusapp-ribbon-flail-left 3.4s ease-in-out infinite alternate;
}
.coming-soon-pin-ribbon--right {
  right: 24%;
  transform-origin: 50% 0;
  transform: rotate(15deg);
  animation: gusapp-ribbon-flail-right 3.4s ease-in-out infinite alternate;
}
@keyframes gusapp-ribbon-flail-left {
  0%   { transform: rotate(-15deg); }
  100% { transform: rotate(-24deg); }
}
@keyframes gusapp-ribbon-flail-right {
  0%   { transform: rotate(15deg); }
  100% { transform: rotate(24deg); }
}

/* Pin scaled smaller on phones */
@media (max-width: 767.98px) {
  .hero-mockup-wrap .coming-soon-pin {
    width: 82px !important;
    height: 82px !important;
    bottom: -18px !important;
    left: -14px !important;
  }
  .coming-soon-pin-inner { font-size: 0.55rem; letter-spacing: 0.08em; }
  /* Mobile ribbons also doubled */
  .coming-soon-pin-ribbon { width: 13px; height: 60px; }
}

/* ============================================================
 * Day 5 pass C
 *   1. Top-right return-to-home wordmark anchor (fixed pos)
 *   2. Hero h1 desktop -> single line
 *   3. Pin polish v3: purple ribbons + halved gold rim
 *      (medallion 80% -> 90%) + ribbons thicker by 1/4
 *   4. Footer link colour bump for visibility
 *   5. Mobile hero: bigger mockup, bigger inputs, fade+pop animation
 * ============================================================ */

/* 1) Nav-brand wordmark — bumped to 32 px (mobile 28). Flush to
       the far-left edge of the header. Subtle drop-shadow. */
.navbar-brand img {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
  height: 40px !important;
  width: auto;
}
@media (max-width: 767.98px) {
  .navbar-brand img { height: 28px !important; }
}
/* Push the whole navbar inner container to the page edge so the
   wordmark sits flush at the far left. Only affects the header
   navbar; other .container instances on the site untouched. */
header .navbar > .container.header {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
header .navbar-brand {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 2) Hero h1 single-line on desktop */
@media (min-width: 768px) {
  .hero-section.layout-5 .hero-content h1 {
    font-size: clamp(2rem, 3.5vw, 3.4rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
}

/* 3a) Gold rim restored to the previous thicker look (medallion ~80%
       inside the pin so the scalloped gold edge has more body) */
.coming-soon-pin-medallion {
  width: 80% !important;
  height: 80% !important;
}
/* 3b) Ribbons go purple (matching the medallion body) + thicker */
.coming-soon-pin-ribbon {
  width: 20px !important;
  background:
    linear-gradient(180deg,
      var(--pin-purple-light) 0%,
      var(--pin-purple) 50%,
      var(--pin-purple-deep) 88%,
      #2a0a4a 100%) !important;
  box-shadow: 0 4px 8px rgba(76, 29, 149, 0.40) !important;
}
.coming-soon-pin-ribbon::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 35%) !important;
}
@media (max-width: 767.98px) {
  .coming-soon-pin-ribbon { width: 16px !important; }
}

/* 4) Footer link colour bump — warm near-white default, orange hover */
.gusapp-footer .nav-link {
  color: rgba(255, 246, 237, 0.94) !important;
}
.gusapp-footer .nav-link:hover,
.gusapp-footer .nav-link:focus-visible {
  color: var(--gusapp-orange) !important;
}

/* 5) Mobile hero pass C — bigger inputs, bigger mockup, form pop-in */
@media (max-width: 991.98px) {
  /* Mockup occupies more of the screen behind the form */
  section#home.hero-section.layout-5 .hero-mockup-wrap {
    width: 92vw !important;
    max-width: 460px !important;
    opacity: 0.96 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  /* Inputs sized for thumb interaction (>=44 px tap target) */
  .hero-section.layout-5 .lead-capture-card .form-control,
  .hero-section.layout-5 .lead-capture-card .form-select,
  .hero-section.layout-5 .lead-capture-card .input-group-text {
    font-size: 1.05rem !important;
    padding: 0.78rem 0.9rem !important;
    min-height: 50px !important;
  }
  .hero-section.layout-5 .lead-capture-card .lead-app-radio label.btn {
    font-size: 1rem !important;
    padding: 0.7rem 1rem !important;
    min-height: 48px;
  }
  .hero-section.layout-5 .lead-capture-card .lead-submit {
    font-size: 1.1rem !important;
    padding: 0.95rem 1rem !important;
    min-height: 54px !important;
  }
  /* Form pop-in animation on page load (fades + slight zoom out
     from mockup centre — gives a "popping out of the phone" feel) */
  .hero-section.layout-5 .lead-capture-card {
    animation: gusapp-form-pop 850ms cubic-bezier(0.16, 0.84, 0.32, 1.18) both;
    transform-origin: 50% 50%;
  }
}
@keyframes gusapp-form-pop {
  0%   { opacity: 0; transform: scale(0.90); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
 * Day 5 pass G — small targeted tweaks
 *   - Desktop hero h1 reduced (was clamping max 3.4rem; now max 2.5rem)
 *   - Desktop renders at 75% zoom (was 80% briefly, now 75%)
 *   - Wordmark size already bumped via the .navbar-brand img rule
 * ============================================================ */

/* Desktop h1 smaller (>=768) — overrides the earlier pass-C clamp */
@media (min-width: 768px) {
  .hero-section.layout-5 .hero-content h1 {
    font-size: clamp(1.6rem, 2.6vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }
}

/* Desktop default zoom 80% (>=992 px). Mobile unaffected. */
@media (min-width: 992px) {
  html { zoom: 0.8; }
}

/* ============================================================
 * Day 5 pass H — header gap + mobile sizing tweaks
 * ============================================================ */

/* ~1cm space below the header before the hero begins — DESKTOP only.
   On mobile this same gap was creating the big empty top of the hero
   ("a2" empty zone) so it's scoped >=992 px. */
header#header { padding-bottom: 0; }
@media (min-width: 992px) {
  header#header { padding-bottom: 1cm; }
}

/* Mobile: wordmark sized to fit the a1 brace area in the ref */
@media (max-width: 767.98px) {
  .navbar-brand img { height: 38px !important; }
}

/* Mobile: splash logo bumped (62% -> 72%, max 400 px) */
@media (max-width: 767.98px) {
  .hero-mockup-logo {
    width: 72% !important;
    max-width: 400px !important;
  }
}

/* Mobile: form sits as an app-like tall vertical card, not full-bleed */
@media (max-width: 767.98px) {
  .hero-section.layout-5 .lead-capture-card {
    width: 92vw !important;
    max-width: 460px !important;
    margin: 1.25rem auto 0 !important;
    padding: 1.4rem 1.2rem !important;
    border-radius: 1.1rem !important;
  }
  /* More vertical breathing between fields */
  .hero-section.layout-5 .lead-capture-card .mb-3,
  .hero-section.layout-5 .lead-capture-card fieldset.mb-3 {
    margin-bottom: 1.1rem !important;
  }
  /* Inputs / selects taller */
  .hero-section.layout-5 .lead-capture-card .form-control,
  .hero-section.layout-5 .lead-capture-card .form-select,
  .hero-section.layout-5 .lead-capture-card .input-group-text {
    min-height: 54px !important;
    font-size: 1.05rem !important;
    padding: 0.85rem 0.95rem !important;
  }
  /* Submit: not full-width — centred, narrower than the card */
  .hero-section.layout-5 .lead-capture-card .lead-submit,
  .hero-section.layout-5 .lead-capture-card .lead-submit.w-100 {
    width: 60% !important;
    min-width: 200px !important;
    margin: 0.4rem auto 0 !important;
    display: block !important;
  }
}

/* ============================================================
 * Day 5 pass L — mobile only: heading constrained to mockup width.
 *   h1 + sub-heading wrap within the same boundary as the form
 *   (the mockup screen footprint), sitting above the form in flow.
 *   Net effect: heading + form look like a stacked unit, both on
 *   the mockup, with the heading above the form.
 * ============================================================ */
@media (max-width: 991.98px) {
  section#home.hero-section.layout-5 .hero-content h1,
  section#home.hero-section.layout-5 .hero-content .sub-heading {
    width: 78vw !important;
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  }
  section#home.hero-section.layout-5 .hero-content h1 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
  }
  section#home.hero-section.layout-5 .hero-content .sub-heading {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    font-size: 1rem;
  }
}

/* ============================================================
 * Day 5 pass J — mobile only
 *   Phone mockup directly BEHIND a vertically oriented glass form.
 *   Form is centred over the mockup; heading sits above the mockup.
 * ============================================================ */
@media (max-width: 991.98px) {
  /* Form col stretches the full hero cell */
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-7.col-lg-6 {
    align-self: stretch !important;
  }
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-7.col-lg-6 .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;     /* h1 + form group centred vertically */
    height: 100% !important;
    min-height: 96vh !important;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
  }

  /* Headline above the mockup (top of the centred group) */
  section#home.hero-section.layout-5 .hero-content h1,
  section#home.hero-section.layout-5 .hero-content .sub-heading {
    text-align: center !important;
    margin-top: 0 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  }
  section#home.hero-section.layout-5 .hero-content .sub-heading {
    margin-bottom: 1.25rem !important;
  }

  /* Lead form: vertical glass card, centred horizontally + vertically
     over the mockup. NOT full-width any more. Idle translucent, opaque
     on focus-within. */
  section#home.hero-section.layout-5 .hero-content > .lead-capture-card,
  section#home.hero-section.layout-5 .lead-capture-card {
    width: 78vw !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    padding: 1.4rem 1.2rem !important;
    border-radius: 1.1rem !important;
    background: rgba(8, 50, 46, 0.42) !important;
    backdrop-filter: blur(10px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
    transition: background 250ms ease, backdrop-filter 250ms ease, box-shadow 250ms ease;
  }
  section#home.hero-section.layout-5 .lead-capture-card:focus-within {
    background: rgba(8, 50, 46, 0.82) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
  }

  /* Submit narrower than the card, centred */
  .hero-section.layout-5 .lead-capture-card .lead-submit,
  .hero-section.layout-5 .lead-capture-card .lead-submit.w-100 {
    width: 70% !important;
    min-width: 200px !important;
    margin: 0.4rem auto 0 !important;
    display: block !important;
  }

  /* Mockup BIG behind everything (pass-D / I size kept) */
  section#home.hero-section.layout-5 .hero-mockup-wrap,
  .hero-section .hero-mockup-wrap {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    opacity: 0.95 !important;
    aspect-ratio: 280/580 !important;
  }
  .hero-mockup-logo {
    width: 60% !important;
    max-width: 360px !important;
  }
}

/* ============================================================
 * Day 5 pass D — final mockup-size override + form translucency tune
 * Last-rule-wins. If anything before here capped the mockup width
 * smaller, this overrides. >=65% screen coverage on mobile is the goal.
 * ============================================================ */

/* Mockup width on phones — pass E. The hero section's vh-90 + overflow
   hidden was clipping the tall mockup, so the mockup LOOKED smaller
   than its actual width. Override section height + overflow so the
   mockup fully renders, and scale the splash logo inside so the visual
   presence is unmistakable. */
@media (max-width: 767.98px) {
  /* Section grows with content; no vertical clip */
  body { overflow-x: hidden; }
  .hero-section.layout-5,
  .hero-section.layout-5.vh-90 {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  .hero-section.layout-5 > .container { overflow: visible !important; }

  section#home.hero-section.layout-5 .hero-mockup-wrap,
  .hero-section .hero-mockup-wrap {
    width: 100vw !important;
    max-width: none !important;       /* edge-to-edge — fully dominant */
    margin: 0 auto !important;
    padding: 0 !important;
    opacity: 0.98 !important;
    aspect-ratio: 280 / 580 !important;
  }

  /* Splash logomark inside the screen — bumped further so the mockup
     reads FULL even with the form glassy on top. */
  .hero-mockup-logo {
    width: 62% !important;
    max-width: 360px !important;
  }
  /* Row gets more vertical room so the bigger mockup fits without
     pushing the form off-screen. */
  section#home.hero-section.layout-5 .container .row {
    min-height: 96vh !important;
  }
  /* Form bg even more translucent at idle so the gusapp pattern
     reads strongly through it. Stays opaque on focus-within. */
  section#home.hero-section.layout-5 .lead-capture-card {
    background: rgba(8, 50, 46, 0.22) !important;
    backdrop-filter: blur(7px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(7px) saturate(115%) !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card:focus-within {
    background: rgba(8, 50, 46, 0.82) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  }
  /* Join now button cut to half-width, centred */
  .hero-section.layout-5 .lead-capture-card .lead-submit,
  .hero-section.layout-5 .lead-capture-card .lead-submit.w-100 {
    width: 50% !important;
    min-width: 160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    font-size: 1rem !important;
    padding: 0.75rem 1rem !important;
    min-height: 46px !important;
  }
}

/* Tablets (md): mockup wider proportional */
@media (min-width: 768px) and (max-width: 991.98px) {
  section#home.hero-section.layout-5 .hero-mockup-wrap {
    width: 55vw !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    opacity: 0.96 !important;
  }
}

/* ============================================================
 * Day 5 pass B — STRENGTHEN mobile hero layering
 *   The earlier `position: absolute` rule was being beaten in
 *   some Bootstrap flex-flow cases. CSS GRID forces the cols
 *   into the same cell — both layered on top of each other,
 *   z-index decides who's on top. Far harder to override.
 *   Breakpoint widened to <992px so wider phones / small
 *   tablets also get the layered hero (was <768px).
 * ============================================================ */
@media (max-width: 991.98px) {
  /* Row becomes a 1-cell grid; both cols stack into the same cell */
  section#home.hero-section.layout-5 .container .row {
    display: grid !important;
    grid-template-columns: 100% !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    min-height: 80vh !important;
  }
  section#home.hero-section.layout-5 .container .row > [class*="col-"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  /* Mockup col layers BEHIND, no flex flow */
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-5.col-lg-6 {
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
  /* Form col layers ON TOP */
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-7.col-lg-6 {
    z-index: 2 !important;
    position: relative !important;
  }
  /* Mockup wrap big + centred (pass D: 92vw / 460 max — dominates the viewport) */
  section#home.hero-section.layout-5 .hero-mockup-wrap {
    width: 92vw !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    opacity: 0.96 !important;
    pointer-events: none !important;
  }
  /* But the Coming Soon pin still tappable */
  section#home.hero-section.layout-5 .coming-soon-pin { pointer-events: auto !important; }
  /* Form card extra-translucent default; opaque on focus-within */
  section#home.hero-section.layout-5 .lead-capture-card {
    background: rgba(8, 50, 46, 0.30) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20) !important;
    transition: background 250ms ease, backdrop-filter 250ms ease, box-shadow 250ms ease;
  }
  section#home.hero-section.layout-5 .lead-capture-card:focus-within {
    background: rgba(8, 50, 46, 0.78) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45) !important;
  }
  /* Headline readable against mockup gradient */
  section#home.hero-section.layout-5 .hero-content h1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  }
  section#home.hero-section.layout-5 .hero-content .sub-heading {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  }
}

/* ============================================================
 * Day 5 pass B — Mobile footer: stop squeezing everything to
 * the left. Centre the brand block, the link lists, the social
 * icons, and the app badges so the footer breathes on phones.
 * ============================================================ */
@media (max-width: 575.98px) {
  .gusapp-footer .footer-items { text-align: center; }
  .gusapp-footer .navbar-brand { display: inline-block; }
  .gusapp-footer .social-icons {
    justify-content: center;
    margin: 0 auto;
  }
  .gusapp-footer .social-icons .icon { margin: 0 0.25rem; }
  .gusapp-footer .nav.flex-column { align-items: center; }
  .gusapp-footer .nav.flex-column .nav-link { text-align: center; }
  .gusapp-footer .button-group.download-button {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .gusapp-footer .gusapp-coming-badge { display: inline-block; }
  .gusapp-footer .gusapp-footer-cta { display: inline-block; }
  .gusapp-footer .gusapp-footer-icon { vertical-align: middle; }
  /* Footer-bottom: stack copyright + tagline + privacy/terms vertically + centre */
  .gusapp-footer .copyright-area {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .gusapp-footer .copyright-area > span { width: 100%; }
}

/* ============================================================
 * Day 6 pass N — MOBILE-ONLY hero composition fix
 *   Desktop is NOT touched. All rules below are scoped inside
 *   @media (max-width: 991.98px). HTML structure is the original
 *   two-col layout (form col + mockup col).
 *
 *   On mobile:
 *     - Hero section is the positioning context (relative + overflow hidden)
 *     - Mockup col flows naturally, sized as ONE cohesive object
 *     - Form col is absolute-positioned over the mockup col so the
 *       heading + form sit visually inside the phone screen
 *     - Heading + form clamp to the phone screen interior width
 *     - Phone starts right under the nav (no big empty zone above)
 *     - Coming Soon pin keeps its existing absolute attachment to
 *       .hero-mockup-wrap (already does in original CSS)
 * ============================================================ */

/* T&C fine-print — every breakpoint (cosmetic only, safe on desktop) */
.lead-capture-card .lead-tnc {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.75;
}

@media (max-width: 991.98px) {
  /* Wordmark — bigger (mobile) */
  header .navbar-brand img,
  .navbar-brand img {
    height: 65px !important;
  }

  /* Hamburger — bigger tap target + thicker bars */
  header .navbar-nav.toggle .nav-link {
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 16px;
  }
  header .navbar-nav.toggle .nav-link::before {
    width: 32px;
    height: 4px;
    box-shadow:
      0 -10px 0 #fff,
      0  10px 0 #fff;
  }

  /* Hero section: positioning context, full small-viewport height,
     phone overflow hidden gracefully. Padding-top scoots the row
     cleanly below the gusapp wordmark line in the header. */
  .hero-section.layout-5,
  .hero-section.layout-5.vh-90,
  section#home.hero-section.layout-5 {
    position: relative !important;
    min-height: 100svh !important;
    height: auto !important;
    overflow: hidden !important;
    padding: clamp(2.5rem, 7svh, 4.5rem) 0 0 !important;
  }

  /* Row: positioning context. Mockup col flows; form col overlays. */
  section#home.hero-section.layout-5 .container,
  section#home.hero-section.layout-5 .container.h-100 {
    position: relative !important;
    height: auto !important;
  }
  section#home.hero-section.layout-5 .container .row {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }
  /* Both cols are flex children; we position them by order + overlay */
  section#home.hero-section.layout-5 .container .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }
  /* Mockup col flows first, sets the row height. No z-index so the
     pin (z 4) inside the wrapper can rise above the overlaid form col. */
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-5.col-lg-6 {
    order: 1 !important;
    position: relative !important;
    pointer-events: auto !important;
    margin-top: clamp(8px, 2svh, 20px) !important;
  }
  /* Form col overlays the mockup col exactly */
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-7.col-lg-6 {
    order: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* PHONE WRAPPER: scales from small phones (320 px floor) to
     phablets and tablets (640 px cap) — fills 92vw across the
     full mobile range so the mockup never looks "squeezed" in
     the centre on wider mobile viewports (768–991 px). */
  section#home.hero-section.layout-5 .hero-mockup-wrap,
  .hero-section .hero-mockup-wrap {
    position: relative !important;
    width: clamp(320px, 92vw, 640px) !important;
    max-width: 95vw !important;
    margin-inline: auto !important;
    aspect-ratio: 280 / 580 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* hero-content sized to fit inside the phone screen interior.
     Scales with the mockup wrapper across the mobile range. */
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-7.col-lg-6 .hero-content {
    width: clamp(280px, 82vw, 540px) !important;
    max-width: 88vw !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* Heading: scales with viewport, stays inside the screen interior.
     Selector includes section#home to beat pass L specificity. */
  section#home.hero-section.layout-5 .hero-content h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.4rem !important;
    font-size: clamp(1.4rem, 4.6vw, 2.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em;
    text-align: center !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  }
  section#home.hero-section.layout-5 .hero-content .sub-heading {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.7rem !important;
    font-size: clamp(0.82rem, 2.4vw, 1.05rem) !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }

  /* Form card: full width of hero-content (i.e. screen interior),
     translucent so the splash logo + screen bg shows behind it.
     Selectors include section#home to beat pass J specificity. */
  section#home.hero-section.layout-5 .hero-content > .lead-capture-card,
  section#home.hero-section.layout-5 .lead-capture-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0.8rem 0.8rem !important;
    border-radius: 0.85rem !important;
    background: rgba(8, 50, 46, 0.55) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30) !important;
    transition: background 250ms ease, backdrop-filter 250ms ease, box-shadow 250ms ease;
  }
  section#home.hero-section.layout-5 .lead-capture-card:focus-within {
    background: rgba(8, 50, 46, 0.85) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  }
  /* Tighter form spacing so the full form fits in the screen interior */
  section#home.hero-section.layout-5 .lead-capture-card .mb-3,
  section#home.hero-section.layout-5 .lead-capture-card fieldset.mb-3 {
    margin-bottom: 0.5rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .form-label,
  section#home.hero-section.layout-5 .lead-capture-card legend.form-label {
    margin-bottom: 0.2rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.04em;
  }
  section#home.hero-section.layout-5 .lead-capture-card .form-control,
  section#home.hero-section.layout-5 .lead-capture-card .form-select,
  section#home.hero-section.layout-5 .lead-capture-card .input-group-text {
    min-height: 38px !important;
    font-size: 0.88rem !important;
    padding: 0.45rem 0.65rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-app-radio label.btn {
    padding: 0.45rem 0.55rem !important;
    font-size: 0.88rem !important;
    min-height: 38px !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-submit,
  section#home.hero-section.layout-5 .lead-capture-card .lead-submit.w-100 {
    width: 65% !important;
    min-width: 0 !important;
    margin: 0.4rem auto 0 !important;
    display: block !important;
    font-size: 0.92rem !important;
    padding: 0.55rem 0.85rem !important;
    min-height: 40px !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .form-text {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
    margin-top: 0.4rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-tnc {
    font-size: 0.58rem !important;
  }

  /* Splash logo (still in screenshot div behind the form). Reduced so
     it reads as backdrop accent, not a competing focal point. */
  .hero-mockup-wrap .hero-mockup-screenshot .hero-mockup-logo {
    width: 38% !important;
    max-width: 180px !important;
    opacity: 0.4 !important;
  }

  /* Coming Soon pin: existing rule already absolute-positions to
     wrapper bottom-left. Just re-scale relative to the bigger wrapper. */
  section#home.hero-section.layout-5 .hero-mockup-wrap .coming-soon-pin {
    width: clamp(60px, 18%, 96px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    left: -6% !important;
    bottom: 3% !important;
    top: auto !important;
    right: auto !important;
    transform: rotate(-6deg);
    z-index: 4 !important;
  }
}

/* ============================================================
 * Day 6 pass O — sizing + spacing pass
 *   1) +2cm space below the header before the hero content
 *      (hero gradient bg stays put — only the inner content shifts)
 *   2) Cross-site font scale ~+6% via html font-size bump
 *   3) Mobile only: splash backdrop corners rounded to match bezel
 *   4) Mobile only: heading +2 sizes
 *   5) Mobile only: Coming Soon pin doubled
 * ============================================================ */

/* (2) Cross-site font scale: 1rem = 17px (was 16px ≈ +6%). All
   rem-based sizes scale up sitewide. */
html {
  font-size: 17px;
}

/* (1) Hero content sits 2cm lower — padding-top on the section so
   the gradient bg still extends to the section top edge but the
   inner content (form/mockup) is pushed down 2cm.
   Selector includes section#home to beat pass N specificity on mobile.
   ALSO: let the section grow with content (was height:100vh) so the
   mockup doesn't get clipped at the bottom on desktop. */
section#home.hero-section.layout-5,
section#home.hero-section.layout-5.vh-90,
.hero-section.layout-5,
.hero-section.layout-5.vh-90 {
  padding-top: calc(6rem + 2cm) !important;
  height: auto !important;
  min-height: 100vh !important;
}

/* (3) Mobile only: splash backdrop corners rounded to match phone
   bezel. SVG mask uses rx="26" on a 268-wide screen ≈ 9.7%, so
   percentage radius lines up with the bezel curve at any size. */
@media (max-width: 991.98px) {
  /* Splash backdrop fills the wrapper edge-to-edge with border-radius
     matching the OUTER bezel curve (SVG rx=32 of 280, ry=32 of 580 →
     11.4% / 5.5%). The SVG bezel sits on top and masks everything
     except the inner rounded screen area, so no gap is possible
     between splash and bezel — even with pixel rounding. */
  .hero-mockup-wrap .hero-mockup-screenshot {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 11.4% / 5.5% !important;
  }

  /* (4) Heading +2 sizes (was clamp 1.4–2.4rem; now 1.9–3rem) */
  section#home.hero-section.layout-5 .hero-content h1 {
    font-size: clamp(1.9rem, 6vw, 3rem) !important;
  }

  /* Hide the arrow icon inside the Join now button on mobile */
  section#home.hero-section.layout-5 .lead-submit .icon,
  section#home.hero-section.layout-5 .lead-submit .bi-arrow-right-short {
    display: none !important;
  }

  /* (5) Coming Soon pin doubled (was clamp 60–96; now 120–192) */
  section#home.hero-section.layout-5 .hero-mockup-wrap .coming-soon-pin {
    width: clamp(120px, 36%, 192px) !important;
    left: -8% !important;
    bottom: 1% !important;
  }

  /* (6) "COMING SOON" text scaled to match the bigger pin */
  section#home.hero-section.layout-5 .coming-soon-pin .coming-soon-pin-inner {
    font-size: clamp(0.95rem, 3.4vw, 1.25rem) !important;
    letter-spacing: 0.08em !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
  }

  /* (7) Single thick purple tail trailing the pin (right ribbon
     hidden; left ribbon centred behind the pin and widened) */
  section#home.hero-section.layout-5 .coming-soon-pin .coming-soon-pin-ribbon--right {
    display: none !important;
  }
  section#home.hero-section.layout-5 .coming-soon-pin .coming-soon-pin-ribbon--left {
    width: 38% !important;
    height: 90% !important;
    top: 60% !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -19% !important;            /* centre under the medallion */
    transform-origin: 50% 0 !important;
    /* Swallowtail / fishtail end — single V-cut at the bottom for
       one realistic flowing tail */
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 80%,
      75% 92%,
      50% 78%,
      25% 92%,
      0% 80%
    ) !important;
  }
  section#home.hero-section.layout-5 .coming-soon-pin .coming-soon-pin-ribbon--left::after {
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 72%,
      75% 86%,
      50% 70%,
      25% 86%,
      0% 72%
    ) !important;
  }
  /* Override the existing left-ribbon flail keyframes so the single
     centred tail sways gently around the vertical axis instead of
     swinging off to the side */
  section#home.hero-section.layout-5 .coming-soon-pin .coming-soon-pin-ribbon--left {
    animation: gusapp-ribbon-sway 3.4s ease-in-out infinite alternate !important;
  }
}

@keyframes gusapp-ribbon-sway {
  0%   { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}

/* ============================================================
 * Day 6 pass O.3 — mobile only: another step up in size + space
 *   Bumps font sizes and vertical rhythm again so the hero card
 *   reads as roomier, more app-like, less cramped.
 * ============================================================ */
@media (max-width: 991.98px) {
  /* Heading + sub: a notch larger and a notch more padding around */
  section#home.hero-section.layout-5 .hero-content h1 {
    font-size: clamp(2.2rem, 7vw, 3.4rem) !important;
    margin: 0.6rem 0 1.2rem !important;
    line-height: 1.08 !important;
  }
  section#home.hero-section.layout-5 .hero-content .sub-heading {
    font-size: clamp(0.95rem, 2.8vw, 1.2rem) !important;
    margin: 0 0 1.8rem !important;
    line-height: 1.45 !important;
  }

  /* Form card: more breathing room in all directions */
  section#home.hero-section.layout-5 .hero-content > .lead-capture-card,
  section#home.hero-section.layout-5 .lead-capture-card {
    padding: 1.6rem 1.35rem !important;
  }

  /* Field groups: bigger vertical gap between each block */
  section#home.hero-section.layout-5 .lead-capture-card .mb-3,
  section#home.hero-section.layout-5 .lead-capture-card fieldset.mb-3 {
    margin-bottom: 1.4rem !important;
  }

  /* Labels: larger and roomier */
  section#home.hero-section.layout-5 .lead-capture-card .form-label,
  section#home.hero-section.layout-5 .lead-capture-card legend.form-label {
    margin-bottom: 0.6rem !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em;
  }

  /* Inputs / selects: taller, larger text */
  section#home.hero-section.layout-5 .lead-capture-card .form-control,
  section#home.hero-section.layout-5 .lead-capture-card .form-select,
  section#home.hero-section.layout-5 .lead-capture-card .input-group-text {
    min-height: 54px !important;
    font-size: 1.05rem !important;
    padding: 0.85rem 1rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-app-radio label.btn {
    min-height: 54px !important;
    padding: 0.75rem 0.9rem !important;
    font-size: 1.05rem !important;
  }

  /* Submit: more vertical space above, taller body, larger text */
  section#home.hero-section.layout-5 .lead-capture-card .lead-submit,
  section#home.hero-section.layout-5 .lead-capture-card .lead-submit.w-100 {
    margin: 1.6rem auto 0 !important;
    padding: 0.95rem 1.2rem !important;
    min-height: 56px !important;
    font-size: 1.12rem !important;
  }

  /* Fine print + T&C: roomier, more legible */
  section#home.hero-section.layout-5 .lead-capture-card .form-text {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.8rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-tnc {
    font-size: 0.7rem !important;
    margin-top: 0.7rem !important;
  }
}



/* ============================================================
 * Day 5 pass P — MOBILE SIZE ROLLBACK
 *   The Day 4-5 size bumps (wordmark +25%, html font 17px,
 *   hero +2cm padding, heading +2 sizes, form padding +50%,
 *   pin doubled) compounded on small screens and produced
 *   a top-of-page collision: wordmark crashing into heading,
 *   form too tall to fit the screen interior.
 *
 *   This pass scales the mobile layout back to sensible sizes
 *   while keeping desktop unchanged. Last in source = wins.
 * ============================================================ */

/* Sitewide font scale: back to default 16px (was 17px). Affects
   both viewports. Removes the 6% inflation across all rem-based
   spacing and font sizes. */
html {
  font-size: 16px !important;
}

@media (max-width: 991.98px) {
  /* Wordmark: 65px was too big. 44px reads clean. */
  header .navbar-brand img,
  .navbar-brand img {
    height: 44px !important;
  }

  /* Hero section padding-top: trim from calc(6rem + 2cm). Keep the
     gradient flush under the header but stop pushing content so far
     down that it crashes into the header on small viewports. */
  section#home.hero-section.layout-5,
  section#home.hero-section.layout-5.vh-90,
  .hero-section.layout-5,
  .hero-section.layout-5.vh-90 {
    padding-top: 4rem !important;
    min-height: 100svh !important;
    height: auto !important;
  }

  /* Heading: scale back from clamp(2.2, 7vw, 3.4rem) so it fits
     inside the phone screen interior without collision. */
  section#home.hero-section.layout-5 .hero-content h1 {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
    line-height: 1.1 !important;
    margin: 0.3rem 0 0.5rem !important;
  }
  section#home.hero-section.layout-5 .hero-content .sub-heading {
    font-size: clamp(0.82rem, 2.4vw, 0.95rem) !important;
    line-height: 1.35 !important;
    margin: 0 0 0.8rem !important;
  }

  /* Form card: tighter spacing so the full form fits in the screen */
  section#home.hero-section.layout-5 .hero-content > .lead-capture-card,
  section#home.hero-section.layout-5 .lead-capture-card {
    padding: 1rem 0.85rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .mb-3,
  section#home.hero-section.layout-5 .lead-capture-card fieldset.mb-3 {
    margin-bottom: 0.7rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .form-label,
  section#home.hero-section.layout-5 .lead-capture-card legend.form-label {
    margin-bottom: 0.3rem !important;
    font-size: 0.78rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .form-control,
  section#home.hero-section.layout-5 .lead-capture-card .form-select,
  section#home.hero-section.layout-5 .lead-capture-card .input-group-text {
    min-height: 44px !important;
    font-size: 0.92rem !important;
    padding: 0.55rem 0.75rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-app-radio label.btn {
    min-height: 44px !important;
    padding: 0.5rem 0.6rem !important;
    font-size: 0.92rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-submit,
  section#home.hero-section.layout-5 .lead-capture-card .lead-submit.w-100 {
    margin: 0.8rem auto 0 !important;
    padding: 0.65rem 0.9rem !important;
    min-height: 46px !important;
    font-size: 0.95rem !important;
    width: 70% !important;
    min-width: 0 !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .form-text {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    margin-top: 0.7rem !important;
    margin-bottom: 0.4rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-tnc {
    font-size: 0.6rem !important;
    margin-top: 0.4rem !important;
  }

  /* Coming Soon pin: doubled was too much. Halve it back. */
  section#home.hero-section.layout-5 .hero-mockup-wrap .coming-soon-pin {
    width: clamp(64px, 18%, 100px) !important;
    left: -6% !important;
    bottom: 2% !important;
  }
  section#home.hero-section.layout-5 .coming-soon-pin .coming-soon-pin-inner {
    font-size: clamp(0.55rem, 2vw, 0.7rem) !important;
    letter-spacing: 0.06em !important;
  }
}

/* ============================================================
 * Day 5 pass Q — wordmark+heading collision fix
 *   adj.jpeg shows wordmark still rendering ~120px tall on
 *   mobile despite pass P. Tightening with higher-specificity
 *   selectors + explicit max-width so nothing inflates it.
 * ============================================================ */
@media (max-width: 991.98px) {
  /* Lock wordmark hard. Multiple selectors + max-width caps. */
  header#header .navbar-brand,
  header#header .navbar-brand img,
  header .navbar-brand img,
  .navbar-brand img {
    height: 36px !important;
    max-height: 36px !important;
    max-width: 130px !important;
    width: auto !important;
  }
  header#header .navbar-brand {
    line-height: 36px !important;
    padding: 0 !important;
  }

  /* Header itself: tight, no extra padding pushing content around */
  header#header {
    padding: 0.5rem 0 !important;
  }
  header#header .navbar.gameon-navbar {
    padding: 0 !important;
    min-height: 44px !important;
  }
  header#header .container.header {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Hero padding-top: enough to clear the small header */
  section#home.hero-section.layout-5 {
    padding-top: 1.25rem !important;
  }

  /* Heading: bring sizing down a notch and keep it INSIDE the
     phone screen footprint, not above it */
  section#home.hero-section.layout-5 .hero-content h1 {
    font-size: clamp(1.25rem, 4.4vw, 1.75rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 0.4rem !important;
  }
  section#home.hero-section.layout-5 .hero-content .sub-heading {
    font-size: clamp(0.78rem, 2.2vw, 0.9rem) !important;
    margin: 0 0 0.7rem !important;
    line-height: 1.4 !important;
  }

  /* Form card padding tighter so the screen doesn't feel cramped */
  section#home.hero-section.layout-5 .lead-capture-card {
    padding: 0.85rem 0.8rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .mb-3,
  section#home.hero-section.layout-5 .lead-capture-card fieldset.mb-3 {
    margin-bottom: 0.6rem !important;
  }
}

/* ============================================================
 * Day 5 pass R — sub-page breadcrumb cleanup, hero sub-page polish
 *   - Remove the template's "download-bg.jpg" image that was
 *     showing as a 1920x1280 watermark on FAQ + Contact + Privacy
 *     + Terms breadcrumb area
 *   - Slim hamburger to just the bars (no rounded square bg)
 *   - Form translucency: more transparent at idle
 *   - Coming Soon pin always on top of mockup + form (z 5)
 *   - T&Cs link styling (non-decorated)
 * ============================================================ */

.breadcrumb-area,
.breadcrumb-area.has-overlay,
.breadcrumb-area.has-overlay.overlay-gradient {
  background-image: none !important;
  background-color: var(--gusapp-teal-dark, #082c2a) !important;
  height: auto !important;
  min-height: 220px;
  padding: 4rem 0 2rem !important;
}
.breadcrumb-area.bg-overlay::after,
.breadcrumb-area.has-overlay::after {
  opacity: 0.55 !important;
}

/* Hamburger: minimal — bars only, no rounded-square frame */
@media (max-width: 1199.98px) {
  header .navbar-nav.toggle .nav-link {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
  }
  header .navbar-nav.toggle .nav-link:hover,
  header .navbar-nav.toggle .nav-link:active {
    background: transparent !important;
    transform: none !important;
  }
}
@media (max-width: 991.98px) {
  header .navbar-nav.toggle .nav-link::before {
    width: 22px !important;
    height: 2px !important;
    box-shadow:
      0 -7px 0 #fff,
      0  7px 0 #fff !important;
  }
}

/* Form translucency: more transparent at idle so the splash
   pattern reads behind. Becomes opaque on focus-within. */
@media (max-width: 991.98px) {
  section#home.hero-section.layout-5 .lead-capture-card {
    background: rgba(8, 50, 46, 0.30) !important;
    backdrop-filter: blur(6px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card:focus-within {
    background: rgba(8, 50, 46, 0.92) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  }
  /* District + Ward selects also more translucent at idle */
  section#home.hero-section.layout-5 .lead-capture-card .form-select {
    background-color: rgba(255, 255, 255, 0.55) !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card:focus-within .form-select {
    background-color: rgba(255, 255, 255, 0.95) !important;
  }
}

/* Coming Soon pin: always on top of mockup + form layer */
section#home.hero-section.layout-5 .hero-mockup-wrap .coming-soon-pin {
  z-index: 5 !important;
}

/* T&Cs link in fine print: non-decorated, soft */
.lead-tnc-link,
.lead-tnc-link:hover,
.lead-tnc-link:focus {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.lead-tnc-link:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================================
 * Day 5 pass S — first-paint white strip fix
 *   Before the hero gradient renders, the body's default white
 *   shows. Set html + body bg to the gradient's start colour so
 *   there's never a white flash at the top.
 * ============================================================ */
html, body {
  background-color: var(--gusapp-teal-dark, #082c2a);
}
body {
  /* Soft hero gradient continuation up into the area behind the
     header so wordmark always sits on a brand-colored backdrop */
  background-image: radial-gradient(125% 120% at 50% 0%, #0b2c27 0%, #061712 45%, #03100d 100%);
  background-attachment: fixed;
  background-size: cover;
}

/* ============================================================
 * Day 6 pass T — comprehensive fix wave
 *   - White bar vs wordmark: header + body bg unified
 *   - Heading sits below camera punch-hole (~10% top inset)
 *   - Buyer/Seller buttons: text dead-centre
 *   - Form fields slimmer
 *   - Turnstile compact (size handled via HTML attr)
 *   - T&Cs apply: right-aligned
 *   - Pin onto the form (higher z, larger if needed)
 *   - Form +25% more translucent + stronger backdrop blur
 *   - Splash logo bumped to 0.65 opacity (FOMO behind the gate)
 * ============================================================ */

/* Body bg: same gradient even before hero renders (kills white) */
html, body {
  background: radial-gradient(125% 120% at 50% 0%, #0b2c27 0%, #061712 45%, #03100d 100%) fixed !important;
  background-attachment: fixed !important;
}
.preloader-main {
  background: transparent !important;
}

/* Header transparent so the gradient flows up under the wordmark */
header#header {
  background: transparent !important;
  border: none !important;
}
header#header .navbar.gameon-navbar {
  background: transparent !important;
}

@media (max-width: 991.98px) {
  /* Heading: push down so it clears the SVG punch-hole at y=22/580 ≈ 4% */
  .hero-mockup-wrap .phone-screen-content,
  section#home.hero-section.layout-5 .hero-content {
    padding-top: 0 !important;
  }
  section#home.hero-section.layout-5 .hero-content h1 {
    margin-top: 8% !important;
  }

  /* Buyer / Seller radio buttons — text centered both axes */
  section#home.hero-section.layout-5 .lead-capture-card .lead-app-radio {
    display: flex !important;
    width: 100% !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-app-radio label.btn {
    flex: 1 1 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    min-height: 40px !important;
    padding: 0.5rem 0.6rem !important;
    font-size: 0.92rem !important;
  }

  /* Slimmer form fields overall (was 44/46/54px) */
  section#home.hero-section.layout-5 .lead-capture-card .form-control,
  section#home.hero-section.layout-5 .lead-capture-card .form-select,
  section#home.hero-section.layout-5 .lead-capture-card .input-group-text {
    min-height: 38px !important;
    padding: 0.4rem 0.7rem !important;
    font-size: 0.9rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .lead-submit,
  section#home.hero-section.layout-5 .lead-capture-card .lead-submit.w-100 {
    min-height: 42px !important;
    padding: 0.55rem 0.8rem !important;
    font-size: 0.95rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .form-label,
  section#home.hero-section.layout-5 .lead-capture-card legend.form-label {
    margin-bottom: 0.25rem !important;
    font-size: 0.72rem !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .mb-3,
  section#home.hero-section.layout-5 .lead-capture-card fieldset.mb-3 {
    margin-bottom: 0.55rem !important;
  }

  /* Turnstile widget: center it inside the form card */
  section#home.hero-section.layout-5 .cf-turnstile,
  section#home.hero-section.layout-5 #turnstile-widget {
    display: flex !important;
    justify-content: center !important;
    transform: scale(0.85) !important;
    transform-origin: center top !important;
    margin-bottom: 0.4rem !important;
  }

  /* T&Cs apply: right-aligned, smaller */
  .lead-tnc-line,
  section#home.hero-section.layout-5 .lead-tnc-line {
    text-align: right !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0 !important;
    padding-right: 0.2rem !important;
  }

  /* Form +25% more translucent (was 0.30 → now 0.22) */
  section#home.hero-section.layout-5 .lead-capture-card {
    background: rgba(8, 50, 46, 0.22) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card:focus-within {
    background: rgba(8, 50, 46, 0.92) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card .form-select,
  section#home.hero-section.layout-5 .lead-capture-card .form-control,
  section#home.hero-section.layout-5 .lead-capture-card .input-group-text {
    background-color: rgba(255, 255, 255, 0.50) !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card:focus-within .form-select,
  section#home.hero-section.layout-5 .lead-capture-card:focus-within .form-control,
  section#home.hero-section.layout-5 .lead-capture-card:focus-within .input-group-text {
    background-color: rgba(255, 255, 255, 0.96) !important;
  }

  /* Splash logo: brighter behind the form so the FOMO "gated by
     the gate" effect reads — blurred logo visible through form */
  .hero-mockup-wrap .hero-mockup-screenshot .hero-mockup-logo {
    width: 60% !important;
    max-width: 280px !important;
    opacity: 0.65 !important;
  }

  /* Coming Soon pin: lift onto the form, larger so it reads as a
     winner-badge sitting on top of the gated card */
  section#home.hero-section.layout-5 .hero-mockup-wrap .coming-soon-pin {
    z-index: 10 !important;
    width: clamp(72px, 22%, 120px) !important;
    left: -4% !important;
    bottom: 18% !important;
    transform: rotate(-12deg) !important;
  }
}

/* ============================================================
 * Day 6 pass U — error ribbon + pin visibility lock
 *   - Inline form-error message replaced by a top-of-viewport
 *     ribbon that slides in from above (no form distortion)
 *   - Coming Soon pin: forced visible above mockup + form col
 *     by lifting it OUT of the mockup wrap stacking context
 *     via a higher specificity z-index + bigger size
 * ============================================================ */

/* Top error ribbon — fixed at viewport top, slides down */
.lead-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, #b32424 0%, #8d1818 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transform: translateY(-105%);
  transition: transform 280ms cubic-bezier(0.22, 0.85, 0.32, 1);
  pointer-events: auto;
}
.lead-ribbon--visible {
  transform: translateY(0);
}
.lead-ribbon-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}
.lead-ribbon-msg {
  flex: 1 1 auto;
}
.lead-ribbon-close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.4rem;
}
.lead-ribbon-close:hover,
.lead-ribbon-close:focus-visible {
  color: #fff;
}

@media (max-width: 575.98px) {
  .lead-ribbon {
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
  }
}

/* Coming Soon pin: ride above everything in the hero (mockup + form
   col). Lifting via the form col's stacking context — the pin is
   positioned absolute relative to the mockup wrap, which itself sits
   in the mockup col at z-index 1. We need z-index higher than the
   form col (z 2). The mockup wrap forms its own stacking context
   only if it has z-index, so add it explicitly. */
@media (max-width: 991.98px) {
  /* Mockup col: pointer-events none so taps pass through to form
     col underneath (where inputs live). Pin overrides this. */
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-5.col-lg-6 {
    pointer-events: none !important;
  }
  section#home.hero-section.layout-5 .hero-mockup-wrap {
    pointer-events: none !important;
  }
  /* Pin stays at bottom-left of mockup (its original spot) but
     rides above the form's translucent layer so the whole badge
     reads cleanly. High z-index (50) lifts it above form col (z 2). */
  section#home.hero-section.layout-5 .hero-mockup-wrap .coming-soon-pin {
    position: absolute !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    left: -4% !important;
    bottom: 4% !important;
    top: auto !important;
    right: auto !important;
    width: clamp(78px, 22%, 120px) !important;
    transform: rotate(-12deg) !important;
  }
}

/* ============================================================
 * Day 6 pass V — pin visibility lock (final)
 *   Pin must:
 *     1) sit at BOTTOM-LEFT of the mockup wrap (not centre, not top)
 *     2) overlay the form's translucent layer (readable on top)
 *     3) be readable in entirety (nothing clips its bounding box)
 *
 *   Achieving all three:
 *     - explicit position bottom + left
 *     - ultra-high z-index (999) so nothing else can stack above it
 *     - parent .hero-mockup-wrap gets isolation:isolate so the pin's
 *       z stays winning regardless of other stacking contexts
 *     - hero-section overflow stays hidden but pin's negative offsets
 *       are kept small enough to remain inside section bounds
 * ============================================================ */

/* Both viewports: pin anchored to mockup wrap bottom-left */
.hero-mockup-wrap {
  isolation: isolate; /* allows pin's z-index to win locally */
}
.hero-mockup-wrap .coming-soon-pin,
section#home.hero-section.layout-5 .hero-mockup-wrap .coming-soon-pin {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 2% !important;
  left: -3% !important;
  z-index: 999 !important;
  pointer-events: auto !important;
  transform: rotate(-12deg) !important;
}

/* Mobile: bigger so it reads as a winner badge over the form */
@media (max-width: 991.98px) {
  section#home.hero-section.layout-5 .hero-mockup-wrap .coming-soon-pin {
    width: clamp(86px, 26%, 130px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    bottom: 3% !important;
    left: -5% !important;
  }
}

/* Desktop: normal-size pin at bottom-left of (smaller) mockup */
@media (min-width: 992px) {
  section#home.hero-section.layout-5 .hero-mockup-wrap .coming-soon-pin {
    width: 96px !important;
    height: 96px !important;
    bottom: -8% !important;
    left: -12% !important;
  }
}

/* ============================================================
 * Day 8 pass W — phone mockup silhouette fix
 *   The body gradient (passes S/T) extends dark teal behind the
 *   mockup on desktop, and the bezel SVG's near-black gradient
 *   blends into it — phone looks like a flat green rectangle.
 *
 *   Two-layer fix:
 *   - device.svg: bezel gradient brightened to a metallic mid-tone +
 *     thin outer stroke (light-alpha) for silhouette
 *   - here: replace the dark drop-shadow with a soft light halo
 *     that reads against dark backgrounds
 * ============================================================ */
.hero-mockup-wrap .hero-mockup-frame,
.gusapp-mini-mockup .mini-frame {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.35))
    drop-shadow(0 18px 32px rgba(0, 0, 0, 0.55))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.12)) !important;
}

/* ============================================================
 * Day 8 pass X — desktop crop fix
 *   Pass T applied `overflow: hidden` to .hero-section.layout-5
 *   sitewide. On mobile that's correct (form-col absolute overlay
 *   intentionally overflows the section). On DESKTOP, the same rule
 *   clips the bottom of the phone mockup and the Coming Soon pin
 *   (which sits at bottom:-8% of the mockup wrap, ~43px below the
 *   wrap bottom edge). Result: phone reads as "cropped short".
 *
 *   Fix: keep overflow:hidden mobile-only, force overflow:visible
 *   on desktop so the bottom of the mockup + pin render cleanly.
 *   Section min-height (100vh from pass O) already gives the room.
 * ============================================================ */
@media (min-width: 992px) {
  .hero-section.layout-5,
  section#home.hero-section.layout-5,
  .hero-section.layout-5.vh-90 {
    overflow: visible !important;
    padding-bottom: 5rem !important;   /* room for pin overhang */
  }
  .hero-section.layout-5 > .container,
  section#home.hero-section.layout-5 > .container {
    overflow: visible !important;
  }
  .hero-section.layout-5 .row,
  section#home.hero-section.layout-5 .row {
    overflow: visible !important;
  }
}

/* ============================================================
 * Day 8 pass Y — desktop mockup full render (aggressive)
 *   Symptoms persist after pass X: phone bottom + pin still cropped
 *   on desktop. Going harder:
 *   - Explicit width + min-height on the mockup wrap (don't rely on
 *     aspect-ratio alone in case some cascade rule overrides it)
 *   - Frame img: position relative + width/height 100% so it sizes
 *     the wrap if aspect-ratio fails
 *   - overflow visible cascaded to mockup col + every parent in the
 *     hero composition
 * ============================================================ */
@media (min-width: 992px) {
  /* Wrap: bombproof dimensions on desktop */
  .hero-section.layout-5 .hero-mockup-wrap,
  section#home.hero-section.layout-5 .hero-mockup-wrap {
    position: relative !important;
    width: 280px !important;
    min-height: 580px !important;
    aspect-ratio: 280 / 580 !important;
    overflow: visible !important;
    margin: 0 auto !important;
  }

  /* Frame img: in normal flow so it establishes wrapper height as a
     safety net if aspect-ratio is being suppressed somewhere */
  .hero-section.layout-5 .hero-mockup-wrap .hero-mockup-frame,
  section#home.hero-section.layout-5 .hero-mockup-wrap .hero-mockup-frame {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    z-index: 2 !important;
  }

  /* Screenshot backdrop: absolute, inset 6px (matches SVG bezel) */
  .hero-section.layout-5 .hero-mockup-wrap .hero-mockup-screenshot,
  section#home.hero-section.layout-5 .hero-mockup-wrap .hero-mockup-screenshot {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    z-index: 1 !important;
  }

  /* Cascade overflow visible up the parents so nothing can clip
     the mockup's bottom or the pin overhang */
  .hero-section.layout-5,
  .hero-section.layout-5 .container,
  .hero-section.layout-5 .row,
  .hero-section.layout-5 .row > [class*="col-"],
  section#home.hero-section.layout-5,
  section#home.hero-section.layout-5 .container,
  section#home.hero-section.layout-5 .row,
  section#home.hero-section.layout-5 .row > [class*="col-"] {
    overflow: visible !important;
  }

  /* Mockup col specifically: make sure it can contain the wrap height
     and doesn't apply any flex-shrink that would compress it */
  .hero-section.layout-5 .row > .col-12.col-md-5.col-lg-6,
  section#home.hero-section.layout-5 .row > .col-12.col-md-5.col-lg-6 {
    overflow: visible !important;
    flex-shrink: 0 !important;
    min-height: 580px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ============================================================
 * LEAD-CATCHER REFRESH — 2026-06
 * Cinematic hero · friction-free form polish · EN/SW toggle.
 * Appended last so it wins on equal specificity.
 * Level-5 presentation only — no auth / API / data-flow touched.
 * ============================================================ */

/* 1. Remove the template's white wave that decapitated the phone */
.hero-section.layout-5 .shape-bottom { display: none !important; }

/* 2. Deepen the hero into one cinematic teal→ink stage with a teal
 *    glow toward the device and a faint warm accent in the corner */
.hero-section.layout-5.has-overlay.overlay-gradient::before {
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(29,128,119,0.50) 0%, rgba(29,128,119,0) 55%),
    radial-gradient(90% 120% at 10% 92%, rgba(226,147,68,0.10) 0%, rgba(226,147,68,0) 50%),
    linear-gradient(155deg, #0a4f49 0%, #08322e 52%, #050a09 100%) !important;
}

/* 3. Eyebrow chip + tagline headline */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.74);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.35rem 0.8rem; border-radius: 999px;
  margin-bottom: 1rem;
}
.hero-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gusapp-orange);
  animation: gusappPulse 2.4s ease-out infinite;
}
@keyframes gusappPulse {
  0%   { box-shadow: 0 0 0 0 rgba(226,147,68,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(226,147,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,147,68,0); }
}
.hero-section.layout-5 .hero-content h1.hero-tagline {
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

/* 4. Cinematic render: teal glow halo behind + grounded shadow.
 *    These read through a transparent-PNG export; harmless behind an
 *    opaque one (the image sits above them). */
.hero-device-render {
  position: relative; z-index: 3;
  display: block; width: 100%; height: auto; max-width: 100%;
  /* Feather the rectangular render edges into the hero gradient so the
     dark-teal scene melts in; the teal glow (::before) shows through. */
  -webkit-mask-image: radial-gradient(125% 125% at 50% 44%, #000 66%, transparent 100%);
          mask-image: radial-gradient(125% 125% at 50% 44%, #000 66%, transparent 100%);
}
.hero-mockup-wrap:not(.render-missing) { aspect-ratio: auto; }
.hero-mockup-wrap:not(.render-missing) .hero-mockup-frame,
.hero-mockup-wrap:not(.render-missing) .hero-mockup-screenshot { display: none; }
.hero-mockup-wrap::before {
  content: ""; position: absolute; z-index: 0;
  inset: 6% 4% 10% 4%;
  background: radial-gradient(60% 55% at 50% 38%, rgba(29,128,119,0.45) 0%, rgba(29,128,119,0) 70%);
  filter: blur(18px); pointer-events: none;
}
.hero-mockup-wrap::after {
  content: ""; position: absolute; z-index: 1;
  left: 12%; right: 12%; bottom: 1%; height: 26px;
  background: radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 72%);
  filter: blur(6px); pointer-events: none;
}
@media (min-width: 992px) {
  .hero-mockup-wrap:not(.render-missing) { width: 360px; }
}

/* 5. Winner-pin floats above the render */
.hero-mockup-wrap .coming-soon-pin { z-index: 5; }

/* 6. Form polish (Emil): centered toggles, intentional focus, trust line */
.lead-app-radio label.btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.lead-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.lead-trust {
  margin: 0.7rem 0 0; font-size: 0.74rem; line-height: 1.45;
  color: rgba(255,255,255,0.62); text-align: center;
}
.lead-capture-card { transition: box-shadow 220ms cubic-bezier(0.32,0.72,0,1); }
.lead-capture-card:focus-within {
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(226,147,68,0.35);
}
.lead-capture-card .form-control:focus,
.lead-capture-card .form-select:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(226,147,68,0.35);
}

/* 7. EN / SW language toggle — always visible, desktop + mobile */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; margin-left: 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
}
.lang-btn {
  appearance: none; border: 0; cursor: pointer;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  background: transparent;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  transition: color 150ms ease, background 150ms ease;
}
.lang-btn:hover { color: #fff; }
.lang-btn.is-active { color: #fff; background: var(--gusapp-orange); }
@media (max-width: 767.98px) {
  .lang-toggle { margin-left: auto; margin-right: 0.25rem; }
}

/* 8. Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow-dot { animation: none; }
  .lead-capture-card { transition: none; }
}

/* ============================================================
 * CONSOLE-AESTHETIC HERO — 2026-06 (px)
 * Ports the founder-console auth surface to the lead-catcher:
 * viscous teal-particle backdrop, Inter, underline fields,
 * uppercase-tracked labels, one accent (orange).
 * Overrides the refresh block above where they differ.
 * ============================================================ */
:root{ --px-teal:#8fefd6; --px-orange:#e29344; --px-ink:#eef7f3; --px-ease:cubic-bezier(.32,.72,0,1); }

/* Particle canvas behind the hero content */
.hero-section.layout-5 { position: relative; }
#px-bg{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
  opacity:0; animation:pxFade 1.4s var(--px-ease) .1s forwards;
}
@keyframes pxFade{ to{opacity:1} }
/* Opaque dark console stage on the hero (covers the page-wide warm body
   gradient) + a faint teal glow via ::before, particles above it */
.hero-section.layout-5{
  background: radial-gradient(125% 115% at 50% 12%, #0b2c27 0%, #061712 52%, #03100d 100%) !important;
}
/* The template's warm teal→orange wash is on ::after — neutralise it to a
   faint teal glow and drop it below the particle layer. */
.hero-section.layout-5.has-overlay.overlay-gradient::after{
  background: radial-gradient(60% 50% at 78% 15%, rgba(143,239,214,0.10) 0%, transparent 60%) !important;
  z-index:0 !important;
}
.hero-section.layout-5.has-overlay.overlay-gradient::before{
  background: transparent !important; z-index:0;
}
.hero-section.layout-5 > .container{ position:relative; z-index:2; }
@media (prefers-reduced-motion: reduce){ #px-bg{ animation:none; opacity:1; } }

/* Inter across the hero */
.hero-section.layout-5 .hero-content,
.hero-section.layout-5 .hero-content h1,
.hero-section.layout-5 .lead-capture-card{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
.hero-eyebrow{ letter-spacing:.16em; }
.hero-section.layout-5 .hero-content h1.hero-tagline{ letter-spacing:-0.02em; }

/* Refined console panel instead of bright glass */
.hero-section.layout-5 .lead-capture-card{
  background: rgba(7,28,24,0.55) !important;
  border:1px solid rgba(143,239,214,0.14) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,0.45);
}

/* Uppercase tracked labels (console voice) */
.lead-capture-card .form-label,
.lead-capture-card legend.form-label{
  font-size:0.68rem !important; font-weight:600 !important;
  letter-spacing:0.14em !important; text-transform:uppercase !important;
  color:rgba(143,239,214,0.62) !important;
}

/* Underline fields: phone + selects */
.lead-phone-group{ border:0 !important; }
.lead-phone-group .input-group-text{
  background:transparent !important; border:0 !important;
  border-bottom:1px solid rgba(143,239,214,0.22) !important;
  color:var(--px-teal) !important; padding-left:2px !important; font-weight:600;
}
.lead-phone-group .form-control{
  background:transparent !important; border:0 !important;
  border-bottom:1px solid rgba(143,239,214,0.22) !important;
  color:var(--px-ink) !important; caret-color:var(--px-orange);
  border-radius:0 !important; color-scheme:dark;
}
.lead-capture-card .form-select{
  background-color:transparent !important; border:0 !important;
  border-bottom:1px solid rgba(143,239,214,0.22) !important;
  color:var(--px-ink) !important; border-radius:0 !important;
  color-scheme:dark; padding-left:2px !important;
}
.lead-capture-card .form-select option{ color:#16201d; }
.lead-phone-group .form-control:focus,
.lead-capture-card .form-select:focus{
  border-bottom-color:var(--px-orange) !important; box-shadow:none !important;
}

/* Buyer/Seller — ghost chips, orange when chosen */
.lead-app-radio label.btn{
  background:transparent !important;
  border:1px solid rgba(143,239,214,0.22) !important;
  color:rgba(238,247,243,0.82) !important;
  text-transform:uppercase; letter-spacing:0.10em; font-size:0.78rem !important;
  border-radius:6px;
}
.lead-app-radio .btn-check:checked + label.btn{
  background:var(--px-orange) !important; border-color:var(--px-orange) !important; color:#0a1f1b !important;
}

/* CTA — solid accent, uppercase tracked (one primary action) */
.lead-submit{
  background:var(--px-orange) !important; border:1px solid var(--px-orange) !important;
  color:#0a1f1b !important; text-transform:uppercase; letter-spacing:0.18em;
  font-size:0.82rem !important; font-weight:600 !important; border-radius:6px;
}
.lead-submit:hover,.lead-submit:focus{
  background:#f0a865 !important; border-color:#f0a865 !important; color:#0a1f1b !important;
}
.lead-trust{ color:rgba(238,247,243,0.5); letter-spacing:0.01em; }

/* Mockup sizing — give the marketplace render real presence on desktop */
@media (min-width: 992px){
  .hero-section.layout-5 .hero-mockup-wrap{ width: 400px !important; }
}

/* Mobile overlay: newmock2 is a bright marketplace screen — behind the form it
   washes warm. Dim it to a dark ghost and deepen the form so the console mood
   (dark teal + one accent) holds on phones. */
@media (max-width: 767.98px){
  section#home.hero-section.layout-5 .hero-mockup-wrap{
    opacity: 0.30 !important;
    filter: brightness(0.55) saturate(0.85) !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card{
    background: rgba(6, 23, 18, 0.90) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }
}

/* ============================================================
 * SITE-WIDE CONSOLE DESIGN SYSTEM — 2026-06
 * One dark surface system across every section. Tokens, unified
 * card / CTA / heading / spacing scales, accent hierarchy
 * (teal primary, orange emphasis). Authoritative final block.
 * ============================================================ */
:root{
  --gp-bg:#03100d;
  --gp-surface:#0c211d; --gp-surface-2:#0f2a25;
  --gp-border:rgba(143,239,214,0.14); --gp-border-strong:rgba(143,239,214,0.40);
  --gp-ink:#eaf3ef; --gp-muted:#a8bdb6;
  --gp-teal:#8fefd6; --gp-orange:#e29344;
  --gp-ease:cubic-bezier(.32,.72,0,1); --gp-radius:12px;
  --gp-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.34);
}

/* ---- White-gap / CLS root fix: never-white at any render phase ---- */
html{ background:#03100d !important; color-scheme:dark; }

/* ---- One type system (Inter) across the marketing surface ---- */
body, .navbar, .gameon-navbar,
section h1, section h2, section h3, section h4, section h5, section h6,
section p, section li, section span, section a, .btn, .footer-area{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

/* ---- Section rhythm: generous breathing room ---- */
.features-section, .work-section, .content-section, .review-section,
.price-plan-area, .subscribe-area, .download-area, .contact-area{
  background:transparent !important;
  padding-top:clamp(48px, 7vw, 88px) !important;
  padding-bottom:clamp(48px, 7vw, 88px) !important;
}
.primary-bg{ background:transparent !important; }
/* Template paints .main and every <section> white by default — let the dark
   body show through so the whole page reads as one dark surface. */
.main{ background:transparent !important; }
.main > section, body section{ background-color:transparent !important; }

/* ---- One heading scale ---- */
.features-section h2, .work-section h2, .content-section h2, .review-section h2,
.price-plan-area h2, .subscribe-area h2, .download-area h2, .contact-area h2,
section h2.title{
  color:var(--gp-ink) !important; font-weight:700 !important;
  font-size:clamp(1.7rem, 3.2vw, 2.5rem) !important; line-height:1.15 !important;
  letter-spacing:-0.02em !important;
}
.features-section h4, .work-section h4, .content-section h2 + *,
.review-section h4, .contact-area h5, .subscribe-area h5, .content-section h4{
  color:var(--gp-ink) !important;
}
.features-section h4, .review-section h4, .work-section h4{ font-size:clamp(1.05rem,1.6vw,1.25rem) !important; }

/* ---- Body copy on dark ---- */
.features-section p, .work-section p, .content-section p, .content-section li,
.content-section span, .review-section p, .price-plan-area p, .subscribe-area p,
.download-area p, .contact-area p, .intro p,
.gusapp-feature-card p, .gusapp-roadmap-card p, .gusapp-partner-card p,
.work-section .icon-box p, .text-muted, .small.text-muted{
  color:var(--gp-muted) !important;
}
.content-section h2{ color:var(--gp-ink) !important; font-weight:700 !important; letter-spacing:-0.02em !important; }

/* ---- Neutralise the warm ::after overlays (work + download) ---- */
.work-section.has-overlay.overlay-gradient::after{
  background:radial-gradient(70% 60% at 50% 0%, rgba(143,239,214,0.08), transparent 60%) !important;
}
.download-area.has-overlay.overlay-dark::after{ background:rgba(3,16,13,0.55) !important; }

/* ---- One card style ---- */
.gusapp-feature-card, .gusapp-roadmap-card, .gusapp-pricing-card,
.gusapp-partner-card, .gusapp-contact-card, .work-section .icon-box{
  background:var(--gp-surface) !important;
  border:1px solid var(--gp-border) !important;
  border-radius:var(--gp-radius) !important;
  box-shadow:var(--gp-shadow) !important;
}
.gusapp-feature-card h4, .gusapp-roadmap-card h4, .gusapp-partner-card h5,
.gusapp-contact-card h5, .work-section .icon-box h4, .gusapp-pricing-card .package-type{
  color:var(--gp-ink) !important;
}
.gusapp-pricing-card{ background:var(--gp-surface) !important; border:1px solid var(--gp-border) !important; border-radius:var(--gp-radius) !important; }
.gusapp-pricing-card--featured{ background:var(--gp-surface-2) !important; border-color:var(--gp-border-strong) !important; }
.gusapp-pricing-card li, .gusapp-pricing-list li{ color:var(--gp-muted) !important; }

/* ---- Accents: teal primary, orange emphasis only ---- */
.gusapp-feature-icon, .gusapp-partner-icon, .gusapp-contact-icon, .gusapp-tick,
.content-section .icon .material-symbols-outlined{ color:var(--gp-teal) !important; }
.gusapp-step-num{ color:var(--gp-orange) !important; }
.package-type{ color:var(--gp-teal) !important; }
.gusapp-pricing-flag, .gusapp-phase-tag{ background:var(--gp-orange) !important; color:#0a1f1b !important; border:0 !important; }
.gusapp-section-eyebrow{ color:var(--gp-teal) !important; letter-spacing:.16em !important; text-transform:uppercase; font-weight:600; }
.gusapp-partner-link, .gusapp-contact-card a{ color:var(--gp-teal) !important; }
.gusapp-partner-link:hover, .gusapp-contact-card a:hover{ color:#bff7e8 !important; }

/* ---- One CTA style: solid orange ---- */
.gusapp-cta-primary{
  background:var(--gp-orange) !important; border:1px solid var(--gp-orange) !important;
  color:#0a1f1b !important; text-transform:uppercase; letter-spacing:.16em;
  font-weight:600 !important; border-radius:6px !important; padding:.85rem 1.6rem !important;
}
.gusapp-cta-primary:hover, .gusapp-cta-primary:focus{ background:#f0a865 !important; border-color:#f0a865 !important; color:#0a1f1b !important; }

/* ---- Nav on dark ---- */
header#header .navbar-nav.items .nav-link{ color:rgba(234,243,239,0.82) !important; }
header#header .navbar-nav.items .nav-link:hover,
header#header .navbar-nav.items .nav-link.active{ color:#fff !important; }

/* ---- Footer ---- */
.gusapp-footer{ background:#03100d !important; border-top:1px solid var(--gp-border); }

/* ---- Hero refinements: bigger mockup + more-transparent AA form ---- */
@media (min-width:992px){
  /* vertically centre the row so the form block lines up with the mockup */
  section#home.hero-section.layout-5 .container .row{ align-items:center !important; }
  section#home.hero-section.layout-5 .hero-mockup-wrap{ width:520px !important; max-width:100% !important; }
  /* horizontally centre the form/content block within its column */
  section#home.hero-section.layout-5 .hero-content{ max-width:460px; margin-left:auto; margin-right:auto; }
}
@media (min-width:1400px){
  section#home.hero-section.layout-5 .hero-mockup-wrap{ width:580px !important; }
  section#home.hero-section.layout-5 .hero-content{ max-width:500px; }
}
.hero-section.layout-5 .lead-capture-card{ background:rgba(6,23,18,0.42) !important; }
.coming-soon-pin{ display:none !important; }  /* pin removed per request */

/* ---- Accessibility: intentional focus rings + selection ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .lang-btn:focus-visible,
.lead-app-radio .btn-check:focus-visible + label{
  outline:2px solid rgba(226,147,68,.6) !important; outline-offset:2px !important; border-radius:6px;
}
::selection{ background:rgba(226,147,68,.25); }

/* ---- Small-screen overflow guard (320→767): fixed 16px gutters ---- */
@media (max-width: 767.98px){
  section#home.hero-section.layout-5{ overflow-x:clip; }
  /* Bootstrap's .row negative margins + .col padding inflate width past the
     viewport under absolute positioning — neutralise the gutter math here. */
  section#home.hero-section.layout-5 .container{ padding-left:0 !important; padding-right:0 !important; max-width:100vw !important; overflow:hidden !important; }
  section#home.hero-section.layout-5 .container .row{ margin-left:0 !important; margin-right:0 !important; }
  /* the overlay col spans the row; lay content as a block with hard gutters
     so it can never be wider than the viewport regardless of flex centring */
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-7.col-lg-6{
    display:block !important; padding:0 !important;
  }
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-7.col-lg-6 .hero-content{
    width:auto !important; max-width:none !important;
    margin:0 16px !important; box-sizing:border-box !important;
    height:100% !important; display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
  }
  section#home.hero-section.layout-5 .lead-capture-card{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  .hero-eyebrow{ flex-wrap:wrap; max-width:100%; }
}

/* ---- Content-section mini mockups: now real renders, not device.svg ---- */
.gusapp-mini-mockup{ aspect-ratio:auto !important; width:min(86vw, 320px) !important; }
.gusapp-mini-mockup .mini-screenshot{ display:none !important; }
.gusapp-mini-mockup .mini-frame{
  position:relative !important; width:100% !important; height:auto !important;
  border-radius:24px;
  -webkit-mask-image:radial-gradient(125% 125% at 50% 45%, #000 66%, transparent 100%);
          mask-image:radial-gradient(125% 125% at 50% 45%, #000 66%, transparent 100%);
}

/* ---- Reduced motion (global) ---- */
@media (prefers-reduced-motion: reduce){
  .wow, .fadeInUp, [data-aos]{ animation:none !important; opacity:1 !important; transform:none !important; }
  #px-bg{ animation:none !important; opacity:1 !important; }
  *{ scroll-behavior:auto !important; }
}

/* ---- Targeted polish (2026-06) ---- */
/* "Order in four taps": more horizontal + vertical breathing room */
.work-section{ padding-top:clamp(72px,9vw,120px) !important; padding-bottom:clamp(72px,9vw,120px) !important; }
.work-section .container{ padding-left:clamp(18px,4vw,40px) !important; padding-right:clamp(18px,4vw,40px) !important; }
.work-section .icon-box{ padding:clamp(20px,3vw,28px) !important; }
.work-section .items{ row-gap:clamp(20px,3vw,32px); }

/* Content sections (incl. "Bring your shop to gusapp"): brighter, higher-contrast text + icons */
.content-section p, .content-section li, .content-section li span{ color:#d4e4de !important; }
.content-section h2{ color:#ffffff !important; }
.content-section .icon .material-symbols-outlined{ color:#a8f0df !important; }
.content-section .small.text-muted, .content-section .text-muted, .content-section p.small{ color:#c4d6d0 !important; }

/* 320px headline fit */
@media (max-width:767.98px){
  section#home.hero-section.layout-5 .hero-content h1.hero-tagline{ font-size:clamp(1.4rem,6.8vw,2.2rem) !important; }
}

/* ---- Tiny screens (<=360px): static stacked hero, can't overflow ---- */
@media (max-width: 360px){
  section#home.hero-section.layout-5 .container .row{ flex-direction:column !important; }
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-5.col-lg-6,
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-7.col-lg-6{ position:static !important; inset:auto !important; width:100% !important; height:auto !important; }
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-5.col-lg-6{ order:1 !important; }
  section#home.hero-section.layout-5 .container .row > .col-12.col-md-7.col-lg-6{ order:2 !important; display:block !important; }
  section#home.hero-section.layout-5 .hero-mockup-wrap{ opacity:1 !important; filter:none !important; width:min(72vw,260px) !important; margin:0 auto 8px !important; }
  section#home.hero-section.layout-5 .hero-content{ margin:0 !important; padding:0 14px !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; align-items:flex-start !important; }
  section#home.hero-section.layout-5 .lead-capture-card{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
}

/* Final mobile safety: long words never push the subhead past the edge */
@media (max-width: 767.98px){
  section#home.hero-section.layout-5 .sub-heading{ max-width:100% !important; overflow-wrap:break-word; word-break:normal; }
}

/* ---- Vendor section ("Bring your shop"): deliberate WHITE panel ---- */
.content-section.vendor-light{ position:relative; background:#ffffff !important; overflow:hidden; }
.content-section.vendor-light .px-light-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.content-section.vendor-light .container{ position:relative; z-index:1; }
.content-section.vendor-light h2{ color:#08221e !important; }
.content-section.vendor-light p,
.content-section.vendor-light li,
.content-section.vendor-light li span,
.content-section.vendor-light .content span{ color:#16352f !important; }
.content-section.vendor-light .small.text-muted,
.content-section.vendor-light .text-muted{ color:#3c5a53 !important; }
.content-section.vendor-light .icon .material-symbols-outlined{ color:#0c4a44 !important; }

/* ---- "Order in four taps": refine the '>' step separators (smaller, teal, spaced) ---- */
.work-section .item::after{
  font-size:20px !important;
  right:-0.5rem !important;
  color:rgba(143,239,214,0.55) !important;
}
.work-section .items{ --bs-gutter-x:2rem; }