/*
 * Homepage design-engineering polish.
 * This file MUST stay last in the homepage CSS cascade.
 * Goal: content-first hierarchy, restrained motion, consistent surfaces, no layout churn.
 */

main.gl-page {
  --home-ui-radius-sm: 8px;
  --home-ui-radius-md: 12px;
  --home-ui-radius-lg: 16px;
  --home-ui-border: #dbe4e6;
  --home-ui-border-strong: #ccd9dc;
  --home-ui-paper: #ffffff;
  --home-ui-paper-soft: #f6f9f9;
  --home-ui-ink: #123846;
  --home-ui-muted: #617780;
  --home-ui-gold: #e7bd54;
  --home-ui-gold-soft: #f2d889;
  --home-ui-shadow: 0 10px 30px rgba(9, 52, 67, 0.055);
  --home-ui-shadow-hover: 0 16px 38px rgba(9, 52, 67, 0.09);
  background: #f7f9f9;
}

/* ---------------------------------------------------------
   Shared homepage header: calmer brand motion and clearer UI
   --------------------------------------------------------- */

body:has(main.gl-page) .site-header--home {
  background: rgba(3, 27, 41, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}

body:has(main.gl-page) .site-header--home .brand-logo__orbits,
body:has(main.gl-page) .site-header--home .brand-logo__wordmark::after {
  animation: none !important;
}

body:has(main.gl-page) .site-header--home .site-nav > a,
body:has(main.gl-page) .site-header--home .site-nav-group > summary {
  transition:
    color 160ms cubic-bezier(.23,1,.32,1),
    border-color 160ms cubic-bezier(.23,1,.32,1),
    background-color 160ms cubic-bezier(.23,1,.32,1);
}

body:has(main.gl-page) .site-header--home .site-header-cta,
body:has(main.gl-page) .site-header--home .site-menu-button {
  transition:
    transform 160ms cubic-bezier(.23,1,.32,1),
    box-shadow 200ms cubic-bezier(.23,1,.32,1),
    filter 160ms cubic-bezier(.23,1,.32,1);
}

body:has(main.gl-page) .site-header--home .site-header-cta:active,
body:has(main.gl-page) .site-header--home .site-menu-button:active {
  transform: scale(.975);
}

/* ---------------------------------------------------------
   Hero: editorial hierarchy, quieter surfaces, faster feedback
   --------------------------------------------------------- */

main.gl-page .gl-hero {
  isolation: isolate;
}

main.gl-page .gl-hero::after {
  height: 92px;
  background: linear-gradient(transparent, rgba(3, 29, 43, .88));
}

main.gl-page .gl-overline {
  color: rgba(244, 216, 139, .92) !important;
  font-weight: 760 !important;
  letter-spacing: .17em !important;
}

main.gl-page .gl-hero-copy h1 {
  max-width: 760px !important;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .18) !important;
}

main.gl-page .gl-hero-copy .gl-hero-title-line {
  display: block;
}

main.gl-page .gl-hero-copy .gl-hero-accent {
  color: #f0c861 !important;
}

main.gl-page .gl-lead {
  max-width: 700px;
  text-wrap: pretty;
}

main.gl-page .gl-points {
  max-width: 690px;
  color: rgba(255, 255, 255, .72) !important;
}

main.gl-page .gl-button {
  border-radius: 10px !important;
  box-shadow: none;
  transform: translateZ(0);
  transition:
    transform 160ms cubic-bezier(.23,1,.32,1),
    background-color 160ms cubic-bezier(.23,1,.32,1),
    border-color 160ms cubic-bezier(.23,1,.32,1),
    box-shadow 200ms cubic-bezier(.23,1,.32,1),
    filter 160ms cubic-bezier(.23,1,.32,1) !important;
}

