.hero_heroBackground__3BWCL {
  position: relative;
  overflow: hidden;
  /* A single cool light source from the top left. Deliberately asymmetric - the old
     blue-left/green-right pair was symmetric and encoded nothing. Green and red are
     reserved for profit and loss in this product (the dashboard sits right below this
     section and uses them), so they are kept out of the page furniture entirely. The
     tint is the same blue as the primary button, so the wash and the CTA agree. */
  background:
    radial-gradient(ellipse 110% 75% at 16% -10%, rgba(37, 99, 235, 0.11), transparent 60%),
    linear-gradient(180deg, #fbfdff 0%, #f4f7fb 46%, #ffffff 100%);
}

/* Settles the hero wash to white. The zone below owns the transition into slate. */
.hero_heroFade__NZ7Ua {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
  pointer-events: none;
}

/* Stripe-inspired bold headline styling */
.hero_heroHeadline__2tFki {
  font-size: 4.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .hero_heroHeadline__2tFki {
    font-size: 3.75rem;
  }
}

@media (max-width: 640px) {
  .hero_heroHeadline__2tFki {
    font-size: 2.75rem;
    /* Tracking relaxes as the size drops - tight display tracking hurts at 44px. */
    letter-spacing: -0.018em;
  }
}

.hero_heroTitle__yot3r {
  display: block;
  cursor: default;
}

.hero_heroLine__Q1ChQ {
  display: block;
  opacity: 0;
  animation: hero_heroLineIn__GeHSX 0.6s ease-out forwards;
}

.hero_heroSubtext__Usjqi {
  opacity: 0;
  animation: hero_heroLineIn__GeHSX 0.6s ease-out 0.3s forwards;
}

.hero_heroButtons__epGpQ {
  opacity: 0;
  animation: hero_heroLineIn__GeHSX 0.6s ease-out 0.35s forwards;
}

.hero_heroProof__8QkyV {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 40px auto 0;
  max-width: 880px;
  opacity: 0;
  animation: hero_heroLineIn__GeHSX 0.6s ease-out 0.45s forwards;
}

.hero_proofItem__eHEl_ {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon value"
    "icon label";
  gap: 2px 10px;
  align-items: center;
  text-align: left;
  padding: 4px 22px;
  border: 0;
  border-left: 1px solid rgba(148, 163, 184, 0.28);
  background: none;
  box-shadow: none;
}

.hero_proofItem__eHEl_:first-child {
  border-left: 0;
}

.hero_proofIcon__cjAWa {
  grid-area: icon;
  width: 24px;
  height: 24px;
  color: #0f766e;
}

.hero_proofValue__zEDXH {
  grid-area: value;
  color: #111827;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.hero_proofLabel__MxEu2 {
  grid-area: label;
  color: #64748b;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.hero_heroVideo__OvaNS {
  opacity: 0;
  animation: hero_heroLineIn__GeHSX 0.6s ease-out 1.1s forwards;
  box-shadow:
    0 0 20px rgba(96, 165, 250, 0.25),
    0 0 40px rgba(96, 165, 250, 0.15),
    0 0 60px rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  transition: box-shadow 0.4s ease;
  position: relative;
  z-index: 2;
}

.hero_heroVideo__OvaNS:hover {
  box-shadow:
    0 0 25px rgba(96, 165, 250, 0.35),
    0 0 50px rgba(96, 165, 250, 0.2),
    0 0 80px rgba(59, 130, 246, 0.15);
}

@media (max-width: 640px) {
  .hero_heroVideo__OvaNS,
  .hero_heroVideo__OvaNS:hover {
    box-shadow:
      0 0 12px rgba(96, 165, 250, 0.2),
      0 0 24px rgba(96, 165, 250, 0.1);
  }
}

@keyframes hero_heroLineIn__GeHSX {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_heroLine__Q1ChQ,
.hero_heroSubtext__Usjqi,
.hero_heroButtons__epGpQ,
.hero_heroProof__8QkyV,
.hero_heroVideo__OvaNS {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero_heroVideo__OvaNS {
    transition: none;
  }
}

@media (max-width: 760px) {
  .hero_heroProof__8QkyV {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  /* Stacked, the separator has to run across the top of each item, not down its left. */
  .hero_proofItem__eHEl_ {
    padding: 14px 4px;
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.28);
  }

  .hero_proofItem__eHEl_:first-child {
    border-top: 0;
  }
}

/* ========================================
   HERO PRODUCT SHOT
   A light screenshot on a light page needs help or it dissolves: a deep soft shadow for lift,
   plus a restrained blue glow. Carried over from the old product stage section.
   ======================================== */
.hero_heroShot__E54yE {
  margin-top: 3.5rem;
  border-radius: 12px;
  box-shadow:
    0 24px 60px -20px rgba(15, 23, 42, 0.28),
    0 8px 20px -8px rgba(15, 23, 42, 0.12),
    0 0 40px rgba(96, 165, 250, 0.14),
    0 0 80px rgba(59, 130, 246, 0.08);
  transition: box-shadow 0.4s ease;
}

.hero_heroShot__E54yE:hover {
  box-shadow:
    0 28px 70px -20px rgba(15, 23, 42, 0.32),
    0 10px 24px -8px rgba(15, 23, 42, 0.14),
    0 0 50px rgba(96, 165, 250, 0.2),
    0 0 100px rgba(59, 130, 246, 0.12);
}

.hero_heroShotCaption__7HMwh {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: #94a3b8;
}


@media (max-width: 640px) {
  .hero_heroShot__E54yE,
  .hero_heroShot__E54yE:hover {
    box-shadow:
      0 14px 32px -14px rgba(15, 23, 42, 0.24),
      0 0 24px rgba(96, 165, 250, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_heroShot__E54yE {
    transition: none;
  }
}

.screenshot_image__CtSi1 {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * When an art-directed mobile crop is served, the intrinsic width/height attributes still describe
 * the desktop file, so reserve the box from the mobile crop's own ratio instead. Keep this
 * breakpoint in step with MOBILE_MEDIA in screenshot.tsx.
 */
@media (max-width: 767px) {
  .screenshot_image__CtSi1[style*="--shot-aspect-mobile"] {
    aspect-ratio: var(--shot-aspect-mobile);
    height: auto;
  }
}

/* ---------------------------------------------------------------------------
   Browser frame
   Gives the shot a defined window boundary, so the app's own dark header bar
   reads as application chrome rather than as an inconsistency on a light page.
   --------------------------------------------------------------------------- */
.screenshot_frame__cd_jx {
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.screenshot_frameBar__zZ5_C {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 36px;
  padding: 0 0.875rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.screenshot_dot__W_EbM {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  flex: 0 0 auto;
}

.screenshot_frameUrl__htoYP {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 55%;
  padding: 0.1875rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #94a3b8;
  font-size: 0.75rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 520px) {
  .screenshot_frameBar__zZ5_C {
    height: 28px;
    padding: 0 0.625rem;
  }

  .screenshot_dot__W_EbM {
    width: 7px;
    height: 7px;
  }

  .screenshot_frameUrl__htoYP {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Bleed
   For bento cards: the shot runs off the bottom of its container instead of
   sitting centred in a padded box.
   --------------------------------------------------------------------------- */
/*
 * Bleed: the card gives this a fixed-height band (see .illustrationBleed in
 * features-overview.module.css) and the shot fills it edge to edge, cover-cropped from its
 * top-left corner. No inner border or shadow - a framed panel inside a framed card read as a
 * card within a card, and left every tile looking slightly different.
 */
.screenshot_bleed__IZkoE {
  width: 100%;
  height: 100%;
  margin: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.screenshot_bleed__IZkoE picture {
  display: block;
  height: 100%;
}

.screenshot_bleed__IZkoE .screenshot_image__CtSi1 {
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.product-tour_tour__gcLzw {
  position: relative;
  padding: 4rem 0 5rem;
}

.product-tour_eyebrow__tZgNn {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(33, 150, 243, 0.25);
  border-radius: 999px;
  background: rgba(33, 150, 243, 0.06);
  color: #1e88dc;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .product-tour_tour__gcLzw {
    padding: 3rem 0 3.5rem;
  }
}

/* How It Works - Interactive Stepper & Mobile Carousel */

/* ===== Mobile Styles ===== */

.how-it-works_mobileContainer__ySQks {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.how-it-works_mobileVisible__wk0eH {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile Mini Stepper */
.how-it-works_mobileStepper__hswo7 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
}

.how-it-works_mobileStepNode__tEcb0 {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.3s ease;
}

.how-it-works_mobileStepNode__tEcb0::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 8px;
  height: 2px;
  background: #e2e8f0;
  transform: translateY(-50%);
}

.how-it-works_mobileStepNode__tEcb0:last-of-type::after {
  display: none;
}

.how-it-works_mobileStepNodeActive__LRFto {
  border-color: var(--step-color, #2196F3);
  background: var(--step-bg, #eff6ff);
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--step-bg, rgba(33, 150, 243, 0.2));
}

.how-it-works_mobileStepNodeActive__LRFto::after {
  background: var(--step-color, #2196F3);
}

.how-it-works_mobileStepNodePast__xAe2J {
  border-color: var(--step-color, #2196F3);
  background: var(--step-color, #2196F3);
}

.how-it-works_mobileStepNodePast__xAe2J::after {
  background: var(--step-color, #2196F3);
}

.how-it-works_mobileStepNodePast__xAe2J .how-it-works_mobileStepIcon__D7g4D {
  color: white;
}

.how-it-works_mobileStepIcon__D7g4D {
  width: 18px;
  height: 18px;
  color: #94a3b8;
  transition: color 0.3s ease;
}

.how-it-works_mobileStepNodeActive__LRFto .how-it-works_mobileStepIcon__D7g4D {
  color: var(--step-color, #2196F3);
}

/* Mobile Step Labels */
.how-it-works_mobileStepLabels__mKDO3 {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
}

.how-it-works_mobileStepLabel__1Px0O {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.9);
  position: absolute;
}

.how-it-works_mobileStepLabelActive__QOInA {
  opacity: 1;
  transform: scale(1);
  position: relative;
  color: var(--label-color, #2196F3);
}

/* Mobile Content Carousel */
.how-it-works_mobileCarouselWrapper__eervm {
  overflow: hidden;
  margin: 0 -16px;
}

.how-it-works_mobileCarouselSlides__CHBW3 {
  display: flex;
  touch-action: pan-y pinch-zoom;
}

.how-it-works_mobileCarouselSlide__dOLR7 {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 16px;
}

/* Mobile Content Panel */
.how-it-works_mobileContentPanel__qmlHz {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 10px 20px rgba(0, 0, 0, 0.04);
  position: relative;
}

.how-it-works_mobileContentPanel__qmlHz::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--panel-color, #2196F3);
}

.how-it-works_mobileContentHeader__bBgHJ {
  padding: 20px 16px 16px;
  text-align: center;
  border-bottom: 1px solid #f1f5f9;
}

.how-it-works_mobileContentBadge__ev6Mg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 16px;
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}

.how-it-works_mobileContentHeadline__F9BkM {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.how-it-works_mobileContentDescription__4M924 {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Mobile Features */
.how-it-works_mobileContentFeatures__zsV72 {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.how-it-works_mobileFeatureItem__ZWmjy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.how-it-works_mobileFeatureIcon__N9zI4 {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.how-it-works_mobileFeatureSvg__aMsP5 {
  width: 18px;
  height: 18px;
}

.how-it-works_mobileFeatureDetails__jnMCs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.how-it-works_mobileFeatureTitle__7bOw7 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.how-it-works_mobileFeatureDescription__hf_K1 {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.how-it-works_mobileFeatureDescription__hf_K1 strong {
  color: #374151;
  font-weight: 600;
}

.how-it-works_mobileContentFooter__59ab0 {
  padding: 12px 16px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  font-size: 12px;
  color: #475569;
  text-align: center;
  font-weight: 500;
}

/* Mobile Navigation Controls */
.how-it-works_mobileControls__XdEEm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 8px;
}

.how-it-works_mobileNavButton__p4vo2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid #e2e8f0;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.how-it-works_mobileNavButton__p4vo2:active {
  transform: scale(0.95);
  background: #f8fafc;
}

.how-it-works_mobileSwipeHint__3Rr5d {
  font-size: 12px;
  color: #94a3b8;
}

/* ===== Desktop Stepper Styles ===== */

.how-it-works_desktopContainer__IjNn0 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.how-it-works_desktopVisible__c2sBy {
  opacity: 1;
  transform: translateY(0);
}

/* Stepper Navigation */
.how-it-works_stepper__oRWWc {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  position: relative;
}

.how-it-works_stepperItem__xDD3c {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  max-width: 180px;
}

.how-it-works_stepperConnector__ixZHP {
  position: absolute;
  top: 24px;
  right: 50%;
  width: 100%;
  height: 3px;
  background: #e2e8f0;
  z-index: 0;
  transition: background 0.4s ease;
}

.how-it-works_stepperConnectorActive__z9psW {
  background: linear-gradient(90deg, var(--connector-color, #2196F3), var(--connector-color, #2196F3));
}

/* Step Node */
.how-it-works_stepperNode__a4nsf {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  border: 3px solid #e2e8f0;
  cursor: pointer;
  z-index: 1;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.how-it-works_stepperNode__a4nsf:hover {
  border-color: var(--step-color, #2196F3);
  transform: scale(1.08);
}

.how-it-works_stepperNodeActive__f_cmN {
  border-color: var(--step-color, #2196F3);
  box-shadow: 0 0 0 4px var(--panel-color-light, rgba(33, 150, 243, 0.15));
}

.how-it-works_stepperNodePast__uXGDB {
  border-color: var(--step-color, #2196F3);
  background: var(--step-color, #2196F3);
}

.how-it-works_stepperNodePast__uXGDB .how-it-works_stepperNodeIcon__bBJMu {
  color: white;
}

.how-it-works_stepperNodeInner__8tL_t {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.how-it-works_stepperNodeIcon__bBJMu {
  width: 20px;
  height: 20px;
  color: #64748b;
  transition: color 0.3s ease;
}

.how-it-works_stepperNodeActive__f_cmN .how-it-works_stepperNodeIcon__bBJMu {
  color: var(--step-color, #2196F3);
}

/* Progress Ring */
.how-it-works_progressRing__BswOb {
  position: absolute;
  width: 48px;
  height: 48px;
  transform: rotate(-90deg);
  pointer-events: none;
}

.how-it-works_progressRingBg__mfZRE {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

.how-it-works_progressRingFill__0Zhil {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 138.2;
  transition: stroke-dashoffset 0.1s linear;
}

/* Stepper Labels */
.how-it-works_stepperLabel__Na1Y5 {
  margin-top: 12px;
  text-align: center;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.how-it-works_stepperLabelActive__8uE1A {
  opacity: 1;
}

.how-it-works_stepperNumber__hBp1g {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.how-it-works_stepperTitle__oOr5X {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  transition: color 0.3s ease;
}

/* Content Panel */
/* One height for all four steps. The Previous / Pause / Next controls sit below this
   panel, and with each step sizing itself they moved by up to 256px between steps - click
   Next once and the button was no longer under the cursor. Pinned to the tallest step
   (Improve, 833px) and rounded up; min-height rather than height, so nothing can clip if a
   step's copy grows.

   Two values, because the panel stacks below 901px and each step then needs a little more
   height. Both bands are pinned now that all four shots are the same wide shape - when the
   steps used mixed portrait and landscape captures the stacked spread was 344px, and one
   height there would have meant real voids rather than breathing room. */
@media (min-width: 768px) {
  .how-it-works_contentPanel__Tt_Gm {
    min-height: 865px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 901px) {
  .how-it-works_contentPanel__Tt_Gm {
    min-height: 845px;
  }
}

.how-it-works_contentPanel__Tt_Gm {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 10px 20px rgba(0, 0, 0, 0.04),
    0 20px 40px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.how-it-works_contentPanel__Tt_Gm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--panel-color, #2196F3), var(--panel-color, #2196F3));
  border-radius: 16px 16px 0 0;
}

/* Holds both slides in a single grid cell while one crosses over the other. Grid rather
   than absolute positioning so the stage is still as tall as its tallest child - nothing
   can overflow the panel if a step's copy grows. */
.how-it-works_contentStage__KfTQA {
  display: grid;
}

.how-it-works_contentStage__KfTQA > * {
  grid-area: 1 / 1;
}

/* Inner content wrapper for animations */
.how-it-works_contentInner__yJlyg {
  display: grid;
  /* Copy on the left, the screen the step happens on to the right of it. The screen gets
     the larger share: these are captures of real app panels and their legibility is the
     point of the section. At this ratio the shot lands at 82-90% of its captured size -
     close to native, and never upscaled. */
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.how-it-works_contentShotSide__s5hCD {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Wide variant - used by the Discover step, whose screen is a data grid. Eight columns
   shrunk into the side column would be unreadable, so the copy runs across the top and
   the grid gets the full panel width underneath. The features drop into a row so the
   panel does not grow much taller than the side-by-side steps. */
.how-it-works_contentInnerWide__H75UI {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Copy left, the three features right, so the top block stays about as tall as the
   side-by-side steps and the panel does not lurch when the carousel returns here. */
.how-it-works_contentInnerWide__H75UI .how-it-works_contentText__oKAX3 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  /* The features column is the taller of the two - pin the copy rows to their own height
     so the badge, headline and description do not drift apart to fill it. */
  grid-template-rows: auto auto 1fr;
  column-gap: 40px;
  align-items: start;
}

.how-it-works_contentInnerWide__H75UI .how-it-works_contentBadge__sstFE {
  grid-column: 1;
  justify-self: start;
}

.how-it-works_contentInnerWide__H75UI .how-it-works_contentHeadline__i9ZgP,
.how-it-works_contentInnerWide__H75UI .how-it-works_contentDescription__n3VLL {
  grid-column: 1;
}

.how-it-works_contentInnerWide__H75UI .how-it-works_contentDescription__n3VLL {
  align-self: start;
}

.how-it-works_contentInnerWide__H75UI .how-it-works_contentFeatures__qGHbw {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin-top: 0;
  align-self: center;
}

/* Elevation rather than an outline, so it reads as a captured screen rather than
   another card in a section already full of them. */
.how-it-works_contentShot__z4nPT {
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 16px 40px -18px rgba(15, 23, 42, 0.22),
    0 2px 6px -2px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}

.how-it-works_contentShot__z4nPT {
  display: flex;
  justify-content: center;
}

/* Landscape shots fill the column; a portrait one (the trading plan panel) would otherwise
   run to ~690px and make this step tower over the other three, so it is capped by height
   and takes whatever width its aspect then gives it. */
.how-it-works_contentShot__z4nPT img {
  display: block;
  width: auto;
  height: auto;
  /* Never past 1:1. Every capture is taken at deviceScaleFactor 2, so --shot-native is
     the file's width in CSS pixels; without this a wide column upscales the smaller
     panels and they go soft. */
  max-width: min(100%, var(--shot-native, 100%));
  max-height: 560px;
}

.how-it-works_mobileContentShot__X9Jwn {
  margin: 4px 0 2px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 10px 24px -12px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}

.how-it-works_mobileContentShot__X9Jwn img {
  display: block;
  width: 100%;
  height: auto;
}

/* Content Text Side */
.how-it-works_contentText__oKAX3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.how-it-works_contentBadge__sstFE {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  width: fit-content;
  margin-bottom: 16px;
}

.how-it-works_contentHeadline__i9ZgP {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.how-it-works_contentDescription__n3VLL {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Content Features Side */
.how-it-works_contentFeatures__qGHbw {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.how-it-works_featureItem__dmCSz {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.how-it-works_featureItem__dmCSz:hover {
  border-color: var(--panel-color, #2196F3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateX(4px);
}

.how-it-works_featureIcon__m9Gbu {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.how-it-works_featureSvg__G_jjt {
  width: 20px;
  height: 20px;
}

.how-it-works_featureDetails___q_zM {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.how-it-works_featureTitle__ujBqw {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.how-it-works_featureDescription__zM0IR {
  font-size: 13px;
  color: #64748b;
}

.how-it-works_featureDescription__zM0IR strong {
  color: #374151;
  font-weight: 600;
}

.how-it-works_contentFooter__Rnj4G {
  margin-top: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 10px;
  font-size: 13px;
  color: #475569;
  text-align: center;
  font-weight: 500;
}

/* Desktop Controls */
.how-it-works_desktopControls__j5lri {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.how-it-works_navButton__6nKx6 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.how-it-works_navButton__6nKx6:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #374151;
}

.how-it-works_navButton__6nKx6:active {
  transform: scale(0.98);
}

.how-it-works_playPauseButton__JSOIR {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.how-it-works_playPauseButton__JSOIR:hover {
  background: #e2e8f0;
  color: #374151;
}

/* Tablet adjustments */
@media (max-width: 900px) {
  .how-it-works_contentPanel__Tt_Gm {
    padding: 24px;
  }

  .how-it-works_contentInner__yJlyg {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Stacked, so a tall portrait shot pushes this step well past the others. The panel is
     deliberately not pinned to one height here the way it is from 901px - stacked content
     heights genuinely differ, and forcing one would leave 250px voids rather than the
     ~140px of breathing room it buys on desktop. */
  .how-it-works_contentShot__z4nPT img {
    max-height: 470px;
  }

  .how-it-works_contentInnerWide__H75UI .how-it-works_contentText__oKAX3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .how-it-works_contentInnerWide__H75UI .how-it-works_contentFeatures__qGHbw {
    grid-column: 1;
    grid-row: auto;
    margin-top: 20px;
  }

  .how-it-works_contentText__oKAX3 {
    text-align: center;
  }

  .how-it-works_contentBadge__sstFE {
    margin-left: auto;
    margin-right: auto;
  }

  .how-it-works_contentHeadline__i9ZgP {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-it-works_desktopContainer__IjNn0,
  .how-it-works_mobileContainer__ySQks {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .how-it-works_stepperNode__a4nsf,
  .how-it-works_featureItem__dmCSz,
  .how-it-works_navButton__6nKx6,
  .how-it-works_playPauseButton__JSOIR,
  .how-it-works_mobileStepNode__tEcb0,
  .how-it-works_mobileNavButton__p4vo2,
  .how-it-works_mobileStepLabel__1Px0O {
    transition: none;
  }


  .how-it-works_progressRingFill__0Zhil {
    transition: none;
  }

  .how-it-works_mobileStepNodeActive__LRFto {
    transform: none;
  }
}

/* Background grid pattern */
.trade-sustainably_gridBackground__TVF5w {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes trade-sustainably_gridGlow__El2Jf {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trade-sustainably_reveal__TL7iG {
    opacity: 1;
    transform: none;
  }
}

/* Feature card styling - Premium glass-morphism design */
.trade-sustainably_card__acXQ5 {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 250, 252, 0.9) 50%,
    rgba(241, 245, 249, 0.85) 100%
  ) !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.03),
    0 8px 16px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 280ms ease,
    border-color 280ms ease;
}

.trade-sustainably_card__acXQ5:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(33, 150, 243, 0.2) !important;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.02),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 16px 32px rgba(33, 150, 243, 0.08),
    0 24px 48px rgba(33, 150, 243, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02) !important;
}

/* Gradient border glow on hover */
.trade-sustainably_card__acXQ5::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(116, 176, 245, 0.6) 0%,
    rgba(33, 150, 243, 0.8) 50%,
    rgba(21, 101, 192, 0.6) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.trade-sustainably_card__acXQ5:hover::before {
  opacity: 1;
}

/* Subtle inner glow */
.trade-sustainably_card__acXQ5::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(1rem - 1px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,
    transparent 50%
  );
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 280ms ease;
}

.trade-sustainably_card__acXQ5:hover::after {
  opacity: 0.4;
}

/* Icon wrapper - premium styling */
.trade-sustainably_iconWrap__Aahmj {
  background: linear-gradient(
    135deg,
    rgba(239, 245, 254, 1) 0%,
    rgba(219, 234, 254, 0.8) 100%
  );
  box-shadow:
    0 2px 4px rgba(33, 150, 243, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    background 320ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 320ms ease;
}

.trade-sustainably_card__acXQ5:hover .trade-sustainably_iconWrap__Aahmj {
  background: linear-gradient(
    135deg,
    #74b0f5 0%,
    #2196f3 50%,
    #1976d2 100%
  );
  transform: scale(1.08) rotate(-3deg);
  box-shadow:
    0 8px 20px rgba(33, 150, 243, 0.35),
    0 4px 8px rgba(33, 150, 243, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.trade-sustainably_iconWrap__Aahmj svg {
  color: #2196f3;
  transition: color 320ms ease, filter 320ms ease;
}

.trade-sustainably_card__acXQ5:hover .trade-sustainably_iconWrap__Aahmj svg {
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .trade-sustainably_card__acXQ5 {
    transition: none;
  }

  .trade-sustainably_card__acXQ5:hover {
    transform: none;
  }

  .trade-sustainably_card__acXQ5::before,
  .trade-sustainably_card__acXQ5::after {
    transition: none;
  }

  .trade-sustainably_iconWrap__Aahmj {
    transition: none;
  }

  .trade-sustainably_card__acXQ5:hover .trade-sustainably_iconWrap__Aahmj {
    transform: none;
  }
}

/* FAQ - Component-specific styles
 * Note: Common styles moved to globals.css:
 * - .reveal / .reveal-visible (shared animation)
 */

/* FAQ Card */
.faq_faqCard__nKctL {
  position: relative;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.faq_faqCard__nKctL:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.faq_faqCardActive__FyOFc {
  border-color: #2196f3;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

/* Question button */
.faq_questionBtn__rcgdO {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  gap: 16px;
}

.faq_questionBtn__rcgdO:focus {
  outline: none;
}

.faq_questionText__07F8Z {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  flex: 1;
  line-height: 1.5;
}

.faq_questionIcon__jj_C_ {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.faq_questionIcon__jj_C_ svg {
  width: 16px;
  height: 16px;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.faq_faqCard__nKctL:hover .faq_questionIcon__jj_C_ svg {
  color: #64748b;
}

.faq_questionIconActive__6F7Do {
  transform: rotate(180deg);
}

.faq_questionIconActive__6F7Do svg {
  color: #2196f3 !important;
}

/* Answer section */
.faq_answerContent__5aVfj {
  padding: 0 20px 16px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
  border-top: 1px solid #f1f5f9;
  margin-top: 0;
  padding-top: 12px;
}

/* ---------- Billing cycle toggle ---------- */
.pricing_toggle__cBHTJ {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 2rem;
}

.pricing_toggleOption__0q2O1 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}

.pricing_toggleOption__0q2O1:hover {
  color: #1e293b;
}

.pricing_toggleOptionActive__WrVJF {
  color: #1e293b;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

.pricing_toggleOption__0q2O1:focus-visible {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

.pricing_savingBadge__rdvEE {
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #16a34a;
  background: rgba(46, 189, 133, 0.12);
  border-radius: 2rem;
  white-space: nowrap;
}

/* ---------- Plan grid ---------- */
.pricing_grid__btAPd {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.pricing_card__A63YH {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.25rem 2rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease-out,
    border-color 0.3s ease-out;
}

.pricing_card__A63YH:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.06);
  border-color: #2196f3;
}

/* Highlighted (Trader) card */
.pricing_cardHighlighted__xRj_z {
  border-color: #bfdbfe;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(33, 150, 243, 0.08),
    0 16px 32px rgba(33, 150, 243, 0.06);
}

.pricing_cardHighlighted__xRj_z::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2196f3 0%, #6366f1 50%, #8b5cf6 100%);
}

.pricing_popularBadge__dTKlB {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6366f1;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(139, 92, 246, 0.1) 100%
  );
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 2rem;
}

.pricing_popularBadgeIcon__baXa1 {
  width: 0.75rem;
  height: 0.75rem;
}

/* ---------- Card header ---------- */
.pricing_planName__YtfF0 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.025em;
}

.pricing_planDescription__R26RM {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #64748b;
}

.pricing_priceRow__Z5Gfb {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: 1.5rem;
}

.pricing_price__UD6ay {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pricing_priceUnit__LWUJe {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #64748b;
}

/* Reserves height so both cards' CTAs stay aligned. */
.pricing_priceNote__5k4qh {
  min-height: 2.5rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #64748b;
}

.pricing_cta__ATZtK {
  width: 100%;
  margin-top: 1.5rem;
}

/* ---------- Launch promo ---------- */

.pricing_promoRibbon__wYWuY {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.375rem;
  margin-top: 1rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0770c3;
  background: linear-gradient(
    135deg,
    rgba(33, 150, 243, 0.12) 0%,
    rgba(99, 102, 241, 0.12) 100%
  );
  border: 1px solid rgba(33, 150, 243, 0.25);
  border-radius: 2rem;
}

/* Occupies the same space on the non-promo card so both price rows align. */
.pricing_promoRibbonPlaceholder__k9vse {
  visibility: hidden;
}

.pricing_promoReassurance__xtNRU {
  min-height: 1.25rem;
  margin-top: 0.625rem;
  font-size: 0.75rem;
  text-align: center;
  color: #64748b;
}

/* ---------- Feature list ---------- */
.pricing_features__d2THA {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid #e2e8f0;
}

.pricing_feature__Ajx3g {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #334155;
}

.pricing_featureExcluded__g0Ac9 {
  color: #94a3b8;
}

.pricing_featureIconWrapper__qGWpS {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.0625rem;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: 50%;
  flex-shrink: 0;
}

.pricing_featureIconWrapperExcluded__gB8Wa {
  background: #e2e8f0;
}

.pricing_featureIcon__vMN7u {
  width: 0.6875rem;
  height: 0.6875rem;
  color: #ffffff;
}

.pricing_featureIconExcluded__jKkxO {
  color: #94a3b8;
}

/* ---------- Add-ons ---------- */
.pricing_addons__GAzIp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.pricing_addonCard__7Gqtr {
  padding: 1.5rem;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

.pricing_addonHeader__y3StP {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.pricing_addonName__yu3PT {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.pricing_addonPrice__IVxD4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #2196f3;
  white-space: nowrap;
}

.pricing_addonDescription___mcHk {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #64748b;
}

.pricing_addonDetails__pv2un {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.pricing_addonDetail__wKJJw {
  position: relative;
  padding-left: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
}

.pricing_addonDetail__wKJJw::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 4px;
  height: 4px;
  background: #cbd5e1;
  border-radius: 50%;
}

.pricing_addonsHeading__adWD7 {
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
}

.pricing_addonsSubheading__UbMdT {
  font-size: 0.875rem;
  color: #64748b;
}

/* ---------- Payment note ---------- */
.pricing_paymentNote__PCut3 {
  margin-top: 2rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
  color: #94a3b8;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .pricing_grid__btAPd,
  .pricing_addons__GAzIp {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .pricing_card__A63YH {
    padding: 1.75rem 1.375rem;
    border-radius: 0.5rem;
  }

  .pricing_popularBadge__dTKlB {
    top: 1rem;
    right: 1rem;
  }

  .pricing_planName__YtfF0 {
    font-size: 1.25rem;
  }

  .pricing_price__UD6ay {
    font-size: 2.125rem;
  }

  .pricing_toggle__cBHTJ {
    width: 100%;
    justify-content: center;
  }

  .pricing_toggleOption__0q2O1 {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }

  .pricing_addonHeader__y3StP {
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* Background grid pattern */
.docs-overview_gridBackground__0eT_R {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Diagram container with visibility animation */
.docs-overview_diagramContainer__Os4LI {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.docs-overview_diagramContainer__Os4LI.docs-overview_visible__aSUPz {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .docs-overview_diagramContainer__Os4LI {
    opacity: 1;
    transform: none;
  }
}

/* Cards grid - two cards side by side */
.docs-overview_cardsGrid__788gG {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 900px) {
  .docs-overview_cardsGrid__788gG {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Card styling matching diagram cards */
.docs-overview_card__KzFCJ {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.04);
  overflow: visible;
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--delay, 0ms),
    transform var(--reveal-duration) var(--reveal-ease) var(--delay, 0ms),
    box-shadow 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.docs-overview_card__KzFCJ.docs-overview_cardVisible__35zzR {
  opacity: 1;
  transform: scale(1);
}

.docs-overview_card__KzFCJ.docs-overview_cardVisible__35zzR:hover {
  transform: scale(1) translateY(-6px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--card-color, #2196F3);
}

@media (prefers-reduced-motion: reduce) {
  .docs-overview_card__KzFCJ {
    opacity: 1;
    transform: scale(1);
  }
}

/* Header icon inside card header */
.docs-overview_headerIcon__vzwZe {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  position: absolute;
  left: 1.25rem;
}

.docs-overview_headerIconSvg__4c4fJ {
  width: 18px;
  height: 18px;
  color: #ffffff;
}

/* Card header */
.docs-overview_cardHeader__6faOs {
  padding: 1rem 1.25rem;
  border-radius: 0.45rem 0.45rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.docs-overview_cardHeader__6faOs::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.docs-overview_cardTitle__HRJri {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  flex: 1;
  text-align: center;
}

/* Card body */
.docs-overview_cardBody__KhYLA {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-radius: 0 0 0.45rem 0.45rem;
}

.docs-overview_cardDescription__qNe9g {
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* Card content - list of data rows */
.docs-overview_cardContent__wfots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Data row styling */
.docs-overview_dataRow__Gi4Fq {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border: 1px solid rgba(0, 0, 0, 0.04);
  text-decoration: none;
  transition: all 0.2s ease-out;
  position: relative;
}

.docs-overview_dataRow__Gi4Fq::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--row-color, #2196f3);
  border-radius: 0 2px 2px 0;
  transition: height 0.2s ease-out;
}

.docs-overview_dataRow__Gi4Fq:hover {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.docs-overview_dataRow__Gi4Fq:hover::before {
  height: 60%;
}

/* Data icon */
.docs-overview_dataIcon__oqrgD {
  width: 38px;
  height: 38px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.docs-overview_dataSvg__9AYAC {
  width: 18px;
  height: 18px;
}

/* Data details */
.docs-overview_dataDetails__GgXwX {
  flex: 1;
  min-width: 0;
}

.docs-overview_dataType__Gfapn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.docs-overview_dataValue__dnGz4 {
  font-size: 0.75rem;
  color: #64748b;
  display: block;
  margin-top: 0.1875rem;
}

/* Arrow icon for links */
.docs-overview_dataArrow__UOBjg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.docs-overview_dataRow__Gi4Fq:hover .docs-overview_dataArrow__UOBjg {
  opacity: 1;
  transform: translateX(2px);
}

/* Coming soon badge */
.docs-overview_comingSoonBadge__Uibf5 {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.125rem 0.375rem;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 0.25rem;
  letter-spacing: 0.025em;
}

/* Feature count badge */
.docs-overview_featureCount__Nud5P {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  flex-shrink: 0;
}

/* Card footer */
.docs-overview_cardFooter__zCnh4 {
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 0 0 0.45rem 0.45rem;
  margin-top: auto;
}

.docs-overview_footerLink__0NWJq {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #2196F3;
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.docs-overview_footerLink__0NWJq:hover {
  color: #1976D2;
  gap: 0.625rem;
}

/* Trader Types Section - User Types */

/* Background grid pattern */
.trader-types_gridBackground__RUDVb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes trader-types_gridGlow__ycF31 {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.trader-types_cardsContainer__BZYbV {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.trader-types_card___2Lz2 {
  grid-column: span 2;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.04);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  transition-delay: var(--delay, 0ms);
}

.trader-types_visible__hwQo_ .trader-types_card___2Lz2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.trader-types_card___2Lz2:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--card-icon, #3b82f6);
  border-color: var(--card-icon, #3b82f6);
  transition-delay: 0ms;
}

.trader-types_cardIcon__aeJDf {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: linear-gradient(145deg, #ffffff, var(--card-bg, #f0f9ff));
  border: 1px solid var(--card-border, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.trader-types_icon__ZvwbM {
  width: 32px;
  height: 32px;
  color: var(--card-icon, #3b82f6);
}

.trader-types_cardContent__BasWV {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.trader-types_cardHeader__U_RFu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trader-types_cardTitle__4kAUs {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.trader-types_cardSubtitle__XtcEN {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--card-icon, #3b82f6);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trader-types_cardDescription__iNt4h {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.trader-types_benefitsList__fP_mZ {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.trader-types_benefitItem__W_x1B {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.4;
}

.trader-types_benefitCheck__BeTS6 {
  color: var(--card-icon, #3b82f6);
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Center the last 2 cards on the second row */
.trader-types_card___2Lz2:nth-child(4) {
  grid-column: 2 / span 2;
}

.trader-types_card___2Lz2:nth-child(5) {
  grid-column: 4 / span 2;
}

/* Tablet - 2 columns */
@media (max-width: 1024px) {
  .trader-types_cardsContainer__BZYbV {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .trader-types_card___2Lz2 {
    grid-column: span 1;
  }

  .trader-types_card___2Lz2:nth-child(4),
  .trader-types_card___2Lz2:nth-child(5) {
    grid-column: span 1;
  }

  .trader-types_card___2Lz2:last-child {
    grid-column: 1 / -1;
    max-width: 400px;
    justify-self: center;
  }
}

/* Mobile - 1 column */
@media (max-width: 640px) {
  .trader-types_cardsContainer__BZYbV {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .trader-types_card___2Lz2 {
    grid-column: span 1;
    padding: 1.25rem;
  }

  .trader-types_card___2Lz2:nth-child(4),
  .trader-types_card___2Lz2:nth-child(5) {
    grid-column: span 1;
  }

  .trader-types_card___2Lz2:last-child {
    max-width: none;
  }

  .trader-types_cardIcon__aeJDf {
    width: 48px;
    height: 48px;
  }

  .trader-types_icon__ZvwbM {
    width: 28px;
    height: 28px;
  }

  .trader-types_cardTitle__4kAUs {
    font-size: 1rem;
  }

  .trader-types_cardDescription__iNt4h {
    font-size: 0.8125rem;
  }

  .trader-types_benefitItem__W_x1B {
    font-size: 0.75rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .trader-types_card___2Lz2 {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .trader-types_card___2Lz2:hover {
    transform: none;
  }
}

.supported-exchanges_section__3EAuE {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* Exchanges Grid */
.supported-exchanges_exchangeGrid__FG_R8 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.supported-exchanges_exchangeCard___AsOd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  padding: 1.5rem 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  transition: all 200ms ease;
}

.supported-exchanges_exchangeCard___AsOd:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.supported-exchanges_exchangeLogo__eHmP9 {
  height: 2.25rem;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.8;
  transition: all 200ms ease;
}

.supported-exchanges_exchangeCard___AsOd:hover .supported-exchanges_exchangeLogo__eHmP9 {
  opacity: 1;
}

.supported-exchanges_exchangeName__tE6pg {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  text-align: center;
}

/* Coming Soon Note */
.supported-exchanges_comingNote__IWShf {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: #94a3b8;
}

@media (max-width: 640px) {
  .supported-exchanges_exchangeCard___AsOd {
    width: calc(50% - 0.5rem);
    max-width: 140px;
  }
}

/* Analytics Feature Page - Premium Editorial Layout */

/* ========================================
   SECTIONS CONTAINER
   ======================================== */
.analytics_sectionsContainer__khdJW {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ========================================
   FEATURE SECTION - Full Width Alternating
   ======================================== */
.analytics_featureSection__lMr81 {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.analytics_featureSectionVisible__ourXS {
  opacity: 1;
  transform: translateY(0);
}

/* Alternating backgrounds */
.analytics_featureSection__lMr81:nth-child(odd) {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.analytics_featureSection__lMr81:nth-child(even) {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Reverse layout for odd-indexed sections (2nd, 4th) */
.analytics_featureSectionReversed__cwkHK .analytics_contentSide__6Jghh {
  order: 2;
}

.analytics_featureSectionReversed__cwkHK .analytics_visualSide__xup5o {
  order: 1;
}

/* ========================================
   CONTENT SIDE (Text)
   ======================================== */
.analytics_contentSide__6Jghh {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.analytics_sectionLabel__doynF {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #8B5CF6);
}

.analytics_sectionLabel__doynF::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent, #8B5CF6);
  border-radius: 1px;
}

.analytics_sectionTitle__FbqWq {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.analytics_sectionDescription__d1Z7K {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #475569;
}

.analytics_benefitsList__3MurU {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.5rem;
}

.analytics_benefitItem__mKiy8 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.5;
}

.analytics_benefitIcon__fy7J_ {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: linear-gradient(135deg, var(--accent-light, #C4B5FD) 0%, var(--accent, #8B5CF6) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.analytics_benefitIcon__fy7J_ svg {
  width: 11px;
  height: 11px;
  color: white;
}

/* ========================================
   VISUAL SIDE (Diagram)
   ======================================== */
.analytics_visualSide__xup5o {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.analytics_visualWrapper__6_D56 {
  position: relative;
  width: 100%;
  max-width: 640px;
}

/* Subtle glow behind the visual */
.analytics_visualWrapper__6_D56::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse at center,
    var(--accent-glow, rgba(139, 92, 246, 0.08)) 0%,
    transparent 70%
  );
  border-radius: 24px;
  z-index: 0;
}

/* ========================================
   SECTION DIVIDER
   ======================================== */
.analytics_sectionDivider__LbTXD {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e2e8f0 20%,
    #e2e8f0 80%,
    transparent 100%
  );
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 1024px) {
  .analytics_featureSection__lMr81 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem 2rem;
    text-align: center;
  }

  .analytics_featureSectionReversed__cwkHK .analytics_contentSide__6Jghh,
  .analytics_featureSectionReversed__cwkHK .analytics_visualSide__xup5o {
    order: unset;
  }

  .analytics_contentSide__6Jghh {
    align-items: center;
  }

  .analytics_sectionTitle__FbqWq {
    font-size: 1.875rem;
  }

  .analytics_benefitsList__3MurU {
    align-items: flex-start;
    text-align: left;
    max-width: 400px;
  }

  .analytics_visualWrapper__6_D56 {
    max-width: 380px;
  }
}

@media (max-width: 640px) {
  .analytics_featureSection__lMr81 {
    padding: 3rem 1.25rem;
    gap: 2rem;
  }

  .analytics_sectionTitle__FbqWq {
    font-size: 1.5rem;
  }

  .analytics_sectionDescription__d1Z7K {
    font-size: 0.9375rem;
  }

  .analytics_benefitItem__mKiy8 {
    font-size: 0.875rem;
  }

  .analytics_visualWrapper__6_D56 {
    max-width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .analytics_featureSection__lMr81 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================
   VISUAL - REAL APP SCREENSHOT
   Each shot is a panel of the app's trade detail page and carries its own titled header, so it
   needs a frame rather than the card chrome the hand-drawn mocks used to sit in.
   ======================================== */
.analytics_visualShot__AUVfH {
  position: relative;
  z-index: 1;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 18px 40px -18px rgba(15, 23, 42, 0.22),
    0 6px 14px -6px rgba(15, 23, 42, 0.1);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.analytics_visualShot__AUVfH:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 52px -18px rgba(15, 23, 42, 0.26),
    0 8px 18px -6px rgba(15, 23, 42, 0.12);
}

@media (max-width: 640px) {
  .analytics_visualShot__AUVfH,
  .analytics_visualShot__AUVfH:hover {
    transform: none;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .analytics_visualShot__AUVfH {
    transition: none;
  }

  .analytics_visualShot__AUVfH:hover {
    transform: none;
  }
}

/* ========================================
   WIDE SECTION
   A chart carrying a dozen labelled detections needs the full column; at half width its labels
   collapse into an unreadable band. Text stacks above the shot instead of beside it.
   ======================================== */
.analytics_featureSectionWide__pCXTD {
  grid-template-columns: 1fr;
  gap: 2.5rem;
  /* Wider than the standard section: this shot is a row of three app cards, and at the usual
     1200px the app renders at ~80% of its native scale, which shrinks the insight lines. */
  max-width: 1400px;
}

.analytics_featureSectionWide__pCXTD .analytics_contentSide__6Jghh {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  align-items: center;
}

.analytics_featureSectionWide__pCXTD .analytics_benefitsList__3MurU {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.analytics_featureSectionWide__pCXTD .analytics_visualWrapper__6_D56 {
  max-width: 100%;
}

@media (max-width: 900px) {
  .analytics_featureSectionWide__pCXTD .analytics_benefitsList__3MurU {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .analytics_featureSectionWide__pCXTD .analytics_contentSide__6Jghh {
    text-align: left;
    align-items: flex-start;
  }
}

/* Market Screener Feature Page - Premium Editorial Layout */

/* ========================================
   SECTIONS CONTAINER
   ======================================== */
.market-screener_sectionsContainer__Bu6kT {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ========================================
   FEATURE SECTION - Full Width Alternating
   ======================================== */
.market-screener_featureSection__kyAYu {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.market-screener_featureSectionVisible__UazMB {
  opacity: 1;
  transform: translateY(0);
}

/* Alternating backgrounds */
.market-screener_featureSection__kyAYu:nth-child(odd) {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.market-screener_featureSection__kyAYu:nth-child(even) {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Reverse layout for odd-indexed sections (2nd, 4th) */
.market-screener_featureSectionReversed__iQv2x .market-screener_contentSide__BcZ4f {
  order: 2;
}

.market-screener_featureSectionReversed__iQv2x .market-screener_visualSide__1RUAB {
  order: 1;
}

/* ========================================
   CONTENT SIDE (Text)
   ======================================== */
.market-screener_contentSide__BcZ4f {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.market-screener_sectionLabel__sZRzZ {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #059669);
}

.market-screener_sectionLabel__sZRzZ::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent, #059669);
  border-radius: 1px;
}

.market-screener_sectionTitle__3YzfI {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.market-screener_sectionDescription__5brjx {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #475569;
}

.market-screener_benefitsList__JQP36 {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.5rem;
}

.market-screener_benefitItem__A3rCF {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.5;
}

.market-screener_benefitIcon__zLDsN {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: linear-gradient(135deg, var(--accent-light, #A7F3D0) 0%, var(--accent, #059669) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.market-screener_benefitIcon__zLDsN svg {
  width: 11px;
  height: 11px;
  color: white;
}

/* ========================================
   VISUAL SIDE (Diagram)
   ======================================== */
.market-screener_visualSide__1RUAB {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.market-screener_visualWrapper__37iAv {
  position: relative;
  width: 100%;
  max-width: 640px;
}

/* Subtle glow behind the visual */
.market-screener_visualWrapper__37iAv::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse at center,
    var(--accent-glow, rgba(5, 150, 105, 0.08)) 0%,
    transparent 70%
  );
  border-radius: 24px;
  z-index: 0;
}

/* ========================================
   SECTION DIVIDER
   ======================================== */
.market-screener_sectionDivider__mfJIo {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e2e8f0 20%,
    #e2e8f0 80%,
    transparent 100%
  );
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 1024px) {
  .market-screener_featureSection__kyAYu {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem 2rem;
    text-align: center;
  }

  .market-screener_featureSectionReversed__iQv2x .market-screener_contentSide__BcZ4f,
  .market-screener_featureSectionReversed__iQv2x .market-screener_visualSide__1RUAB {
    order: unset;
  }

  .market-screener_contentSide__BcZ4f {
    align-items: center;
  }

  .market-screener_sectionTitle__3YzfI {
    font-size: 1.875rem;
  }

  .market-screener_benefitsList__JQP36 {
    align-items: flex-start;
    text-align: left;
    max-width: 400px;
  }

  .market-screener_visualWrapper__37iAv {
    max-width: 380px;
  }
}

@media (max-width: 640px) {
  .market-screener_featureSection__kyAYu {
    padding: 3rem 1.25rem;
    gap: 2rem;
  }

  .market-screener_sectionTitle__3YzfI {
    font-size: 1.5rem;
  }

  .market-screener_sectionDescription__5brjx {
    font-size: 0.9375rem;
  }

  .market-screener_benefitItem__A3rCF {
    font-size: 0.875rem;
  }

  .market-screener_visualWrapper__37iAv {
    max-width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .market-screener_featureSection__kyAYu {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================
   VISUAL - REAL APP SCREENSHOT
   Each shot is a panel of the app's trade detail page and carries its own titled header, so it
   needs a frame rather than the card chrome the hand-drawn mocks used to sit in.
   ======================================== */
.market-screener_visualShot__xiDRV {
  position: relative;
  z-index: 1;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 18px 40px -18px rgba(15, 23, 42, 0.22),
    0 6px 14px -6px rgba(15, 23, 42, 0.1);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.market-screener_visualShot__xiDRV:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 52px -18px rgba(15, 23, 42, 0.26),
    0 8px 18px -6px rgba(15, 23, 42, 0.12);
}

@media (max-width: 640px) {
  .market-screener_visualShot__xiDRV,
  .market-screener_visualShot__xiDRV:hover {
    transform: none;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .market-screener_visualShot__xiDRV {
    transition: none;
  }

  .market-screener_visualShot__xiDRV:hover {
    transform: none;
  }
}

/* ========================================
   WIDE SECTION
   A chart carrying a dozen labelled detections needs the full column; at half width its labels
   collapse into an unreadable band. Text stacks above the shot instead of beside it.
   ======================================== */
.market-screener_featureSectionWide__UpYEk {
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.market-screener_featureSectionWide__UpYEk .market-screener_contentSide__BcZ4f {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  align-items: center;
}

.market-screener_featureSectionWide__UpYEk .market-screener_benefitsList__JQP36 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.market-screener_featureSectionWide__UpYEk .market-screener_visualWrapper__37iAv {
  max-width: 100%;
}

@media (max-width: 900px) {
  .market-screener_featureSectionWide__UpYEk .market-screener_benefitsList__JQP36 {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .market-screener_featureSectionWide__UpYEk .market-screener_contentSide__BcZ4f {
    text-align: left;
    align-items: flex-start;
  }
}

/* Dashboard Feature Page - Premium Editorial Layout */

/* ========================================
   SECTIONS CONTAINER
   ======================================== */
.dashboard_sectionsContainer__gp9sv {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ========================================
   FEATURE SECTION - Full Width Alternating
   ======================================== */
.dashboard_featureSection__7tTT7 {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dashboard_featureSectionVisible__8_F0C {
  opacity: 1;
  transform: translateY(0);
}

/* Alternating backgrounds */
.dashboard_featureSection__7tTT7:nth-child(odd) {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.dashboard_featureSection__7tTT7:nth-child(even) {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Reverse layout for even sections (2nd, 4th, etc.) */
.dashboard_featureSectionReversed__EFxjJ .dashboard_contentSide__LzPNy {
  order: 2;
}

.dashboard_featureSectionReversed__EFxjJ .dashboard_visualSide__LSHFt {
  order: 1;
}

/* ========================================
   CONTENT SIDE (Text)
   ======================================== */
.dashboard_contentSide__LzPNy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard_sectionLabel__5F5MW {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #2196F3);
}

.dashboard_sectionLabel__5F5MW::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent, #2196F3);
  border-radius: 1px;
}

.dashboard_sectionTitle__0EpmB {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.dashboard_sectionDescription__CZdsF {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #475569;
}

.dashboard_benefitsList__dhPrk {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.5rem;
}

.dashboard_benefitItem__M4pet {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.5;
}

.dashboard_benefitIcon__X9usK {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: linear-gradient(135deg, var(--accent-light, #74B0F5) 0%, var(--accent, #2196F3) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard_benefitIcon__X9usK svg {
  width: 11px;
  height: 11px;
  color: white;
}

/* ========================================
   VISUAL SIDE (Diagram)
   ======================================== */
.dashboard_visualSide__LSHFt {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard_visualWrapper___oayZ {
  position: relative;
  width: 100%;
  max-width: 640px;
}

/* Subtle glow behind the visual */
.dashboard_visualWrapper___oayZ::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse at center,
    var(--accent-glow, rgba(33, 150, 243, 0.08)) 0%,
    transparent 70%
  );
  border-radius: 24px;
  z-index: 0;
}

/* ========================================
   SECTION DIVIDER
   ======================================== */
.dashboard_sectionDivider__3eR_O {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e2e8f0 20%,
    #e2e8f0 80%,
    transparent 100%
  );
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 1024px) {
  .dashboard_featureSection__7tTT7 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem 2rem;
    text-align: center;
  }

  .dashboard_featureSectionReversed__EFxjJ .dashboard_contentSide__LzPNy,
  .dashboard_featureSectionReversed__EFxjJ .dashboard_visualSide__LSHFt {
    order: unset;
  }

  .dashboard_contentSide__LzPNy {
    align-items: center;
  }

  .dashboard_sectionTitle__0EpmB {
    font-size: 1.875rem;
  }

  .dashboard_benefitsList__dhPrk {
    align-items: flex-start;
    text-align: left;
    max-width: 400px;
  }

  .dashboard_visualWrapper___oayZ {
    max-width: 380px;
  }
}

@media (max-width: 640px) {
  .dashboard_featureSection__7tTT7 {
    padding: 3rem 1.25rem;
    gap: 2rem;
  }

  .dashboard_sectionTitle__0EpmB {
    font-size: 1.5rem;
  }

  .dashboard_sectionDescription__CZdsF {
    font-size: 0.9375rem;
  }

  .dashboard_benefitItem__M4pet {
    font-size: 0.875rem;
  }

  .dashboard_visualWrapper___oayZ {
    max-width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dashboard_featureSection__7tTT7 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================
   VISUAL - REAL APP SCREENSHOT
   Each shot is a panel of the app's trade detail page and carries its own titled header, so it
   needs a frame rather than the card chrome the hand-drawn mocks used to sit in.
   ======================================== */
.dashboard_visualShot__3xPOW {
  position: relative;
  z-index: 1;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 18px 40px -18px rgba(15, 23, 42, 0.22),
    0 6px 14px -6px rgba(15, 23, 42, 0.1);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.dashboard_visualShot__3xPOW:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 52px -18px rgba(15, 23, 42, 0.26),
    0 8px 18px -6px rgba(15, 23, 42, 0.12);
}

@media (max-width: 640px) {
  .dashboard_visualShot__3xPOW,
  .dashboard_visualShot__3xPOW:hover {
    transform: none;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard_visualShot__3xPOW {
    transition: none;
  }

  .dashboard_visualShot__3xPOW:hover {
    transform: none;
  }
}

/* ========================================
   WIDE SECTION
   A chart carrying a dozen labelled detections needs the full column; at half width its labels
   collapse into an unreadable band. Text stacks above the shot instead of beside it.
   ======================================== */
.dashboard_featureSectionWide__nVGTN {
  grid-template-columns: 1fr;
  gap: 2.5rem;
  /* Wider than the standard section: this shot is a row of three app cards, and at the usual
     1200px the app renders at ~80% of its native scale, which shrinks the insight lines. */
  max-width: 1400px;
}

.dashboard_featureSectionWide__nVGTN .dashboard_contentSide__LzPNy {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  align-items: center;
}

.dashboard_featureSectionWide__nVGTN .dashboard_benefitsList__dhPrk {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.dashboard_featureSectionWide__nVGTN .dashboard_visualWrapper___oayZ {
  max-width: 100%;
}

@media (max-width: 900px) {
  .dashboard_featureSectionWide__nVGTN .dashboard_benefitsList__dhPrk {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .dashboard_featureSectionWide__nVGTN .dashboard_contentSide__LzPNy {
    text-align: left;
    align-items: flex-start;
  }
}

/* Pattern Probability Feature Page — data-led marketing layout */

.pattern-probability_container__sFx_a {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* ========================================
   KPI STAT BAND
   ======================================== */
.pattern-probability_statBand__GMTQv {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.pattern-probability_statCard__wWYeb {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.03);
}

.pattern-probability_statValue__V3AKY {
  font-size: 1.875rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.pattern-probability_statLabel__EhooD {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 500;
}

/* ========================================
   SECTION HEADING
   ======================================== */
.pattern-probability_blockHeading__VpRMp {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2rem;
}

.pattern-probability_blockLabel__XcreP {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #2196f3;
  margin-bottom: 0.75rem;
}

.pattern-probability_blockLabel__XcreP::before {
  content: "";
  width: 24px;
  height: 2px;
  background: #2196f3;
  border-radius: 1px;
}

.pattern-probability_blockTitle__EWPAj {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.pattern-probability_blockSubtitle__sNlp3 {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #475569;
}

/* ========================================
   LEADERBOARD TABLE
   ======================================== */
.pattern-probability_tableCard__RuElR {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.04);
}

.pattern-probability_tableScroll__o06Pm {
  overflow-x: auto;
}

.pattern-probability_table__nzcSk {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.pattern-probability_table__nzcSk thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  padding: 0.875rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.pattern-probability_table__nzcSk tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.9375rem;
  color: #1e293b;
  vertical-align: middle;
}

.pattern-probability_table__nzcSk tbody tr:last-child td {
  border-bottom: none;
}

.pattern-probability_table__nzcSk tbody tr {
  transition: background 160ms ease;
}

.pattern-probability_table__nzcSk tbody tr:hover {
  background: #f8fafc;
}

.pattern-probability_rowHighlight__T18KR {
  background: #f0f7ff;
}

.pattern-probability_rowHighlight__T18KR:hover {
  background: #e8f2ff !important;
}

.pattern-probability_rankCell__6h5S0 {
  width: 40px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pattern-probability_patternName__dWork {
  font-weight: 600;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pattern-probability_starBadge__gBSRO {
  font-size: 0.625rem;
  font-weight: 600;
  color: #2196f3;
  background: #e2ecfd;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

.pattern-probability_dirBadge__4YxvG {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  white-space: nowrap;
}

.pattern-probability_dirBull__8eEy9 {
  background: #dcfce7;
  color: #059669;
}

.pattern-probability_dirBear__jeYf1 {
  background: #fef2f2;
  color: #ea5050;
}

/* Reward target production ships for the pattern: 2R thrust / 1R reversal */
.pattern-probability_targetBadge__YOGyi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
  cursor: help;
}

.pattern-probability_targetTwo__e_Zsz {
  background: #e2ecfd;
  color: #1e88dc;
}

.pattern-probability_targetOne__a73MU {
  background: #f1f5f9;
  color: #64748b;
}

.pattern-probability_winCell__Z1WLq {
  min-width: 150px;
}

.pattern-probability_winWrap__MiE2T {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.pattern-probability_winValue__7xTpa {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0f172a;
  width: 46px;
}

.pattern-probability_winTrack__FaGp_ {
  position: relative;
  flex: 1;
  height: 6px;
  background: #eef2f7;
  border-radius: 3px;
  overflow: hidden;
}

.pattern-probability_winFill__pfnsS {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #74b0f5, #2196f3);
  border-radius: 3px;
}

.pattern-probability_rCell__3nBZK {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #059669;
  white-space: nowrap;
}

.pattern-probability_nCell__gsMo3 {
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
  white-space: nowrap;
}

.pattern-probability_tableNote__tiTLi {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: #94a3b8;
  background: #fbfcfe;
  border-top: 1px solid #f1f5f9;
}

/* ========================================
   METHODOLOGY / R EXPLAINER
   ======================================== */
.pattern-probability_infoGrid__r_ADO {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.pattern-probability_infoCard__Ee69u {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.75rem;
}

.pattern-probability_infoCardTitle__m0RKa {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pattern-probability_ruleList__C9jTU {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pattern-probability_ruleItem__nK8oi {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #334155;
}

.pattern-probability_ruleKey__oqXIa {
  flex-shrink: 0;
  width: 72px;
  font-weight: 600;
  color: #2196f3;
}

.pattern-probability_infoText__fEgoX {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #475569;
}

.pattern-probability_infoText__fEgoX strong {
  color: #0f172a;
  font-weight: 600;
}

/* ========================================
   TIMEFRAME SCALING TABLE
   ======================================== */
.pattern-probability_tfTable__9eXL5 {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.pattern-probability_tfTable__9eXL5 thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  padding: 0.875rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.pattern-probability_tfTable__9eXL5 tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.9375rem;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}

.pattern-probability_tfTable__9eXL5 tbody tr:last-child td {
  border-bottom: none;
}

.pattern-probability_tfLabel__DWKwk {
  font-weight: 700;
  color: #0f172a;
}

.pattern-probability_tfStop__IOwQd {
  color: #ea5050;
  font-weight: 600;
}

.pattern-probability_tfTarget__fnnB7 {
  color: #059669;
  font-weight: 600;
}

/* ========================================
   DISCLAIMER
   ======================================== */
.pattern-probability_disclaimer__GFpOF {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.pattern-probability_disclaimerIcon__axO_F {
  flex-shrink: 0;
  color: #d97706;
  margin-top: 1px;
}

.pattern-probability_disclaimerText__zbaL9 {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #78716c;
}

.pattern-probability_disclaimerText__zbaL9 strong {
  color: #57534e;
  font-weight: 600;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 900px) {
  .pattern-probability_statBand__GMTQv {
    grid-template-columns: repeat(2, 1fr);
  }
  .pattern-probability_infoGrid__r_ADO {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pattern-probability_container__sFx_a {
    gap: 3rem;
    padding: 0 1rem;
  }
  .pattern-probability_blockTitle__EWPAj {
    font-size: 1.625rem;
  }
  .pattern-probability_statValue__V3AKY {
    font-size: 1.5rem;
  }
  .pattern-probability_infoCard__Ee69u {
    padding: 1.25rem;
  }
}

/* Portfolio Feature Page - Premium Editorial Layout */

/* ========================================
   SECTIONS CONTAINER
   ======================================== */
.portfolio_sectionsContainer__aFHAB {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ========================================
   FEATURE SECTION - Full Width Alternating
   ======================================== */
.portfolio_featureSection__Bjwj0 {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.portfolio_featureSectionVisible__d6rp0 {
  opacity: 1;
  transform: translateY(0);
}

/* Alternating backgrounds */
.portfolio_featureSection__Bjwj0:nth-child(odd) {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.portfolio_featureSection__Bjwj0:nth-child(even) {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Reverse layout for odd-indexed sections (2nd, 4th) */
.portfolio_featureSectionReversed__4T0Kz .portfolio_contentSide__g_16n {
  order: 2;
}

.portfolio_featureSectionReversed__4T0Kz .portfolio_visualSide__B1tpB {
  order: 1;
}

/* ========================================
   CONTENT SIDE (Text)
   ======================================== */
.portfolio_contentSide__g_16n {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.portfolio_sectionLabel__E_0pW {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #d97706);
}

.portfolio_sectionLabel__E_0pW::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent, #d97706);
  border-radius: 1px;
}

.portfolio_sectionTitle__gAzEn {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.portfolio_sectionDescription__n1Y5_ {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #475569;
}

.portfolio_benefitsList__HRYK3 {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.5rem;
}

.portfolio_benefitItem___6nJN {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.5;
}

.portfolio_benefitIcon__02gm1 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: linear-gradient(135deg, var(--accent-light, #FED7AA) 0%, var(--accent, #d97706) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.portfolio_benefitIcon__02gm1 svg {
  width: 11px;
  height: 11px;
  color: white;
}

/* ========================================
   VISUAL SIDE (Diagram)
   ======================================== */
.portfolio_visualSide__B1tpB {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio_visualWrapper__iCvte {
  position: relative;
  width: 100%;
  max-width: 640px;
}

/* Subtle glow behind the visual */
.portfolio_visualWrapper__iCvte::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse at center,
    var(--accent-glow, rgba(217, 119, 6, 0.08)) 0%,
    transparent 70%
  );
  border-radius: 24px;
  z-index: 0;
}

/* ========================================
   SECTION DIVIDER
   ======================================== */
.portfolio_sectionDivider__MhC__ {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e2e8f0 20%,
    #e2e8f0 80%,
    transparent 100%
  );
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 1024px) {
  .portfolio_featureSection__Bjwj0 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem 2rem;
    text-align: center;
  }

  .portfolio_featureSectionReversed__4T0Kz .portfolio_contentSide__g_16n,
  .portfolio_featureSectionReversed__4T0Kz .portfolio_visualSide__B1tpB {
    order: unset;
  }

  .portfolio_contentSide__g_16n {
    align-items: center;
  }

  .portfolio_sectionTitle__gAzEn {
    font-size: 1.875rem;
  }

  .portfolio_benefitsList__HRYK3 {
    align-items: flex-start;
    text-align: left;
    max-width: 400px;
  }

  .portfolio_visualWrapper__iCvte {
    max-width: 380px;
  }
}

@media (max-width: 640px) {
  .portfolio_featureSection__Bjwj0 {
    padding: 3rem 1.25rem;
    gap: 2rem;
  }

  .portfolio_sectionTitle__gAzEn {
    font-size: 1.5rem;
  }

  .portfolio_sectionDescription__n1Y5_ {
    font-size: 0.9375rem;
  }

  .portfolio_benefitItem___6nJN {
    font-size: 0.875rem;
  }

  .portfolio_visualWrapper__iCvte {
    max-width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .portfolio_featureSection__Bjwj0 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================
   VISUAL - REAL APP SCREENSHOT
   Each shot is a panel of the app's trade detail page and carries its own titled header, so it
   needs a frame rather than the card chrome the hand-drawn mocks used to sit in.
   ======================================== */
.portfolio_visualShot__RlFXa {
  position: relative;
  z-index: 1;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 18px 40px -18px rgba(15, 23, 42, 0.22),
    0 6px 14px -6px rgba(15, 23, 42, 0.1);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.portfolio_visualShot__RlFXa:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 52px -18px rgba(15, 23, 42, 0.26),
    0 8px 18px -6px rgba(15, 23, 42, 0.12);
}

@media (max-width: 640px) {
  .portfolio_visualShot__RlFXa,
  .portfolio_visualShot__RlFXa:hover {
    transform: none;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio_visualShot__RlFXa {
    transition: none;
  }

  .portfolio_visualShot__RlFXa:hover {
    transform: none;
  }
}

/* Alerts Feature Page - Premium Editorial Layout */

/* ========================================
   SECTIONS CONTAINER
   ======================================== */
.alerts_sectionsContainer__LqCl_ {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ========================================
   FEATURE SECTION - Full Width Alternating
   ======================================== */
.alerts_featureSection__FaXAg {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.alerts_featureSectionVisible__NwhTK {
  opacity: 1;
  transform: translateY(0);
}

/* Alternating backgrounds */
.alerts_featureSection__FaXAg:nth-child(odd) {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.alerts_featureSection__FaXAg:nth-child(even) {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Reverse layout for odd-indexed sections (2nd, 4th) */
.alerts_featureSectionReversed__3YnTp .alerts_contentSide__UdKv0 {
  order: 2;
}

.alerts_featureSectionReversed__3YnTp .alerts_visualSide__5sHB9 {
  order: 1;
}

/* ========================================
   CONTENT SIDE (Text)
   ======================================== */
.alerts_contentSide__UdKv0 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.alerts_sectionLabel__P1CVQ {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #ea5050);
}

.alerts_sectionLabel__P1CVQ::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent, #ea5050);
  border-radius: 1px;
}

.alerts_sectionTitle__jntBO {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.alerts_sectionDescription__AB8rX {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #475569;
}

.alerts_benefitsList__Vm46p {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.5rem;
}

.alerts_benefitItem__YfUD9 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.5;
}

.alerts_benefitIcon__jVydx {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: linear-gradient(135deg, var(--accent-light, #FECACA) 0%, var(--accent, #ea5050) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alerts_benefitIcon__jVydx svg {
  width: 11px;
  height: 11px;
  color: white;
}

/* ========================================
   VISUAL SIDE (Diagram)
   ======================================== */
.alerts_visualSide__5sHB9 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.alerts_visualWrapper__rLu0l {
  position: relative;
  width: 100%;
  max-width: 640px;
}

/* Subtle glow behind the visual */
.alerts_visualWrapper__rLu0l::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse at center,
    var(--accent-glow, rgba(234, 80, 80, 0.08)) 0%,
    transparent 70%
  );
  border-radius: 24px;
  z-index: 0;
}

/* ========================================
   SECTION DIVIDER
   ======================================== */
.alerts_sectionDivider__VZsq3 {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e2e8f0 20%,
    #e2e8f0 80%,
    transparent 100%
  );
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 1024px) {
  .alerts_featureSection__FaXAg {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem 2rem;
    text-align: center;
  }

  .alerts_featureSectionReversed__3YnTp .alerts_contentSide__UdKv0,
  .alerts_featureSectionReversed__3YnTp .alerts_visualSide__5sHB9 {
    order: unset;
  }

  .alerts_contentSide__UdKv0 {
    align-items: center;
  }

  .alerts_sectionTitle__jntBO {
    font-size: 1.875rem;
  }

  .alerts_benefitsList__Vm46p {
    align-items: flex-start;
    text-align: left;
    max-width: 400px;
  }

  .alerts_visualWrapper__rLu0l {
    max-width: 380px;
  }
}

@media (max-width: 640px) {
  .alerts_featureSection__FaXAg {
    padding: 3rem 1.25rem;
    gap: 2rem;
  }

  .alerts_sectionTitle__jntBO {
    font-size: 1.5rem;
  }

  .alerts_sectionDescription__AB8rX {
    font-size: 0.9375rem;
  }

  .alerts_benefitItem__YfUD9 {
    font-size: 0.875rem;
  }

  .alerts_visualWrapper__rLu0l {
    max-width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .alerts_featureSection__FaXAg {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================
   VISUAL - REAL APP SCREENSHOT
   Each shot is a panel of the app's trade detail page and carries its own titled header, so it
   needs a frame rather than the card chrome the hand-drawn mocks used to sit in.
   ======================================== */
.alerts_visualShot__N7ocq {
  position: relative;
  z-index: 1;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 18px 40px -18px rgba(15, 23, 42, 0.22),
    0 6px 14px -6px rgba(15, 23, 42, 0.1);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.alerts_visualShot__N7ocq:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 52px -18px rgba(15, 23, 42, 0.26),
    0 8px 18px -6px rgba(15, 23, 42, 0.12);
}

@media (max-width: 640px) {
  .alerts_visualShot__N7ocq,
  .alerts_visualShot__N7ocq:hover {
    transform: none;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alerts_visualShot__N7ocq {
    transition: none;
  }

  .alerts_visualShot__N7ocq:hover {
    transform: none;
  }
}

/* ========================================
   WIDE SECTION
   A chart carrying a dozen labelled detections needs the full column; at half width its labels
   collapse into an unreadable band. Text stacks above the shot instead of beside it.
   ======================================== */
.alerts_featureSectionWide__BJaN9 {
  grid-template-columns: 1fr;
  gap: 2.5rem;
  /* Wider than the standard section: this shot is a row of three app cards, and at the usual
     1200px the app renders at ~80% of its native scale, which shrinks the insight lines. */
  max-width: 1400px;
}

.alerts_featureSectionWide__BJaN9 .alerts_contentSide__UdKv0 {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  align-items: center;
}

.alerts_featureSectionWide__BJaN9 .alerts_benefitsList__Vm46p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.alerts_featureSectionWide__BJaN9 .alerts_visualWrapper__rLu0l {
  max-width: 100%;
}

@media (max-width: 900px) {
  .alerts_featureSectionWide__BJaN9 .alerts_benefitsList__Vm46p {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .alerts_featureSectionWide__BJaN9 .alerts_contentSide__UdKv0 {
    text-align: left;
    align-items: flex-start;
  }
}

/*
 * Footnote under a screenshot that shows suggested entry, stop or target levels. Deliberately
 * adjacent to the image rather than buried at the page foot: the levels are mechanical output of
 * the pattern engine and must not be read as advice.
 */
.alerts_shotNote__odP9E {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #94a3b8;
  max-width: 62ch;
}

.alerts_featureSectionWide__BJaN9 .alerts_shotNote__odP9E {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}