/* ================================
   BASE RESET & GLOBAL
   ================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  color: #1a1a1a;
  background: #F5F6FB;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* ================================
   SHARED UTILITIES
   ================================ */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ================================
   BUTTONS
   ================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-decoration: none;
  box-sizing: border-box;
}

.btn:hover {
  opacity: 0.88;
}

.btn--primary {
  width: 141px;
  height: 42px;
  padding: 0 20px;
  gap: 8px;
  background: linear-gradient(90.88deg, #4B3EA8 2.33%, #564BCF 97.86%);
  border: none;
  box-shadow:
    0px 2px 6px rgba(75, 62, 168, 0.18),
    0px 4px 4px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
}

/* ================================
   PAGE WRAPPER
   ================================ */
.page-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ================================
   NAV
   ================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 10px 20px 25px;
}

.nav__card {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 20px;
  gap: 10px;
  background: #ffffff;
  border-bottom: 1px solid #E4E7EC;
  box-shadow:
    0px 16px 24px rgba(152, 162, 179, 0.04),
    0px 8px 16px rgba(152, 162, 179, 0.08),
    0px 2px 4px rgba(42, 37, 64, 0.04),
    inset 0px 1px 0px rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  height: 95px;
}

.nav__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex: none;
}

/* TALEV logo with gradient underline */
.nav__logo-wrap {
  position: relative;
  width: 123px;
  height: 48px;
  flex: none;
}

.nav__logo {
  position: absolute;
  left: 0%;
  right: 28.33%;
  top: 0%;
  bottom: 29.17%;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  color: #0F172A;
  white-space: nowrap;
}

.nav__logo-line {
  position: absolute;
  left: 0%;
  right: 25%;
  top: 75%;
  bottom: 18.75%;
  background: linear-gradient(90deg, #378ADD 0%, #1D9E75 33%, #EF9F27 66%, #7F77DD 100%);
}

/* separator + product name */
.nav__copy {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 10px 21px 0;
  gap: 6px;
  height: 65px;
}

.nav__separator {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  color: #000000;
}

.nav__product {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  color: #4B5563;
}

.nav__spacer {
  flex: 1;
}

.nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

/* ================================
   HERO
   ================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  gap: 10px;
  border-radius: 20px;
}

.hero__bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 7px;
  width: 100%;
  height: 690px;
  background: linear-gradient(180deg, #EDF0FF 0%, #E2E7FA 100%);
  border-radius: 20px;
}

/* Headline */
.hero__headline-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  gap: 10px;
}

.hero__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.0002em;
  color: #1F2437;
  text-align: center;
}

/* Subtitle */
.hero__desc-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 10px 0;
  gap: 10px;
}

.hero__desc {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: #6B7280;
  text-align: center;
}

/* Spacers */
.hero__gap-sm { height: 22px; flex-shrink: 0; }
.hero__gap-md { height: 56px; flex-shrink: 0; }

/* ================================
   CAROUSEL
   ================================ */
.hero__carousel {
  width: 960px;
  height: 360px;
  background: #FFFFFF;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.carousel__track {
  flex: 1;
  overflow: hidden;
}

.carousel__slide {
  display: none;
  flex-direction: column;
  align-items: stretch;
  padding: 24px 30px 16px;
  gap: 16px;
  width: 100%;
}

.carousel__slide--active {
  display: flex;
}

.carousel__explainer {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #1F2437;
  text-align: center;
  margin-bottom: 20px;
  align-self: center;
}

.carousel__content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0 4px;
}

/* Dots */
.hero__dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px 20px 14px;
  gap: 8px;
  flex-shrink: 0;
}

.hero__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C7C9D9;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero__dot--active {
  background: #4B3EA8;
  transform: scale(1.2);
}

/* ================================
   SLIDE 1 — TRADE EXITS (mirrors app)
   ================================ */
.lp-exits {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-exits__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1F2437;
  padding: 0 4px;
  margin-bottom: 2px;
}

.lp-exits__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Outer sunken pill — mirrors .seg-ctrl */
.lp-seg-ctrl {
  background: #F7F9FD;
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  padding: 6px;
}

/* Inner row — mirrors .seg-inner */
.lp-seg-inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  min-height: 52px;
  gap: 7px;
  width: 100%;
  box-sizing: border-box;
}

/* Accent bar — full row height, floating pill with rounded ends */
.lp-accent-bar {
  flex-shrink: 0;
  width: 3px;
  align-self: stretch;
  margin: 8px 0;
  border-radius: 3px;
  background: transparent;
}

.lp-accent-bar--target {
  background: linear-gradient(180deg, #2BB673 0%, #1D9E75 100%);
  box-shadow: 0 1px 4px rgba(29, 158, 117, 0.3);
}

.lp-accent-bar--stop {
  background: linear-gradient(180deg, #E5484D 0%, #C73E43 100%);
  box-shadow: 0 1px 4px rgba(199, 62, 67, 0.3);
}

.lp-seg-row-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(42, 37, 64, 0.6);
  white-space: nowrap;
  min-width: 60px;
  margin-left: 6px;
}

/* Field group: [label] [value/input] [suffix] */
.lp-seg-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.lp-seg-group--price {
  justify-content: flex-end;
  flex: 0 0 220px;
}

.lp-seg-group--price .lp-seg-input {
  width: 96px;
}

.lp-seg-group--price .lp-seg-value {
  width: 96px;
  text-align: left;
}

/* "PnL" / "Points" / "Price" labels — purple like app */
.lp-seg-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #7C73C8;
  white-space: nowrap;
  flex-shrink: 0;
}

.lp-seg-prefix {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #7C73C8;
  flex-shrink: 0;
}

/* Computed value — same purple */
.lp-seg-value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #7C73C8;
}

/* Input-like box — mirrors .seg-input */
.lp-seg-input {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1F2430;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #B6B0E6;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}


/* "ticks" / "points" suffix */
.lp-seg-pips {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(154, 151, 184, 0.9);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ================================
   SLIDE 2 — AI NOTES
   ================================ */
.ai-notes-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
}

/* Chevron rail */
.ai-notes-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 5px 0;
  width: 16px;
  flex-shrink: 0;
}

.ai-notes-chevron {
  font-size: 11px;
  color: #98A2B3;
  line-height: 1;
  letter-spacing: -2px;
  cursor: pointer;
}