main.gl-page .gl-button-gold {
  background: linear-gradient(135deg, #f4d77f, #e8bc50) !important;
  box-shadow: 0 8px 24px rgba(232, 188, 80, .16) !important;
}

main.gl-page .gl-button-ghost {
  background: rgba(8, 43, 59, .38) !important;
  border-color: rgba(255, 255, 255, .32) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

main.gl-page .gl-button:active {
  transform: scale(.975) !important;
}

main.gl-page .gl-hero-visual .gl-exam-grid a {
  min-height: 108px;
  border-color: rgba(255, 255, 255, .25) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition:
    transform 180ms cubic-bezier(.23,1,.32,1),
    border-color 180ms cubic-bezier(.23,1,.32,1),
    background-color 180ms cubic-bezier(.23,1,.32,1),
    box-shadow 200ms cubic-bezier(.23,1,.32,1) !important;
}

main.gl-page .gl-hero-visual .gl-exam-grid strong {
  letter-spacing: -.015em;
}

main.gl-page .gl-metrics {
  min-height: 96px;
  background: rgba(3, 33, 49, .96) !important;
}

main.gl-page .gl-metrics > div {
  gap: 14px;
}

main.gl-page .gl-metrics svg {
  width: 30px;
  height: 30px;
  color: rgba(255,255,255,.88);
}

main.gl-page .gl-metrics strong {
  font-size: 21px;
  letter-spacing: -.02em;
}

main.gl-page .gl-metrics span {
  color: rgba(255,255,255,.68);
}

/* ---------------------------------------------------------
   Intent gateway: two goals should read as two deliberate paths
   --------------------------------------------------------- */

main.gl-page .gl-intent-gateway {
  margin-top: 46px;
  padding: 34px;
  border-color: var(--home-ui-border) !important;
  border-radius: var(--home-ui-radius-lg) !important;
  background: var(--home-ui-paper) !important;
  box-shadow: var(--home-ui-shadow) !important;
}

main.gl-page .gl-intent-gateway > header {
  margin-bottom: 26px;
}

main.gl-page .gl-intent-gateway > header h2,
main.gl-page .gl-conversion-heading h2 {
  text-wrap: balance;
}

main.gl-page .gl-intent-gateway > header span,
main.gl-page .gl-conversion-heading > div > span {
  text-wrap: pretty;
}

main.gl-page .gl-intent-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

main.gl-page .gl-intent-grid > article {
  min-height: 238px;
  padding: 26px;
  border-color: var(--home-ui-border) !important;
  border-radius: var(--home-ui-radius-md) !important;
  background: #fbfcfc !important;
  box-shadow: none;
  transition:
    transform 180ms cubic-bezier(.23,1,.32,1),
    border-color 180ms cubic-bezier(.23,1,.32,1),
    box-shadow 200ms cubic-bezier(.23,1,.32,1) !important;
}

main.gl-page .gl-intent-grid > article > i {
  color: #b68520;
  font-size: 18px;
}

main.gl-page .gl-intent-grid h3 {
  margin-top: 28px;
  font-size: 22px;
  letter-spacing: -.02em;
}

main.gl-page .gl-intent-grid > article > p {
  max-width: 560px;
  color: var(--home-ui-muted);
  font-size: 14px;
  line-height: 1.8;
  text-wrap: pretty;
}

main.gl-page .gl-intent-grid nav a {
  min-height: 32px;
  border: 1px solid #dde8ea;
  background: #f3f7f7;
  transition:
    background-color 160ms cubic-bezier(.23,1,.32,1),
    border-color 160ms cubic-bezier(.23,1,.32,1),
    color 160ms cubic-bezier(.23,1,.32,1),
    transform 160ms cubic-bezier(.23,1,.32,1);
}

main.gl-page .gl-intent-grid > article > a {
  font-size: 13px;
  transition:
    color 160ms cubic-bezier(.23,1,.32,1),
    border-color 160ms cubic-bezier(.23,1,.32,1);
}

/* ---------------------------------------------------------
   Dashboard / comparison: one visual language, no floating islands
   --------------------------------------------------------- */

main.gl-page .gl-dashboard {
  padding-top: 54px;
  gap: 30px;
}

main.gl-page .gl-section-title h2 {
  color: #0b3547;
  font-size: 25px;
  text-wrap: balance;
}

main.gl-page .gl-section-title > a {
  transition:
    color 160ms cubic-bezier(.23,1,.32,1),
    transform 160ms cubic-bezier(.23,1,.32,1);
}

main.gl-page .gl-table-wrap {
  border-color: var(--home-ui-border) !important;
  border-radius: var(--home-ui-radius-md) !important;
  background: var(--home-ui-paper);
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   Process: keep the strong section, remove unnecessary spectacle
   --------------------------------------------------------- */

main.gl-page .gl-conversion-hub {
  gap: 26px;
}

main.gl-page .gl-conversion-hub .gl-process {
  border-radius: 18px !important;
  box-shadow: 0 18px 48px rgba(4, 46, 58, .12) !important;
}

main.gl-page .gl-conversion-hub .gl-process::before {
  opacity: .028 !important;
}

main.gl-page .gl-conversion-hub .gl-process::after {
  opacity: .4;
}

main.gl-page .gl-process .gl-process-grid > article {
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    transform 180ms cubic-bezier(.23,1,.32,1),
    border-color 180ms cubic-bezier(.23,1,.32,1),
    background-color 180ms cubic-bezier(.23,1,.32,1) !important;
}

main.gl-page .gl-process .gl-process-step-icon {
  box-shadow: none !important;
}

main.gl-page .gl-process .gl-conversion-heading > a {
  box-shadow: 0 8px 22px rgba(0,25,34,.13) !important;
  transition:
    transform 160ms cubic-bezier(.23,1,.32,1),
    box-shadow 200ms cubic-bezier(.23,1,.32,1),
    filter 160ms cubic-bezier(.23,1,.32,1) !important;
}

main.gl-page .gl-process .gl-conversion-heading > a:active {
  transform: scale(.975) !important;
}

/* ---------------------------------------------------------
   Cases and reviews: evidence first, decorative chrome second
   --------------------------------------------------------- */

main.gl-page .gl-cases-featured,
main.gl-page .gl-reviews {
  border-color: var(--home-ui-border) !important;
  border-radius: var(--home-ui-radius-lg) !important;
  background: var(--home-ui-paper) !important;
  box-shadow: var(--home-ui-shadow) !important;
}

main.gl-page .gl-case-grid-detailed > article,
main.gl-page .gl-review-grid > article {
  border-color: var(--home-ui-border) !important;
  border-radius: var(--home-ui-radius-md) !important;
  box-shadow: none !important;
  transition:
    transform 180ms cubic-bezier(.23,1,.32,1),
    border-color 180ms cubic-bezier(.23,1,.32,1),
    box-shadow 200ms cubic-bezier(.23,1,.32,1) !important;
}

main.gl-page .gl-case-evidence-cover,
main.gl-page .gl-case-score,
main.gl-page .gl-case-route {
  border-radius: var(--home-ui-radius-sm) !important;
}

main.gl-page .gl-case-grid-detailed > article > h3,
main.gl-page .gl-review-grid blockquote {
  text-wrap: pretty;
}

main.gl-page .gl-case-grid-detailed summary,
main.gl-page .gl-faq summary,
main.gl-page .gl-review-heading button,
main.gl-page .gl-review-submit button {
  transition:
    color 160ms cubic-bezier(.23,1,.32,1),
    background-color 160ms cubic-bezier(.23,1,.32,1),
    border-color 160ms cubic-bezier(.23,1,.32,1),
    transform 160ms cubic-bezier(.23,1,.32,1),
    box-shadow 200ms cubic-bezier(.23,1,.32,1);
}

/* ---------------------------------------------------------
   Contact and FAQ: compact, high-confidence ending
   --------------------------------------------------------- */

main.gl-page .gl-contact {
  border-radius: 12px !important;
  box-shadow: 0 12px 34px rgba(3,35,53,.11) !important;
}

main.gl-page .gl-contact-hook > a {
  border-radius: 8px !important;
  transition:
    transform 160ms cubic-bezier(.23,1,.32,1),
    box-shadow 200ms cubic-bezier(.23,1,.32,1),
    filter 160ms cubic-bezier(.23,1,.32,1);
}

main.gl-page .gl-contact-list > a {
  transition:
    background-color 160ms cubic-bezier(.23,1,.32,1),
    color 160ms cubic-bezier(.23,1,.32,1);
}

main.gl-page .gl-contact-hook > a:active {
  transform: scale(.975);
}

main.gl-page .gl-faq {
  padding-bottom: 52px;
}

main.gl-page .gl-faq-list {
  border-color: var(--home-ui-border) !important;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

main.gl-page .gl-faq details {
  border-color: var(--home-ui-border) !important;
}

main.gl-page .gl-faq summary {
  min-height: 72px;
}

main.gl-page .gl-faq summary b {
  transition: transform 180ms cubic-bezier(.23,1,.32,1), color 160ms cubic-bezier(.23,1,.32,1) !important;
}

/* ---------------------------------------------------------
   Keyboard focus
   --------------------------------------------------------- */

main.gl-page :where(
  .gl-button,
  .gl-hero-visual .gl-exam-grid a,
  .gl-intent-grid a,
  .gl-section-title a,
  .gl-conversion-heading a,
  .gl-case-grid a,
  .gl-review-heading button,
  .gl-review-submit button,
  .gl-contact a,
  .gl-faq summary,
  .gl-mobile-cta
):focus-visible,
body:has(main.gl-page) .site-header--home :where(a, summary, button):focus-visible {
  outline: 2px solid #efca6d;
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Hover only where a real hover pointer exists
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  body:has(main.gl-page) .site-header--home .site-header-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(232,197,102,.18);
  }

  main.gl-page .gl-button:hover {
    transform: translateY(-2px) !important;
  }

  main.gl-page .gl-button-gold:hover {
    box-shadow: 0 12px 30px rgba(232,188,80,.22) !important;
  }

  main.gl-page .gl-button-ghost:hover {
    border-color: rgba(255,255,255,.52) !important;
    background: rgba(12,53,70,.52) !important;
  }

  main.gl-page .gl-hero-visual .gl-exam-grid a:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(240, 207, 116, .64) !important;
    background: rgba(255,255,255,.105) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.09) !important;
  }

  main.gl-page .gl-intent-grid > article:hover,
  main.gl-page .gl-case-grid-detailed > article:hover,
  main.gl-page .gl-review-grid > article:hover {
    transform: translateY(-2px);
    border-color: var(--home-ui-border-strong) !important;
    box-shadow: var(--home-ui-shadow-hover) !important;
  }

  main.gl-page .gl-intent-grid nav a:hover {
    transform: translateY(-1px);
    border-color: #cbdcdf;
    background: #edf4f4;
  }

  main.gl-page .gl-process .gl-process-grid > article:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(239,196,94,.42) !important;
    background: rgba(255,255,255,.075) !important;
  }

  main.gl-page .gl-process .gl-conversion-heading > a:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 11px 26px rgba(0,25,34,.17) !important;
  }

  main.gl-page .gl-section-title > a:hover {
    transform: translateX(2px);
  }

  main.gl-page .gl-contact-hook > a:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,20,30,.14);
  }
}

