@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  --wtn-cream: #f7f3ee;
  --wtn-warm-white: #faf8f5;
  --wtn-sand: #e8dfd4;
  --wtn-teal: #2a7b7b;
  --wtn-teal-dark: #1e5c5c;
  --wtn-teal-bg: #eef5f5;
  --wtn-text: #2c2420;
  --wtn-muted: #6b5d54;
  --wtn-shadow: 0 8px 32px rgba(44, 36, 32, 0.1);
}

html { min-height: 100%; background: var(--wtn-cream); }
body[data-wtn-entry-experience] {
  min-height: 100%;
  margin: 0;
  background: radial-gradient(circle at 10% 2%, rgba(42, 123, 123, 0.06), transparent 28rem), var(--wtn-cream);
  color: var(--wtn-text);
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
body[data-wtn-entry-experience] a { color: var(--wtn-teal-dark); }
body[data-wtn-entry-experience] a:focus-visible { outline: 2px solid var(--wtn-teal); outline-offset: 3px; }
body[data-wtn-entry-experience] .shell {
  width: min(1180px, calc(100% - 32px));
  max-width: none;
  margin: 0 auto;
  padding: 0 0 64px;
}
body[data-wtn-entry-experience] .shell > header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 64px;
  margin: 0 -16px 36px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(44, 36, 32, 0.08);
  background: rgba(250, 248, 245, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
body[data-wtn-entry-experience] .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: var(--wtn-text);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-decoration: none;
}
body[data-wtn-entry-experience] .brand img { width: 34px; height: 34px; border-radius: 9px; }
body[data-wtn-entry-experience] [data-wtn-entry-nav="primary"] {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
body[data-wtn-entry-experience] [data-wtn-entry-nav="primary"] a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--wtn-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
body[data-wtn-entry-experience] [data-wtn-entry-nav="primary"] a:hover,
body[data-wtn-entry-experience] [data-wtn-entry-nav="primary"] a:focus-visible {
  background: var(--wtn-teal-bg);
  color: var(--wtn-teal-dark);
}
body[data-wtn-entry-experience] .shell > main {
  width: min(860px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(44, 36, 32, 0.09);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--wtn-shadow);
}
body[data-wtn-entry-experience] .shell > main > h1,
body[data-wtn-entry-experience] .shell > main h2,
body[data-wtn-entry-experience] .shell > main h3 {
  color: var(--wtn-text);
  font-family: "Cormorant Garamond", Georgia, serif;
}
body[data-wtn-entry-experience] .shell > main > h1 {
  margin-top: 0;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
body[data-wtn-entry-experience] .shell > main > .lede {
  max-width: 720px;
  color: var(--wtn-muted);
  font-size: 1.16rem;
  line-height: 1.65;
}
body[data-wtn-entry-experience] .shell > main > section + section { margin-top: 30px; }
body[data-wtn-entry-experience] .shell > main > section:not(.static-cta) {
  padding-top: 26px;
  border-top: 1px solid var(--wtn-sand);
}
body[data-wtn-entry-experience] .shell > main h2 {
  margin-top: 0;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.12;
}
body[data-wtn-entry-experience] article {
  border-color: var(--wtn-sand);
  background: var(--wtn-warm-white);
  box-shadow: none;
}
body[data-wtn-entry-experience] .static-cta__link {
  border-color: rgba(42, 123, 123, 0.22);
  background: var(--wtn-teal-bg);
  color: var(--wtn-teal-dark);
}
body[data-wtn-entry-experience] .shell > footer {
  width: min(860px, 100%);
  margin: 32px auto 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--wtn-sand);
  color: var(--wtn-muted);
}
body[data-wtn-entry-experience] .wtn-entry-support-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 14px;
}
body[data-wtn-entry-experience] .wtn-entry-support-nav a {
  color: var(--wtn-muted);
  font-size: 0.92rem;
  text-decoration: none;
}
body[data-wtn-entry-experience] .wtn-entry-support-nav a:hover,
body[data-wtn-entry-experience] .wtn-entry-support-nav a:focus-visible {
  color: var(--wtn-teal-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (max-width: 860px) {
  body[data-wtn-entry-experience] .shell { width: min(100% - 24px, 1180px); }
  /* The header bleeds to the viewport edge; the bleed must match the shell
     gutter or the header widens the document. */
  body[data-wtn-entry-experience] .shell > header {
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin: 0 -12px 36px;
  }
  body[data-wtn-entry-experience] [data-wtn-entry-nav="primary"] {
    width: calc(100% + 24px);
    margin: 0 -12px;
    padding: 0 12px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body[data-wtn-entry-experience] [data-wtn-entry-nav="primary"]::-webkit-scrollbar { display: none; }
  body[data-wtn-entry-experience] [data-wtn-entry-nav="primary"] a { flex: 0 0 auto; }
}

@media (max-width: 620px) {
  body[data-wtn-entry-experience] .shell { width: min(100% - 20px, 1180px); }
  body[data-wtn-entry-experience] .shell > header { margin: 0 -10px 36px; }
  body[data-wtn-entry-experience] [data-wtn-entry-nav="primary"] {
    width: calc(100% + 20px);
    margin: 0 -10px;
    padding: 0 10px 4px;
  }
  body[data-wtn-entry-experience] .shell > main { padding: 22px 18px 28px; border-radius: 20px; }
  body[data-wtn-entry-experience] .shell > main > h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
  body[data-wtn-entry-experience] .shell > main > .lede { font-size: 1.06rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Pending entry state (#777 first-paint continuity): JS-capable current-product
   entries carry html[data-wtn-boot-pending] from the pre-paint marker script,
   so only the current brand row is visible while the app preloads. Crawlers and
   no-JS visitors never receive the marker and always get the full static
   fallback; support/static entries never receive the marker script. */
html[data-wtn-boot-pending] body[data-wtn-entry-experience="current-product"] .shell > :not(header) { display: none; }
html[data-wtn-boot-pending] body[data-wtn-entry-experience="current-product"] .shell > header nav { display: none; }
html[data-wtn-boot-pending] body[data-wtn-entry-experience="current-product"] .shell > header { border-bottom-color: transparent; }
html[data-wtn-boot-pending] body[data-wtn-entry-experience="current-product"] .brand img {
  animation: wtn-entry-pending-pulse 1.6s ease-in-out infinite;
}

@keyframes wtn-entry-pending-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-wtn-boot-pending] body[data-wtn-entry-experience="current-product"] .brand img { animation: none; }
}

/* Narrow viewports: the six-product primary hierarchy cannot fit on one row
   beside the brand, so the header stacks and the nav wraps instead of
   overflowing the document horizontally. The injected support nav inherits
   the host page's own narrow-viewport nav bleed rules, so it is pinned back
   to the shell content box. */
@media (max-width: 640px) {
  body[data-wtn-entry-experience] .shell > header {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  body[data-wtn-entry-experience] [data-wtn-entry-nav="primary"] {
    flex-wrap: wrap;
  }
  body[data-wtn-entry-experience] .wtn-entry-support-nav {
    width: auto;
    padding: 0;
  }
}