.ai-notes-panel {
  width: 520px;
  background: #FBFAF7;
  border-left: 3px solid rgba(255, 231, 204, 0.6);
  border-radius: 16px;
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-notes-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-notes-panel__pulse {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pulse-ring {
  position: absolute;
  border-radius: 50%;
  background: #7C73C8;
}
.pulse-ring--outer  { width: 16px; height: 16px; top: 0; left: 0; opacity: 0.12; }
.pulse-ring--mid    { width: 11px; height: 11px; top: 2.5px; left: 2.5px; opacity: 0.2; }
.pulse-ring--inner  { width: 6px;  height: 6px;  top: 5px; left: 5px; }

.ai-notes-panel__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #1F2437;
}

.ai-notes-panel__gen {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  color: #98A2B3;
  letter-spacing: -0.04em;
  padding: 0 2px;
}

.ai-notes-panel__divider {
  height: 0.7px;
  background: rgba(217, 217, 217, 0.4);
  margin: 4px 0;
}

.ai-notes-panel__cards {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding-top: 4px;
}

.insight-card {
  flex: 1;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insight-card--warm    { background: #FFFBF0; }
.insight-card--blue    { background: #F0F7FF; }
.insight-card--neutral { background: #F9FAFB; }

.insight-card__heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.insight-card__dot {
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}

.insight-card__label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #1F2437;
}

.insight-tag {
  display: inline-block;
  background: #E5E7EB;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 10px;
  color: #374151;
}

.insight-card__body {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  line-height: 1.5;
  color: #4B5563;
}

/* ================================
   SLIDE 3 — TRADING STATE
   ================================ */
.trading-state {
  width: 372px;
  background: rgba(255, 246, 230, 0.2);
  box-shadow:
    0px 16px 24px rgba(152, 162, 179, 0.04),
    0px 8px 16px rgba(152, 162, 179, 0.08),
    0px 2px 4px rgba(42, 37, 64, 0.04),
    inset 0px 1px 0px rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trading-state__label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.003em;
  color: #919AA8;
}

.trading-state__sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: -0.04em;
  color: #98A2B3;
  margin-bottom: 4px;
}

.trading-state__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trading-state__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.008em;
  color: #98A2B3;
  padding: 3px 0;
}

.icon-warn, .icon-info {
  flex-shrink: 0;
}

/* ================================
   AI NOTES SECTION
   ================================ */
.ai-notes {
  padding: 0 20px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Hidden on desktop; shown in ≤768px media query */
.ain__mobile-static {
  display: none;
}

/* Outer white card */
.ain__card {
  background: #FFFFFF;
  box-shadow: 0px 14px 30px rgba(24, 32, 58, 0.1);
  border-radius: 14px;
  padding: 16px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Two-column row */
.ain__columns {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: rgba(253, 251, 252, 0.6);
  border: 1px solid #FDFBFC;
  border-radius: 20px;
  padding: 14px 0 10px;
  min-height: 444px;
  gap: 5px;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

/* Left column: copy */
.ain__col-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 10px 10px;
  width: 540px;
  min-width: 220px;
  flex-shrink: 1;
}

.ain__tag {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: rgba(31, 36, 55, 0.8);
  padding: 0 10px 12px;
}

.ain__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: #1F2437;
  padding: 0 10px 20px;
}

.ain__body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(31, 36, 55, 0.65);
  padding: 0 10px;
}

/* Middle column: notes canvas */
.ain__col-visual {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Bounded card canvas — extends to the rail boundary, not the sidebar outer edge */
.ain__canvas {
  position: absolute;
  inset: 0;
  /* sidebar: 5px right-pad + 32px strip = 37px; rail starts there.
     Canvas fills right up to the rail — cards use the full available zone. */
  right: 37px;
  overflow: hidden;
  contain: paint; /* hard-clips filter:blur() bleed at canvas edge */
  transform: translateX(0);
  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1),
              right 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* When the panel slides in (stage 3): extend canvas under the panel (no gap),
   then shift left just enough for visible movement without clipping focus cards */
#ainVisual[data-stage="3"] .ain__canvas {
  right: 0;
  transform: translateX(-80px);
}

/* ================================
   STICKY NOTES (AI Notes section)
   ================================ */
.sn {
  position: absolute;
  width: clamp(130px, 12.5%, 200px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 10px 10px;
  gap: 6px;
  box-shadow:
    0px 16px 24px rgba(152, 162, 179, 0.04),
    0px 8px 16px rgba(152, 162, 179, 0.08),
    0px 2px 4px rgba(42, 37, 64, 0.04),
    inset 0px 1px 0px rgba(255, 255, 255, 0.9);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sn--grey {
  background: linear-gradient(0deg, rgba(154, 163, 178, 0.08), rgba(154, 163, 178, 0.08)), #FFFFFF;
  border-radius: 8px;
}

.sn--yellow {
  background: linear-gradient(0deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.08)), rgba(255, 255, 255, 0.9);
  border-radius: 10px;
}

.sn--purple {
  background: linear-gradient(0deg, rgba(107, 107, 214, 0.05), rgba(107, 107, 214, 0.05)), #FFFFFF;
  border-radius: 8px;
}

.sn--blur-none { filter: none; }
.sn--blur-sm   { filter: blur(0.5px); }
.sn--blur-md   { filter: blur(1.5px); }
.sn--blur-lg   { filter: blur(2.5px); }
.sn--blur-xl   { filter: blur(4.5px); }
.sn--hidden    { display: none; }
.sn--focus     { z-index: 10; }

/* Selected cards: always height:auto so copy never clips or overflows */
.sn--selected {
  height: auto !important;
  width: clamp(130px, 13.5%, 210px);
}

/* Tiny header: dot + label — hidden by default */
.sn__hdr   { display: none; }
.sn__dot   { display: none; }
.sn__label { display: none; }

/* Show header on cards that need it */
.sn--show-hdr .sn__hdr  { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.sn--show-hdr .sn__dot  { display: block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sn--show-hdr .sn__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 7px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #6B6BD6;
}

/* Selected cards: header is ALWAYS in the layout to prevent reflow on stage change.
   Invisible (opacity:0) in Stage 1 — no display switch, no height change, no text jump. */
.sn--selected .sn__hdr {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
  opacity: 0;
}
.sn--selected .sn__dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sn--selected .sn__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 7px;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Body text */
.sn__body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: #98A2B3;
  width: 100%;
  word-break: break-word;
}

/* More readable body (focused/featured cards) */
.sn__body--vis {
  color: #4B5563;
  font-weight: 400;
}

/* Stat highlight within visible card body */
.sn__stat {
  font-weight: 600;
  color: #1E293B;
}

/* Collapsed AI insights sidebar — floats over canvas right edge */
.ain__sidebar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 5px;
  width: 54px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Left: chevron rail (12px wide, chevrons at top) */
.ain__chevron-rail {
  width: 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 0;
}

/* Right: warm-bordered strip */
.ain__strip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0;
  background: #FAFBFE;
  border-left: 3px solid rgba(255, 231, 204, 0.6);
  border-radius: 20px;
  align-self: stretch;
}

/* Pulse icon slot */
.ain__dot-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 4px 0;
}

/* Container for the 3 small colored dots */
.ain__strip-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  gap: 16px;
  width: 100%;
}

