@import url("design-system.css");

.section { padding: clamp(80px, 12vw, 160px) var(--page-gutter); position: relative; }

.section--dark { background: var(--bg-dark); color: var(--fg-inverse); }

.section--page { background: var(--bg-page); }

.btn-arrow { margin-left: 8px; width: 14px; height: 14px; }

.hero { background: rgb(0, 0, 0); color: rgb(255, 255, 255); min-height: 100svh; padding: 0 var(--page-gutter) clamp(60px, 8vw, 100px); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }

.hero-video { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }

.hero::after { content: ""; position: absolute; inset: 0px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 28%), linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.3) 42%, rgba(0, 0, 0, 0) 70%); }

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0px, 2fr) minmax(280px, 1fr); gap: 0px clamp(40px, 6vw, 96px); align-items: end; width: 100%; padding-top: 60px; margin-bottom: clamp(80px, 16vh, 180px); }

.hero-inner > .eyebrow, .hero-inner > .hero-title, .hero-inner > .hero-sub, .hero-inner > .hero-cta { grid-column: 1; }

.hero-inner > .hero-outcomes { grid-area: 1 / 2 / span 4; place-self: end; }

.hero-outcomes { display: flex; flex-direction: column; gap: 28px; max-width: 380px; width: 100%; list-style: none; margin: 0px; padding: 0px; }

.eyebrow, .hero-sub { text-align: left; place-self: start; }

.eyebrow { display: flex; align-items: center; gap: 18px; font-size: 22px; font-weight: 600; text-transform: uppercase; margin-bottom: 32px; background: linear-gradient(90deg, rgb(225, 29, 44) 0%, rgb(255, 138, 107) 100%) text; -webkit-text-fill-color: transparent; color: transparent; }

.eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: rgb(225, 29, 44); -webkit-text-fill-color: initial; flex: 0 0 auto; }

.hero-title { font-family: "PP Mori", system-ui, sans-serif; font-weight: 600; font-size: clamp(40px, 4.5vw, 76px); letter-spacing: var(--tracking-display); line-height: 0.98; margin: 0px 0px 22px; color: rgb(255, 255, 255); }

.hero-title br.hide-mobile { display: none; }

@media (min-width: 1280px) {
  .hero-title br.hide-mobile { display: inline; }
}

.hero-sub { font-size: 18px; line-height: 1.25; color: rgba(255, 255, 255, 0.78); margin: 0px 0px 28px; }

.hero-sub b { font-weight: 600; color: rgb(255, 255, 255); }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-outcomes { display: flex; flex-direction: column; gap: 28px; padding-bottom: 10px; justify-self: end; max-width: 360px; width: 100%; }

.outcome { display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; color: rgb(255, 255, 255); }

.outcome .num { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.55); padding-top: 2px; }

.outcome .label { font-size: 18px; line-height: 1.3; font-weight: 400; }

.logos { background: rgb(0, 0, 0); color: rgb(255, 255, 255); padding: 48px 0px 60px; }

.logos-track { overflow: hidden; width: 100%; margin-bottom: 18px; }

.logos-track:last-child { margin-bottom: 0px; }

.logos-track-scroll { display: flex; width: max-content; }

.logos-track--rtl .logos-track-scroll { animation: 32s linear 0s infinite normal none running marquee-rtl; }

.logos-track--ltr .logos-track-scroll { animation: 28s linear 0s infinite normal none running marquee-ltr; }

.logos-track-inner { display: flex; align-items: center; gap: 56px; padding-right: 56px; flex-shrink: 0; }

.logo-item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.5; }

.lw { font-family: "PP Mori", system-ui, sans-serif; color: rgb(255, 255, 255); white-space: nowrap; display: block; }

.lw-a { font-size: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.lw-b { font-size: 18px; font-weight: 600; letter-spacing: 0.01em; }

.lw-c { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }

@keyframes marquee-rtl { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-ltr { 
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0px); }
}

.meet { background: var(--bg-page); padding: clamp(90px, 12vw, 160px) var(--page-gutter) clamp(40px, 6vw, 80px); }

.meet-title { text-align: center; font-size: clamp(40px, 6vw, 80px); font-weight: 600; letter-spacing: var(--tracking-display); margin: 0px 0px 30px; line-height: 1.05; }

.meet-title .spark-inline { display: inline-block; vertical-align: top; width: clamp(28px, 3.2vw, 42px); height: clamp(28px, 3.2vw, 42px); color: var(--treel-violet); margin-left: 6px; }

.meet-sub { text-align: center; max-width: 780px; margin: 0px auto; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.45; color: var(--fg-1); }

.feature-grid { padding: clamp(40px, 6vw, 80px) var(--page-gutter) clamp(80px, 12vw, 160px); background: var(--bg-page); }

.fg-row { display: grid; gap: 20px; max-width: var(--page-max); margin: 0px auto 20px; }

.fg-row--3 { grid-template-columns: repeat(3, 432px); justify-content: center; }

.fg-row--2 { grid-template-columns: 1.7fr 1fr; }

.fg-grid { display: grid; gap: 20px; justify-content: center; margin: 0px auto; max-width: var(--page-max); grid-template-columns: repeat(3, minmax(0px, 1fr)); grid-template-rows: 440px auto; grid-template-areas: "a b c" "d d c"; }

.fg-cell-a { grid-area: a; }

.fg-cell-b { grid-area: b; }

.fg-cell-c { grid-area: c; }

.fg-cell-d { grid-area: d; }

.fcard.fg-cell-a, .fcard.fg-cell-b { min-height: 0px; height: 440px; }

.fcard.fg-cell-a, .fcard.fg-cell-b, .fcard.fcard--growth { border: 1px solid rgb(232, 232, 232); }

.fcard.fg-cell-a, .fcard.fg-cell-b { padding-top: 24px; padding-left: 30px; padding-right: 30px; }

.fcard.fg-cell-a .fcard-photo, .fcard.fg-cell-b .fcard-photo { margin-left: -30px; margin-right: -30px; width: calc(100% + 60px); }

