/* SELF ENTOURAGE — UX RECONCILIATION V17
   Final public presentation authority for real content density, explicit surfaces,
   left-side mobile navigation, and privacy-preserving Start Here guidance. */

:root {
  --se-v17-section-space: clamp(3.15rem, 5.8vw, 5rem);
  --se-v17-tight-space: clamp(2.1rem, 4vw, 3.4rem);
  --se-v17-drawer-width: min(86vw, 23rem);
}

/* --------------------------------------------------------------------------
   CONTENT DENSITY — do not reserve blank sections or hide meaningful copy.
   -------------------------------------------------------------------------- */

body[data-se-page] .section,
body[data-se-canonical-product="true"] .section {
  padding-block: var(--se-v17-section-space) !important;
}

body[data-se-page] .section.tight,
body[data-se-canonical-product="true"] .section.tight {
  padding-block: var(--se-v17-tight-space) !important;
}

body[data-se-page] .page-hero {
  padding: clamp(3.35rem, 6.4vw, 5.4rem) 0 clamp(2.7rem, 4.8vw, 4rem) !important;
  min-height: 0 !important;
}

body[data-se-page] .page-hero-grid,
body[data-se-page] .hero-primary-copy,
body[data-se-page] .hero-aside {
  min-height: 0 !important;
}

body[data-se-page] :is(.feature-card,.catalog-card,.poster-pillar),
body[data-se-canonical-product="true"] :is(.step-card,.related-card,.standards-grid > div) {
  min-height: 0 !important;
}

body[data-se-page="home"] .poster-pillars {
  padding-block: clamp(3.35rem, 5.8vw, 5rem) !important;
}

body[data-se-page="home"] .poster-pillars .section-heading {
  margin-bottom: clamp(1.7rem, 3vw, 2.6rem) !important;
}

body[data-se-page="home"] .poster-pillar {
  padding: clamp(1.2rem, 2.2vw, 1.55rem) !important;
}

body[data-se-page="home"] .poster-pillar h3 {
  margin-top: 2rem !important;
}

body[data-se-page="home"] .one-percent-number {
  font-size: clamp(3.7rem, 8.5vw, 7.2rem) !important;
}