/* Small colored dot */
.ain__mini-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ================================
   EXPANDED PANEL — EMPTY STATE
   ================================ */

/* Wrapper: replaces ain__sidebar when expanded — floats over canvas right edge */
.ain__panel-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 5px;
  width: 216px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Chevron rail pointing left (collapse direction) */
.ain__chevron-rail--left {
  width: 8px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0 0;
}

/* Panel body */
.ain__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #FBFAF7;
  border-left: 3px solid rgba(255, 231, 204, 0.6);
  border-radius: 20px;
  padding: 5px 0;
  align-self: stretch;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Header: pulse icon + "AI Notes" */
.ain__panel-hdr {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 10px 0;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.ain__panel-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  color: #5550C8;
}

/* Subheader: divider + caption */
.ain__panel-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px 0;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.ain__panel-divider {
  width: 100%;
  height: 1px;
  background: rgba(217, 217, 217, 0.4);
}

.ain__panel-sub-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 8px;
  line-height: 10px;
  letter-spacing: -0.04em;
  color: #98A2B3;
}

/* Slot container */
.ain__slots {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 17px 10px 12px;
  gap: 12px;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}

/* Individual placeholder slot */
.ain__slot {
  flex: 1;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Slots start invisible for animation */
.ain__slot--yellow { border: 1.5px dashed rgba(245, 158, 11, 0.4);  background: rgba(245, 158, 11, 0.02); }
.ain__slot--purple { border: 1.5px dashed rgba(107, 107, 214, 0.4); background: rgba(107, 107, 214, 0.02); }
.ain__slot--grey   { border: 1.5px dashed rgba(154, 163, 178, 0.4); background: rgba(154, 163, 178, 0.02); }

/* Slot slide-in: top → bottom, staggered */
/* Slot draw: clip descends top→bottom, revealing the dashed border progressively */
@keyframes ain-slot-in {
  from { clip-path: inset(0 0 100% 0 round 10px); }
  to   { clip-path: inset(0 0 0%   0 round 10px); }
}

.ain__panel-wrap--entering .ain__slot {
  animation: ain-slot-in 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ain__panel-wrap--entering .ain__slot:nth-child(1) { animation-delay: 225ms;  }
.ain__panel-wrap--entering .ain__slot:nth-child(2) { animation-delay: 750ms; }
.ain__panel-wrap--entering .ain__slot:nth-child(3) { animation-delay: 1300ms; }

/* ================================
   POPULATED NOTE CARDS
   ================================ */

/* Notes container */
.ain__notes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  gap: 16px;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}

/* Individual note card */
.ain__note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 10px 10px;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  flex: 1;
}

/* Top card — primary emphasis */
.ain__note--yellow {
  background: linear-gradient(0deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.12)), #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08),
              inset 0px 1px 0px rgba(255, 255, 255, 0.9);
}

/* Secondary cards */
.ain__note--purple {
  background: linear-gradient(0deg, rgba(107, 107, 214, 0.08), rgba(107, 107, 214, 0.08)), #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
              inset 0px 1px 0px rgba(255, 255, 255, 0.9);
}
.ain__note--grey {
  background: linear-gradient(0deg, rgba(154, 163, 178, 0.08), rgba(154, 163, 178, 0.08)), #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
              inset 0px 1px 0px rgba(255, 255, 255, 0.9);
}

/* Confidence header row */
.ain__note-hdr {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.ain__note-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ain__note-conf {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 7px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #A8B0BE; /* base: muted */
}

/* 80% confidence — slightly stronger */
.ain__note--yellow .ain__note-conf { color: #7B8699; }

/* Note body text */
.ain__note-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: #98A2B3;
  width: 100%;
}

/* Bold stat highlight within body */
.ain__note-stat {
  font-weight: 600;
  color: #3D4866;
}

/* ================================
   STAGE 3D — POPULATE NOTES
   Each note: shimmer fades out, content fades in + upward motion, border reaches full opacity.
   Stagger: 250ms between notes. Per-note duration: 600ms.
   ================================ */

/* Shimmer layer via ::before — covers the note card */
.ain__note::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 40%,
    rgba(255, 255, 255, 0.55) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.ain__note {
  position: relative; /* needed for ::before */
}

/* Notes stay in layout at all times — only their content blurs in.
   No opacity on the note itself = no height collapse = no positional jump. */
@keyframes ain-note-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ain__panel-wrap--populating .ain__note {
  opacity: 0;
  animation: ain-note-in 3200ms linear both;
}

/* Stagger: ~1200ms between each note, total ~4s */
.ain__panel-wrap--populating .ain__note:nth-child(1) { animation-delay: 400ms;  }
.ain__panel-wrap--populating .ain__note:nth-child(2) { animation-delay: 1400ms; }
.ain__panel-wrap--populating .ain__note:nth-child(3) { animation-delay: 2600ms; }

/* Border opacity: starts transparent, fades in with each note */
.ain__note--yellow { border: 1px solid rgba(245, 158, 11,  0); transition: border-color 1400ms cubic-bezier(0.22, 1, 0.36, 1); }
.ain__note--purple { border: 1px solid rgba(107, 107, 214, 0); transition: border-color 1400ms cubic-bezier(0.22, 1, 0.36, 1); }
.ain__note--grey   { border: 1px solid rgba(154, 163, 178, 0); transition: border-color 1400ms cubic-bezier(0.22, 1, 0.36, 1); }

.ain__panel-wrap--populating .ain__note--yellow { border-color: rgba(245, 158, 11,  0.35); transition-delay: 400ms;  }
.ain__panel-wrap--populating .ain__note--purple { border-color: rgba(107, 107, 214, 0.35); transition-delay: 1400ms; }
.ain__panel-wrap--populating .ain__note--grey   { border-color: rgba(154, 163, 178, 0.35); transition-delay: 2600ms; }

/* ================================
   STAGES 2A–2D — SHARED BASE RULES
   ================================ */

/* Non-selected: dim during all reveal stages */
#ainVisual[data-stage="2a"]  .sn:not(.sn--selected),
#ainVisual[data-stage="2b1"] .sn:not(.sn--selected),
#ainVisual[data-stage="2b2"] .sn:not(.sn--selected),
#ainVisual[data-stage="2b3"] .sn:not(.sn--selected),
#ainVisual[data-stage="2c"]  .sn:not(.sn--selected),
#ainVisual[data-stage="2d"] .sn:not(.sn--selected),
#ainVisual[data-stage="3"]  .sn:not(.sn--selected) {

  opacity: 0.65;
}