.fcard.fg-cell-a > h3, .fcard.fg-cell-b > h3 { margin-bottom: 8px; }

.fcard.fg-cell-c { min-height: 0px; }

.fcard.fg-cell-d { min-height: 330px; height: auto; padding-bottom: 30px; }

.fcard--growth .growth-brand { display: flex; align-items: center; justify-content: center; padding: 12px 0px 32px; }

.fcard--growth .growth-brand img { width: 100px; height: auto; }

.fcard--growth .growth-body { margin: auto 0px; display: flex; flex-direction: column; gap: 18px; }

.fcard--growth .growth-body h3 { font-size: 52px; text-align: center; line-height: 0.98; letter-spacing: -0.01em; margin: 0px; }

.fcard--growth .growth-body p { font-size: 18px; text-align: center; margin: 0px; }

.fcard--growth .growth-body .chat-input { margin-top: 4px; }

.fcard--growth .growth-body .growth-chat-img { width: 100%; height: auto; display: block; }

.fcard { background: var(--bg-card); border-radius: 45px; padding: 32px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; }

.fcard h3 { font-size: 36px; font-weight: 600; margin: 0px 0px 16px; }

.fcard p { font-size: 18px; font-weight: 400; line-height: 1.45; color: var(--fg-1); margin: 0px 0px 18px; }

.fcard .fcard-art { margin-top: auto; border-radius: var(--r-lg); overflow: hidden; position: relative; }

.fcard--brand { background: linear-gradient(160deg, rgb(247, 247, 247) 0%, rgb(227, 227, 227) 55%, rgb(255, 122, 51) 100%); display: flex; align-items: flex-start; justify-content: flex-start; }

.fcard--brand .brand-lg { position: relative; z-index: 2; display: inline-flex; }

.fcard--brand .brand-lg img { height: 36px; width: auto; }

.fcard--brand .brand-wash { position: absolute; bottom: -20%; right: -15%; width: 80%; aspect-ratio: 1 / 1; background: radial-gradient(closest-side, rgba(255, 106, 31, 0.45), transparent 70%); border-radius: 50%; }

.fcard--brand .brand-stripes { position: absolute; inset: 30% -10% -10%; background: repeating-linear-gradient(120deg, transparent 0px, transparent 32px, rgba(255, 106, 31, 0.05) 32px, rgba(255, 106, 31, 0.05) 36px); mask: linear-gradient(transparent 0%, rgb(0, 0, 0) 30%, rgb(0, 0, 0) 80%, transparent 100%); pointer-events: none; }

.fcard--gradient { background: url("../assets/webmobile-bg.webp") center center / cover no-repeat rgb(194, 65, 12); color: rgb(255, 255, 255); min-height: 480px; }

.fcard--gradient h3 { color: rgb(255, 255, 255); }

.fcard--gradient p { color: rgba(255, 255, 255, 0.88); }

.fcard--growth { background: url("../assets/growth-bg-v3.webp") center center / cover no-repeat rgb(243, 243, 243); color: rgb(35, 35, 35); min-height: 480px; }

.fcard--growth h3 { color: var(--fg-1); }

.fcard--growth p { color: var(--fg-1); }

.fcard-photo { margin: 16px -32px -32px; width: calc(100% + 64px); flex: 1 1 auto; min-height: 0px; overflow: hidden; }

.fcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }

.fcard-photo--notif { flex: 1 1 auto; min-height: 0px; height: auto; margin-top: 0px; }

.fcard-photo--notif img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

.notif-card { margin-top: auto; background: rgb(255, 255, 255); border-radius: var(--r-lg); padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-card); font-size: 16px; position: relative; }

.notif-card::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); z-index: -1; }

.notif-stack { position: relative; margin-top: auto; }

.notif-stack .notif-back { position: absolute; left: 12px; right: 12px; top: -12px; background: rgb(255, 255, 255); border-radius: var(--r-lg); height: 40px; box-shadow: var(--shadow-card); opacity: 0.7; }

.notif-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, rgb(255, 122, 51), rgb(255, 106, 31)); flex: 0 0 auto; }

.notif-card .meta { font-size: 11px; color: var(--treel-magenta); font-weight: 600; }

.notif-card .body { font-size: 16px; font-weight: 600; }

.notif-spark { margin-left: auto; width: 16px; height: 16px; color: var(--treel-violet); }

.notif-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--treel-magenta); color: rgb(255, 255, 255); display: inline-flex; align-items: center; justify-content: center; }

.fcard .chat-input, .fcard--growth .growth-body .chat-input { margin-top: auto; }

.fcard.fg-cell-d { display: grid; grid-template-columns: 1fr 390px; grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; }

.fcard.fg-cell-d > h3, .fcard.fg-cell-d > p, .fcard.fg-cell-d > .hero-cta { grid-column: 1; }

.fcard.fg-cell-d > h3 { margin-bottom: 8px; line-height: 1.1; }

.fcard.fg-cell-d > p { font-size: 16px; line-height: 1.45; }

.fcard.fg-cell-d > .hero-cta { grid-row: 3; align-self: end; flex-wrap: nowrap; gap: 8px; }

.fcard.fg-cell-d > .hero-cta .btn { padding: 0px 14px; white-space: nowrap; }

.fcard.fg-cell-d > .photo-stack { grid-area: 1 / 2 / span 3; place-self: end; width: 100%; height: auto; min-height: 0px; margin: 0px -2px -30px 0px; display: block; }

.fcard.fg-cell-d > .photo-stack img { width: 100%; height: auto; display: block; margin: 0px; }

.fcard--gradient .photo-stack .ps { width: 110px; height: 150px; }

.fcard--gradient .photo-stack .ps-1 { left: 0px; bottom: 4px; }

.fcard--gradient .photo-stack .ps-2 { left: 22%; bottom: 28px; }

.fcard--gradient .photo-stack .ps-3 { left: 44%; bottom: 4px; }