[data-reveal],
[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

@supports (content-visibility: auto) {
  body[data-se-page] main > .section,
  body[data-se-canonical-product="true"] main > .section {
    content-visibility: visible !important;
    contain-intrinsic-size: auto 0px !important;
  }
}

/* --------------------------------------------------------------------------
   EXPLICIT SURFACES — no inherited dark-on-dark or light-on-light copy.
   -------------------------------------------------------------------------- */

body[data-se-page] :is(.hero-aside,.decision-panel,.contact-panel,.notice,.funnel-proof,.funnel-choice,.funnel-process,.poster-pillar),
body[data-se-canonical-product="true"] :is(.price-card,.product-offer-panel,.next-step,.delivery-card,.step-card,.related-card) {
  color: #f7fafb !important;
}

body[data-se-page] :is(.hero-aside,.decision-panel,.contact-panel,.notice,.funnel-proof,.funnel-choice,.funnel-process,.poster-pillar) :is(h1,h2,h3,h4,strong),
body[data-se-canonical-product="true"] :is(.price-card,.product-offer-panel,.next-step,.delivery-card,.step-card,.related-card) :is(h1,h2,h3,h4,strong) {
  color: #ffffff !important;
  opacity: 1 !important;
}

body[data-se-page] :is(.hero-aside,.decision-panel,.contact-panel,.notice,.funnel-proof,.funnel-choice,.funnel-process,.poster-pillar) :is(p,li),
body[data-se-canonical-product="true"] :is(.price-card,.product-offer-panel,.next-step,.delivery-card,.step-card,.related-card) :is(p,li) {
  color: #d7e2e5 !important;
  opacity: 1 !important;
}

body[data-se-page] .light-section {
  color: #16262c !important;
}

body[data-se-page] .light-section :is(.feature-card,.step-card,.number-card,.related-card,.catalog-card,.standards-grid > div,.route-guide-shell) {
  background: linear-gradient(180deg, #ffffff, #f7f4ed) !important;
  color: #16262c !important;
}

body[data-se-page] .light-section :is(.feature-card,.step-card,.number-card,.related-card,.catalog-card,.standards-grid > div,.route-guide-shell) :is(h1,h2,h3,h4,strong) {
  color: #0b2a34 !important;
}

body[data-se-page] .light-section :is(.feature-card,.step-card,.number-card,.related-card,.catalog-card,.standards-grid > div,.route-guide-shell) :is(p,li,label,small) {
  color: #2f454d !important;
}

/* --------------------------------------------------------------------------
   MOBILE NAVIGATION — true left-side drawer; never pushes content downward.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .site-header .wrap {
    flex-wrap: nowrap !important;
    min-height: 68px !important;
    padding-top: calc(.5rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: .5rem !important;
  }

  .nav-toggle {
    position: relative;
    z-index: 132;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 3.35rem;
    min-height: 2.8rem;
    margin-left: auto;
  }

  .site-header .nav-links {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 125 !important;
    width: var(--se-v17-drawer-width) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: calc(5.7rem + env(safe-area-inset-top, 0px)) 1rem calc(1.4rem + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 18% 8%, rgba(237,203,123,.10), transparent 25%),
      linear-gradient(165deg, #102b34, #06161c 72%) !important;
    border-right: 1px solid rgba(237,203,123,.28) !important;
    box-shadow: 28px 0 70px rgba(0,0,0,.38) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-105%) !important;
    transition: opacity .2s ease !important;
  }

  .site-header .nav-links[data-open="true"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  .site-header .nav-links > a,
  .site-header .nav-dropdown > button,
  .site-header .nav-butler-button {
    width: 100% !important;
    min-height: 3.15rem !important;
    justify-content: flex-start !important;
    padding: .85rem .7rem !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    text-align: left !important;
  }

  .site-header .nav-butler-button {
    margin-top: .7rem !important;
    border: 1px solid rgba(237,203,123,.4) !important;
    border-radius: 14px !important;
  }

  .site-header .nav-dropdown {
    display: block !important;
    width: 100% !important;
  }

  .site-header .nav-dropdown-menu {
    position: static !important;
    min-width: 0 !important;
    padding: 0 0 .35rem .65rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-nav-open="true"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 112;
    background: rgba(2,10,13,.72);
    backdrop-filter: blur(4px);
  }
}

/* --------------------------------------------------------------------------
   CROWN ROUTE DOCK — compact lower-left popup on every public viewport.
   -------------------------------------------------------------------------- */

.se-route-dock {
  left: clamp(.75rem, 1.6vw, 1.15rem) !important;
  right: auto !important;
  width: min(100vw - 1.5rem, 24rem) !important;
}

.se-route-dock-toggle {
  justify-self: start !important;
  min-width: 0 !important;
  width: auto !important;
  padding: .78rem 1rem !important;
  gap: .55rem !important;
  border-radius: 16px !important;
  overflow: visible !important;
}

.se-route-dock-label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.se-route-dock-panel {
  left: 0 !important;
  right: auto !important;
}

html[data-se-floating-route-bar] .crown-butler-trigger {
  display: none !important;
}

@media (max-width: 980px) {
  .se-route-dock {
    display: grid !important;
    bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 104 !important;
  }

  .se-route-dock-panel {
    width: min(92vw, 23rem) !important;
    max-height: min(70dvh, 34rem);
    overflow-y: auto;
  }

  .se-route-dock-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   START HERE — guided local route intelligence.
   -------------------------------------------------------------------------- */

.route-guide-section {
  min-height: 0 !important;
  padding-block: clamp(2.8rem, 5vw, 4rem) !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(237,203,123,.12), transparent 26%),
    linear-gradient(145deg, #071b22, #102b34) !important;
}

.route-guide-section .section-heading {
  margin-bottom: clamp(1.35rem, 2.5vw, 2rem) !important;
}

.route-guide-section .section-heading :is(h2,p,.eyebrow) {
  color: #ffffff !important;
  opacity: 1 !important;
}

.route-guide-section .section-heading p {
  color: #d7e2e5 !important;
}

.route-guide-shell {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(237,203,123,.28);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(16,43,52,.98), rgba(5,18,23,.98));
  box-shadow: 0 28px 70px rgba(0,0,0,.26);
}

.route-guide-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #d7e2e5;
}

.route-guide-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}