/* ---------------------------------------------------------
   Mobile: less chrome, clearer touch hierarchy
   --------------------------------------------------------- */

@media (max-width: 800px) {
  body:has(main.gl-page) .site-header--home {
    background: rgba(3, 28, 42, .9);
  }

  main.gl-page .gl-hero-copy h1 {
    text-wrap: pretty;
  }

  main.gl-page .gl-button,
  main.gl-page .gl-hero-visual .gl-exam-grid a {
    border-radius: 9px !important;
  }

  main.gl-page .gl-hero-visual .gl-exam-grid a {
    min-height: 82px !important;
  }

  main.gl-page .gl-metrics svg {
    width: 27px;
    height: 27px;
  }

  main.gl-page .gl-intent-gateway {
    width: calc(100% - 20px) !important;
    margin-top: 22px !important;
    padding: 20px 14px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  main.gl-page .gl-intent-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  main.gl-page .gl-intent-grid > article {
    min-height: 0 !important;
    padding: 19px 17px !important;
    border-radius: 10px !important;
  }

  main.gl-page .gl-intent-grid h3 {
    margin-top: 20px;
    font-size: 19px;
  }

  main.gl-page .gl-intent-grid > article > p {
    font-size: 13px;
    line-height: 1.72;
  }

  main.gl-page .gl-dashboard,
  main.gl-page .gl-reviews,
  main.gl-page .gl-contact,
  main.gl-page .gl-faq {
    width: calc(100% - 20px) !important;
  }

  main.gl-page .gl-dashboard {
    padding-top: 38px;
  }

  main.gl-page .gl-conversion-hub .gl-process,
  main.gl-page .gl-cases-featured,
  main.gl-page .gl-reviews {
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  main.gl-page .gl-process .gl-process-grid > article {
    box-shadow: none !important;
  }

  main.gl-page .gl-case-grid-detailed > article,
  main.gl-page .gl-review-grid > article {
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  main.gl-page .gl-contact {
    margin-bottom: 22px;
  }

  main.gl-page .gl-faq-list {
    border-radius: 10px;
  }

  main.gl-page .gl-faq summary {
    min-height: 64px;
  }

  main.gl-page .gl-mobile-cta {
    transition:
      transform 160ms cubic-bezier(.23,1,.32,1),
      box-shadow 200ms cubic-bezier(.23,1,.32,1),
      background-color 160ms cubic-bezier(.23,1,.32,1);
  }

  main.gl-page .gl-mobile-cta:active {
    transform: scale(.975);
  }
}

@media (max-width: 430px) {
  main.gl-page .gl-hero-actions {
    gap: 8px !important;
  }

  main.gl-page .gl-intent-gateway > header h2,
  main.gl-page .gl-conversion-heading h2 {
    text-wrap: pretty;
  }
}

/* ---------------------------------------------------------
   Reduced motion: no decorative movement required to understand UI
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  main.gl-page *,
  body:has(main.gl-page) .site-header--home * {
    scroll-behavior: auto !important;
  }

  main.gl-page :where(
    .gl-button,
    .gl-hero-visual .gl-exam-grid a,
    .gl-intent-grid > article,
    .gl-process-grid > article,
    .gl-case-grid-detailed > article,
    .gl-review-grid > article,
    .gl-contact-hook > a,
    .gl-section-title > a,
    .gl-mobile-cta
  ) {
    transform: none !important;
  }
}


/* Lighthouse contrast floor: small labels stay readable on pale homepage surfaces. */
main.gl-page .phase3-section-heading p {
  color: #465f68 !important;
}

main.gl-page .phase3-exam-rail article.is-featured header span,
main.gl-page .phase3-case-grid article header strong,
main.gl-page .phase3-process-rail article > span,
main.gl-page .phase3-faq i {
  color: #765716 !important;
}

main.gl-page .phase3-score-route small {
  color: #405e67 !important;
}