.photo-stack { margin-top: auto; position: relative; height: 220px; }

.photo-stack .ps { position: absolute; width: 130px; height: 170px; border-radius: 14px; background-size: cover; background-position: center center; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 32px; }

.photo-stack .ps-1 { left: 8%; bottom: 0px; transform: rotate(-9deg); }

.photo-stack .ps-2 { left: 32%; bottom: 18px; transform: rotate(6deg); z-index: 2; }

.photo-stack .ps-3 { left: 58%; bottom: 0px; transform: rotate(-4deg); }

.outcomes { background: radial-gradient(120% 80% at 8% 0%, rgba(255, 255, 255, 0.85) 0%, transparent 55%), linear-gradient(168deg, rgb(238, 238, 238) 0%, rgb(219, 219, 219) 45%, rgb(255, 122, 51) 100%); padding: clamp(80px, 10vw, 140px) var(--page-gutter); position: relative; overflow: hidden; }

.outcomes-inner { width: 100%; position: relative; }

.outcomes h2 { font-size: clamp(34px, 5.2vw, 52px); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.1; margin: 0px 0px 32px; max-width: 1100px; }

.outcomes-eyebrow { font-size: clamp(18px, 2.4vw, 28px); color: var(--fg-1); margin-bottom: 56px; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 60px; }

.stat .num { font-size: clamp(56px, 9vw, 94px); font-weight: 600; line-height: 1; color: var(--fg-1); margin-bottom: 12px; }

.stat .lbl { color: var(--treel-violet); font-weight: 600; text-transform: uppercase; font-size: clamp(16px, 1.8vw, 22px); }

.verified { display: inline-flex; align-items: center; gap: 14px; color: var(--fg-2); font-size: 18px; }

.verified .sun { color: var(--fg-1); display: block; height: 36px; width: auto; }

.outcomes-loop { position: absolute; right: -4%; top: 30%; width: 46%; max-width: 720px; pointer-events: none; z-index: 0; animation: 12s ease-in-out 0s infinite alternate none running loop-drift; }

@keyframes loop-drift { 
  0% { transform: rotate(0deg) translate(0px, 0px); }
  100% { transform: rotate(-6deg) translate(-12px, 14px); }
}

.modules { padding: clamp(80px, 12vw, 160px) var(--page-gutter); background: var(--bg-page); }

.modules-eyebrow { text-align: center; font-size: clamp(16px, 1.6vw, 19px); font-weight: 600; color: var(--fg-3); letter-spacing: var(--tracking-tight); margin: 0px auto 12px; }

.modules h2 { text-align: center; font-size: clamp(40px, 6vw, 80px); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1; margin: 0px auto 80px; max-width: 14ch; }

.module { max-width: var(--page-max); margin: 0px auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; padding: clamp(60px, 9vw, 120px) 0px; }

.module--reverse .module-text { order: 2; }

.module--reverse .module-art { order: 1; }

.module h3 { font-size: clamp(34px, 5.2vw, 52px); font-weight: 600; letter-spacing: var(--tracking-tight); margin: 0px 0px 22px; line-height: 1; }

.module .cat { display: block; color: var(--treel-magenta); text-transform: uppercase; font-weight: 600; font-size: 16px; margin-bottom: 22px; }

.module p { font-size: 18px; line-height: 1.45; font-weight: 400; color: var(--fg-1); margin: 0px 0px 32px; max-width: 46ch; text-wrap: pretty; }

.module .funfact { margin-top: -10px; margin-bottom: 28px; font-size: 16px; }

.module .funfact b { font-weight: 600; }

.module .funfact .ff-label { display: block; font-weight: 600; color: var(--fg-1); margin-bottom: 6px; }

.module .funfact .ff-stat { color: var(--treel-violet); font-weight: 600; }

.module-art { display: flex; justify-content: center; align-items: center; min-height: 360px; }

.pulse-video, .storefront-video { width: 100%; max-width: 580px; border-radius: var(--r-2xl); overflow: hidden; background: linear-gradient(140deg, rgb(239, 239, 239) 0%, rgb(255, 122, 51) 60%, rgb(255, 122, 51) 100%); aspect-ratio: 16 / 10; }

.pulse-video video, .storefront-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

.coach-video, .beacon-video { width: 100%; max-width: 580px; display: flex; }

.coach-video video, .beacon-video video { display: block; width: 100%; height: auto; }

.modules .see-details, .modules .see-details:hover { box-shadow: none; }

.products-card { background: linear-gradient(140deg, rgb(239, 239, 239) 0%, rgb(213, 213, 213) 60%, rgb(255, 122, 51) 100%); border-radius: var(--r-2xl); padding: 22px; box-shadow: var(--shadow-card); width: 100%; max-width: 580px; }

.products-card .ph { color: var(--fg-1); font-size: 16px; font-weight: 600; margin-bottom: 14px; }

.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.products-grid .item { background: rgb(255, 255, 255); border-radius: var(--r-md); padding: 10px 10px 12px; font-size: 11px; position: relative; }

.products-grid .item .tag { position: absolute; top: 8px; left: 8px; background: var(--treel-coral); color: rgb(255, 255, 255); border-radius: var(--r-pill); padding: 2px 8px; font-size: 10px; font-weight: 600; }

.products-grid .item .tag--alt { background: var(--fg-1); }

.products-grid .item .tag--blue { background: var(--treel-violet-2); }

.products-grid .item .thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-sm); background: linear-gradient(140deg, rgb(235, 235, 235), rgb(255, 122, 51)); margin-bottom: 8px; }

.products-grid .item .name { font-weight: 600; color: var(--fg-1); }

.products-grid .item .price { color: var(--fg-2); margin-top: 2px; }

.products-grid .item .desc { color: var(--fg-2); font-size: 10px; line-height: 1.3; margin-top: 4px; }