/* Selected: fully sharp, on top — persists through all stages */
#ainVisual[data-stage="2a"]  .sn--selected,
#ainVisual[data-stage="2b1"] .sn--selected,
#ainVisual[data-stage="2b2"] .sn--selected,
#ainVisual[data-stage="2b3"] .sn--selected,
#ainVisual[data-stage="2c"]  .sn--selected,
#ainVisual[data-stage="2d"] .sn--selected,
#ainVisual[data-stage="3"]  .sn--selected {

  opacity: 1;
  filter: none !important;
  z-index: 20;
}

/* ================================
   STAGE 2A — REVEAL
   Header already in layout, invisible — no display switch, no reflow
   ================================ */
#ainVisual[data-stage="2a"] .sn--selected .sn__hdr {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* ================================
   STAGE 2B.1 — CONFIDENCE FADE
   Header fades in (~200–300ms). Scale pulse. Text darkens.
   All persist from 2b1 through end.
   ================================ */

/* Header fades in — persists through all subsequent stages */
#ainVisual[data-stage="2b1"] .sn--selected .sn__hdr,
#ainVisual[data-stage="2b2"] .sn--selected .sn__hdr,
#ainVisual[data-stage="2b3"] .sn--selected .sn__hdr,
#ainVisual[data-stage="2c"]  .sn--selected .sn__hdr,
#ainVisual[data-stage="2d"] .sn--selected .sn__hdr,
#ainVisual[data-stage="3"]  .sn--selected .sn__hdr {

  opacity: 1;
  transition: opacity 750ms ease;
}

/* Scale pulse — uses individual `scale` so inline transform:rotate() is preserved */
@keyframes sn-emphasise {
  0%   { scale: 1; }
  45%  { scale: 1.02; }
  100% { scale: 1; }
}
#ainVisual[data-stage="2b1"] .sn--selected {
  animation: sn-emphasise 0.35s ease-in-out forwards;
}

/* Text body darkens — persists from 2b1 through end */
#ainVisual[data-stage="2b1"] .sn--selected .sn__body--vis,
#ainVisual[data-stage="2b2"] .sn--selected .sn__body--vis,
#ainVisual[data-stage="2b3"] .sn--selected .sn__body--vis,
#ainVisual[data-stage="2c"]  .sn--selected .sn__body--vis,
#ainVisual[data-stage="2d"] .sn--selected .sn__body--vis,
#ainVisual[data-stage="3"]  .sn--selected .sn__body--vis {

  color: #1E293B;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* ================================
   STAGE 2B.2 — PAUSE
   100ms hold. No new visual changes.
   ================================ */

/* ================================
   STAGE 2B.3 — TEXT HIGHLIGHTS
   Marker sweep from left to right, staggered per card (~80ms apart).
   Persists from 2b3 through end.
   ================================ */

/* Base: highlight exists in DOM but has zero width — invisible */
.sn__hl {
  background-image: linear-gradient(transparent 52%, rgba(255, 195, 60, 0.28) 52%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  transition: background-size 840ms cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px;
}

/* 2b3 and all subsequent stages: sweep to full width */
#ainVisual[data-stage="2b3"] .sn__hl,
#ainVisual[data-stage="2c"]  .sn__hl,
#ainVisual[data-stage="2d"] .sn__hl,
#ainVisual[data-stage="3"]  .sn__hl {

  background-size: 100% 100%;
}

/* Stagger per card — ordered by user spec:
   card 2 (yellow-left), card 3 (purple), card 4 (grey-right), card 5 (yellow-right), card 1 (grey-left) */
#ainVisual[data-stage="2b3"] .ain__canvas > .sn:nth-last-child(4) .sn__hl { transition-delay: 0ms;   }
#ainVisual[data-stage="2b3"] .ain__canvas > .sn:nth-last-child(3) .sn__hl { transition-delay: 65ms;  }
#ainVisual[data-stage="2b3"] .ain__canvas > .sn:nth-last-child(2) .sn__hl { transition-delay: 130ms; }
#ainVisual[data-stage="2b3"] .ain__canvas > .sn:nth-last-child(1) .sn__hl { transition-delay: 195ms; }
#ainVisual[data-stage="2b3"] .ain__canvas > .sn:nth-last-child(5) .sn__hl { transition-delay: 260ms; }

/* ================================
   STAGE 2C — OUTLINE DRAW
   True stroke-draw via ::before clip-path animation.
   clip-path descends from top → left+right edges trace down → bottom connects last.
   ================================ */

