/* v5 layer: segmented controls, single-stage tab visuals, text-led figures, phone close-up CTA. */

/* 1–2. Premium pill segmented control */
.scene .seg {
  position: relative; display: flex !important; gap: 0; width: max-content; max-width: 100%;
  padding: 4px; margin: 0 auto 36px !important; border: 1px solid rgb(242 245 243 / .14) !important;
  border-radius: 999px; background: rgb(242 245 243 / .035);
}
.scene .seg button, .scene .seg button:first-child {
  position: relative; z-index: 1; min-height: 44px; padding: 10px 22px !important; border: 0 !important;
  border-radius: 999px; background: none; color: #b8c2bc; font-size: 13px; font-weight: 500; letter-spacing: .01em;
  overflow: hidden; transition: color .35s cubic-bezier(.16,1,.3,1);
}
.scene .seg button:hover { color: var(--text); }
.scene .seg button[aria-pressed=true] { color: #04130b; }
.seg-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--emerald);
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset; pointer-events: none;
  transition: transform .5s cubic-bezier(.16,1,.3,1), width .5s cubic-bezier(.16,1,.3,1);
}
/* auto-cycle progress on active pill */
.seg button::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 2px;
  background: rgb(4 19 11 / .45); transform: scaleX(0); transform-origin: left; opacity: 0;
}
.seg.cycling button[aria-pressed=true]::after { opacity: 1; animation: seg-progress var(--cycle, 5s) linear forwards; }
@keyframes seg-progress { to { transform: scaleX(1); } }
.seg.cycling.paused button::after { animation-play-state: paused; }

/* Single stage: the active tab owns the whole visual at every width. */
.enhanced .lens:not(.is-active), .enhanced [data-curve-panel]:not(.is-active) { display: none !important; }
.enhanced .lens-grid, .enhanced .curve-grid { display: block !important; max-width: 880px; margin-inline: auto; min-height: 0 !important; }
.enhanced .lens-grid { min-height: 330px !important; }
.enhanced .lens { text-align: left; }
.enhanced .lens .figure, .enhanced .prob-pair strong { font-size: clamp(56px, 6vw, 84px); }
.enhanced .spark { height: 200px; }
.enhanced .range-plot { padding-top: 80px; }
.enhanced .curve-grid { max-width: 980px; }
.enhanced .curve-grid .rates { height: 260px; }
.lens-explanation, .curve-explanation { max-width: 880px !important; margin-inline: auto !important; text-align: center !important; font: 400 20px/1.45 var(--serif) !important; color: #dfe5e1 !important; }
.curve-explanation { max-width: 980px !important; }
.lenses .disclosure, .curves .disclosure { text-align: center !important; }

/* 5a. Text-led section: large figures, no tabs */
.ai-figures { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 56px; margin-top: 12px; }
.ai-fig { border-top: 1px solid rgb(242 245 243 / .16); padding-top: 24px; }
.ai-fig .eyebrow { color: var(--emerald); }
.ai-big { display: block; margin-top: 16px; font: italic 400 clamp(48px, 5vw, 76px)/1 var(--serif); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ai-big i { color: var(--emerald); font-style: normal; }
.ai-fig small { display: block; margin-top: 12px; font-size: 12px; color: #c6cfc9; }
.ai-fig p { margin-top: 16px; font-size: 14px; line-height: 1.65; color: #b8c2bc; max-width: 340px; }
.economics .disclosure { text-align: center !important; margin-top: 44px !important; }

/* 5b + 6. Closing: phone close-up beside the invitation and CTA */
.join-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; max-width: 1080px; margin-inline: auto; }
.join-phone { margin: 0; display: flex; justify-content: center; }
.join-phone img { width: min(300px, 100%); height: auto; filter: drop-shadow(0 40px 60px rgb(0 0 0 / .6)); }
.closing .invitation { min-height: 0 !important; text-align: left; }
.closing .invitation > img { margin: 0 0 24px !important; width: 72px; height: 72px; }
.closing .invitation h2 { margin: 0 !important; }
.closing .availability { margin: 26px 0 6px !important; }
.closing > .scenery img { opacity: .35 !important; }
.early-access { margin-top: 30px; max-width: 520px; }
.early-access label { display: block; font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--emerald); margin-bottom: 14px; }
.ea-row { display: flex; gap: 8px; padding: 6px; border: 1px solid rgb(242 245 243 / .2); border-radius: 999px; background: rgb(242 245 243 / .04); transition: border-color .3s; }
.ea-row:focus-within { border-color: var(--emerald); }
.ea-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 18px; border: 0; background: none; color: var(--text); font-size: 15px; outline: none; }
.ea-row input::placeholder { color: #7f8a84; }
.ea-row .primary { border-radius: 999px; border: 0; min-height: 48px; white-space: nowrap; }
.ea-note { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.ea-note.err { color: #e7b04a; }

@media (max-width: 1000px) {
  .ai-figures { gap: 32px; }
}
@media (max-width: 700px) {
  .scene .seg { display: flex !important; width: 100%; }
  .scene .seg button, .scene .seg button:first-child { flex: 1 1 0; padding: 8px 6px !important; font-size: 12px; line-height: 1.2; }
  .enhanced .lens .figure, .enhanced .prob-pair strong { font-size: 58px; }
  .enhanced .lens-grid { min-height: 300px !important; }
  .lens-explanation, .curve-explanation { font-size: 17px !important; text-align: left !important; }
  .lenses .disclosure, .curves .disclosure, .economics .disclosure { text-align: left !important; }
  .ai-figures { grid-template-columns: 1fr; gap: 28px; }
  .ai-big { font-size: 52px; }
  .join-grid { grid-template-columns: 1fr; gap: 32px; }
  .join-phone { order: 2; }
  .join-phone img { width: 210px; }
  .ea-row { flex-direction: column; border-radius: 20px; }
  .ea-row .primary { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .seg-ind { transition: none; }
  .seg button::after { display: none; }
}
html.motion-paused .seg-ind { transition: none; }
html.motion-paused .seg button::after { display: none; }