.products-grid .item .cart-btn { position: absolute; right: 8px; top: 70px; width: 22px; height: 22px; border-radius: 50%; background: var(--treel-magenta); color: rgb(255, 255, 255); display: inline-flex; align-items: center; justify-content: center; box-shadow: rgba(229, 20, 42, 0.4) 0px 4px 10px; }

.module .chat-input { margin-top: 0px; max-width: 480px; font-size: 18px; padding: 18px 22px; box-shadow: rgba(255, 106, 31, 0.18) 0px 0px 0px 8px, rgba(255, 106, 31, 0.18) 0px 0px 30px; }

.phone { width: 280px; aspect-ratio: 9 / 19; border-radius: 44px; background: rgb(12, 12, 12); position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 24px 60px; padding: 14px; overflow: hidden; }

.phone .status { display: flex; justify-content: space-between; color: rgb(255, 255, 255); font-size: 11px; padding: 4px 14px 8px; }

.phone .clock { text-align: center; color: rgb(255, 255, 255); font-size: 92px; font-weight: 600; line-height: 1; margin-top: 26px; }

.phone .date { text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 13px; margin-top: 8px; }

.phone .lock-icon { width: 16px; height: 16px; margin: 4px auto 12px; color: rgba(255, 255, 255, 0.7); display: block; }

.phone .wallpaper { position: absolute; inset: 0px; background: radial-gradient(circle at 30% 110%, rgb(255, 122, 51) 0%, transparent 35%), radial-gradient(circle at 75% 95%, rgb(255, 106, 31) 0%, transparent 40%), radial-gradient(circle at 90% 60%, rgb(229, 20, 42) 0%, transparent 40%), linear-gradient(rgb(12, 12, 12) 0%, rgb(23, 23, 23) 100%); z-index: 0; border-radius: 44px; }

.phone .wallpaper-art { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 50%; background: radial-gradient(circle at 30% 30%, rgb(255, 122, 51) 0%, transparent 40%), radial-gradient(circle at 70% 60%, rgb(255, 106, 31) 0%, transparent 45%), radial-gradient(circle at 50% 90%, rgb(255, 106, 31) 0%, transparent 45%); filter: contrast(1.1) saturate(1.2); }

.phone .phone-inner { position: relative; z-index: 1; }

.phone .notif-coach { position: absolute; left: 16px; right: 16px; bottom: 24px; background: rgb(255, 255, 255); border-radius: var(--r-lg); padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-card); }

.phone .notif-coach .thumb { width: 36px; height: 36px; border-radius: var(--r-sm); background: linear-gradient(135deg, rgb(255, 106, 31), rgb(194, 65, 12)); flex: 0 0 auto; }

.phone .notif-coach .meta { font-size: 10px; color: var(--treel-magenta); font-weight: 600; }

.phone .notif-coach .body { font-size: 13px; font-weight: 600; color: var(--fg-1); line-height: 1.2; }

.phone .notif-coach .spark { width: 16px; height: 16px; color: var(--treel-violet); margin-left: auto; }

.phone .notif-coach .check { width: 22px; height: 22px; border-radius: 50%; background: var(--treel-magenta); color: rgb(255, 255, 255); display: inline-flex; align-items: center; justify-content: center; }

.glance { background: radial-gradient(at 100% 50%, rgba(255, 106, 31, 0.55) 0%, rgba(255, 106, 31, 0) 50%), radial-gradient(at 0% 80%, rgba(255, 106, 31, 0.45) 0%, rgba(255, 106, 31, 0) 50%), rgb(0, 0, 0); color: rgb(255, 255, 255); padding: clamp(80px, 12vw, 160px) var(--page-gutter); position: relative; overflow: hidden; }

.glance h2 { text-align: center; font-size: clamp(40px, 6vw, 80px); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.05; margin: 0px auto 80px; max-width: 18ch; }

.glance h2 .gradient-text { background: linear-gradient(95deg, rgb(232, 251, 212) 0%, rgb(232, 232, 232) 50%, rgb(255, 255, 255) 100%) text; color: transparent; }

.diagram { position: relative; max-width: 1100px; margin: 0px auto; height: 720px; }

.diagram .rings { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 360px; height: 360px; }

.diagram .ring { position: absolute; border-radius: 50%; background: radial-gradient(at 50% 30%, rgba(255, 77, 61, 0.85) 0%, rgba(255, 106, 31, 0.6) 60%, rgba(194, 65, 12, 0.9) 100%); box-shadow: rgba(255, 106, 31, 0.4) 0px 30px 60px, rgba(0, 0, 0, 0.4) 0px -20px 40px inset, rgba(255, 255, 255, 0.18) 0px 20px 30px inset; border: 1px solid rgba(255, 255, 255, 0.08); }

.diagram .r1 { inset: 0px; }

.diagram .r2 { inset: 14%; opacity: 0.85; }

.diagram .r3 { inset: 28%; opacity: 0.9; }

.diagram .r-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--treel-magenta); left: 50%; top: 12%; transform: translateX(-50%); box-shadow: 0 0 12px var(--treel-magenta); }

.gnode { position: absolute; background: rgba(0, 0, 0, 0.5); border: 1.5px solid; border-radius: var(--r-lg); padding: 16px 20px; width: 240px; backdrop-filter: blur(4px); }

.gnode .label { font-size: 13px; font-weight: 600; text-transform: uppercase; color: rgb(255, 255, 255); margin-bottom: 8px; }

.gnode .desc { font-size: 16px; color: rgba(255, 255, 255, 0.85); line-height: 1.35; }

.gnode--magenta { border-color: var(--treel-magenta); box-shadow: rgba(229, 20, 42, 0.25) 0px 0px 28px, rgba(229, 20, 42, 0.4) 0px 0px 0px 1px inset; }

.gnode--violet { border-color: var(--treel-violet); box-shadow: rgba(255, 106, 31, 0.25) 0px 0px 28px, rgba(255, 106, 31, 0.4) 0px 0px 0px 1px inset; }

.gn-pulse { left: 4%; top: 28%; }

.gn-beacon { left: 50%; top: 4%; transform: translateX(-50%); }