/* Per-card CSS vars used by ::before */
.sn--selected.sn--yellow { --outline-color: #F59E0B; --card-radius: 10px; }
.sn--selected.sn--purple { --outline-color: #6B6BD6; --card-radius: 8px;  }
.sn--selected.sn--grey   { --outline-color: #9AA3B2; --card-radius: 8px;  }

/* ::before carries the 3-sided border — invisible until 2C */
#ainVisual[data-stage="2c"] .sn--selected::before,
#ainVisual[data-stage="2d"] .sn--selected::before,
#ainVisual[data-stage="3"] .sn--selected::before {

  content: '';
  position: absolute;
  inset: 0;
  border-left:   1px solid var(--outline-color);
  border-right:  1px solid var(--outline-color);
  border-bottom: 1px solid var(--outline-color);
  border-top:    none;
  border-radius: var(--card-radius);
  pointer-events: none;
  z-index: 1;
}

/* 2C: clip starts fully hidden (bottom=100%) and descends to reveal.
   Left + right sides trace down together; bottom edge appears last. */
@keyframes sn-outline-draw {
  from { clip-path: inset(0 0 100% 0 round var(--card-radius)); }
  to   { clip-path: inset(0 0 0%   0 round var(--card-radius)); }
}

#ainVisual[data-stage="2c"] .sn--selected::before {
  clip-path: inset(0 0 100% 0 round var(--card-radius));
  animation: sn-outline-draw 6400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger: selected cards are the last 5 children of .ain__canvas */
#ainVisual[data-stage="2c"] .ain__canvas > .sn:nth-last-child(5)::before { animation-delay: 0ms;   }
#ainVisual[data-stage="2c"] .ain__canvas > .sn:nth-last-child(4)::before { animation-delay: 90ms;  }
#ainVisual[data-stage="2c"] .ain__canvas > .sn:nth-last-child(3)::before { animation-delay: 180ms; }
#ainVisual[data-stage="2c"] .ain__canvas > .sn:nth-last-child(2)::before { animation-delay: 270ms; }
#ainVisual[data-stage="2c"] .ain__canvas > .sn:nth-last-child(1)::before { animation-delay: 360ms; }

/* 2D: animation done — no clip, full border visible */
#ainVisual[data-stage="2d"] .sn--selected::before,
#ainVisual[data-stage="3"] .sn--selected::before {

  clip-path: none;
}

/* ================================
   STAGE 2D — COGNITIVE PAUSE
   No new animations. All 2C end-state properties hold.
   Float also stops (data-stage not matched by float selectors).
   ================================ */

/* ================================
   LOOP RESET — CROSSFADE
   ================================ */
.ain--fade-out {
  animation: ain-loop-fade-out 1500ms ease-in-out forwards;
}
.ain--fade-in {
  animation: ain-loop-fade-in 1500ms ease-out forwards;
}
@keyframes ain-loop-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes ain-loop-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ================================
   STAGE 3B / 3D — PANEL SLIDE-IN
   Panel is position:absolute — cards never move, layout never changes.
   ================================ */

@keyframes ain-panel-slide {
  from {
    transform: translateX(54px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.ain__panel-wrap--entering {
  animation: ain-panel-slide 1400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ================================
   DEV: STAGE SWITCHER
   ================================ */
.stage-switcher {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 15, 20, 0.88);
  padding: 7px 12px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.stage-switcher__label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #555;
  margin-right: 2px;
}

.stage-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  background: rgba(255,255,255,0.06);
  color: #aaa;
  transition: background 0.15s, color 0.15s;
}

.stage-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.stage-btn--active {
  background: #6B6BD6;
  color: #fff;
  border-color: transparent;
}

/* Dev timer + pause + scrubber */
.stage-switcher__sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.12);
  margin: 0 4px;
}
.stage-timer {
  font-family: 'Inter', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  min-width: 30px;
  text-align: right;
  letter-spacing: 0.02em;
}
.stage-pause-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  background: rgba(255,255,255,0.06);
  color: #aaa;
  transition: background 0.15s, color 0.15s;
}
.stage-pause-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.stage-pause-btn--paused {
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.35);
  color: #F59E0B;
}
.stage-scrubber {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: pointer;
}
.stage-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(107,107,214,0.6);
}
.stage-scrubber::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

/* ================================
   STAGE 1 — AMBIENT FLOAT
   Uses margin-top (universal support, doesn't conflict with
   inline transform: rotate on each card)
   ================================ */
@keyframes sn-float {
  0%, 100% { margin-top: 0px; }
  50%       { margin-top: -7px; }
}

/* Float runs through Stage 1, 2A, 2B, 2C — stops at 2D (cognitive pause / no movement).
   Continuous selector prevents margin-top snap at stage boundaries. */
#ainVisual:not([data-stage]) .sn,
#ainVisual[data-stage="2a"]  .sn,
#ainVisual[data-stage="2b1"] .sn,
#ainVisual[data-stage="2b2"] .sn,
#ainVisual[data-stage="2b3"] .sn,
#ainVisual[data-stage="2c"]  .sn,
#ainVisual[data-stage="2d"] .sn,
#ainVisual[data-stage="3"]  .sn {

  animation: sn-float 7.2s ease-in-out infinite;
  animation-delay: -2.0s;
}
#ainVisual:not([data-stage]) .sn:nth-child(4n),
#ainVisual[data-stage="2a"]  .sn:nth-child(4n),
#ainVisual[data-stage="2b1"] .sn:nth-child(4n),
#ainVisual[data-stage="2b2"] .sn:nth-child(4n),
#ainVisual[data-stage="2b3"] .sn:nth-child(4n),
#ainVisual[data-stage="2c"]  .sn:nth-child(4n),
#ainVisual[data-stage="2d"] .sn:nth-child(4n),
#ainVisual[data-stage="3"]  .sn:nth-child(4n) {
 animation-duration: 6.4s; animation-delay: -0.8s; }
#ainVisual:not([data-stage]) .sn:nth-child(4n+1),
#ainVisual[data-stage="2a"]  .sn:nth-child(4n+1),
#ainVisual[data-stage="2b1"] .sn:nth-child(4n+1),
#ainVisual[data-stage="2b2"] .sn:nth-child(4n+1),
#ainVisual[data-stage="2b3"] .sn:nth-child(4n+1),
#ainVisual[data-stage="2c"]  .sn:nth-child(4n+1),
#ainVisual[data-stage="2d"] .sn:nth-child(4n+1),
#ainVisual[data-stage="3"]  .sn:nth-child(4n+1) {
 animation-duration: 8.1s; animation-delay: -4.2s; }