.route-guide-progress span {
  height: .36rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.route-guide-progress span[data-complete="true"] {
  background: linear-gradient(90deg, #c14940, #edcb7b);
}

.route-guide-question h3,
.route-guide-result h3 {
  margin-bottom: .45rem;
  color: #ffffff !important;
}

.route-guide-question p,
.route-guide-result p {
  color: #d7e2e5 !important;
}

.route-guide-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.route-guide-option {
  min-height: 4.2rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(237,203,123,.24);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: #f8fafb;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.route-guide-option:hover,
.route-guide-option:focus-visible,
.route-guide-option[aria-pressed="true"] {
  border-color: #edcb7b;
  background: rgba(237,203,123,.10);
  color: #ffffff;
}

.route-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.route-guide-result {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid rgba(237,203,123,.34);
  border-left: 4px solid #c14940;
  border-radius: 16px;
  background: rgba(3,13,17,.45);
}

.route-guide-result[hidden],
.route-guide-question[hidden] {
  display: none !important;
}

.route-guide-privacy {
  margin: 0;
  color: #d7e2e5 !important;
}

@media (max-width: 760px) {
  body[data-se-page] .section,
  body[data-se-canonical-product="true"] .section {
    padding-block: clamp(2.45rem, 8vw, 3.35rem) !important;
  }

  body[data-se-page] .page-hero {
    padding-top: clamp(2.25rem, 8vw, 3.15rem) !important;
    padding-bottom: clamp(2.2rem, 7vw, 3rem) !important;
  }

  body[data-se-page] .page-hero-grid {
    gap: 1.15rem !important;
  }

  body[data-se-page] .page-hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.25rem) !important;
    line-height: .96 !important;
  }

  body[data-se-page] .page-hero .lede {
    font-size: 1rem !important;
    line-height: 1.48 !important;
    margin-bottom: 1.1rem !important;
  }

  body[data-se-page] .hero-aside {
    padding: 1.15rem !important;
  }

  body[data-se-page] .hero-aside :is(p,li) {
    line-height: 1.48 !important;
  }

  body[data-se-page="home"] .hero-proof-row {
    gap: .35rem !important;
    margin-top: .9rem !important;
  }

  body[data-se-page="home"] .hero-proof-row span {
    padding: .42rem .6rem !important;
    font-size: .72rem !important;
  }

  body[data-se-page="start-here"] #choose .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
  }

  body[data-se-page="start-here"] #choose .feature-card {
    padding: .95rem !important;
    font-size: .9rem !important;
  }

  body[data-se-page="start-here"] #choose .feature-card h3 {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  body[data-se-page="start-here"] #choose .feature-card p {
    font-size: .82rem !important;
    line-height: 1.42 !important;
  }

  .route-guide-section {
    padding-block: 2.5rem !important;
  }

  .route-guide-options {
    grid-template-columns: 1fr !important;
  }

  .route-guide-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .se-route-dock-toggle {
    min-height: 3rem !important;
  }
}

@media (max-width: 430px) {
  body[data-se-page="home"] .page-hero h1 {
    max-width: 10ch !important;
  }

  body[data-se-page="start-here"] #choose .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links,
  .se-route-dock-panel {
    transition: none !important;
  }
}