.gn-storefront { right: 4%; top: 28%; }

.gn-hub { left: 8%; bottom: 18%; }

.gn-coach { right: 8%; bottom: 18%; }

.gn-lizzie { left: 1%; bottom: 18%; }

.diagram-svg { position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; }

.tests { background: var(--bg-page); padding: clamp(80px, 12vw, 160px) var(--page-gutter); }

.tests h2 { text-align: center; font-size: clamp(34px, 5.2vw, 52px); font-weight: 600; letter-spacing: var(--tracking-tight); margin: 0px 0px 80px; }

.tests-grid { max-width: var(--page-max); margin: 0px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px 40px; }

.test { text-align: center; }

.stars { display: flex; justify-content: center; gap: 4px; color: rgb(255, 122, 51); margin-bottom: 26px; font-size: 22px; }

.test .quote { font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--fg-1); margin: 0px 0px 30px; max-width: 22ch; margin-inline: auto; }

.test .name { text-transform: uppercase; font-weight: 600; font-size: 16px; color: var(--fg-1); margin-bottom: 6px; }

.test .role { color: var(--fg-2); font-size: 16px; }

.cta-wrap { background: var(--bg-page); padding: 0 var(--page-gutter) clamp(80px, 12vw, 140px); }

.cta-card { width: 100%; border-radius: var(--r-2xl); background: radial-gradient(at 100% 100%, rgb(255, 122, 51) 0%, transparent 50%), linear-gradient(115deg, rgb(229, 20, 42) 0%, rgb(255, 106, 31) 50%, rgb(255, 106, 31) 100%); padding: clamp(40px, 5vw, 64px); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); color: rgb(255, 255, 255); }

.cta-card h2 { font-size: clamp(34px, 5.2vw, 52px); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.05; margin: 0px 0px 24px; max-width: 18ch; }

.cta-card p { font-size: clamp(18px, 2.4vw, 28px); line-height: 1.25; margin: 0px 0px 32px; color: rgba(255, 255, 255, 0.94); max-width: 44ch; }

.cta-card .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.cta-card .footnote { margin-top: 32px; font-size: 18px; color: rgba(255, 255, 255, 0.78); }

.pulse-cta-wrap { background: var(--bg-page); padding: 0 var(--page-gutter) clamp(80px, 12vw, 140px); display: flex; justify-content: center; }

.pulse-cta-card { position: relative; width: 100%; max-width: 1320px; border-radius: 60px; overflow: hidden; background: linear-gradient(135deg, var(--treel-magenta) 0%, var(--treel-orange) 100%); color: rgb(255, 255, 255); min-height: 562px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; padding: 60px; gap: 40px; }

.pulse-cta-copy { position: relative; z-index: 1; max-width: 580px; }

.pulse-cta-copy h2 { margin: 0px 0px 24px; font-size: clamp(34px, 4.2vw, 52px); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.08; color: rgb(255, 255, 255); }

.pulse-cta-copy p { margin: 0px 0px 32px; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.21; color: rgb(255, 255, 255); }

.pulse-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.pulse-cta-card .footnote { margin-top: 28px; font-size: 18px; color: rgba(255, 255, 255, 0.8); }

.pulse-cta-art { position: relative; z-index: 1; place-self: end; width: 100%; max-width: 613px; margin: 0px -60px -60px 0px; }

.pulse-cta-art img { width: 100%; height: auto; display: block; }

.btn--cta-dark { background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.btn--cta-dark:hover { background: rgb(242, 242, 242); box-shadow: rgba(0, 0, 0, 0.18) 0px 10px 28px; }

.btn--cta-outline { background: rgba(255, 255, 255, 0.2); color: rgb(255, 255, 255); box-shadow: none; }

.btn--cta-outline:hover { background: rgba(255, 255, 255, 0.3); }

.cta-lizzie { background: rgb(255, 255, 255); border-radius: var(--r-xl); color: var(--fg-1); padding: 22px; place-self: center end; max-width: 520px; width: 100%; box-shadow: rgba(0, 0, 0, 0.18) 0px 24px 60px; }

.cta-lizzie .lh { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.cta-lizzie .spark { width: 22px; height: 22px; color: var(--treel-violet); }

.cta-lizzie .lh .ttl { font-weight: 600; color: var(--fg-1); }

.cta-lizzie .lh .actions { margin-left: auto; display: flex; gap: 8px; color: var(--fg-3); }

.cta-lizzie .lh .actions span { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-page); display: inline-flex; align-items: center; justify-content: center; }

.cta-lizzie .lbody { font-size: 16px; line-height: 1.4; color: var(--fg-1); margin-bottom: 16px; }

.cta-lizzie .row { display: flex; align-items: center; padding: 10px; border-top: 1px solid rgb(242, 242, 242); gap: 12px; }

.cta-lizzie .row .pic { width: 36px; height: 36px; border-radius: var(--r-sm); background: linear-gradient(135deg, rgb(211, 211, 211), rgb(255, 106, 31)); flex: 0 0 auto; }

.cta-lizzie .row .nm { font-weight: 600; font-size: 16px; }

.cta-lizzie .row .sub { font-size: 12px; color: var(--fg-2); }

.cta-lizzie .row .pr { margin-left: auto; font-weight: 600; }

.cta-lizzie .subtotal { display: flex; justify-content: space-between; align-items: center; padding: 12px 10px 8px; border-top: 1px solid rgb(242, 242, 242); font-size: 16px; font-weight: 600; }

.cta-lizzie .ask { font-size: 13px; color: var(--fg-2); margin: 8px 0px 12px; }

.cta-lizzie .checkout { background: linear-gradient(95deg, var(--treel-magenta) 0%, var(--treel-coral) 100%); color: rgb(255, 255, 255); height: 42px; padding: 0px 22px; border-radius: var(--r-pill); font-size: 16px; font-weight: 600; cursor: pointer; border: 0px; }

.cta-loop { position: absolute; right: -8%; bottom: -10%; width: 50%; pointer-events: none; opacity: 0.9; }

.blog { background: var(--bg-page); padding: clamp(72px, 10vw, 140px) var(--page-gutter) clamp(64px, 8vw, 110px); }

.blog-inner { max-width: var(--page-max); margin: 0px auto; }

.blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }

