:root {
  --ink: #111b2b;
  --paper: #f4f7f8;
  --paper-deep: #e8eff1;
  --teal: #007f78;
  --teal-light: #a8e9de;
  --blue: #2354d7;
  --hairline: rgba(17, 27, 43, .14);
}

body {
  background: var(--paper);
  color: var(--ink);
  letter-spacing: .01em;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -30vmax;
  background:
    radial-gradient(circle at 30% 28%, rgba(168, 233, 222, .62), transparent 22%),
    radial-gradient(circle at 76% 18%, rgba(155, 184, 255, .32), transparent 25%),
    radial-gradient(circle at 57% 78%, rgba(255, 227, 171, .25), transparent 20%);
  animation: ambient-shift 20s ease-in-out infinite alternate;
  pointer-events: none;
}

.hansen-global-header {
  border-bottom-color: var(--hairline);
  background: rgba(244, 247, 248, .78);
  backdrop-filter: blur(20px);
}

.site-header {
  top: 0;
  border-bottom-color: var(--hairline);
  background: rgba(244, 247, 248, .78);
  backdrop-filter: blur(20px);
}

.site-header .brand {
  color: #10243b;
  text-shadow: none;
}
.site-header .desktop-nav {
  color: #28445f;
  font-weight: 750;
}
.site-header .desktop-nav a,
.site-header .mobile-nav a {
  color: #28445f;
}
.site-header .desktop-nav a:hover,
.site-header .desktop-nav a:focus-visible,
.site-header .mobile-nav a:hover,
.site-header .mobile-nav a:focus-visible {
  color: #007f78;
}
.desktop-nav { gap: 18px; font-weight: 750; }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--teal);
  transition: transform .24s ease;
}
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.hero {
  position: relative;
  min-height: min(780px, calc(100vh - 68px));
  padding-top: 112px;
}

.hero::after {
  content: "SCROLL TO EXPLORE";
  position: absolute;
  bottom: 27px;
  left: 50%;
  color: rgba(17, 27, 43, .45);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  transform: translateX(-50%);
}

.hero-copy > * { animation: hero-in .72s both; }
.hero-copy .eyebrow { animation-delay: .04s; }
.hero-copy h1 { animation-delay: .12s; }
.hero-copy .hero-lead { animation-delay: .2s; }
.hero-copy .hero-points { animation-delay: .28s; }
.hero-copy .hero-actions { animation-delay: .36s; }
.hero-copy .hero-meta { animation-delay: .44s; }

.eyebrow,
.download-label {
  border-color: rgba(0, 127, 120, .45);
  background: rgba(168, 233, 222, .28);
  color: var(--teal);
  font-weight: 800;
  letter-spacing: .12em;
}