#ainVisual:not([data-stage]) .sn:nth-child(4n+2),
#ainVisual[data-stage="2a"]  .sn:nth-child(4n+2),
#ainVisual[data-stage="2b1"] .sn:nth-child(4n+2),
#ainVisual[data-stage="2b2"] .sn:nth-child(4n+2),
#ainVisual[data-stage="2b3"] .sn:nth-child(4n+2),
#ainVisual[data-stage="2c"]  .sn:nth-child(4n+2),
#ainVisual[data-stage="2d"] .sn:nth-child(4n+2),
#ainVisual[data-stage="3"]  .sn:nth-child(4n+2) {
 animation-duration: 9.3s; animation-delay: -1.6s; }
#ainVisual:not([data-stage]) .sn:nth-child(4n+3),
#ainVisual[data-stage="2a"]  .sn:nth-child(4n+3),
#ainVisual[data-stage="2b1"] .sn:nth-child(4n+3),
#ainVisual[data-stage="2b2"] .sn:nth-child(4n+3),
#ainVisual[data-stage="2b3"] .sn:nth-child(4n+3),
#ainVisual[data-stage="2c"]  .sn:nth-child(4n+3),
#ainVisual[data-stage="2d"] .sn:nth-child(4n+3),
#ainVisual[data-stage="3"]  .sn:nth-child(4n+3) {
 animation-duration: 7.6s; animation-delay: -6.1s; }

/* Pause all card animations when scrubbing */
body.anim-paused .sn {
  animation-play-state: paused !important;
}

/* Settle float gradually during 2D hold — stops animation, eases margin-top to 0 */
#ainVisual.ain__float-settling .sn {
  animation: none;
  transition: margin-top 550ms ease-out,
              opacity    500ms cubic-bezier(0.22, 1, 0.36, 1),
              filter     500ms cubic-bezier(0.22, 1, 0.36, 1);
  margin-top: 0;
}


/* ================================
   FEATURES SECTION
   ================================ */
.features {
  padding: 0 20px;
  margin-top: 17px;
}

/* Single parent container */
.feat__card {
  background: #FFFFFF;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: 0px 14px 30px rgba(24, 32, 58, 0.1);
}

.feat__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
}

/* Each side-by-side section */
.feat__pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Inner grey container */
.feat__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 14px 20px 10px 20px;
  gap: 5px;
  background: #F7F8FC;
  border: 1px solid #F1F3F8;
  border-radius: 15.5px;
  min-height: 208px;
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
}

/* Reversed layout for card 2 */
.feat__inner--reverse {
  padding: 14px 20px 10px 20px;
  align-items: flex-start;
  background: #FBFCFE;
  border-color: #FDFBFC;
  box-shadow: inset 0px 1px 4px rgba(245, 246, 251, 0.25);
}

/* Copy column */
.feat__col-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 10px 10px;
}

.feat__tag {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: rgba(31, 36, 55, 0.8);
  padding: 0 20px 8px 10px;
}

.feat__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: #1F2437;
  padding: 0 10px 16px;
  margin: 0;
}

.feat__body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(31, 36, 55, 0.65);
  padding: 0 10px;
  margin: 0;
}

/* Visual column */
.feat__col-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0 16px 20px;
  width: 278px;
  flex-shrink: 0;
}

/* Trading State widget */
.feat__widget {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #E6EAF2;
  box-shadow:
    0px 16px 24px rgba(152, 162, 179, 0.04),
    0px 8px 16px rgba(152, 162, 179, 0.08),
    0px 2px 4px rgba(42, 37, 64, 0.04),
    inset 0px 1px 0px rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 7px 16px;
  width: 258px;
  box-sizing: border-box;
}

.feat__widget-hdr {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feat__widget-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.003em;
  color: #919AA8;
}

.feat__widget-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 8px;
  line-height: 10px;
  letter-spacing: -0.04em;
  color: #98A2B3;
}

.feat__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feat__row-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.008em;
  color: #98A2B3;
}

.feat__row-item:first-child {
  padding-top: 0;
}

.feat__icon {
  flex-shrink: 0;
}

/* Trade Recording visual column */
.feat__col-visual--table {
  padding: 48px 0 16px;
  width: 320px;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Scale down lp-exits inside the feature card to fit 320px */
.feat__col-visual--table .lp-exits {
  width: 320px;
}

.feat__col-visual--table .lp-exits__title {
  font-size: 11px;
  padding: 0 2px;
  margin-bottom: 2px;
}

.feat__col-visual--table .lp-seg-ctrl {
  padding: 3px;
  background: #F6F7F9;
}

.feat__col-visual--table .lp-seg-inner {
  min-height: 38px;
  padding: 0 6px;
  gap: 4px;
}

.feat__col-visual--table .lp-seg-row-label {
  font-size: 9px;
  min-width: 34px;
  margin-left: 3px;
  color: #2A2F3A;
}

.feat__col-visual--table .lp-seg-label {
  font-size: 9px;
  color: #6B7280;
}

.feat__col-visual--table .lp-seg-prefix,
.feat__col-visual--table .lp-seg-value {
  font-size: 9px;
  color: #353AA0;
}

.feat__col-visual--table .lp-seg-input {
  font-size: 9px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  min-width: 0;
  color: #2A2F3A;
  border-color: rgba(63, 58, 174, 0.22);
  background: #FBFBFD;
}

.feat__col-visual--table .lp-seg-pips {
  font-size: 8px;
}

.feat__col-visual--table .lp-seg-group {
  gap: 4px;
}

.feat__col-visual--table .lp-seg-group--price {
  flex: 0 0 88px;
}

.feat__col-visual--table .lp-seg-group--price .lp-seg-input,
.feat__col-visual--table .lp-seg-group--price .lp-seg-value {
  width: 62px;
}

.feat__col-visual--table .lp-accent-bar--target {
  background: linear-gradient(180deg, #38A870 0%, #2A9168 100%);
  box-shadow: 0 1px 4px rgba(42, 145, 104, 0.22);
}

.feat__col-visual--table .lp-accent-bar--stop {
  background: linear-gradient(180deg, #D44E52 0%, #BB4347 100%);
  box-shadow: 0 1px 4px rgba(187, 67, 71, 0.22);
}

/* ================================
   FOOTER CTA SECTION
   ================================ */
.footer-cta {
  margin-top: 24px;
  padding: 48px 20px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-cta__sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(31, 36, 55, 0.65);
  margin: 0;
}

.footer-cta__btn {
  width: 160px;
  height: 56px;
  padding: 0 24px;
  background: linear-gradient(90.88deg, #4B3EA8 2.33%, #564BCF 97.86%);
  border: none;
  box-shadow:
    0px 2px 6px rgba(75, 62, 168, 0.18),
    0px 4px 4px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

/* ================================
   OWN YOUR DATA SECTION
   ================================ */
.own-data {
  padding: 0 20px;
  margin-top: 24px;
}

.own__card {
  background: #FFFFFF;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: 0px 14px 30px rgba(24, 32, 58, 0.1);
}

.own__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 20px 10px;
  gap: 5px;
  background: #F7F8FC;
  border: 1px solid #F1F3F8;
  border-radius: 16px;
  box-sizing: border-box;
}

.own__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 10px 0;
  align-self: stretch;
}

.own__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: #1F2437;
  padding: 0 10px 20px;
  margin: 0;
}

.own__body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(31, 36, 55, 0.65);
  padding: 0 10px;
  margin: 0;
}

.own__comparison {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 39px;
  padding: 20px 0 10px;
}

.own__platform {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 10px;
  gap: 5px;
  background: #FFFFFF;
  border-radius: 8px;
  width: 420px;
  box-sizing: border-box;
}

.own__platform-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.own__platform-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: rgba(154, 151, 184, 0.9);
}