.blog-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; font-weight: 600; color: var(--treel-magenta); margin: 0px 0px 10px; }

.blog-head h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.08; margin: 0px; }

.blog-all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--fg-1); text-decoration: none; white-space: nowrap; transition: color 160ms var(--ease-spring, ease); }

.blog-all svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-spring, ease); }

.blog-all:hover { color: var(--treel-magenta); }

.blog-all:hover svg { transform: translateX(3px); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.blog-card { display: flex; flex-direction: column; background: var(--bg-card); border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden; text-decoration: none; color: inherit; transition: transform 220ms var(--ease-spring, ease), box-shadow 220ms var(--ease-spring, ease); }

.blog-card:hover { transform: translateY(-4px); box-shadow: rgba(18, 18, 18, 0.12) 0px 12px 32px; }

.blog-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, rgba(255, 122, 51, 0.3) 0%, rgba(255, 122, 51, 0.3) 100%); }

.blog-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 0%; }

.blog-tag { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0px 12px; border-radius: var(--r-pill); background: rgba(229, 20, 42, 0.1); color: var(--treel-magenta); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }

.blog-card h3 { font-size: 20px; font-weight: 600; line-height: 1.22; letter-spacing: var(--tracking-tight); margin: 0px; text-wrap: pretty; }

.blog-card p { font-size: 16px; line-height: 1.45; color: var(--fg-2); margin: 0px; }

.blog-meta { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); }

.blog-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); }

.sitemap { background: var(--bg-app); padding: clamp(56px, 7vw, 96px) var(--page-gutter) 8px; }

.sitemap-inner { max-width: var(--page-max); margin: 0px auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px 40px; }

.sitemap-brand { max-width: 280px; }

.sitemap-brand img { height: 30px; width: auto; margin-bottom: 18px; }

.sitemap-brand p { font-size: 16px; line-height: 1.5; color: var(--fg-2); margin: 0px 0px 22px; }

.sitemap-social { display: flex; gap: 10px; }

.sitemap-social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(57, 57, 57, 0.06); color: var(--fg-1); transition: background 160ms, color 160ms; }

.sitemap-social a:hover { background: var(--treel-magenta); color: rgb(255, 255, 255); }

.sitemap-social svg { width: 18px; height: 18px; }

.sitemap-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--fg-3); margin: 0px 0px 18px; }

.sitemap-col ul { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 12px; }

.sitemap-col a { font-size: 16px; color: var(--fg-1); text-decoration: none; transition: color 140ms; }

.sitemap-col a:hover { color: var(--treel-magenta); }

.sitemap-bottom { max-width: var(--page-max); margin: clamp(48px, 6vw, 72px) auto 0px; padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }

.sitemap-bottom .legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }

.sitemap-bottom a { font-size: 13px; color: var(--fg-2); text-decoration: none; transition: color 140ms; }

.sitemap-bottom a:hover { color: var(--fg-1); }

.sitemap-bottom .region { font-size: 13px; color: var(--fg-3); }

.site-footer { background: var(--bg-app); padding: 36px var(--page-gutter) 40px; text-align: center; color: var(--fg-2); font-size: 16px; }

.site-footer .brand { color: var(--fg-1); margin-bottom: 18px; }

.site-footer .brand img { height: 32px; width: auto; }

@media (prefers-reduced-motion: reduce) {
  .outcomes-loop { animation: auto ease 0s 1 normal none running none; }
}