.hero h1,
.section-heading h2,
.product-proof-head h2,
.download-card h2 {
  max-width: none;
  color: var(--ink);
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.hero h1 { margin: 24px 0 26px; }
.hero-lead { max-width: 600px; color: #38475a; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.9; }
.hero-points { gap: 8px; }
.hero-points span {
  border-color: var(--hairline);
  border-radius: 4px;
  background: rgba(255,255,255,.56);
  color: #354356;
}

.button {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  font-weight: 800;
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(22, 61, 75, .18); }
.button.primary { border-color: var(--teal); background: var(--teal); }
.button.primary:hover { background: #006960; }
.button.secondary { border-color: var(--hairline); background: rgba(255,255,255,.56); color: var(--ink); }

.hero-meta { border-top-color: var(--hairline); }
.hero-meta > div:not(:first-child) { border-left-color: var(--hairline); }
.hero-meta strong { color: var(--ink); }

/* Script-generated product hero: keep it within the same 1160px page frame
   as every other section and restore readable copy on the light background. */
main .hero.hero-product-intro {
  width: min(1160px, calc(100% - 40px));
  grid-template-columns: minmax(0, 1fr) minmax(430px, .82fr);
  gap: clamp(42px, 6vw, 80px);
  min-height: min(780px, calc(100vh - 68px));
  margin-right: auto;
  margin-left: auto;
  padding: clamp(62px, 7vh, 96px) 0 clamp(82px, 9vh, 118px);
}

.hero-product-copy { max-width: 640px; }
.hero-product-badge {
  border-color: rgba(0, 127, 120, .35);
  background: rgba(0, 127, 120, .1);
  color: #075f5c;
  box-shadow: 0 8px 22px rgba(13, 76, 86, .1);
}
.hero-product-badge i { background: #168c83; box-shadow: 0 0 15px rgba(22, 140, 131, .55); }
.hero-product-copy h1 {
  max-width: 10ch;
  color: var(--ink);
  font-size: clamp(46px, 4.7vw, 72px);
  line-height: 1.08;
}
.hero-product-copy h1 strong {
  color: #087f98;
  background: linear-gradient(90deg, #2856da 0%, #078cae 46%, #008b7d 100%);
  background-clip: text;
  -webkit-background-clip: text;
  border-bottom-color: rgba(0, 139, 125, .24);
}
.hero-product-list { color: #405064; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.62; }
.hero-product-list b { color: #1a2d43; }
.hero-product-meta {
  border-color: var(--hairline);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 12px 28px rgba(21, 54, 69, .1);
  color: #536477;
}
.hero-product-meta b { color: var(--ink); }
.hero-float-card {
  width: 205px;
  border-color: rgba(19, 54, 76, .18);
  background: rgba(27, 48, 75, .94);
  box-shadow: 0 14px 30px rgba(16, 45, 65, .2);
}
.hero-float-card b { color: #fff; }
.hero-float-card span { color: #d4e2ef; }
.card-batch, .card-retry { right: 0; }

/* Keep the expanded capability set balanced instead of stacking cards in a
   sparse, absolute-position composition. */
.hero-product-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 24px;
  min-height: 0;
  padding: 14px 0;
}
.hero-product-cards .hero-float-card {
  position: static;
  width: auto;
  min-height: 78px;
  padding: 16px 18px;
}

@media (max-width: 860px) {
  main .hero.hero-product-intro { display: block; width: min(1160px, calc(100% - 40px)); min-height: 0; }
}

/* Tutorials and dark product frames share the same navy surface.  The
   original detail-page styles used translucent dark grey copy which loses
   contrast on the new light site background. */
.product-boundary,
.detail-step,
.detail-notes,
.guide-route,
.guide-step-card {
  border-color: rgba(37, 201, 193, .38);
  background: #0d2237;
  color: #f2f8ff;
}
.product-boundary,
.product-boundary span {
  color: #e4f2fa;
}
.product-boundary span,
.guide-route span {
  border-color: rgba(37, 201, 193, .42);
  background: #12304b;
  color: #eaf6ff;
}
.detail-tutorial .detail-breadcrumb,
.detail-tutorial .detail-lead,
.detail-tutorial .detail-meta span,
.detail-step p,
.detail-step figcaption,
.detail-notes p,
.detail-notes li,
.guide-step-card p:last-child {
  color: #d4e4ef;
  opacity: 1;
}
.detail-step h3,
.detail-notes h3,
.guide-step-card h3 {
  color: #f6fbff;
}
.detail-step-number,
.guide-route > p,
.guide-step-card p:first-child,
.detail-tutorial .detail-breadcrumb {
  color: #49e4d9;
}
.detail-callout {
  background: #12374b;
  color: #e0f1f6;
}
.detail-callout strong { color: #62eee4; }
.detail-step img {
  background: #0d2237;
  filter: brightness(1.12) contrast(1.1);
}

/* Small capability/status labels need to remain readable at normal desktop
   viewing distance. */
.product-boundary {
  gap: 12px;
  padding: 17px 20px;
}
.product-boundary span {
  padding: 9px 13px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

/* The routed tutorial introduction sits on the light page background, unlike
   the individual step cards.  It therefore needs the ink palette, not white. */
body.tutorial-page-mode .detail-tutorial-inner > h2 {
  color: var(--ink) !important;
}
body.tutorial-page-mode .detail-tutorial-inner > .detail-lead {
  color: #34475a !important;
  opacity: 1;
}
body.tutorial-page-mode .detail-tutorial-inner > .detail-breadcrumb {
  color: #007f78 !important;
  opacity: 1;
}
body.tutorial-page-mode .detail-tutorial-inner > .detail-meta span {
  border-color: rgba(0, 127, 120, .3);
  background: #e4f1f1;
  color: #25445b !important;
  opacity: 1;
}

.window-frame {
  border: 1px solid rgba(17, 27, 43, .2);
  border-radius: 14px;
  box-shadow: 0 34px 86px rgba(25, 52, 66, .2);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
  animation: visual-float 7s ease-in-out infinite;
}
.window-bar { background: #172535; }
.app-panel { background: #edf4f4; }
.panel-side { background: #123945; }
.side-item.active { background: rgba(168,233,222,.18); color: #bafff5; }
.panel-main { background: #f8fbfb; }
.floating-chip { border-radius: 4px; box-shadow: 0 12px 24px rgba(20, 57, 70, .16); }

.product-proof {
  position: relative;
  margin: 0 auto;
  padding: 110px 20px;
  background: linear-gradient(135deg, #e3f2ef 0%, #f8fbf8 58%, #e8f0fb 100%);
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.product-proof-head,
.product-proof-grid,
.product-boundary {
  width: min(1160px, 100%);
  margin-right: auto;
  margin-left: auto;
}
.product-proof-head h2 { color: var(--ink); }
.product-proof-grid article { border-color: var(--hairline); background: rgba(255,255,255,.48); }
.product-proof-grid article:hover { background: rgba(255,255,255,.9); transform: translateY(-5px); }
.product-proof-grid h3 { color: var(--ink); }
.product-proof-grid p, .product-boundary { color: #5d6a79; }
.product-boundary span { border-color: var(--hairline); background: rgba(255,255,255,.45); }

.section { padding: 120px 0; }
.section.muted { background: transparent; }
.section-heading { max-width: 760px; margin-bottom: 52px; }
.section-heading span { color: var(--teal); font-weight: 800; letter-spacing: .15em; }
.section-heading h2 { margin: 15px 0 20px; font-size: clamp(36px, 4.2vw, 64px); }
.section-heading p { max-width: 700px; color: #566476; font-size: 17px; }

.library-grid,
.feature-grid,
.scene-grid { gap: 14px; }
.library-card,
.feature-card,
.scene-card {
  border-color: var(--hairline);
  border-radius: 7px;
  background: rgba(255,255,255,.52);
  box-shadow: none;
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.library-card:hover,
.feature-card:hover,
.scene-card:hover {
  border-color: rgba(0,127,120,.55);
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 42px rgba(30, 63, 75, .1);
  transform: translateY(-7px);
}
.library-card.highlight { background: var(--teal); }
.library-card.highlight h3, .library-card.highlight p { color: white; }
.feature-icon, .library-index { color: var(--teal); font-family: Georgia, serif; font-size: 26px; }
.feature-card h3, .library-card h3, .scene-card h3 { color: var(--ink); font-size: 21px; }
.feature-card p, .library-card p, .scene-card p { color: #5d6a79; }

/* The capability list is a complete four-column grid on desktop. */
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.guide-panel,
.download-card,
.community-card {
  border-color: var(--hairline);
  border-radius: 10px;
  background: rgba(255,255,255,.67);
  box-shadow: 0 20px 50px rgba(25, 52, 66, .08);
}
.download-section { padding-top: 32px; }
.download-card { background: #e6f2f1; }
.download-box { border-color: rgba(0,127,120,.25); background: rgba(255,255,255,.78); }
.community-card { background: linear-gradient(135deg, #dff2ef, #eef5fb); color: var(--ink); }
.community-card h2, .community-card p { color: inherit; }
.community-qr { border-radius: 8px; box-shadow: 0 16px 35px rgba(0,0,0,.22); }

.faq-item { border-color: var(--hairline); background: rgba(255,255,255,.52); }
.faq-question { color: var(--ink); font-weight: 800; }
.site-footer { border-top-color: var(--hairline); background: #e8eff1; color: var(--ink); }
.site-footer p { color: #5d6a79; }

/* The release-history placeholder is visible only before it is expanded. */
.release-gap {
  background: #e1f1ef;
  border-color: rgba(0,127,120,.3);
  color: #35556a;
}
.release-gap strong,
.release-gap .release-dot { color: #007f78; }
.release-gap p { color: #35556a; }

.reveal-section,
.reveal-card { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal-card { transition-delay: var(--reveal-delay, 0ms); }
.reveal-section.is-visible,
.reveal-card.is-visible { opacity: 1; transform: translateY(0); }

@keyframes hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes visual-float { 0%,100% { transform: perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(0); } 50% { transform: perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-11px); } }
@keyframes ambient-shift { from { transform: translate3d(-2%, -1%, 0) rotate(0); } to { transform: translate3d(3%, 2%, 0) rotate(7deg); } }

@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 84px; }
  .hero::after { display: none; }
  .hero h1, .section-heading h2, .product-proof-head h2, .download-card h2 { max-width: none; }
  .window-frame { transform: none; animation: none; }
  .product-proof { padding: 82px 20px; }
  .section { padding: 82px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .reveal-section, .reveal-card { opacity: 1; transform: none; }
}

/* Agent membership is displayed with the existing plans and has a dedicated
   commission summary without introducing a separate page. */
.membership-section .section-heading,
.membership-section .membership-grid,
.membership-section .membership-note {
  width: min(1560px, calc(100% - 40px));
}

.membership-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.membership-card.membership-agent {
  border-color: rgba(145, 113, 244, .68);
  background: linear-gradient(165deg, #26324b, #1c2940);
}

.membership-agent .membership-original { color: #c9b9f4; }
.membership-agent .membership-original s { text-decoration-color: rgba(201, 185, 244, .9); }
.membership-agent .membership-price strong,
.membership-agent-limited,
.membership-agent-rule-title { color: #bca7ff; }
.membership-agent-limited,
.membership-agent-rule-title { font-weight: 800; }
.membership-agent-rule-title { margin: 0 0 12px; font-size: 16px; }
.membership-agent .membership-action {
  border-color: rgba(188, 167, 255, .8);
  background: #6650b8;
}
.membership-agent-contact {
  margin: 18px 0 0;
  color: #d9d0ff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.membership-agent-contact strong { color: #bca7ff; }

/* Technology-blue card system: all information cards share one calm base
   color, then brighten only for hover, focus and active interaction. */
:root {
  --tech-panel: #102941;
  --tech-panel-hover: #133b5a;
  --tech-panel-active: #164b6b;
  --tech-border: rgba(56, 216, 236, .52);
  --tech-heading: #f2fbff;
  --tech-copy: #c2d8e8;
  --tech-muted: #9abbd1;
  --tech-accent: #35dce5;
}

.hero-product-copy h1 {
  max-width: none;
  font-size: clamp(44px, 4.15vw, 66px);
  line-height: 1.04;
  letter-spacing: -.055em;
}
.hero-product-copy h1 span {
  display: block;
  white-space: nowrap;
}

.product-proof-head {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  text-align: center;
}
.product-proof-head h2 {
  margin: 12px auto 0;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.13;
  letter-spacing: -.055em;
}
.product-proof-head h2 span {
  display: block;
  white-space: nowrap;
}

/* Keep the server-rendered hero identical to the enhanced hero.  This avoids
   exposing the obsolete first-screen markup while JavaScript is loading. */
.hero-product-intro > .hero-grid {
  display: none;
}

.product-proof-grid article,
.library-card,
.feature-card,
.scene-card,
.workflow-step,
.feature-lane,
.guide-panel,
.download-card,
.community-card,
.release-content {
  border-color: var(--tech-border);
  background: var(--tech-panel);
  box-shadow: 0 16px 34px rgba(8, 31, 52, .18);
  transition: transform .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.product-proof-grid article:hover,
.library-card:hover,
.feature-card:hover,
.scene-card:hover,
.workflow-step:hover,
.feature-lane:hover,
.guide-panel:hover,
.download-card:hover,
.community-card:hover,
.release-content:hover {
  border-color: #59edf1;
  background: var(--tech-panel-hover);
  box-shadow: 0 22px 42px rgba(8, 31, 52, .3), 0 0 0 1px rgba(89, 237, 241, .15);
  transform: translateY(-5px);
}

.product-proof-grid article:active,
.library-card:active,
.feature-card:active,
.scene-card:active,
.workflow-step:active,
.feature-lane:active,
.guide-panel:active,
.download-card:active,
.community-card:active,
.release-content:active {
  background: var(--tech-panel-active);
  transform: translateY(-1px) scale(.992);
}

.product-proof-grid h3,
.library-card h3,
.feature-card h3,
.scene-card h3,
.workflow-step h3,
.feature-lane h3,
.guide-panel strong,
.download-card h2,
.community-card h3,
.release-content h3 {
  color: var(--tech-heading);
}

.product-proof-grid p,
.library-card p,
.feature-card p,
.scene-card p,
.workflow-step p,
.feature-lane p,
.feature-lane li,
.guide-panel p,
.download-card p,
.community-card p,
.release-content p,
.release-content li {
  color: var(--tech-copy);
}

.feature-icon,
.library-index,
.feature-lane-index,
.release-content .release-tag,
.release-content li::marker {
  color: var(--tech-accent);
}

.library-card.highlight,
.download-card {
  background: var(--tech-panel);
}
.library-card.highlight h3,
.library-card.highlight p { color: inherit; }
.library-card.highlight h3 { color: var(--tech-heading); }
.library-card.highlight p { color: var(--tech-copy); }

/* Remove the obsolete feature-boundary/support note injected by old scripts. */
.feature-catalog-note { display: none !important; }

/* Release items have an outer rail around their content. Match that rail to
   the panel instead of exposing the legacy grey background. */
.release-item {
  border-color: var(--tech-border);
  background: var(--tech-panel);
  box-shadow: 0 16px 34px rgba(8, 31, 52, .18);
}
.release-item:hover {
  border-color: #59edf1;
  background: var(--tech-panel-hover);
  box-shadow: 0 22px 42px rgba(8, 31, 52, .3), 0 0 0 1px rgba(89, 237, 241, .15);
}
.release-item .release-content {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.release-item .release-content:hover,
.release-item .release-content:active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* Pricing cards are part of the same card family too. Price plans no longer
   use gold or purple variants; interaction is the only color change. */
.membership-card,
.membership-card.recommended,
.membership-card.lifetime,
.membership-card.membership-agent {
  border-color: var(--tech-border);
  background: var(--tech-panel);
  box-shadow: 0 16px 34px rgba(8, 31, 52, .18);
  transition: transform .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.membership-card:hover,
.membership-card.recommended:hover,
.membership-card.lifetime:hover,
.membership-card.membership-agent:hover {
  border-color: #59edf1;
  background: var(--tech-panel-hover);
  box-shadow: 0 22px 42px rgba(8, 31, 52, .3), 0 0 0 1px rgba(89, 237, 241, .15);
  transform: translateY(-5px);
}
.membership-card:active { background: var(--tech-panel-active); transform: translateY(-1px) scale(.992); }
.membership-card .membership-name,
.membership-card .membership-original,
.membership-card .membership-price span,
.membership-card li,
.membership-card .membership-action { color: var(--tech-heading); }
.membership-card .membership-cycle-tag,
.membership-card .membership-price > span:first-child,
.membership-card .membership-agent-limited,
.membership-card .membership-agent-rule-title,
.membership-card .membership-price > span[style] {
  color: var(--tech-accent) !important;
}
.membership-card .membership-price strong,
.membership-card.membership-agent .membership-price strong { color: #58e7f3; }
.membership-card .membership-original s { text-decoration-color: var(--tech-muted); }
.membership-card.membership-agent .membership-original,
.membership-card.membership-agent .membership-agent-contact,
.membership-card.membership-agent .membership-agent-contact strong { color: var(--tech-copy); }
.membership-card .membership-action,
.membership-card.membership-agent .membership-action {
  border-color: var(--tech-border);
  background: #125a77;
}
.membership-card .membership-action:hover,
.membership-card.membership-agent .membership-action:hover { background: #1682a4; }

.membership-invite-rewards {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(89, 237, 241, .32);
}
.membership-invite-rewards > p {
  margin: 0 0 12px;
  color: var(--tech-accent);
  font-size: 18px;
  font-weight: 800;
}
.membership-invite-rewards ul { margin-bottom: 0; }

@media (max-width: 760px) {
  .hero-product-copy h1 span,
  .product-proof-head h2 { white-space: normal; }
  .hero-product-copy h1 { font-size: clamp(40px, 13vw, 58px); }
}

@media (max-width: 1420px) {
  .membership-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .membership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .membership-section .section-heading,
  .membership-section .membership-grid,
  .membership-section .membership-note { width: min(100% - 28px, 560px); }
  .membership-grid { grid-template-columns: 1fr; }
}