.own__platform-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: rgba(154, 151, 184, 0.9);
  margin: 0;
}

.own__footer-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: rgba(31, 36, 55, 0.65);
  padding: 5px 10px 20px;
  margin: 0;
}

/* ================================
   RESPONSIVE — DESKTOP (≤1439px)
   Large desktop (≥1440px) = unchanged approved state
   ================================ */

/* ── 1280–1439px: small large desktop ─── */
@media (max-width: 1439px) {
  .ain__col-copy {
    width: 400px;
  }

  /* Cards: tighten size, let height be content-driven */
  .sn {
    width: clamp(110px, 11.5%, 175px);
    padding: 4px 9px 9px;
    height: auto !important;
  }
  .sn__body {
    font-size: 11.5px;
    line-height: 17px;
  }

  /* Hide ~25% of background cards (every 4th) */
  #ainVisual .sn:not(.sn--selected):nth-child(4n) {
    display: none;
  }
}

/* ── 1024–1279px: laptop ─── */
@media (max-width: 1279px) {
  .ain__col-copy {
    width: 300px;
  }
  .ain__heading {
    font-size: 20px;
    line-height: 28px;
  }
  .ain__body {
    font-size: 14px;
    line-height: 22px;
  }

  .sn {
    width: clamp(90px, 10.5%, 150px);
    padding: 3px 8px 8px;
    height: auto !important;
  }
  .sn--grey   { border-radius: 6px; }
  .sn--yellow { border-radius: 8px; }
  .sn--purple { border-radius: 6px; }

  .sn__body {
    font-size: 10.5px;
    line-height: 15px;
  }

  /* Reduce blur slightly so small cards stay legible */
  .sn--blur-lg { filter: blur(2.2px); }
  .sn--blur-xl { filter: blur(3.8px); }

  /* Hide ~40% of background cards (every 3rd) */
  #ainVisual .sn:not(.sn--selected):nth-child(3n) {
    display: none;
  }
}

/* ── Narrow laptop (~1024px) ─── */
@media (max-width: 1099px) {
  .ain__col-copy {
    width: 240px;
  }
  .ain__heading {
    font-size: 18px;
    line-height: 24px;
  }
  .ain__body {
    font-size: 13px;
    line-height: 20px;
  }

  .sn {
    width: clamp(80px, 10%, 135px);
    padding: 3px 7px 7px;
    height: auto !important;
  }

  .sn__body {
    font-size: 10px;
    line-height: 14px;
  }

  /* Hide ~50% of background cards */
  #ainVisual .sn:not(.sn--selected):nth-child(2n) {
    display: none;
  }

  /* Selected cards: ensure always visible and readable */
  #ainVisual .sn--selected {
    display: flex !important;
  }
}

/* ================================
   RESPONSIVE — TABLET (≤1024px)
   Structural layout switches: columns stack, fixed widths released.
   Typography fine-tuning stays in ≤768px below.
   ================================ */