@media (max-width: 1023px) {
  .hero-inner { grid-template-columns: minmax(0px, 1.6fr) minmax(220px, 1fr); gap: 0px 48px; padding-top: 160px; }
  .hero-outcomes { max-width: 320px; gap: 22px; }
  .fg-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); grid-template-rows: auto auto auto; grid-template-areas: "a b" "c c" "d d"; }
  .fcard.fg-cell-a, .fcard.fg-cell-b { height: auto; min-height: 380px; }
  .fcard.fg-cell-d { height: auto; min-height: 300px; }
  .module { grid-template-columns: 1fr; gap: 40px; padding: clamp(48px, 8vw, 96px) 0px; }
  .module .module-art { order: -1; }
  .module .module-text { order: 0; }
  .diagram { height: 620px; }
  .diagram .rings { width: 300px; height: 300px; }
  .gnode { width: 220px; padding: 14px 16px; }
  .gnode .desc { font-size: 13px; }
  .tests-grid { grid-template-columns: repeat(2, 1fr); gap: 60px 32px; }
  .blog-grid { gap: 24px; }
  .sitemap-inner { grid-template-columns: repeat(3, 1fr); }
  .sitemap-brand { grid-column: 1 / -1; max-width: 420px; }
  .cta-card { grid-template-columns: 1fr; }
  .cta-lizzie { justify-self: stretch; max-width: 100%; }
  .pulse-cta-row { flex-direction: column; align-items: stretch; }
  .pulse-cta-row .btn { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
  .hero { padding-bottom: 60px; }
  .hero-inner { display: flex; flex-direction: column; gap: 28px; padding-top: 140px; }
  .hero-inner > .eyebrow { order: 1; }
  .hero-inner > .hero-title { order: 2; margin-bottom: 0px; }
  .hero-inner > .hero-sub { order: 3; margin-bottom: 0px; }
  .hero-inner > .hero-outcomes { order: 4; }
  .hero-inner > .hero-cta { order: 5; }
  .hero-outcomes { max-width: none; width: 100%; justify-self: stretch; padding-bottom: 0px; gap: 24px; }
  .hero-cta { display: none; }
  .fg-grid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
  .fcard.fg-cell-a, .fcard.fg-cell-b, .fcard.fg-cell-c, .fcard.fg-cell-d { height: auto; min-height: 0px; }
  .fcard.fg-cell-d { grid-template-columns: 1fr; row-gap: 8px; padding-top: 30px; padding-left: 30px; padding-right: 30px; }
  .fcard.fg-cell-d > .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1; margin-top: 0px !important; }
  .fcard.fg-cell-d > .hero-cta .btn { flex: 1 1 auto; }
  .fcard.fg-cell-d > .photo-stack { position: static; grid-area: auto / 1; width: 100%; max-width: 100%; height: auto; right: auto; bottom: auto; margin-top: 16px; }
  .fcard { padding: 24px; }
  .fcard-photo { margin: 16px -24px -24px; width: calc(100% + 48px); }
  .stat-row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .products-card { padding: 16px; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .diagram { height: auto; padding: 0px; display: flex; flex-direction: column; gap: 12px; }
  .diagram .rings, .diagram .r-dot, .diagram-svg { display: none; }
  .gnode { position: static; width: 100%; inset: auto; transform: none !important; }
  .tests-grid { grid-template-columns: 1fr; gap: 56px; }
  .blog-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .blog-grid { grid-template-columns: 1fr; gap: 24px; }
  .sitemap-inner { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  .sitemap-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cta-card { padding: 36px 28px; border-radius: var(--r-xl); }
  .cta-card .cta-row { flex-direction: column; align-items: stretch; }
  .cta-card .cta-row .btn { justify-content: center; }
  .cta-lizzie { padding: 18px; }
  .pulse-cta-card { grid-template-columns: 1fr; padding: 40px; border-radius: 32px; min-height: 0px; }
  .cta-br { display: none; }
  .pulse-cta-art { margin: 0px -40px -40px; max-width: none; }
  .pulse-cta-row { flex-direction: column; align-items: stretch; }
  .pulse-cta-row .btn { width: 100%; justify-content: center; }
  .logos { padding-bottom: 40px; }
}

@media (max-width: 639px) {
  .hero { min-height: auto; padding-bottom: 56px; }
  .hero-inner { padding-top: 180px; gap: 36px; }
  .meet { padding-top: clamp(60px, 14vw, 90px); }
  .modules h2 { margin-bottom: 48px; }
  .module { padding: clamp(40px, 10vw, 72px) 0px; }
  .module-art { min-height: 0px; }
  .products-card { max-width: 100%; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .phone { width: 100%; max-width: 280px; }
  .cta-card .footnote { font-size: 16px; margin-top: 24px; }
  .logos-track-inner { gap: 40px; padding-right: 40px; }
  .test .quote { font-size: 19px; }
  .stars { font-size: 18px; margin-bottom: 18px; }
  .eyebrow { flex-wrap: wrap; gap: 10px; font-size: 16px; margin-bottom: 24px; }
  .site-footer { padding: 48px 20px 32px; }
}

@media (min-width: 1280px) {
  .outcomes-inner, .tests-grid, .fg-grid { max-width: var(--page-max); margin-left: auto; margin-right: auto; }
}

.bk-modal { position: fixed; inset: 0px; z-index: 1000; display: none; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 40px); font-family: var(--font-body); }

.bk-modal.is-open { display: flex; }

.bk-modal[aria-hidden="false"] { display: flex; }

.bk-scrim { position: absolute; inset: 0px; background: radial-gradient(circle at 30% 20%, rgba(255, 106, 31, 0.32), rgba(0, 0, 0, 0.78) 60%); backdrop-filter: blur(8px); animation: 0.22s ease-out 0s 1 normal none running bkFade; }

@keyframes bkFade { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes bkPop { 
  0% { opacity: 0; transform: translateY(14px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}

.bk-dialog { position: relative; width: min(960px, 100%); max-height: calc(-40px + 100vh); background: radial-gradient(70% 80% at 0% 0%, rgba(255, 106, 31, 0.22), transparent 60%), radial-gradient(60% 70% at 100% 100%, rgba(229, 20, 42, 0.18), transparent 60%) rgb(16, 16, 16); color: rgb(255, 255, 255); border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: rgba(0, 0, 0, 0.65) 0px 40px 120px, rgba(255, 255, 255, 0.04) 0px 0px 0px 1px; overflow: hidden; display: flex; animation: bkPop .26s var(--ease-spring, cubic-bezier(.2,.8,.2,1)); }

.bk-step { display: grid; grid-template-columns: 380px 1fr; width: 100%; min-height: 580px; max-height: calc(-40px + 100vh); }

.bk-step[hidden] { display: none !important; }

.bk-step--done { display: flex; align-items: center; justify-content: center; padding: 60px; text-align: center; }

.bk-step--done[hidden] { display: none !important; }

.bk-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.1); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; transition: background 160ms; }

.bk-close:hover { background: rgba(255, 255, 255, 0.16); }

.bk-side { padding: 40px 32px; background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); border-right: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; overflow-y: auto; }

.bk-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 28px; }

.bk-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--treel-magenta); box-shadow: 0 0 12px var(--treel-magenta); }

.bk-title { font-family: var(--font-display, var(--font-body)); font-size: 40px; line-height: 1.02; font-weight: 600; letter-spacing: -0.02em; margin: 0px 0px 16px; }

.bk-title--sm { font-size: 32px; }

.bk-lede { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); margin: 0px 0px 24px; }

.bk-meta { list-style: none; margin: auto 0px 0px; padding: 24px 0px 0px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

.bk-meta li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255, 255, 255, 0.85); }

.bk-meta svg { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.55); flex: 0 0 auto; }

.bk-tz { color: rgba(255, 255, 255, 0.55) !important; font-size: 12px !important; }

.bk-main { padding: 28px 32px; display: flex; flex-direction: column; overflow-y: auto; min-width: 0px; }

.bk-cal-head { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-bottom: 14px; padding-right: 48px; }

.bk-month { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; min-width: 132px; text-align: left; order: 0; }

.bk-cal-head .bk-nav:first-of-type { order: -1; }

.bk-cal-head .bk-nav:last-of-type { order: 1; margin-left: 0px; }

.bk-nav { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 160ms; }

.bk-nav:hover { background: rgba(255, 255, 255, 0.12); }

.bk-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.bk-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 6px; }

.bk-dow span { text-align: center; padding: 6px 0px; }

.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.bk-day { appearance: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; color: rgb(255, 255, 255); height: 40px; border-radius: 10px; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; font-variant-numeric: tabular-nums; cursor: pointer; position: relative; transition: background 140ms, color 140ms; }

.bk-day:hover:not(:disabled):not(.is-selected) { background: rgba(255, 255, 255, 0.08); }

.bk-day:disabled { color: rgba(255, 255, 255, 0.18); cursor: not-allowed; }

.bk-day--blank { visibility: hidden; }

.bk-day--avail::after { content: ""; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--treel-magenta); }

.bk-day.is-today { box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; }

.bk-day.is-selected { background: var(--treel-magenta); color: rgb(255, 255, 255); font-weight: 600; }

.bk-day.is-selected::after { background: rgb(255, 255, 255); }

.bk-slots-wrap { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; }

.bk-slots-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }

.bk-slots-label { font-size: 13px; color: rgba(255, 255, 255, 0.65); letter-spacing: -0.005em; }

.bk-slots-label b { color: rgb(255, 255, 255); font-weight: 600; }

.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; max-height: 144px; overflow-y: auto; padding-right: 4px; }

.bk-slots:empty::before { content: "Select a date to see available times"; grid-column: 1 / -1; font-size: 13px; color: rgba(255, 255, 255, 0.4); padding: 24px 0px; text-align: center; }

.bk-slot { appearance: none; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; font-variant-numeric: tabular-nums; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background 140ms, border-color 140ms; }

.bk-slot:hover { background: rgba(255, 255, 255, 0.12); }

.bk-slot.is-selected { background: var(--treel-magenta); border-color: var(--treel-magenta); font-weight: 600; }

.bk-step-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.bk-step-foot--form { grid-column: 1 / -1; }

.bk-summary { font-size: 13px; color: rgba(255, 255, 255, 0.7); display: inline-flex; align-items: center; gap: 8px; flex: 1 1 0%; min-width: 0px; }

.bk-summary svg { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.5); flex: 0 0 auto; }

.bk-summary b { color: rgb(255, 255, 255); font-weight: 600; }

#bkContinue:disabled { opacity: 0.35; pointer-events: none; }

.bk-side--compact { padding-top: 56px; }

.bk-back { appearance: none; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgba(255, 255, 255, 0.7); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 6px 8px; margin: 0px 0px 16px -8px; border-radius: 8px; align-self: flex-start; transition: background 140ms, color 140ms; }

.bk-back:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.06); }

.bk-card { margin-top: 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.bk-card-row { display: flex; align-items: flex-start; gap: 12px; }

.bk-card-row svg { width: 18px; height: 18px; color: var(--treel-magenta); flex: 0 0 auto; margin-top: 2px; }

.bk-card-lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 2px; }

.bk-card-val { font-size: 16px; color: rgb(255, 255, 255); font-weight: 600; }

.bk-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 16px; align-content: start; }

.bk-field { display: flex; flex-direction: column; grid-column: 1 / -1; }

.bk-field--half { grid-column: span 1; }

.bk-field label { font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }

.bk-field .bk-opt { color: rgba(255, 255, 255, 0.4); font-weight: 400; }

.bk-field input, .bk-field select, .bk-field textarea { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); border-radius: 12px; padding: 12px 14px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; font-family: inherit; transition: border-color 160ms, background 160ms; width: 100%; }

.bk-field textarea { resize: vertical; min-height: 84px; }

.bk-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff99' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.bk-field select option { background: rgb(27, 27, 27); color: rgb(255, 255, 255); }

.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus { outline: none; border-color: var(--treel-magenta); background: rgba(255, 255, 255, 0.08); }

.bk-field input::placeholder, .bk-field textarea::placeholder { color: rgba(255, 255, 255, 0.32); }

.bk-done-inner { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.bk-done-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-lizzie, linear-gradient(135deg, var(--treel-magenta), var(--treel-violet))); color: rgb(255, 255, 255); display: inline-flex; align-items: center; justify-content: center; box-shadow: rgba(229, 20, 42, 0.4) 0px 12px 36px; }

.bk-done-mark svg { width: 32px; height: 32px; }

.bk-done-card { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; text-align: left; margin: 8px 0px; }

.bk-side::-webkit-scrollbar, .bk-main::-webkit-scrollbar, .bk-slots::-webkit-scrollbar { width: 6px; }

.bk-side::-webkit-scrollbar-thumb, .bk-main::-webkit-scrollbar-thumb, .bk-slots::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }

body.bk-locked { overflow: hidden; }

@media (max-width: 820px) {
  .bk-step { grid-template-columns: 1fr; min-height: 0px; }
  .bk-side { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 32px 24px 24px; }
  .bk-meta { display: none; }
  .bk-main { padding: 24px; }
  .bk-title { font-size: 30px; }
  .bk-form { grid-template-columns: 1fr; }
  .bk-field--half { grid-column: 1 / -1; }
  .bk-step--done { padding: 40px 24px; }
}

@media (max-width: 540px) {
  .hero-title { font-size: clamp(34px, 9vw, 44px); }
  .meet-title { font-size: clamp(40px, 11vw, 52px); }
  .modules h2 { font-size: clamp(40px, 11vw, 56px); }
  .glance h2 { font-size: clamp(40px, 11vw, 56px); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

button,.btn,[class*="btn"],[class*="button"],a[role="button"],[role="button"]{font-weight:600!important}
.di-eyebrow,.hx-eyebrow,.hero-module-name,.bk-eyebrow,.nav-mega-label,.ag-brands-label,.ag-who-tag,.bk-slots-label,[class*="eyebrow"]{font-weight:600!important}