@media (max-width: 1024px) {
  /* Global */
  .page-wrap { padding: 0 16px; }
  .features, .own-data, .ai-notes { padding: 0 16px; }
  .hero { padding: 16px; }
  .hero__bg { height: auto; padding: 32px 16px 28px; }

  /* ── Features: stack panes + inner columns ─── */
  .feat__row {
    flex-direction: column;
    gap: 10px;
  }

  .feat__inner {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    min-height: unset;
  }

  .feat__col-copy {
    padding: 4px 0 0;
  }

  .feat__col-visual {
    width: 100%;
    padding: 0;
    align-items: center;
  }

  /* Trade Recording: visual is first in HTML — float copy above */
  .feat__inner--reverse .feat__col-copy {
    order: -1;
  }

  .feat__col-visual--table {
    padding: 0 10px 6px 0;
  }

  /* ── Own Your Data: stack comparison cards ─── */
  .own__inner {
    padding: 16px;
  }

  .own__copy {
    padding: 4px 0 0;
  }

  .own__comparison {
    flex-direction: column;
    gap: 10px;
    padding: 16px 0 8px;
    align-self: stretch;
    width: 100%;
  }

  .own__platform {
    width: 100%;
  }

  /* ── AI Notes: hide animation, show static panel ─── */
  .ain__col-visual,
  .ain__sidebar,
  .ain__panel-wrap {
    display: none !important;
  }

  .ain__columns {
    flex-direction: column;
    min-height: unset;
    padding: 20px 16px;
    gap: 20px;
  }

  .ain__col-copy {
    width: 100%;
    padding: 0;
  }

  .ain__mobile-static {
    display: block;
    width: 100%;
  }

  /* ── Hero carousel: full-width, content scaled ─── */
  .hero__carousel { width: 100%; height: auto; }
  .carousel__slide { padding: 16px; gap: 10px; }
  .carousel__explainer { font-size: 14px; line-height: 20px; margin-bottom: 8px; }
  .hero__carousel .lp-seg-group--price { display: none; }
  .hero__carousel .ai-notes-rail { display: none; }
  .hero__carousel .ai-notes-panel { width: 100%; }
  .hero__carousel .ai-notes-panel__cards { flex-direction: column; }
  .hero__carousel .insight-card:not(:first-child) { display: none; }
  .hero__carousel .lp-exits__title { font-size: 10px; }
  .hero__carousel .lp-seg-ctrl { padding: 3px; }
  .hero__carousel .lp-seg-inner { min-height: 34px; padding: 0 6px; gap: 5px; }
  .hero__carousel .lp-seg-row-label { font-size: 9px; min-width: 36px; margin-left: 3px; }
  .hero__carousel .lp-seg-label,
  .hero__carousel .lp-seg-prefix,
  .hero__carousel .lp-seg-value { font-size: 10px; }
  .hero__carousel .lp-seg-input { font-size: 10px; height: 22px; padding: 0 6px; }
  .hero__carousel .lp-seg-pips { font-size: 9px; }

  /* ── AI Notes mobile panel styles ─── */
  .ain__mobile-panel {
    background: #FBFAF7;
    border-left: 3px solid rgba(255, 231, 204, 0.6);
    border-radius: 14px;
    padding: 14px 14px 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ain__mobile-hdr {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }

  .ain__mobile-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: #5550C8;
  }

  .ain__mobile-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: -0.03em;
    color: #98A2B3;
    margin-bottom: 10px;
  }

  .ain__mobile-divider {
    width: 100%;
    height: 1px;
    background: rgba(217, 217, 217, 0.4);
    margin-bottom: 12px;
  }

  .ain__mobile-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ain__mobile-note {
    border-radius: 10px;
    padding: 8px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ain__mobile-note--yellow {
    background: linear-gradient(0deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.12)), #FFFFFF;
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  }

  .ain__mobile-note--purple {
    background: linear-gradient(0deg, rgba(107, 107, 214, 0.08), rgba(107, 107, 214, 0.08)), #FFFFFF;
    border: 1px solid rgba(107, 107, 214, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255,255,255,0.9);
  }

  .ain__mobile-note--grey {
    background: linear-gradient(0deg, rgba(154, 163, 178, 0.08), rgba(154, 163, 178, 0.08)), #FFFFFF;
    border: 1px solid rgba(154, 163, 178, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255,255,255,0.9);
  }

  .ain__mobile-note-hdr {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .ain__mobile-dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .ain__mobile-conf {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 9px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #A8B0BE;
  }

  .ain__mobile-note--yellow .ain__mobile-conf { color: #7B8699; }

  .ain__mobile-note-body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 19px;
    color: #98A2B3;
  }

  .ain__mobile-note-body strong {
    font-weight: 600;
    color: #3D4866;
  }
}

/* ================================
   RESPONSIVE — MOBILE (≤768px)
   Typography, spacing, and hero fine-tuning on top of the 1024px structural changes.
   ================================ */
@media (max-width: 768px) {
  /* Global */
  .page-wrap { padding: 0 12px; }
  .features, .own-data, .ai-notes { padding: 0 12px; margin-top: 16px; }

  /* Nav */
  .nav { padding: 8px 12px 14px; }
  .nav__card { height: auto; min-height: 56px; padding: 10px 14px; border-radius: 12px; }
  .nav__logo-wrap { width: 80px; height: 34px; }
  .nav__logo { font-size: 22px; line-height: 28px; }
  .nav__logo-line { top: 76%; }
  .nav__copy { height: auto; padding: 4px 10px 4px 0; }
  .nav__separator { font-size: 22px; line-height: 28px; }
  .nav__product { font-size: 13px; }
  .nav__cta { padding: 4px; }
  .nav__cta .btn--primary { width: 104px; height: 36px; font-size: 13px; border-radius: 12px; }

  /* Hero */
  .hero { padding: 12px; gap: 8px; }
  .hero__bg { height: auto; padding: 36px 16px 28px; gap: 6px; overflow: hidden; }
  .hero__title { font-size: 28px; line-height: 36px; }
  .hero__desc { font-size: 14px; }
  .hero__gap-sm { height: 12px; }
  .hero__gap-md { height: 16px; }

  /* ── Features: typography ─── */
  .feat__col-visual { align-items: stretch; }
  .feat__col-visual--table { padding: 0 10px 6px 0; }
  .feat__col-visual--table .lp-exits { width: 100%; }
  .feat__heading { font-size: 20px; line-height: 28px; padding: 0 0 12px; }
  .feat__tag { padding: 0 0 8px; }
  .feat__body { font-size: 14px; line-height: 22px; padding: 0; }
  .feat__col-visual--table .lp-exits__title { font-size: 10px; }
  .feat__col-visual--table .lp-seg-ctrl { padding: 3px; }
  .feat__col-visual--table .lp-seg-inner { min-height: 34px; padding: 0 6px; gap: 5px; }
  .feat__col-visual--table .lp-seg-row-label { font-size: 9px; min-width: 36px; margin-left: 3px; }
  .feat__col-visual--table .lp-seg-label,
  .feat__col-visual--table .lp-seg-prefix,
  .feat__col-visual--table .lp-seg-value { font-size: 10px; }
  .feat__col-visual--table .lp-seg-input { font-size: 10px; height: 22px; padding: 0 6px; }
  .feat__col-visual--table .lp-seg-pips { font-size: 9px; }
  .feat__col-visual--table .lp-seg-group--price { display: none; }

  /* ── Own Your Data: typography ─── */
  .own__heading { font-size: 20px; line-height: 28px; padding: 0 0 12px; }
  .own__body { font-size: 14px; line-height: 22px; padding: 0; }

  /* ── AI Notes: typography ─── */
  .ain__heading { font-size: 20px; line-height: 28px; padding: 0 0 14px; }
  .ain__tag { padding: 0 0 10px; }
  .ain__body { font-size: 14px; line-height: 22px; padding: 0; }

  /* ── Footer CTA ─── */
  .footer-cta { padding: 36px 20px 48px; gap: 20px; }
  .footer-cta__sub { font-size: 15px; line-height: 22px; text-align: center; }
}

/* ================================
   FOOTER
   ================================ */
.footer {
  margin-top: 24px;
  text-align: center;
  padding: 20px 24px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(31, 36, 55, 0.45);
}