/* ============================================================
   InvestorUday: styles (mobile-first)
   Colors are set from config.js → theme. These are fallbacks.
   ============================================================ */

:root {
  --bg: #ffffff;
  --tint: #f3f6fd;
  --ink: #0b1530;
  --ink-2: #2b3654;
  --muted: #5d6a85;
  --line: #e2e8f4;
  --accent: #1f5eff;
  --accent-hover: #1749d1;
  --accent-light: #7fa6ff;
  --accent-ink: #ffffff;
  --gold: #ffb547;
  --dark: #070e26;
  --dark-2: #0e1a45;
  --on-dark: #eef3ff;
  --on-dark-muted: #a9b6d6;
  --ok: #16a34a;
  --highlight: #fff1a8;

  --head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r: 12px;
  --r-lg: 20px;
  --gutter: 20px;
  --max: 1180px;
  --section-y: 80px;
  --nav-h: 68px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 820px; }

/* ---------- Placeholders (draft only) ---------- */
.is-ph {
  background: var(--highlight);
  color: #4a3b00 !important;
  outline: 1px dashed #c9a400;
  outline-offset: 2px;
  border-radius: 2px;
  -webkit-text-fill-color: currentColor;
}
.draft-notice { background: #2b2b2b; color: #ffe98a; font-size: 13px; text-align: center; padding: 6px var(--gutter); }
.draft-notice code { color: #fff; }

/* ---------- Type ---------- */
.h2 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(30px, 6.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.h2--xl { font-size: clamp(34px, 7.6vw, 60px); }
.h3 { font-family: var(--head); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; letter-spacing: -0.01em; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.kicker--light { color: var(--accent-light); }
.lead { font-size: 19px; color: var(--muted); max-width: 40em; }
.lead--light { color: var(--on-dark-muted); }
.hl {
  background: linear-gradient(100deg, var(--accent-light), #c7d6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 16px/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 17px; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); box-shadow: none; }
.btn--outline { background: transparent; color: var(--accent); border-color: var(--accent); box-shadow: none; }
.btn--outline:hover { background: var(--accent); color: #fff; }
.btn--white { background: #fff; color: var(--accent); }
.btn--white:hover { background: #eef3ff; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"] { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr, .link-arrow:hover .arr { transform: translateX(4px); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent); text-decoration: none; }
.link-arrow .arr { transition: transform .2s var(--ease); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--on-dark);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  margin: 0 0 22px;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); animation: pulse 2.4s ease-in-out infinite; }

/* ---------- Check lists ---------- */
.checks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; color: var(--ink-2); }
.checks li { position: relative; padding-left: 30px; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%231f5eff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--dark) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--on-dark);
  transition: background .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled { background: color-mix(in srgb, var(--dark) 94%, transparent); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); }
.nav__inner { display: flex; align-items: center; gap: 20px; height: var(--nav-h); }
.logo { display: flex; flex-direction: column; line-height: 1.1; text-decoration: none; color: #fff; min-width: 0; }
.logo__name { font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: -.02em; white-space: nowrap; }
.logo__name b { color: var(--accent-light); font-weight: 800; }
.logo__tag { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); margin-top: 4px; white-space: nowrap; }
.nav__links { display: none; }
.nav__cta { display: none; }
.nav__toggle {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 10px;
}
.nav__toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__link {
  position: relative;
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 2px;
  transition: color .2s;
}
.nav__link:hover, .nav__link.is-active { color: #fff; }
.nav__link--hl { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.nav__link--hl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); animation: pulse 2s infinite; }

/* Mobile menu */
.nav.is-open .nav__links {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  padding: 12px var(--gutter) 24px;
  background: var(--dark);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  animation: dropIn .25s var(--ease);
}
.nav.is-open .nav__link { padding: 14px 0; font-size: 17px; border-bottom: 1px solid rgba(255, 255, 255, .06); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--dark); color: var(--on-dark); padding: 48px 0 72px; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__glow {
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 80%;
  background: radial-gradient(60% 60% at 70% 80%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
              radial-gradient(40% 40% at 20% 100%, color-mix(in srgb, var(--accent-light) 25%, transparent), transparent 70%);
  animation: glowRise 2.4s var(--ease) both;
}
.hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 75%);
}
.hero__inner { position: relative; display: grid; gap: 48px; align-items: center; }
.hero__visual { max-width: 520px; width: 100%; justify-self: center; }
.iceberg { width: 100%; height: auto; display: block; border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
.iceberg__body { animation: rise 1.6s var(--ease) .2s both, float 6s ease-in-out 1.8s infinite; }
.iceberg__wave { animation: wave 4s linear infinite; }
.iceberg__label { opacity: 0; animation: fadeIn .7s ease forwards; }
.iceberg__label--tip, .iceberg__label--cap { animation-delay: 1.2s; }
.iceberg__label--b0 { animation-delay: 1.8s; }
.iceberg__label--b1 { animation-delay: 2.1s; }
.iceberg__label--b2 { animation-delay: 2.4s; }
.iceberg__label--base { animation-delay: 2.8s; }
.hero__title {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(38px, 10vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: #fff;
  text-wrap: balance;
}
.hero__sub { font-size: 19px; color: var(--on-dark-muted); max-width: 36em; margin: 0 0 32px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__ctas .btn { flex: 1 1 220px; }
.hero__ctas--center { justify-content: center; }
.hero__ctas--center .btn { flex: 0 1 auto; }
.hero__points { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; color: var(--on-dark-muted); }
.hero__points li { display: inline-flex; align-items: center; gap: 8px; }
.hero__points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); }


/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; position: relative; }
.section--tint { background: var(--tint); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark .h2 { color: #fff; }
.section-head { max-width: 760px; margin: 0 0 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }

/* Method phases */
.phases { display: grid; gap: 18px; position: relative; }
.phase {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s ease, border-color .3s;
}
.phase:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(11, 21, 48, .35); border-color: transparent; }
.phase::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--phase-color); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.phase.is-in::after { transform: scaleX(1); transition-delay: .3s; }
.phase__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; background: var(--phase-bg); color: var(--phase-color); }
.phase__icon svg { width: 30px; height: 30px; }
.phase__name { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--phase-color); margin-bottom: 6px; display: block; }
.phase p { color: var(--muted); }
.phase__num { position: absolute; right: 22px; top: 18px; font-family: var(--head); font-weight: 800; font-size: 54px; line-height: 1; color: var(--line); }
.phase--a { --phase-color: var(--accent); --phase-bg: color-mix(in srgb, var(--accent) 10%, transparent); }
.phase--b { --phase-color: #d97706; --phase-bg: #fff6e6; }
.phase--c { --phase-color: #16a34a; --phase-bg: #e9f8ee; }
.method__closing { margin-top: 40px; text-align: center; font-size: 18px; }


/* Hero market widget */
.widget { background: color-mix(in srgb, var(--dark-2) 85%, transparent); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); padding: 26px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.widget__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.widget__head small { display: block; font-size: 13px; color: var(--on-dark-muted); }
.widget__state { display: block; font-family: var(--head); font-size: 26px; color: #fff; margin-top: 2px; }
.link-arrow--light { color: var(--accent-light); margin-top: 6px; font-size: 16px; }

/* Course cards */
.courses { display: grid; gap: 24px; }
.course-card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 24px 50px -36px rgba(11, 21, 48, .45);
  transition: transform .45s var(--ease), box-shadow .45s ease, border-color .3s;
}
.course-card:hover { transform: translateY(-10px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--accent) 60%, transparent); }
.course-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dark-2); }
.course-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.course-card:hover .course-card__media img { transform: scale(1.06); }
.course-card__tag { position: absolute; left: 16px; top: 16px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: #fff; padding: 6px 12px; border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.course-card__body { display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 26px; flex: 1; }
.course-card__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.course-card__chips span { font-size: 12px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); padding: 5px 10px; border-radius: 999px; }
.course-card__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #fff; background: linear-gradient(100deg, var(--accent), #7c3aed); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.course-card__badge svg { width: 16px; height: 16px; flex: none; }
.course-card--closed .course-card__badge { filter: grayscale(.6); opacity: .8; }
.course-card .h3 { font-size: 23px; line-height: 1.25; margin: 0 0 6px; }
.course-card__points { list-style: none; padding: 16px 0 0; margin: 0 0 8px; display: grid; gap: 10px; border-top: 1px dashed var(--line); }
.course-card__points li { position: relative; padding-left: 30px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.course-card__points li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%231f5eff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.js-reveal .course-card__points li { opacity: 0; }
.js-reveal .course-card.is-in .course-card__points li { animation: popIn .5s var(--ease) forwards; animation-delay: calc(var(--d, 0s) + .35s + var(--i) * .1s); }
.course-card:hover .course-card__points li::before { animation: pulse 1.2s ease-in-out infinite; }
.course-card__price { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
.course-card__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.course-card__price strong { font-family: var(--head); font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.course-card__price span { font-size: 13px; color: var(--muted); font-weight: 600; }
.course-card__price s { font-size: 15px; color: var(--muted); text-decoration-thickness: 1.5px; }
.course-card__price .course-card__off { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #fff; background: #16a34a; padding: 3px 8px; border-radius: 999px; }
.course-card__offer-note { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #b45309; }
.course-card__offer-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; animation: pulse 1.6s infinite; }
.course-card--closed .course-card__price strong { color: var(--muted); }
.course-card__price + .course-card__note, .course-card__price ~ .course-card__cta { margin-top: 0; }
.course-card__coupon { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border: 1.5px dashed #16a34a; border-radius: 12px; background: #f0fdf4; font-size: 14px; color: #166534; font-weight: 600; }
.course-card__coupon strong { font-family: var(--head); font-size: 18px; letter-spacing: .06em; color: #15803d; }
.course-card__copy { margin-left: auto; padding: 6px 12px; border: 0; border-radius: 8px; background: #16a34a; color: #fff; font: 700 13px var(--sans); cursor: pointer; }
.course-card__copy.is-done { background: #166534; }
.course-card.is-clickable { cursor: pointer; }
.course-card__cta { margin-top: auto; }

/* Market sentiment band (home) */
.sentiment-band { overflow: hidden; }
.sentiment-band::before { content: ""; position: absolute; width: 560px; height: 560px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent); pointer-events: none; }
.sentiment-band__inner { position: relative; display: grid; gap: 40px; align-items: center; }
.sentiment-band .lead { margin-bottom: 28px; }

/* Principles */
.principles { display: grid; gap: 18px; }
.principle { padding: 26px; border-radius: var(--r); background: var(--tint); position: relative; overflow: hidden; }
.principle__num { font-family: var(--head); font-weight: 800; font-size: 15px; color: var(--accent); display: block; margin-bottom: 14px; }
.principle p { color: var(--muted); font-size: 16px; }

/* ---------- Sentiment widgets (shared by teaser + tool) ---------- */
.phase-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 22px; }
.phase-meter__seg { position: relative; padding: 12px 8px 10px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .05); color: var(--on-dark-muted); border: 1px solid rgba(255, 255, 255, .08); transition: all .5s var(--ease); }
.phase-meter__seg small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-bottom: 2px; }
.phase-meter__seg.is-active { color: #fff; background: color-mix(in srgb, var(--zone) 22%, transparent); border-color: var(--zone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--zone) 18%, transparent), 0 14px 30px -14px var(--zone); transform: translateY(-3px); }
.phase-meter__seg.is-active::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 8px; height: 8px; border-radius: 50%; background: var(--zone); transform: translateX(-50%); animation: pulse 1.8s infinite; }
.bar { margin-bottom: 16px; }
.bar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; margin-bottom: 8px; color: var(--on-dark-muted); }
.bar__top strong { font-family: var(--head); font-size: 22px; color: #fff; }
.bar__track { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-light)); transition: width 1.4s var(--ease); }
.bar__track::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: rgba(255, 255, 255, .25); }
.status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--zone) 25%, transparent); border: 1px solid var(--zone); }
.status-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--zone); animation: pulse 1.8s infinite; }
.sample-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #4a3b00; background: var(--highlight); padding: 4px 10px; border-radius: 999px; }

/* About */
.about { display: grid; gap: 40px; align-items: center; }
.about__photo { position: relative; max-width: 440px; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.about__photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: var(--r-lg); background: linear-gradient(140deg, var(--accent), var(--accent-light)); z-index: -1; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: var(--r-lg); }
.about__photo { isolation: isolate; }
.about__photo--ph { display: grid; place-items: center; border: 2px dashed #c9a400; background: #fffbe3; }
.about__role { color: var(--accent); font-weight: 700; margin-top: -6px; }
.about__story p { font-size: 18px; color: var(--ink-2); }
.about__quote { margin: 28px 0 0; padding: 18px 22px; border-left: 4px solid var(--gold); background: var(--tint); border-radius: 0 var(--r) var(--r) 0; font-family: var(--head); font-weight: 700; font-size: 19px; line-height: 1.4; color: var(--ink); }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq__item { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s, box-shadow .2s; }
.faq__item.is-open { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 16px 40px -28px color-mix(in srgb, var(--accent) 70%, transparent); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: none;
  border: 0;
  text-align: left;
  font: 700 17px/1.4 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r); }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); transition: background .2s, transform .3s var(--ease); }
.faq__icon::before,
.faq__icon::after { content: ""; position: absolute; left: 8px; top: 13px; width: 12px; height: 2px; background: var(--accent); transition: transform .3s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { background: var(--accent); transform: rotate(180deg); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: #fff; }
.faq__item.is-open .faq__icon::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p { padding: 0 22px 20px; color: var(--muted); }
.faq__q[aria-expanded="false"] + .faq__a { visibility: hidden; transition: grid-template-rows .35s var(--ease), visibility 0s .35s; }

/* Final CTA */
.final__card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 64px 24px;
  border-radius: 28px;
  background: linear-gradient(160deg, var(--dark-2), var(--dark) 70%);
  color: var(--on-dark);
  isolation: isolate;
}
.final__card .h2 { color: #fff; max-width: 14em; margin-left: auto; margin-right: auto; }
.final__card .lead { margin: 0 auto 30px; }
.final__glow { position: absolute; left: 50%; bottom: -260px; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--accent) 25%, transparent) 60%, transparent); animation: breathe 6s ease-in-out infinite; }

/* ---------- Track page ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--dark); color: var(--on-dark); padding: 40px 0 64px; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 50%, transparent), transparent); z-index: -1; }
.page-hero .h2 { color: #fff; font-size: clamp(34px, 8vw, 60px); }
.crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--on-dark-muted); text-decoration: none; margin-bottom: 26px; transition: color .2s; }
.crumb:hover { color: #fff; }
.page-hero .pill { margin-bottom: 18px; }
.page-hero .lead { color: var(--on-dark-muted); }

/* ---------- Tool page ---------- */
.tool-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.tool-tab { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--on-dark-muted); border: 1px solid rgba(255, 255, 255, .14); }
.tool-tab.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
.tool-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; font-size: 14px; color: var(--on-dark-muted); }
.market { background: var(--dark); color: var(--on-dark); border-radius: var(--r-lg); padding: 26px 22px; box-shadow: 0 40px 80px -40px rgba(7, 14, 38, .8); border: 1px solid rgba(255, 255, 255, .08); }
.market__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.market__head h3 { color: #fff; margin: 0; font-size: 22px; }
.market__head small { display: block; color: var(--on-dark-muted); font-size: 14px; }
.market__grid { display: grid; gap: 22px; margin-top: 8px; }
.alloc { text-align: center; padding: 24px 18px; border-radius: var(--r); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.alloc__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.alloc__value { font-family: var(--head); font-size: clamp(44px, 12vw, 64px); font-weight: 800; color: #fff; line-height: 1.1; margin: 8px 0; }
.alloc__ring { width: 150px; height: 150px; margin: 6px auto 10px; }
.alloc__ring circle { fill: none; stroke-width: 12; }
.alloc__ring .ring-bg { stroke: rgba(255, 255, 255, .08); }
.alloc__ring .ring-fg { stroke: var(--zone); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.6s var(--ease); }
.market__comment { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--on-dark); }
.zones { display: grid; gap: 14px; }
.zone { padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); border-top: 4px solid var(--zone); }
.zone.is-current { box-shadow: 0 0 0 2px var(--zone), 0 24px 50px -30px var(--zone); }
.zone__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.zone__phase { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.zone__alloc { font-size: 14px; font-weight: 700; color: var(--ink); background: var(--tint); padding: 4px 10px; border-radius: 999px; }
.zone p { color: var(--muted); font-size: 16px; }
.tool-note { padding: 22px; border-radius: var(--r); background: var(--tint); color: var(--ink-2); }
.tool-disclaimer { font-size: 14px; color: var(--muted); margin-top: 18px; }


/* ---------- Extra layout helpers ---------- */
.section--sm { padding: calc(var(--section-y) * .7) 0; }
.section--flush { padding: 0 0 calc(var(--section-y) * .5); margin-top: -40px; z-index: 2; }
.h2--sm { font-size: clamp(26px, 5vw, 36px); margin-bottom: 28px; }
.bar__top em { font-style: normal; opacity: .7; }

/* Allocation ring */
.alloc__ring-wrap { position: relative; width: 170px; height: 170px; margin: 10px auto 16px; }
.alloc__ring-wrap .alloc__ring { width: 100%; height: 100%; margin: 0; }
.alloc__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.alloc__center .alloc__value { font-size: 36px; margin: 0; }
.alloc__center span { font-size: 12px; color: var(--on-dark-muted); max-width: 9em; line-height: 1.3; }

/* Zones */
.zone { position: relative; }
.zone__rule { font-weight: 700; color: var(--ink) !important; font-size: 15px !important; }
.zone__now { position: absolute; top: -12px; right: 16px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--zone); padding: 4px 10px; border-radius: 999px; animation: pulse 2s infinite; }

/* Breadth explainers */
.explainers { display: grid; gap: 18px; }
.explainer { padding: 26px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.explainer:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -32px rgba(11, 21, 48, .4); }
.explainer__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent); color: #fff; margin-bottom: 18px; }
.explainer__icon svg { width: 26px; height: 26px; }
.explainer p { color: var(--muted); font-size: 16px; }

/* Steps (Friday routine) */
.steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: none; }
.step-row { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; align-items: center; padding: 18px 20px; border-radius: var(--r); background: var(--tint); }
.step-row__num { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--head); font-weight: 800; }
.step-row strong { font-family: var(--head); }
.step-row span:last-child { color: var(--muted); font-size: 16px; }

/* Backtest results */
.results { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.result { padding: 22px 18px; border-radius: var(--r); background: var(--dark-2); border: 1px solid rgba(255, 255, 255, .08); }
.result strong { display: block; font-family: var(--head); font-size: clamp(22px, 5vw, 32px); font-weight: 800; color: var(--gold); line-height: 1.15; margin-bottom: 8px; }
.result span { font-size: 14px; color: var(--on-dark-muted); }
.results__note { margin-top: 24px; color: var(--on-dark-muted); max-width: 52em; font-size: 16px; }

/* Can / cannot */
.cancan { display: grid; gap: 18px; }
.cancan__col { padding: 26px; border-radius: var(--r-lg); background: var(--tint); }
.cancan__col ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.cancan__col li { position: relative; padding-left: 28px; color: var(--ink-2); }
.cancan__col li::before { position: absolute; left: 0; font-weight: 800; }
.cancan__col--yes li::before { content: "✓"; color: var(--ok); }
.cancan__col--no li::before { content: "!"; color: #d97706; left: 6px; }
.tool-closing { margin: 48px auto 0; text-align: center; max-width: 18em; font-family: var(--head); font-weight: 800; font-size: clamp(26px, 5.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; }
.tool-disclaimer { text-align: center; }


/* ---------- Tools dropdown (nav) ---------- */
.nav__dd { position: relative; }
.nav__dd-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav__dd-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); animation: pulse 2s infinite; }
.nav__dd-caret { display: inline-flex; transition: transform .25s var(--ease); }
.nav__dd.is-open .nav__dd-caret { transform: rotate(180deg); }
.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  right: -12px;
  width: 340px;
  padding: 8px;
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(7, 14, 38, .45), 0 0 0 1px var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .25s var(--ease), visibility 0s .25s;
}
.nav__dd.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s var(--ease); }
/* Invisible bridge so the menu stays open while the pointer crosses the gap */
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
@media (hover: hover) and (min-width: 1200px) {
  .nav__dd:hover .nav__menu, .nav__dd:has(:focus-visible) .nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s var(--ease); }
  .nav__dd:hover .nav__dd-caret, .nav__dd:has(:focus-visible) .nav__dd-caret { transform: rotate(180deg); }
}
.nav__menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background .15s; }
.nav__menu-item:hover, .nav__menu-item.is-active { background: var(--tint); }
.nav__menu-item strong { display: block; font-size: 15px; }
.nav__menu-item small { display: block; font-size: 13px; color: var(--muted); }
.nav__menu-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.nav__menu-icon svg { width: 18px; height: 18px; }
.nav.is-open .nav__dd-btn { width: 100%; justify-content: flex-start; padding: 14px 0; font-size: 17px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #fff; }
.nav.is-open .nav__menu { position: static; width: auto; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; padding: 4px 0 8px; display: none; }
.nav.is-open .nav__dd.is-open .nav__menu { display: block; }
.nav.is-open .nav__menu-item { color: var(--on-dark); }
.nav.is-open .nav__menu-item small { color: var(--on-dark-muted); }
.nav.is-open .nav__menu-item:hover, .nav.is-open .nav__menu-item.is-active { background: rgba(255, 255, 255, .06); }

/* ---------- Closed course ---------- */
.course-card__ribbon { position: absolute; right: 14px; top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #dc2626; padding: 6px 12px; border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); }
.course-card--closed .course-card__media img { filter: saturate(.55) brightness(.8); }
.course-card__note { margin: 4px 0 0; padding: 10px 14px; border-radius: 12px; background: #fff6e6; color: #92400e; font-weight: 700; font-size: 15px; }

/* ---------- Tools list (end of home) ---------- */
.tool-links { display: grid; gap: 12px; }
.tool-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); text-decoration: none; color: inherit; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.tool-link:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 20px 40px -30px var(--accent); }
.tool-link strong { display: block; font-family: var(--head); font-size: 16px; }
.tool-link small { display: block; color: var(--muted); font-size: 14px; }
.tool-link__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.tool-link__icon svg { width: 20px; height: 20px; }
.tool-link .arr { margin-left: auto; color: var(--accent); font-weight: 800; transition: transform .2s; }
.tool-link:hover .arr { transform: translateX(4px); }

/* ---------- Calculators ---------- */
.calc { display: grid; gap: 28px; padding: 26px 22px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(7, 14, 38, .6); }
.calc__form { display: grid; gap: 20px; align-content: start; min-width: 0; }
.calc__out { min-width: 0; }
.calc__label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.calc__input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--tint); font: 700 17px var(--sans); color: var(--ink); transition: border-color .2s, background .2s; }
.calc__input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin-top: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), var(--line) var(--p, 0%)); cursor: pointer; }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(7, 14, 38, .25); transition: transform .15s; }
.calc__range::-webkit-slider-thumb:active { transform: scale(1.2); }
.calc__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.calc__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc__tile { padding: 16px; border-radius: 14px; background: var(--tint); }
.calc__tile span { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.calc__tile strong { display: block; font-family: var(--head); font-size: 20px; color: var(--ink); margin-top: 4px; word-break: break-word; }
.calc__tile--big { grid-column: 1 / -1; background: var(--dark); }
.calc__tile--big span { color: var(--on-dark-muted); }
.calc__tile--big strong { font-size: clamp(30px, 7vw, 42px); color: #fff; animation: popIn .4s var(--ease); }
.calc__error { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #fdecec; color: #b91c1c; font-weight: 600; font-size: 15px; }
.calc__toggle { margin-top: 10px; background: none; border: 0; padding: 6px 0; font: 700 15px var(--sans); color: var(--accent); cursor: pointer; }
.calc__table-wrap { margin-top: 14px; overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); }
.calc__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.calc__table th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--tint); padding: 10px 14px; }
.calc__table td { padding: 10px 14px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.calc__table tr.is-hot td { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 800; color: var(--accent); }

/* Growth chart */
.chart { margin: 22px 0 0; }
.chart__title { font-family: var(--head); font-weight: 700; font-size: 16px; }
.chart__legend { display: flex; gap: 18px; margin: 6px 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.chart__key { display: inline-flex; align-items: center; gap: 6px; }
.chart__key::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.chart__key--inv::before { background: #8a99bd; }
.chart__key--gain::before { background: var(--accent); }
.chart__box { position: relative; }
.chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__axis { font: 600 11px var(--sans); fill: var(--muted); }
.chart__inv { fill: #8a99bd; }
.chart__gain { fill: var(--accent); }
.chart__bar { transition: opacity .2s; }
.chart__svg:hover .chart__bar:not(.is-hover) { opacity: .55; }
.chart__tip { position: absolute; top: 0; transform: translateX(-50%); padding: 10px 12px; border-radius: 10px; background: var(--dark); color: #fff; font-size: 13px; line-height: 1.45; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); }
.chart__tip.is-on { opacity: 1; }
.chart__tip strong, .chart__tip span { display: block; }


/* ---------- Overview pages (Tools / Trackers) ---------- */
.hub { display: grid; gap: 18px; }
.hub-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); text-decoration: none; color: inherit; box-shadow: 0 30px 60px -48px rgba(7, 14, 38, .6); transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.hub-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 34px 70px -36px color-mix(in srgb, var(--accent) 55%, transparent); }
.hub-card__icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); margin-bottom: 6px; transition: transform .35s var(--ease); }
.hub-card:hover .hub-card__icon { transform: rotate(-6deg) scale(1.06); }
.hub-card__icon svg { width: 24px; height: 24px; }
.hub-card .h3 { margin: 0; }
.hub-card p { color: var(--muted); font-size: 16px; margin: 0; }
.hub-card .link-arrow { margin-top: auto; padding-top: 8px; }

/* ---------- Trackers ---------- */
.track-card { padding: 24px 20px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(7, 14, 38, .6); }
.track-updated { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); padding: 5px 12px; border-radius: 999px; margin: 0 0 18px; }
.track-note { margin: 14px 0 0; color: var(--muted); font-size: 14px; white-space: pre-wrap; }
.track-sub { margin: 26px 0 12px; font-size: 18px; }
.track-table td.name strong { display: block; }
.track-table td.name small { display: block; color: var(--muted); font-size: 13px; }
.track-table .rank { color: var(--muted); font-weight: 700; width: 36px; }
.track-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-table td { vertical-align: middle; }
.num.pos, .pos.num { color: #15803d; font-weight: 700; }
.num.neg, .neg.num { color: #b91c1c; font-weight: 700; }
.trend-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin: 2px 4px 2px 0; white-space: nowrap; }
.trend-chip.is-up { background: #e9f8ee; color: #15803d; }
.trend-chip.is-down { background: #fdecec; color: #b91c1c; }
.strength { min-width: 150px; white-space: nowrap; }
.strength__bar { position: relative; display: inline-block; vertical-align: middle; width: 90px; height: 8px; border-radius: 999px; background: var(--tint); margin-right: 10px; }
.strength__bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--muted); opacity: .5; }
.strength__fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.strength__fill.pos { background: #22c55e; }
.strength__fill.neg { background: #ef4444; }
.strength__num { font-size: 14px; }
.leaders { display: grid; gap: 14px; margin-bottom: 22px; }
.leaders__col { padding: 18px; border-radius: var(--r); border-top: 4px solid; background: var(--tint); }
.leaders__col.is-lead { border-color: #22c55e; }
.leaders__col.is-lag { border-color: #ef4444; }
.leaders__col .h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.leaders__item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-weight: 600; }
.leaders__item:last-child { border-bottom: 0; }
.stock-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stock-chips span { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #e9f8ee; color: #15803d; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cat-pill { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font: 700 14px var(--sans); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.cat-pill:hover { border-color: var(--accent); color: var(--accent); }
.cat-pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chart__zero { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.chart__up { fill: #22c55e; }
.chart__down { fill: #ef4444; }
.chart__key--up::before { background: #22c55e; }
.chart__key--down::before { background: #ef4444; }


/* ---------- Sortable tables ---------- */
.rank-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.rank-bar__label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.rank-bar__hint { margin-left: auto; font-size: 13px; color: var(--muted); }
.rank-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font: 700 13px var(--sans); color: var(--ink-2); cursor: pointer; }
.rank-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.sort-btn { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.sort-btn::after { content: "↕"; opacity: .35; font-size: 11px; }
th[aria-sort="descending"] .sort-btn::after { content: "↓"; opacity: 1; color: var(--accent); }
th[aria-sort="ascending"] .sort-btn::after { content: "↑"; opacity: 1; color: var(--accent); }
th.is-sorted { color: var(--accent); }
.calc__table th.num { text-align: right; }

/* ---------- Strategy tester ---------- */
.bt .calc__form { gap: 16px; }
.bt-chips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.bt-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-radius: 12px; background: var(--tint); font-size: 14px; font-weight: 600; border-left: 4px solid #1f5eff; }
.bt-chip--1 { border-left-color: #ea580c; }
.bt-chip--2 { border-left-color: #0d9488; }
.bt-chip span { flex: 1; min-width: 0; }
.bt-chip .bt-pct { flex: none; font-weight: 700; color: var(--muted); }
.bt-chip.is-off { opacity: .45; }
.bt-weight { flex: none; width: 64px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--bg); font: 700 15px var(--sans); color: var(--ink); text-align: right; }
.bt-weight:focus { outline: none; border-color: var(--accent); }
.bt-chip button { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--bg); color: var(--muted); font-size: 16px; cursor: pointer; }
.bt-chip button:hover { color: #b91c1c; }
.bt-search { position: relative; }
.bt-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; border-radius: 12px; background: var(--bg); box-shadow: 0 20px 40px -16px rgba(7, 14, 38, .4), 0 0 0 1px var(--line); overflow: hidden; }
.bt-results:empty { display: none; }
.bt-result { display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: none; font: 600 14px var(--sans); color: var(--ink); cursor: pointer; }
.bt-result:hover { background: var(--tint); }
.bt-result small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.bt-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.bt-loading { color: var(--muted); font-weight: 600; animation: pulse 1.2s infinite; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--tint); }
.seg__btn { padding: 8px 16px; border-radius: 9px; border: 0; background: none; font: 700 14px var(--sans); color: var(--ink-2); cursor: pointer; }
.seg__btn.is-active { background: var(--bg); color: var(--accent); box-shadow: 0 2px 8px rgba(7, 14, 38, .12); }
.bt-table td.name { min-width: 200px; }
.bt-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; }
.bt .calc__table-wrap { margin-top: 16px; }
.chart__key--line::before { background: var(--key); height: 3px; border-radius: 2px; }
.chart__key--dash::before { height: 0; border-top: 2px dashed #8a99bd; background: none; border-radius: 0; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart__invested { fill: none; stroke: #8a99bd; stroke-width: 2; stroke-dasharray: 5 5; }
.chart__cross { stroke: var(--muted); stroke-width: 1; opacity: 0; }
.chart__dot { opacity: 0; stroke: #fff; stroke-width: 2; }
.chart__svg.is-hover .chart__cross, .chart__svg.is-hover .chart__dot { opacity: 1; }


/* ---------- End of home: strategy tester card + lists ---------- */
.tester-card { position: relative; display: grid; gap: 18px; align-items: center; padding: 28px; margin-bottom: 36px; border-radius: 24px; text-decoration: none; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--dark-2), var(--dark) 70%); box-shadow: 0 40px 80px -40px rgba(7, 14, 38, .7); transition: transform .35s var(--ease); }
.tester-card::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -260px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 60%, transparent), transparent); animation: breathe 6s ease-in-out infinite; }
.tester-card:hover { transform: translateY(-4px); }
.tester-card__icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); box-shadow: 0 14px 30px -12px var(--accent); }
.tester-card__icon svg { width: 30px; height: 30px; }
.tester-card__body strong { display: block; font-family: var(--head); font-size: clamp(22px, 4vw, 30px); letter-spacing: -.02em; margin-bottom: 6px; }
.tester-card__body span { display: block; color: var(--on-dark-muted); max-width: 40em; }
.tester-card__cta { justify-self: start; }
.end-lists { display: grid; gap: 28px; }
.end-lists__h { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.end-lists .tool-links { grid-template-columns: 1fr; }


/* ---------- Contact / Privacy / Terms ---------- */
.page-hero--short { padding-bottom: 48px; }
.contact-cards { display: grid; gap: 14px; margin-bottom: 36px; }
.contact-card { display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg); text-decoration: none; color: inherit; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.contact-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 20px 40px -30px var(--accent); }
.contact-card strong { font-family: var(--head); font-size: 19px; }
.contact-card__handle { color: var(--accent); font-weight: 700; }
.contact-card p { color: var(--muted); font-size: 16px; margin: 6px 0 10px; }
.legal { padding: 22px 0; border-top: 1px solid var(--line); }
.legal .h3 { margin-bottom: 10px; }
.legal p { color: var(--ink-2); font-size: 17px; }


/* ---------- ETF strategy tester ---------- */
.et-params, .et-risk { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.et-param { display: grid; gap: 4px; }
.et-param span { font-size: 12px; font-weight: 700; color: var(--muted); }
.et-param .calc__input { height: 40px; font-size: 15px; }
.et-params:empty { display: none; }
.et-vs { display: block; font-size: 15px; font-weight: 600; color: var(--on-dark-muted); margin-top: 4px; }
.et .calc__form select.calc__input { font-size: 15px; font-weight: 600; }

/* ---------- Coming soon items ---------- */
.nav__menu-item.is-soon { cursor: default; opacity: .7; }
.nav__menu-item.is-soon:hover { background: none; }
.nav__menu-item.is-soon small { font-weight: 700; color: #b45309; }
.hub-card.is-soon { cursor: default; border-style: dashed; box-shadow: none; }
.hub-card.is-soon:hover { transform: none; border-color: var(--line); }
.hub-card.is-soon .hub-card__icon { background: var(--line); color: var(--muted); }
.soon-tag { align-self: flex-start; margin-top: auto; font-size: 13px; font-weight: 800; color: #b45309; background: #fff6e6; padding: 5px 12px; border-radius: 999px; }


/* ---------- Whiteboard ---------- */
.wb { border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(7, 14, 38, .6); overflow: hidden; }
.wb__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--tint); }
.wb__group { display: flex; align-items: center; gap: 4px; }
.wb__group--end { margin-left: auto; }
.wb__btn { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.wb__btn svg { width: 19px; height: 19px; }
.wb__btn:hover { background: var(--bg); }
.wb__btn.is-on { background: var(--accent); color: #fff; }
.wb__btn:disabled { opacity: .35; cursor: default; background: none; }
.wb__swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.wb__swatch.is-on { box-shadow: 0 0 0 2px var(--accent); }
.wb__size { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.wb__size span { display: block; border-radius: 50%; background: var(--ink-2); }
.wb__size.is-on { background: var(--bg); box-shadow: 0 0 0 1.5px var(--accent); }
.wb__select { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font: 600 14px var(--sans); color: var(--ink); }
.wb__stage { position: relative; touch-action: none; }
.wb__stage--plain { background: #fff; }
.wb__stage--grid { background-color: #fff; background-image: linear-gradient(#e2e8f4 1px, transparent 1px), linear-gradient(90deg, #e2e8f4 1px, transparent 1px); background-size: 2.5% 4%; }
.wb__stage--dark { background: #0b1530; }
.wb__canvas { display: block; width: 100%; touch-action: none; }
.wb__status { margin: 10px 0 0; font-size: 13px; color: var(--muted); text-align: right; }
.wb:fullscreen, .wb.is-full { display: flex; flex-direction: column; border-radius: 0; overflow: auto; background: var(--tint); }
.wb.is-full { position: fixed; inset: 0; z-index: 100; }
.wb:fullscreen .wb__stage, .wb.is-full .wb__stage { width: min(100%, calc((100vh - 64px) * 1.6)); margin: auto; }


/* ---------- Today's state strip (home) ---------- */
.today { background: var(--dark-2); color: var(--on-dark); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.today__inner { display: flex; align-items: center; gap: 6px 26px; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.today__inner::-webkit-scrollbar { display: none; }
.today__asof { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.today__item { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; font-size: 14px; }
a.today__item:hover .today__value { text-decoration: underline; }
.today__label { color: var(--on-dark-muted); font-weight: 600; }
.today__value { font-weight: 800; color: #fff; }
.today__value.has-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); margin-right: 6px; vertical-align: 1px; animation: pulse 2s infinite; }
.today__chg { font-size: 13px; font-weight: 700; }
.today__chg.pos { color: #4ade80; }
.today__chg.neg { color: #f87171; }

/* ---------- Market calendar ---------- */
.cal-pill--expiry.is-active { background: #1f5eff; border-color: #1f5eff; }
.cal-pill--holiday.is-active { background: #dc2626; border-color: #dc2626; }
.cal-pill--rbi.is-active { background: #d97706; border-color: #d97706; }
.cal-pill--event.is-active { background: #7c3aed; border-color: #7c3aed; }
.cal__cols { display: grid; gap: 28px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__head strong { font-family: var(--head); font-size: 20px; }
.cal__nav { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.cal__nav:hover { border-color: var(--accent); color: var(--accent); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 0; }
.cal__day { min-height: 74px; padding: 6px; border-radius: 10px; background: var(--tint); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal__day.is-blank { background: transparent; }
.cal__day.is-weekend { opacity: .55; }
.cal__day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal__num { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.cal__tag { display: block; font-size: 11px; font-weight: 700; line-height: 1.25; padding: 2px 5px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; }
.cal__tag--expiry { background: #e8efff; color: #1749d1; }
.cal__tag--holiday { background: #fdecec; color: #b91c1c; }
.cal__tag--rbi { background: #fff6e6; color: #b45309; }
.cal__tag--event { background: #f3e8ff; color: #6d28d9; }
.cal__upcoming .h3 { margin-bottom: 12px; }
.cal__row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.cal__date { flex: none; width: 54px; text-align: center; }
.cal__date strong { display: block; font-family: var(--head); font-size: 22px; line-height: 1; }
.cal__date span { font-size: 12px; color: var(--muted); font-weight: 700; }
.cal__items { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }
.cal__items .cal__tag { font-size: 13px; padding: 4px 8px; white-space: normal; }

/* ---------- Trading journal ---------- */
.jn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.jn-field { display: grid; gap: 5px; min-width: 0; }
.jn-field > span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.jn-field .calc__input { height: 44px; font-size: 15px; }
.jn-field textarea.calc__input { height: auto; padding: 10px 14px; resize: vertical; font-weight: 500; }
.jn-field--wide { grid-column: 1 / -1; }
.jn-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.btn--ghost-dark { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--ghost-dark:hover { background: var(--tint); }
.jn-grid .calc__error { grid-column: 1 / -1; margin: 0; }
.jn-stats { margin: 22px 0; }
.jn-tiles { grid-template-columns: repeat(2, 1fr); }
.jn-body { margin-top: 0; }
.jn-charts, .jn-two { display: grid; gap: 22px; }
.jn-chart { margin: 0; }
.jn-table td.name small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-act { white-space: nowrap; }
.jn-mini { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; color: var(--ink-2); font-size: 15px; margin-left: 4px; }
.jn-mini:hover { border-color: var(--accent); color: var(--accent); }
.jn-tools { display: flex; gap: 20px; margin-top: 14px; }


/* ---------- Phones: compact strip, calendar dots, one-row tool tabs ---------- */
@media (max-width: 639px) {
  .today { position: relative; }
  .today::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--dark-2)); }
  .today__inner { gap: 18px; padding-top: 9px; padding-bottom: 9px; }
  .today__item { gap: 6px; font-size: 13px; flex: none; }
  .today__label { font-size: 12px; }
  .today__asof { font-size: 11px; flex: none; }
  .tool-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; }
  .tool-tabs::-webkit-scrollbar { display: none; }
  .tool-tab { flex: none; }
  .cal__grid { gap: 3px; }
  .cal__day { min-height: 46px; padding: 4px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 3px; }
  .cal__day .cal__num { width: 100%; font-size: 12px; }
  .cal__day .cal__tag { width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; }
  .cal__day .cal__tag--expiry { background: #1f5eff; }
  .cal__day .cal__tag--holiday { background: #dc2626; }
  .cal__day .cal__tag--rbi { background: #d97706; }
  .cal__day .cal__tag--event { background: #7c3aed; }
  .cal__dow { font-size: 10px; letter-spacing: .02em; }
}


/* ---------- Tracker filters ---------- */
.flt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.flt .cat-pills { margin: 0; }
.flt__search { max-width: 280px; height: 42px; font-size: 15px; }
.flt__select { max-width: 240px; height: 42px; font-size: 14px; }
.trend-chip.is-mid { background: #fff6e6; color: #b45309; }

/* ---------- Portfolio tracker ---------- */
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pf-wide { grid-column: 1 / -1; }
.pf-grid .jn-actions, .pf-grid .calc__error { grid-column: 1 / -1; }
.pf-grid .calc__error { margin: 0; }
.pf-dash { display: grid; gap: 22px; margin-top: 22px; }
.pf-dash td.name { min-width: 200px; }
.pf-dash td.name strong { white-space: normal; }
.pf-tiles { grid-template-columns: repeat(2, 1fr); }
.pf-two { display: grid; gap: 22px; }
.pf-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--tint); margin: 14px 0 10px; }
.pf-stack span { display: block; height: 100%; }
.pf-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 16px; }
.pf-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.pf-bar { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 52px; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.pf-bar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pf-bar__track { height: 8px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.pf-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pf-bar__pct { text-align: right; font-weight: 700; color: var(--muted); }
.pf-check { padding: 12px 14px; border-radius: 12px; margin-top: 12px; border-left: 4px solid; }
.pf-check strong { display: block; font-size: 15px; }
.pf-check p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.pf-check.is-ok { background: #f0fdf4; border-color: #16a34a; }
.pf-check.is-warn { background: #fff7ed; border-color: #ea580c; }
.pf-check.is-info { background: var(--tint); border-color: var(--accent); }

/* ---------- Market valuation ---------- */
.va-tabs { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.va-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font: inherit; font-weight: 800; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.va-tab:hover { border-color: var(--accent); }
.va-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.va-tab__n { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--tint); color: var(--ink-2); }
.va-tab.is-active .va-tab__n { background: rgba(255, 255, 255, .22); color: #fff; }
.va-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.va-meta--warn { color: #b45309; font-size: 12px; }
.va-sub { margin: 28px 0 10px; font-size: 18px; }
.mb-holder { scroll-margin-top: calc(var(--nav-h) + 16px); }
.mb-search { margin-bottom: 10px; }
.mb-stock strong { display: block; font-size: 14.5px; }
.mb-stock small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.mb-more { margin-top: 12px; }
tr.is-pickable { cursor: pointer; }
tr.is-pickable:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
tr.is-picked td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
tr.is-picked td.name { box-shadow: inset 3px 0 0 var(--accent); }
.va-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.va-card { display: grid; gap: 6px; text-align: left; padding: 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s; }
.va-card:hover, .va-card.is-on { border-color: var(--accent); box-shadow: 0 14px 30px -22px var(--accent); }
.va-card__name { font-weight: 700; color: var(--muted); font-size: 14px; }
.va-card__pe { font-family: var(--head); font-size: 30px; line-height: 1; }
.va-card__pe small { font-size: 14px; color: var(--muted); font-weight: 700; }
.va-zone { justify-self: start; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.va-card.is-low .va-zone { background: #e9f8ee; color: #15803d; }
.va-card.is-mid .va-zone { background: var(--tint); color: var(--ink-2); }
.va-card.is-high .va-zone { background: #fdecec; color: #b91c1c; }
.va-gauge { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #e2e8f4 50%, #ef4444); margin: 6px 0 2px; }
.va-gauge i { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.va-meta { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------- Footer ---------- */
.footer { background: var(--dark); color: var(--on-dark-muted); padding: 64px 0 28px; font-size: 15px; }
.footer__top { display: grid; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.footer__name { display: block; font-family: var(--head); font-weight: 800; font-size: 22px; color: #fff; }
.footer__tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 4px 0 14px; }
.footer__h { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { text-decoration: none; transition: color .2s; }
.footer a:hover { color: #fff; }
.footer__disclaimer { font-size: 13px; line-height: 1.6; margin: 24px 0; opacity: .8; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- View transitions ---------- */
.is-routed .view { animation: viewIn .5s var(--ease); }

/* ---------- Scroll reveal ---------- */

/* ---------- Keyframes ---------- */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes glowRise { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wave { to { transform: translateX(80px); } }
@keyframes popIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .iceberg__label { opacity: 1; }
}

/* ============================================================
   Larger screens
   ============================================================ */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .phases { grid-template-columns: repeat(3, 1fr); }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .zones { grid-template-columns: repeat(3, 1fr); }
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
  .tool-links { grid-template-columns: repeat(2, 1fr); }
  .hub { grid-template-columns: repeat(2, 1fr); }
  .contact-cards { grid-template-columns: repeat(3, 1fr); }
  .jn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jn-tiles { grid-template-columns: repeat(4, 1fr); }
  .pf-tiles { grid-template-columns: repeat(3, 1fr); }
  .pf-two { grid-template-columns: 1.2fr 1fr; }
  .pf-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .pf-wide { grid-column: auto; }
  .jn-charts, .jn-two { grid-template-columns: 1fr 1fr; }
  .leaders { grid-template-columns: 1fr 1fr; }
  .track-card { padding: 32px; }
  .calc__tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  :root { --section-y: 120px; --nav-h: 76px; }
  body { font-size: 18px; }
  .hero { padding: 88px 0 120px; }
  .hero__inner { grid-template-columns: 1.1fr 1fr; gap: 64px; }
  .hero__ctas .btn { flex: 0 0 auto; }
  .principles { grid-template-columns: repeat(4, 1fr); }
  .courses { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .sentiment-band__inner { grid-template-columns: 1fr 1.05fr; gap: 72px; }
  .about { grid-template-columns: 440px 1fr; gap: 80px; }
  .final__card { padding: 96px 48px; }
  .page-hero { padding: 56px 0 104px; }
  .market { padding: 36px; }
  .market__grid { grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
  .explainers { grid-template-columns: repeat(3, 1fr); }
  .results { grid-template-columns: repeat(4, 1fr); }
  .cancan { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: 340px 1fr; gap: 44px; padding: 36px; }
  .cal__cols { grid-template-columns: 1.6fr 1fr; gap: 36px; }
  .tool-links { grid-template-columns: repeat(3, 1fr); }
  .hub { grid-template-columns: repeat(3, 1fr); }
  .tester-card { grid-template-columns: auto 1fr auto; padding: 36px 40px; }
  .end-lists { grid-template-columns: 1fr 1fr; gap: 40px; }
  .step-row { grid-template-columns: 44px 220px 1fr; }
  .step-row__num { grid-row: auto; }
  .section--flush { margin-top: -64px; }
}

/* Full top bar only where everything fits on one line; below this the ☰ menu is used */
@media (min-width: 1200px) {
  .nav__toggle { display: none; }
  .nav__links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
  .nav__cta { display: inline-flex; white-space: nowrap; }
  .nav__link { white-space: nowrap; }
}
@media (max-width: 639px) {
  .va-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .va-card { padding: 12px; gap: 5px; }
  .va-card__name { font-size: 12.5px; }
  .va-card__pe { font-size: 24px; }
  .va-card__pe small { font-size: 12px; }
  .va-zone { font-size: 10.5px; padding: 2px 7px; }
  .va-meta { font-size: 11.5px; }
}

/* ============================================================
   Motion: page transitions, scroll progress, header, hero words,
   card glow and tilt, magnetic buttons (all off with reduced motion)
   ============================================================ */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-light), #ffb547); pointer-events: none; view-transition-name: scroll-progress; }
.nav { transition: background .3s ease, box-shadow .3s ease, transform .5s var(--ease); view-transition-name: site-nav; }
.nav--hide { transform: translateY(-100%); }

::view-transition-old(root) { animation: vtOut .2s ease both; }
::view-transition-new(root) { animation: vtIn .4s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }

/* Reveal: fade, rise and sharpen */
.js-reveal .reveal { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0s); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; filter: none; }
.js-reveal .kicker.reveal::before { width: 0; transition: width .8s var(--ease) .35s; }
.js-reveal .kicker.reveal.is-in::before { width: 18px; }

/* Hero: headline rises in word by word, glow drifts, iceberg parallax */
.hero__title .w { display: inline-block; }
.js-reveal .hero__title .w { opacity: 0; transform: translateY(.5em) rotate(2deg); filter: blur(10px); }
.js-reveal .hero__title.is-in .w { animation: wordUp .9s var(--ease) forwards; animation-delay: calc(.15s + var(--i, 0) * .07s); }
@keyframes wordUp { to { opacity: 1; transform: none; filter: blur(0); } }
.hero__glow { animation: glowRise 2.4s var(--ease) both, drift 16s ease-in-out 2.4s infinite alternate; }
@keyframes drift { from { translate: 0 0; scale: 1; } to { translate: 6% -5%; scale: 1.14; } }
.hero__visual { translate: 0 var(--py, 0px); }

/* Cards: soft light that follows the cursor; course cards also tilt */
.course-card:hover, .hub-card:hover, .tool-link:hover, .va-card:hover, .principle:hover, .contact-card:hover, .zone:hover, .explainer:hover {
  background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.widget:hover { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .07), transparent 70%); }
.course-card:hover { transform: perspective(1100px) translateY(-10px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* Buttons: light sweep on hover and a gentle pull toward the cursor */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--ease); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.btn[aria-disabled="true"]::after { display: none; }
.btn--lg:hover, .nav__cta:hover { transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 2px)); }

@media (prefers-reduced-motion: reduce) {
  .nav--hide { transform: none; }
  .hero__visual { translate: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Course page: masterclass, course, mentorship ---------- */
.cp-hero__inner { display: grid; gap: 32px; align-items: center; }
.cp-hero__img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1); }
.cp-hero .course-card__badge { margin-top: 8px; }
.cp-tiers { display: grid; gap: 20px; margin-top: 30px; }
.cp-tier { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 24px 50px -36px rgba(11, 21, 48, .45); }
.cp-tier .h3 { margin: 0; font-size: 22px; line-height: 1.25; }
.cp-tier--best { border: 2px solid var(--accent); box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--accent) 65%, transparent); }
.cp-tier__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cp-tier__step { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cp-tier__tag { font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.cp-tier--best .cp-tier__tag { background: linear-gradient(120deg, #ffb547, #ff8a1f); color: #0b1430; box-shadow: 0 8px 20px -10px rgba(255, 150, 40, .8); }
.cp-tier__text { color: var(--muted); font-size: 16px; margin: 0; }
.cp-tier__grow { flex: 1; }
.cp-tier__price { margin: 0; font-weight: 700; font-size: 14.5px; color: var(--ink-2); }
.cp-note { text-align: center; color: var(--muted); margin: 24px 0 0; font-size: 15px; }
.cp-tier:hover { background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
@media (min-width: 900px) {
  .cp-hero__inner { grid-template-columns: 1.1fr .9fr; }
  .cp-tiers { grid-template-columns: 1fr 1.12fr 1fr; align-items: stretch; }
  .cp-tier--best { margin: -12px 0; padding: 34px 28px; }
}
.js-reveal .cp-tier .course-card__points li { opacity: 0; }
.js-reveal .cp-tier.is-in .course-card__points li { animation: popIn .5s var(--ease) forwards; animation-delay: calc(var(--d, 0s) + .35s + var(--i) * .1s); }
.form-box__frame { width: 100%; height: 900px; border: 1px solid var(--line); border-radius: 16px; background: #fff; margin: 8px 0 12px; }
.cp-platform { position: relative; overflow: hidden; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: linear-gradient(120deg, #3b3fe0, #5b5ff5); color: #fff; font-weight: 800; font-size: 13.5px; letter-spacing: .01em; box-shadow: 0 10px 24px -12px rgba(70, 72, 230, .8); }
.cp-platform img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 10px rgba(255, 255, 255, .5); }
.cp-platform::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); animation: platformShine 3.2s ease-in-out 1s infinite; }
@keyframes platformShine { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
.cp-tier .course-card__badge { align-self: flex-start; }
.cp-hero__ctas { margin-top: 26px; }
.cp-hero__ctas .btn { flex: 0 1 auto; }
.cp-hero__trust { margin: 16px 0 0; font-size: 14px; color: var(--on-dark-muted); }
#cp-tiers { scroll-margin-top: calc(var(--nav-h) + 8px); }
.cp-tier.is-clickable { cursor: pointer; }
.cp-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b1430 url("images/logo/investoruday-logo-192.png?v=38bf5fe152") center / 56px no-repeat; box-shadow: 0 16px 32px -20px rgba(11, 21, 48, .6); }
.cp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Global market valuation */
.gv-india { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #15803d; background: #e9f8ee; padding: 2px 8px; border-radius: 999px; }
.gv-vs.is-dear { color: #b91c1c; font-weight: 700; }
.gv-vs.is-cheap { color: #15803d; font-weight: 700; }
.gv-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; }
.gv-sum__item { display: grid; gap: 2px; text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); font: inherit; color: inherit; cursor: pointer; border-left: 4px solid var(--c, var(--accent)); }
.gv-sum__item small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gv-sum__item strong { font-size: 16px; }
.gv-sum__item span { font-size: 13px; font-weight: 700; color: var(--c, var(--accent)); }
.gv-sum__item.is-low { --c: #15803d; }
.gv-sum__item.is-high { --c: #b91c1c; }
.gv-sum__item.is-eps { --c: var(--accent); }
@media (max-width: 639px) {
  .va-controls { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter, 16px)); padding-right: var(--gutter, 16px); }
  .va-controls .seg { flex: 0 0 auto; }
  .va-controls .seg__btn { white-space: nowrap; }
  .va-controls .flt__select { flex: 0 0 auto; }
  .gv-sum { grid-template-columns: 1fr; gap: 8px; }
}
.va-card { align-content: start; }
.va-card .gv-india { justify-self: start; }
@media (max-width: 639px) {
  .gv-sum { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter, 16px)); padding-right: var(--gutter, 16px); }
  .gv-sum__item { flex: 0 0 72%; }
}
.metric-chart__seg { margin: 18px 0 4px; }
/* Whiteboard zoom controls */
.wb__stage { overflow: hidden; }
.wb__zoom { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); box-shadow: 0 10px 24px -14px rgba(7, 14, 38, .5); z-index: 2; user-select: none; }
.wb__zbtn { min-width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 700 18px/1 var(--sans); cursor: pointer; padding: 0 6px; }
.wb__zbtn:hover { background: var(--tint); }
.wb__zbtn svg { width: 18px; height: 18px; }
.wb__zlabel { font-size: 13px; min-width: 54px; }
.wb__stage--dark .wb__zoom { background: rgba(11, 21, 48, .92); border-color: rgba(255, 255, 255, .15); }
.wb__stage--dark .wb__zbtn { color: #f1f5ff; }
.wb__stage--dark .wb__zbtn:hover { background: rgba(255, 255, 255, .08); }
/* Price and EPS charts */
.pc-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
.pc-head strong { font-family: var(--head); font-size: 22px; }
.pc-chg { font-size: 13px; font-weight: 700; }
.pc-chg.pos, .ec-label.pos { color: #15803d; fill: #15803d; }
.pc-chg.neg, .ec-label.neg { color: #b91c1c; fill: #b91c1c; }
.ec-bar { fill: var(--accent); transition: opacity .15s; }
.ec-bar.is-up { fill: #22c55e; }
.ec-bar.is-down { fill: #ef4444; }
.ec-bar.is-dim { opacity: .45; }
.ec-label { font: 700 8.5px var(--sans); }
/* Details panel that opens under the selected card's row */
.va-panel { grid-column: 1 / -1; padding: 6px 18px 18px; border-radius: 16px; background: var(--tint); border: 1px solid var(--line); animation: panelIn .35s var(--ease); }
.va-panel .metric-chart__seg { margin-top: 12px; }
.va-panel__jump { margin-top: 12px; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 639px) { .va-panel { padding: 4px 12px 14px; } }
.ec-sep { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.ec-label { font: 700 10px var(--sans); }
.ec-year { font-weight: 700; }

/* ============================================================
   Phone polish (most visitors are on phones)
   ============================================================ */
@media (max-width: 639px) {
  /* Tables: name column stays put while the numbers scroll sideways; compact rows */
  .calc__table-wrap { -webkit-overflow-scrolling: touch; }
  .track-table { font-size: 13.5px; }
  .track-table th { padding: 9px 8px; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
  .track-table td { padding: 9px 8px; white-space: nowrap; }
  .track-table .rank { display: none; }
  .track-table tr > :nth-child(2) { position: sticky; left: 0; z-index: 1; background: var(--bg); white-space: normal; min-width: 128px; max-width: 150px; box-shadow: 8px 0 10px -10px rgba(11, 21, 48, .45); }
  .track-table thead tr > :nth-child(2) { background: var(--tint); z-index: 2; }
  .track-table td.name small, .mb-stock small { font-size: 11.5px; }
  .mb-stock strong { font-size: 13.5px; }
  .track-table .trend-chip { font-size: 11px; padding: 2px 7px; }
  .strength__bar { min-width: 70px; }
  /* Category and filter pills scroll in one row instead of wrapping into many */
  .cat-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter, 16px)); padding-right: var(--gutter, 16px); }
  .cat-pills > * { flex: 0 0 auto; }
  /* Result tiles: big rupee numbers stay on one line */
  .calc__tile { padding: 14px 12px; }
  .calc__tile strong { font-size: clamp(15px, 4.6vw, 20px); white-space: nowrap; word-break: normal; }
  .calc { padding: 22px 16px; }
  /* Form grids: inputs never spill into the next column */
  .calc__input { min-width: 0; }
  input[type="date"].calc__input { -webkit-appearance: none; appearance: none; }
}
@media (max-width: 639px) {
  .calc__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .calc__tile strong { font-size: clamp(14px, 4.2vw, 19px); }
  .chart__legend { flex-direction: column; gap: 4px; }
  .chart__key { align-items: flex-start; }
  .chart__key::before { margin-top: 3px; flex: none; }
}
@media (max-width: 639px) { .calc__tile--big strong { font-size: clamp(28px, 8vw, 38px); } }

/* ---------- Social proof: rating, about stats, reviews ---------- */
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.rating__stars { color: #f59e0b; letter-spacing: 1px; font-size: 15px; }
.rating strong { font-weight: 800; color: var(--ink); }
.rating__count { color: var(--muted); font-weight: 600; }
.rating--light { margin: 4px 0 6px; }
.rating--light strong { color: #fff; }
.rating--light .rating__count { color: var(--on-dark-muted); }
.about__stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; }
.about__stat { flex: 1 1 120px; padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.about__stat strong { display: block; font-family: var(--head); font-size: 26px; line-height: 1.1; color: var(--accent); }
.about__stat span { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.reviews { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.review { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 24px 50px -40px rgba(11, 21, 48, .5); }
.review__stars { color: #f59e0b; letter-spacing: 2px; }
.review__text { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; flex: 1; }
.review__who strong { display: block; }
.review__who span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.cp-reviews-head { margin-top: 56px; }
@media (max-width: 639px) {
  .reviews { grid-template-columns: 1fr; }
  .about__stat { flex: 1 1 calc(50% - 6px); }
  .about__stat strong { font-size: 22px; }
}
.reviews__more { text-align: center; margin: 22px 0 0; }
.reviews__tabs { margin-bottom: 20px; }
#reviewList > div { transition: opacity .45s ease, transform .45s ease; }
#reviewList > div.is-swapping { opacity: 0; transform: translateY(8px); }

/* ---------- Sector rotation graph ---------- */
.rrg-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.rrg-sum__item { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); border-top: 3px solid var(--q); background: var(--bg); }
.rrg-sum__item strong { display: block; color: var(--q); font-size: 14px; }
.rrg-sum__item span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.is-leading { --q: #16a34a; } .is-weakening { --q: #d97706; } .is-lagging { --q: #dc2626; } .is-improving { --q: #2563eb; }
.rrg-axis { stroke: var(--muted); stroke-width: 1; stroke-opacity: .5; }
.rrg-qlabel { font: 800 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.rrg-label { font: 700 10.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.rrg-s { transition: opacity .2s; }
.rrg-s.is-dim { opacity: .15; }
.rrg-s.is-sel .rrg-label { font-size: 13px; }
.rrg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.rrg-chip { border: 1px solid var(--q, var(--line)); color: var(--q, var(--ink)); background: color-mix(in srgb, var(--q, #888) 8%, transparent); border-radius: 999px; padding: 4px 10px; font: 700 12px var(--sans); cursor: pointer; }
.rrg-chip.is-off { opacity: .35; text-decoration: line-through; }
.rrg-chip--all { --q: var(--accent); }
td .rrg-chip { cursor: default; }
@media (max-width: 639px) {
  .rrg-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rrg-label { font-size: 9.5px; }
}
.rrg-market { margin-bottom: 14px; }
/* Sector rotation: replay and polish */
.rrg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.rrg-top .track-updated { margin: 0; }
.rrg-top .rrg-market { margin: 0; }
.rrg-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.rrg-axis-name { font-weight: 700; }
.rrg-date { font: 800 34px var(--head); fill: var(--ink); opacity: .07; pointer-events: none; }
.rrg-s.is-sel .rrg-label { font-weight: 800; }
.rrg-play { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; padding: 10px 14px; border-radius: 14px; background: var(--tint); }
.rrg-play__btn { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 18px -8px var(--accent); }
.rrg-play__btn svg { width: 18px; height: 18px; fill: currentColor; }
.rrg-play__range { flex: 1; min-width: 0; accent-color: var(--accent); height: 28px; }
.rrg-play__date { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 150px; text-align: right; }
.rrg-play__opts { margin-bottom: 4px; }
.rrg-latest { border: 1px solid var(--line); border-radius: 999px; background: var(--bg); padding: 8px 14px; }
.rrg-chip.is-sel { box-shadow: 0 0 0 2px var(--q, var(--accent)); }
@media (max-width: 639px) {
  .rrg-play { flex-wrap: wrap; padding: 10px; }
  .rrg-play__date { min-width: 0; width: 100%; text-align: center; order: 3; }
  .rrg-date { font-size: 22px; }
}
/* Sector rotation: markers, tags, hover card, legend list */
.rrg-tag { fill: var(--bg); fill-opacity: .92; stroke-width: 1; stroke-opacity: .55; }
.rrg-label { font: 700 10.5px var(--sans); fill: var(--ink); stroke: none; paint-order: normal; }
.rrg-s { transition: opacity .18s ease; }
.chart__svg.has-hover .rrg-s:not(.is-hover) { opacity: .16; }
.rrg-s.is-hover .rrg-trail, .rrg-s.is-sel .rrg-trail { stroke-width: 3; stroke-opacity: .85; }
.rrg-s.is-hover .rrg-halo { fill-opacity: .28; }
.rrg-s.is-hover .rrg-tag, .rrg-s.is-sel .rrg-tag { stroke-width: 1.6; stroke-opacity: 1; }
.chart__svg { cursor: crosshair; }
.rrg-tip { top: 0; transform: translate(-50%, calc(-100% - 16px)); min-width: 170px; padding: 10px 12px; border-radius: 12px; transition: opacity .12s ease; }
.rrg-tip.is-below { transform: translate(-50%, 18px); }
.rrg-tip__name { display: flex !important; align-items: center; gap: 7px; font-size: 13.5px; white-space: normal; }
.rrg-tip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--q); flex: none; }
.rrg-tip__zone { color: var(--q) !important; font-weight: 800; font-size: 12.5px; margin: 2px 0 6px; filter: brightness(1.35); }
.rrg-tip__grid { display: grid !important; grid-template-columns: auto auto; gap: 2px 14px; font-size: 12.5px; }
.rrg-tip__grid em { font-style: normal; color: rgba(255, 255, 255, .7); }
.rrg-tip__grid b { text-align: right; font-variant-numeric: tabular-nums; }
.rrg-tip__week { margin-top: 6px; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.rrg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin: 14px 0 6px; }
.rrg-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font: 600 13px var(--sans); color: var(--ink); cursor: pointer; text-align: left; transition: background .15s, opacity .15s, border-color .15s; }
.rrg-item:hover { border-color: var(--q, var(--accent)); }
.rrg-item__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--q, var(--muted)); flex: none; }
.rrg-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrg-item__zone { font-size: 11px; font-weight: 800; color: var(--q); }
.rrg-item.is-off { opacity: .4; }
.rrg-item.is-off .rrg-item__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.rrg-item.is-sel { border-color: var(--q); box-shadow: 0 0 0 1px var(--q); }
.rrg-item--all { justify-content: center; color: var(--accent); font-weight: 800; }
@media (max-width: 639px) {
  .rrg-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rrg-label { font-size: 9.5px; }
  .rrg-tip { min-width: 150px; }
}
@media (max-width: 639px) {
  .rrg-item__zone { display: none; }
  .rrg-item { font-size: 12.5px; padding: 7px 9px; }
}

/* ---------- Mega menus (Tools, Trackers, Strategy Tester) ---------- */
@media (min-width: 1200px) {
  .nav__inner { position: relative; }
  .nav__dd { position: static; }
  .nav__mega {
    left: 50%; right: auto; top: calc(100% - 4px);
    width: min(1020px, calc(100vw - 48px)); padding: 0; border-radius: 22px; overflow: hidden;
    background: color-mix(in srgb, var(--dark) 98%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
    color: var(--on-dark); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1);
    transform: translate(-50%, -8px);
  }
  .nav__dd.is-open .nav__mega, .nav__dd:hover .nav__mega, .nav__dd:has(:focus-visible) .nav__mega { transform: translate(-50%, 0); }
  .nav__mega::before { top: -22px; height: 22px; }
  .nav__mega::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 85% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
  .mega__head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 26px 6px; }
  .mega__kicker { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
  .mega__title { margin: 0; font: 800 23px/1.15 var(--head); letter-spacing: -.02em; color: #fff; }
  .mega__overview { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #050b1f; border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; transition: border-color .2s, transform .2s; }
  .mega__overview:hover { border-color: rgba(255, 255, 255, .4); transform: translateY(-1px); }
  .mega__cols { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); padding: 10px 14px 16px; }
  .mega__col { padding: 8px 12px; }
  .mega__col + .mega__col { border-left: 1px solid rgba(255, 255, 255, .08); }
  .mega__col-title { margin: 6px 0 8px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
  .mega__item { color: var(--on-dark); padding: 9px 10px; border-radius: 12px; align-items: flex-start; }
  .mega__item:hover, .mega__item.is-active { background: rgba(255, 255, 255, .07); }
  .mega__item strong { color: #fff; font-size: 14.5px; }
  .mega__item small { color: var(--on-dark-muted); font-size: 12.5px; line-height: 1.4; }
  .mega__icon { width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(140deg, #4f7dff, #2a49c9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px -6px rgba(31, 94, 255, .8); }
  .mega__col--1 .mega__icon { background: linear-gradient(140deg, #8b5cf6, #5b32c9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px -6px rgba(124, 58, 237, .8); }
  .mega__col--2 .mega__icon { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
  .mega__item.is-soon small { color: #fbbf24; }
  .mega__foot { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding: 14px 26px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .18); }
  .mega__all { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; }
  .mega__all .arr { transition: transform .2s; }
  .mega__all:hover .arr { transform: translateX(4px); }
}
/* Phones and the small-screen menu: plain list, no header or footer */
@media (max-width: 1199px) {
  .mega__head, .mega__foot, .mega__col-title { display: none; }
}
.rrg-signals { margin: 6px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--tint); }
.rrg-signals__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.rrg-signals__head strong { font-size: 14px; }
.rrg-signals__head span { font-size: 12.5px; color: var(--muted); }
.rrg-signals__row { display: flex; flex-wrap: wrap; gap: 8px; }
.rrg-signal { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--q, var(--accent)) 45%, transparent); background: var(--bg); font: 600 12.5px var(--sans); color: var(--ink-2); cursor: pointer; }
.rrg-signal b { color: var(--ink); }
.rrg-signal span { color: var(--q, var(--accent)); font-weight: 700; }
.rrg-signal.is-fast { --q: #7c3aed; }
.rrg-signal.is-none { cursor: default; border-style: dashed; color: var(--muted); }
.rrg-heading i { display: inline-block; font-style: normal; color: var(--accent); }
/* Home ticker: scrolls on its own like a market ticker */
.today__inner { display: flex; align-items: center; gap: 0; padding: 0; overflow: hidden; }
.today__asof { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 16px; background: color-mix(in srgb, var(--dark) 70%, #000); border-right: 1px solid rgba(255, 255, 255, .1); position: relative; z-index: 1; box-shadow: 10px 0 14px -8px rgba(0, 0, 0, .6); }
.today__view { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); }
.today__view::-webkit-scrollbar { display: none; }
.today__track { display: inline-flex; align-items: center; white-space: nowrap; padding: 10px 0; }
.today__track .today__item { padding: 0 22px; position: relative; }
.today__track .today__item + .today__item::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .25); transform: translateY(-50%); }
.today.is-moving .today__view { overflow: hidden; }
.today.is-moving .today__track { animation: tickerMove var(--dur, 60s) linear infinite; }
.today.is-moving .today__view:hover .today__track, .today.is-paused .today__track { animation-play-state: paused; }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .today__track { animation: none !important; } }

/* ============================================================
   Premium finishing for the home page (keeps the site's own colours)
   ============================================================ */
/* Section badge: a soft pill above each heading */
#view-home .section .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: 12px; letter-spacing: .14em; box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
#view-home .section .kicker::before { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); animation: pulse 2s infinite; }
#view-home .section--dark .kicker { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }
#view-home .section--dark .kicker::before { background: var(--accent-light); }
#view-home .section-head--center .kicker { margin-left: auto; margin-right: auto; }

/* Our Approach: numbered journey cards with check marks and a flowing path */
#view-home .phase { padding-top: 46px; }
#view-home .phase__num { position: absolute; left: 22px; top: 18px; font: 800 12px var(--sans); letter-spacing: .1em; color: var(--phase-color); opacity: 1; }
#view-home .phase::before { content: ""; position: absolute; right: 18px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--phase-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--phase-color) 18%, transparent); }
.phase__check { position: absolute; right: 18px; bottom: 16px; width: 22px; height: 22px; color: var(--phase-color, var(--ok)); display: none; }
.phase__check svg { width: 100%; height: 100%; }
#view-home .phase__check { display: block; }
.phase-flow { display: none; }
#view-home .phase-flow { display: block; height: 40px; margin: 8px 4% 0; }
#view-home .phase-flow svg { width: 100%; height: 100%; overflow: visible; }
.phase-flow__line { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.5; stroke-dasharray: 6 6; animation: flowDash 1.6s linear infinite; vector-effect: non-scaling-stroke; }
.phase-flow__marks path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.phase-flow__marks circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@keyframes flowDash { to { stroke-dashoffset: -24; } }
@media (max-width: 639px) { #view-home .phase-flow { display: none; } }

/* Cards: a crisp edge that lights up on hover */
#view-home .principle, #view-home .review, #view-home .faq__item { border: 1px solid var(--line); }
#view-home .principle:hover, #view-home .review:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--accent) 55%, transparent); }

/* About as a credentials panel: story card plus stat cards */
#view-home .about__body { padding: 28px; border-radius: 22px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); box-shadow: 0 30px 70px -45px rgba(11, 21, 48, .5); }
#view-home .about__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#view-home .about__stat { padding: 16px; border-radius: 16px; display: grid; gap: 6px; background: var(--tint); }
.about__stat .about__stat-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.about__stat-icon svg { width: 17px; height: 17px; }
.about__stat-label { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#view-home .about__stat strong { font-size: 26px; }
.about__cta { margin-top: 16px; width: 100%; justify-content: center; }
@media (max-width: 639px) {
  #view-home .about__body { padding: 20px 16px; }
  #view-home .about__stat strong { font-size: 21px; }
}
.about__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.about__ctas .about__cta { margin-top: 0; }
@media (max-width: 639px) { .about__ctas { grid-template-columns: 1fr; } }

/* ---------- Option Strategy Builder ---------- */
.ob-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 6px; }
.ob-exp { width: auto; height: 42px; font-size: 14px; }
.ob-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ob-facts span { padding: 6px 12px; border-radius: 10px; background: var(--tint); }
.ob-facts small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ob-facts b { font-size: 15px; }
.ob-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ob-preset { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 8px 14px; font: 700 13px var(--sans); color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.ob-preset:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ob-legs { display: grid; gap: 8px; margin-bottom: 16px; }
.ob-legs > .btn { justify-self: start; }
.ob-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); border-left: 4px solid var(--c); }
.ob-leg.is-B { --c: #16a34a; } .ob-leg.is-S { --c: #dc2626; }
.ob-leg .calc__input { width: auto; height: 40px; font-size: 14px; }
.ob-bs { min-width: 58px; height: 40px; border-radius: 10px; border: 0; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font: 800 13px var(--sans); cursor: pointer; }
.ob-field { display: flex; align-items: center; gap: 6px; }
.ob-field small { font-size: 12px; font-weight: 700; color: var(--muted); }
.ob-lots { width: 70px !important; }
.ob-prem { width: 100px !important; }
.ob-iv { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 8px; border-radius: 8px; background: var(--tint); }
.ob-del { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: 18px; color: var(--muted); cursor: pointer; }
.ob-del:hover { color: #dc2626; border-color: #dc2626; }
.ob-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ob-tile { padding: 12px 14px; border-radius: 14px; background: var(--tint); }
.ob-tile small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.ob-tile b { display: block; margin-top: 3px; font-family: var(--head); font-size: 18px; }
.ob-tile.pos b, .ob-simout b.pos { color: #15803d; }
.ob-tile.neg b, .ob-simout b.neg { color: #b91c1c; }
.ob-whatif { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; align-items: end; gap: 16px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); }
.ob-slider__head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ob-slider__head b { color: var(--accent); }
.ob-slider .calc__range { margin-top: 10px; }
.ob-simout small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ob-simout b { font-family: var(--head); font-size: 20px; }
.ob-reset { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: var(--bg); }
.ob-chart .chart { margin-top: 18px; }
.ob-band { fill: var(--accent); fill-opacity: .06; }
.ob-area.is-pos { fill: #22c55e; fill-opacity: .16; }
.ob-area.is-neg { fill: #ef4444; fill-opacity: .14; }
.ob-zero { stroke: var(--muted); stroke-width: 1; }
.ob-line { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.ob-line.is-today { stroke: var(--accent); stroke-dasharray: 6 4; }
.ob-spot { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; }
.ob-simline { stroke: #f59e0b; stroke-width: 1.5; }
.ob-simdot { fill: #f59e0b; stroke: #fff; stroke-width: 2; }
.ob-be { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.ob-tag { font: 700 11px var(--sans); fill: var(--accent); }
.ob-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ob-key span::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2.2px solid var(--ink); }
.ob-key .ob-key__today::before { border-top: 2.2px dashed var(--accent); }
.ob-key .ob-key__band::before { height: 10px; border: 0; background: color-mix(in srgb, var(--accent) 15%, transparent); }
.ob-mc { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.ob-mc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ob-mc__head .h3 { margin: 0; }
.ob-bar.is-pos { fill: #22c55e; } .ob-bar.is-neg { fill: #ef4444; }
.ob-bar { transition: opacity .15s; } .ob-bar:hover { opacity: .7; }
@media (max-width: 899px) {
  .ob-whatif { grid-template-columns: 1fr; }
  .ob-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-facts { margin-left: 0; }
}
@media (max-width: 639px) {
  .ob-leg { gap: 6px; }
  .ob-leg .calc__input { height: 38px; }
  .ob-tile b { font-size: 16px; }
}
/* Tool and tracker tabs grouped like the header menu */
.tool-tabs { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: flex-start; }
.tool-tabs__group { display: flex; flex-direction: column; gap: 8px; }
.tool-tabs__row { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-tabs__label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); opacity: .8; }
.hub__title { margin: 34px 0 14px; font: 800 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.hub__title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hub__title:first-child { margin-top: 0; }
@media (max-width: 639px) {
  .tool-tabs { flex-wrap: nowrap; gap: 20px; }
  .tool-tabs__group, .tool-tabs__row { flex-wrap: nowrap; flex: none; }
}

/* A dropdown that was just used stays closed until the pointer leaves it */
@media (min-width: 1200px) {
  .nav .nav__dd.is-shut .nav__menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity .15s ease, visibility 0s .15s; }
  .nav .nav__dd.is-shut .nav__dd-caret { transform: none; }
}
/* Courses mega menu */
.nav__dd-btn--plain::before { display: none; }
.mega__courses { display: none; }
@media (min-width: 1200px) {
  .mega__courses { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 12px 22px 20px; }
  .mega__course { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--on-dark); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: transform .25s var(--ease), border-color .2s, background .2s; }
  a.mega__course:hover { transform: translateY(-3px); border-color: rgba(127, 166, 255, .55); background: rgba(255, 255, 255, .07); }
  .mega__course.is-closed { opacity: .72; }
  .mega__course-media { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: #0a1435; }
  .mega__course-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
  a.mega__course:hover .mega__course-media img { transform: scale(1.05); }
  .mega__course-flag { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: #dc2626; color: #fff; font: 800 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
  .mega__course-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
  .mega__course-body strong { color: #fff; font: 700 15px/1.3 var(--head); }
  .mega__course-points { display: flex; flex-wrap: wrap; gap: 6px; }
  .mega__course-points span { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(127, 166, 255, .14); color: #c7d6ff; }
  .mega__course-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
  .mega__course-price b { font: 800 18px var(--head); color: #fff; }
  .mega__course-price s { color: var(--on-dark-muted); font-size: 13px; }
  .mega__course-price em { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #16a34a; color: #fff; }
  .mega__course-price small { width: 100%; color: #fbbf24; font-weight: 700; font-size: 12px; }
  .mega__course .rating { font-size: 12.5px; }
}
/* Phones and tablets: Courses, Tools, Trackers and Strategy Tester are plain links to their pages (one tap opens them) */
@media (max-width: 1199px), (hover: none) {
  .nav:not(.is-open) .nav__dd .nav__menu, .nav__dd--courses .nav__menu { display: none !important; }
  .nav__dd .nav__dd-caret { display: none; }
}
/* Phone menu (☰): Tools, Trackers and Strategy Tester list their pages right under the heading */
@media (max-width: 1199px) {
  .nav.is-open .nav__links { max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; }
  .nav.is-open .nav__dd:not(.nav__dd--courses) .nav__menu { display: block !important; position: static; width: auto; padding: 0 0 12px; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; border: 0; }
  .nav.is-open .nav__dd:not(.nav__dd--courses) .nav__dd-btn { border-bottom: 0; padding-bottom: 6px; }
  .nav.is-open .nav__dd:not(.nav__dd--courses) { border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .nav.is-open .mega__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; padding: 0; }
  .nav.is-open .mega__col { display: contents; }
  .nav.is-open .mega__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); color: #fff; text-decoration: none; min-width: 0; }
  .nav.is-open .mega__item small { display: none; }
  .nav.is-open .mega__item > span:not(.mega__icon) { min-width: 0; }
  .nav.is-open .mega__item strong { font-size: 13.5px; line-height: 1.25; font-weight: 600; color: #fff; }
  .nav.is-open .mega__icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(127, 166, 255, .14); color: #9fbcff; }
  .nav.is-open .mega__icon svg { width: 15px; height: 15px; }
  .nav.is-open .mega__item.is-soon { opacity: .6; }
}
.data-note { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--on-dark); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.data-note svg { width: 15px; height: 15px; color: #fbbf24; flex: none; }
/* Mutual fund consistency map */
.mf-view { margin-bottom: 16px; }
.mfq-best { --q: #16a34a; } .mfq-steady { --q: #2563eb; } .mfq-deep { --q: #d97706; } .mfq-weak { --q: #dc2626; }
.mfc-best { --q: #16a34a; } .mfc-steady { --q: #2563eb; } .mfc-deep { --q: #d97706; } .mfc-weak { --q: #dc2626; }
.mf-label { font-size: 10px; }
.mf-sum .rrg-sum__item span { color: var(--muted); }
td .rrg-chip { white-space: nowrap; }
.mf-zone { font: inherit; text-align: left; cursor: pointer; transition: opacity .15s, box-shadow .15s; }
.mf-zone.is-on { box-shadow: 0 0 0 2px var(--q); }
.mf-zone.is-off { opacity: .45; }
.mf-controls .flt__search { max-width: 240px; }
@media (max-width: 639px) { .mf-controls .flt__search { max-width: none; flex: 0 0 200px; } }
.track-table td.name { min-width: 190px; }
.rrg-s.is-hover circle { transform-box: fill-box; transform-origin: center; transform: scale(1.45); }
.rrg-s circle { transition: transform .15s ease; }
.mf-median { margin: 4px 0 0; font-weight: 600; color: var(--ink-2); }
.mf-compare { margin-top: 22px; padding: 6px 18px 16px; border-radius: 16px; background: var(--tint); border: 1px solid var(--line); }
.mf-compare__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mf-compare__head .va-sub { margin: 12px 0 4px; }
.mf-compare__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font: 600 12.5px var(--sans); color: var(--ink); cursor: pointer; }
.mf-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--k); }
.mf-chip b { color: var(--muted); font-size: 14px; }
.mf-chip:hover b { color: #dc2626; }
/* Line charts */
.chart__vgrid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.chart__zero { stroke: var(--muted); stroke-opacity: .6; }
.chart__line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.chart__line.is-main { stroke-width: 2.4; }
.chart__end { font: 700 11px var(--sans); }
.chart__tip--lines { top: 8px; transform: translateX(12px); min-width: 180px; }
.chart__tip--lines.is-left { transform: translateX(calc(-100% - 12px)); }
.chart__tip-row { display: flex !important; align-items: center; gap: 7px; font-size: 12.5px; }
.chart__tip-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chart__tip-row em { font-style: normal; flex: 1; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.chart__tip-row b { font-variant-numeric: tabular-nums; }
.chart__tip-ref i { background: transparent; border: 1.5px dashed rgba(255, 255, 255, .7); }
.mf-cview { margin: 8px 0 0; }
.mf-cmp-table { margin-top: 4px; }
.mf-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
/* RRG zone filter: indices outside the chosen zone fade out */
.rrg-s.is-out, .chart__svg.has-hover .rrg-s.is-out { opacity: .1; pointer-events: none; }
.rrg-qlabel { cursor: pointer; }
.rrg-sum .mf-zone { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; }
/* Mutual Funds: My fund mix */
.mf-add { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--brand, #1f5eff); background: transparent; color: var(--brand, #1f5eff); font: 700 12px var(--sans); cursor: pointer; white-space: nowrap; }
.mf-add.is-on { background: var(--brand, #1f5eff); color: #fff; }
.mf-add:disabled { opacity: .4; cursor: not-allowed; }
.mf-mix__acts { display: flex; gap: 6px; }
.mf-mix__acts .seg__btn { border: 1px solid var(--line); background: var(--bg); }
.mf-mix__list { display: grid; gap: 8px; margin-top: 8px; }
.mf-mix__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.mf-mix__name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mf-mix__name span { min-width: 0; }
.mf-mix__name b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-mix__name small { display: block; color: var(--muted); font-size: 12px; }
.mf-mix__wl { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.mf-mix__w { width: 64px; padding: 6px 8px; text-align: right; }
.mf-mix__x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.mf-mix__x:hover { color: #dc2626; border-color: #dc2626; }
.mf-mix__total.is-warn { color: #b45309; }
.mf-mix__label { margin: 14px 0 6px; font: 700 13px var(--sans); color: var(--ink); }
.mf-mix__bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--line); }
.mf-mix__bar span { height: 100%; }
.mf-mix__keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.mf-mix__key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.mf-mix__tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.mf-mix__tile { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.mf-mix__tile span { display: block; font-size: 11.5px; color: var(--muted); }
.mf-mix__tile b { display: block; font-size: 17px; margin-top: 2px; }
.mf-mix__tile b.pos { color: #16a34a; } .mf-mix__tile b.neg { color: #dc2626; }
.mf-mix__notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 760px) {
  .mf-mix__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-mix__row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .mf-mix__row .rrg-chip { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
/* Phones: Sector Rotation and Mutual Funds use the full width */
@media (max-width: 639px) {
  .rrg-card, .track-card:has(.mf-sum) { padding: 18px 12px; }
  .rrg-card .va-controls { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; gap: 8px; }
  .rrg-card .seg__btn { padding-left: 11px; padding-right: 11px; }
  .rrg-sum { gap: 8px; }
  .rrg-sum__item { padding: 9px 10px; }
  .rrg-sum__item strong { font-size: 13.5px; }
  .rrg-sum__item span { font-size: 12px; }
  .rrg-signals { padding: 10px 10px; }
  .rrg-signals__row { gap: 6px; }
  .rrg-signal { padding: 5px 10px; gap: 6px; font-size: 12px; }
  .rrg-signal b { white-space: nowrap; }
  .rrg-play { gap: 10px; }
  .rrg-chips { gap: 6px; }
  .rrg-card .chart, .mf-compare .chart { margin-left: -4px; margin-right: -4px; }
  .mf-compare { padding: 4px 10px 14px; margin-left: -4px; margin-right: -4px; }
  .mf-compare__head { gap: 6px; }
  .mf-mix__acts { width: 100%; }
  .mf-mix__acts .seg__btn { flex: 1; }
  .mf-mix__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name x" "chip w"; gap: 8px; padding: 10px; }
  .mf-mix__name { grid-area: name; align-items: flex-start; }
  .mf-mix__name i { margin-top: 5px; }
  .mf-mix__name b { white-space: normal; line-height: 1.3; }
  .mf-mix__row .rrg-chip { grid-area: chip; grid-column: auto; grid-row: auto; align-self: center; }
  .mf-mix__wl { grid-area: w; justify-self: end; }
  .mf-mix__x { grid-area: x; justify-self: end; }
  .mf-mix__tile b { font-size: 16px; }
  .mf-cmp-table td.name { min-width: 150px; }
}
/* floating jump-to-mix button (phones and small screens) */
.mf-mix { margin: 22px 0 18px; }
.mf-mix-pill { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; padding: 11px 18px; border-radius: 999px; border: 0; background: var(--accent, #1f5eff); color: #fff; font: 700 14px var(--sans); box-shadow: 0 14px 30px -10px rgba(31, 94, 255, .7); cursor: pointer; }
.mf-mix-pill[hidden] { display: none; }
@media (min-width: 960px) { .mf-mix-pill { display: none; } }
.mf-add-cell { width: 1%; white-space: nowrap; }
@media (max-width: 639px) { .track-card:has(.mf-sum) td.name { min-width: 160px; } }
/* Never let anything widen the page on phones (some Android browsers ignore overflow on body alone) */
html, body { overflow-x: clip; max-width: 100%; }
.mf-mix-pill { max-width: calc(100vw - 32px); white-space: nowrap; }
@media (max-width: 639px) {
  .mf-controls { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; gap: 8px; }
  .mf-controls .flt__select { flex: 1 1 100%; max-width: none; width: 100%; }
  .mf-controls .flt__search { flex: 1 1 100%; }
}
/* Group labels (Market, Plan & review, Calculators, Valuation, Trackers...) use the same pill as the home-page kickers */
.hub__title, .end-lists__h, .tool-tabs__label {
  display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 7px 14px; border-radius: 999px;
  font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--accent) 60%, transparent); opacity: 1;
}
.hub__title::after { content: none; }
.hub__title::before, .end-lists__h::before, .tool-tabs__label::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); animation: pulse 2s infinite;
}
.hub__title { margin: 34px 0 16px; }
.hub__title:first-child { margin-top: 0; }
.end-lists__h { margin-bottom: 14px; }
/* on the dark page header */
.tool-tabs__label { align-self: flex-start; justify-self: start; padding: 5px 12px; font-size: 11px; color: var(--accent-light); border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); box-shadow: none; }
.tool-tabs__label::before { background: var(--accent-light); }
@media (prefers-reduced-motion: reduce) { .hub__title::before, .end-lists__h::before, .tool-tabs__label::before { animation: none; } }
/* Logo mark beside the name (header and footer) */
.logo { flex-direction: row; align-items: center; gap: 11px; }
.logo__text { display: flex; flex-direction: column; min-width: 0; }
.logo__mark { flex: none; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 8px 20px -8px rgba(31, 94, 255, .8), 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .3s var(--ease); }
.logo:hover .logo__mark { transform: rotate(-6deg) scale(1.05); }
.footer__logo { display: inline-flex; align-items: center; gap: 10px; }
.footer__mark { flex: none; width: 34px; height: 34px; border-radius: 9px; }
@media (max-width: 639px) {
  .logo { gap: 9px; }
  .logo__mark { width: 34px; height: 34px; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) { .logo:hover .logo__mark { transform: none; } }
/* Header: keep clear space between the logo and the menu on laptop widths */
@media (min-width: 1200px) {
  .logo { margin-right: 28px; }
}
@media (min-width: 1200px) and (max-width: 1379px) {
  .nav__links { gap: 16px; }
  .nav__link { font-size: 14.5px; }
  .nav__cta { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 1380px) { .logo { margin-right: 48px; } }
/* Desktop header: a floating rounded bar (dark band behind it at the top, floats over the page once scrolled) */
@media (min-width: 1200px) {
  .nav { background: var(--dark); border-bottom: 0; padding: 12px 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .nav.is-scrolled { background: transparent; box-shadow: none; }
  .nav__inner {
    height: 64px; padding: 0 10px 0 14px; border-radius: 20px;
    background: color-mix(in srgb, var(--dark) 95%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -24px rgba(0, 0, 0, .8);
    transition: box-shadow .3s ease, border-color .3s ease;
  }
  .nav.is-scrolled .nav__inner { border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 50px -20px rgba(0, 0, 0, .75); }
  .logo__mark { width: 38px; height: 38px; }
  .nav__cta { border-radius: 14px; }
  .nav__mega { top: calc(100% + 8px); }
}
/* Logo animation: the gold dot drops in on load, a light sweep passes every few seconds, the dot hops on hover */
.mk-dot { transform-box: fill-box; transform-origin: 50% 100%; animation: mkDrop .9s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
.mk-u { transform-box: fill-box; transform-origin: 50% 0; animation: mkRise .7s cubic-bezier(.2, .9, .3, 1.1) both; }
.mk-shine { animation: mkShine 6s ease-in-out 1.4s infinite; }
.logo:hover .mk-dot, .footer__logo:hover .mk-dot { animation: mkHop .6s cubic-bezier(.3, 1.6, .5, 1); }
.logo:hover .mk-shine { animation: mkShine 1s ease-in-out; }
@keyframes mkDrop { 0% { transform: translateY(-140%) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes mkRise { 0% { transform: translateY(12%) scaleY(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes mkHop { 0%, 100% { transform: none; } 40% { transform: translateY(-38%) scale(1.12); } 70% { transform: translateY(4%) scale(.96, 1.04); } }
@keyframes mkShine { 0% { transform: rotate(20deg) translateX(0); } 22%, 100% { transform: rotate(20deg) translateX(900px); } }
@media (prefers-reduced-motion: reduce) { .mk-dot, .mk-u, .mk-shine, .logo:hover .mk-dot, .logo:hover .mk-shine { animation: none; } }
/* Sector Rotation replay: steady heights for the parts that change every step */
.rrg-card { overflow-anchor: none; }
.rrg-signals__row { min-height: 34px; }
/* Common questions at the bottom of each tool and tracker */
.tool-faq { padding-top: 48px; padding-bottom: 64px; }
.tool-faq .h2 { margin-bottom: 16px; }
.tool-faq__item { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); margin-bottom: 10px; overflow: hidden; }
.tool-faq__item summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 700; font-size: 16px; color: var(--ink); position: relative; }
.tool-faq__item summary::-webkit-details-marker { display: none; }
.tool-faq__item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 500; color: var(--accent); transition: transform .2s; }
.tool-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.tool-faq__item p { margin: 0; padding: 0 18px 16px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
/* Micro Sector Tracker */
.ms-lead__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 12px; }
.ms-lead__head .va-sub { margin: 0; }
.ms-lead__head span { font-size: 13px; color: var(--muted); }
.ms-lead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.ms-card { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 10px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 10px 26px -20px rgba(11, 21, 48, .45); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; color: var(--ink); }
.ms-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -22px rgba(31, 94, 255, .55); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ms-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.ms-card__top { display: flex; justify-content: space-between; align-items: center; }
.ms-card__rank { font: 800 12px var(--sans); color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 999px; }
.ms-card__score { font: 700 11.5px var(--sans); color: #16a34a; background: rgba(22, 163, 74, .1); padding: 2px 8px; border-radius: 999px; }
.ms-card__name { font: 800 16px var(--head); letter-spacing: -.01em; margin-top: 4px; line-height: 1.2; }
.ms-card__group { font-size: 12px; color: var(--muted); }
.ms-card__rets { display: flex; gap: 12px; margin-top: 4px; }
.ms-card__rets span { display: flex; flex-direction: column; }
.ms-card__rets em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; }
.ms-card__rets b { font-size: 14px; }
.ms-card__rets b.pos { color: #16a34a; } .ms-card__rets b.neg { color: #dc2626; }
.ms-card .ms-spark { width: 100%; height: 36px; margin-top: 4px; }
.ms-flt { margin-bottom: 10px; }
.ms-flt .flt__search { max-width: 360px; }
.ms-groups { margin-bottom: 16px; }
.ms-name strong { display: block; }
.ms-name small { display: block; color: var(--muted); font-size: 12px; }
.ms-score { position: relative; min-width: 84px; }
.ms-score__bar { display: inline-block; vertical-align: middle; width: 46px; height: 6px; border-radius: 999px; background: var(--line); margin-right: 8px; position: relative; overflow: hidden; }
.ms-score__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #60a5fa, #16a34a); border-radius: inherit; }
.ms-breadth { white-space: nowrap; }
.ms-trend .ms-spark { width: 96px; height: 28px; display: block; }
.ms-detail { margin: 0 0 22px; padding: 6px 18px 16px; border-radius: 16px; background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); scroll-margin-top: calc(var(--nav-h) + 24px); }
.ms-detail__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; }
.ms-detail__head .va-sub { margin: 0; }
.ms-detail__head small { color: var(--muted); font-size: 13px; }
@media (max-width: 899px) { .ms-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .ms-lead { gap: 8px; }
  .ms-card { padding: 12px 11px 8px; }
  .ms-card__name { font-size: 14.5px; }
  .ms-card__rets { gap: 8px; }
  .ms-card__rets b { font-size: 13px; }
  .ms-detail { padding: 4px 10px 14px; margin-left: -4px; margin-right: -4px; }
  .ms-flt .flt__search { max-width: none; }
  .ms-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 639px) {
  .ms-card__rets { gap: 6px; justify-content: space-between; }
  .ms-card__rets b { font-size: 12.5px; }
  .ms-card__score { font-size: 11px; padding: 2px 7px; }
}
@media (max-width: 639px) {
  .ms-card__rets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .ms-card__rets b { font-size: 11.5px; letter-spacing: -.02em; white-space: nowrap; }
}
.ms-lead__head .ms-rankby { margin: 0 0 0 auto; }
.ms-map { margin: 0 0 22px; }
.ms-map .rrg-sum { margin-bottom: 10px; }
.ms-few { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font: 700 10.5px var(--sans); color: #b45309; background: rgba(245, 158, 11, .14); vertical-align: middle; }
.ms-card .rrg-chip { font-size: 11px; padding: 2px 8px; }
@media (max-width: 639px) { .ms-lead__head .ms-rankby { margin: 6px 0 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; } }
.ms-maplabel { paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.chart__svg.has-hover .ms-labels { opacity: .35; transition: opacity .15s; }
.ms-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.ms-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
.ms-trail { pointer-events: none; }
.ms-groupbars { margin: 6px 0 22px; }
.ms-gbars { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ms-gbar { font: inherit; text-align: left; cursor: pointer; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); transition: border-color .15s, box-shadow .15s, opacity .15s; }
.ms-gbar:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ms-gbar.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.ms-gbar.is-off { opacity: .5; }
.ms-gbar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ms-gbar__top strong { font-size: 14px; }
.ms-gbar__top b { font: 800 16px var(--head); }
.ms-gbar__bar { display: block; height: 6px; margin: 7px 0 6px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden; }
.ms-gbar__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #16a34a); }
.ms-gbar small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
@media (max-width: 639px) { .ms-gbars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ms-gbar { padding: 10px; } }
.ms-gbar { display: flex; flex-direction: column; justify-content: flex-start; }
.ms-flt { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ms-clear { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 639px) {
  .ms-gbars { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; margin-right: -12px; padding-right: 12px; }
  .ms-gbar { flex: 0 0 158px; scroll-snap-align: start; }
}

/* First load or refresh: the page header appears at once (no fade or blur); later page changes keep their motion */
html:not(.is-routed) .page-hero .reveal { opacity: 1; transform: none; filter: none; transition: none; }
html:not(.is-routed) .reveal { filter: none; }
.page-hero--ph { min-height: 100vh; }
html:not(.is-routed) .reveal { transition-duration: .45s; }
/* Copy stocks for TradingView */
.tv-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 12px; }
.tv-copy__btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: 700 13px var(--sans); cursor: pointer; text-decoration: none; transition: background .15s, transform .15s; }
.tv-copy__btn:hover { transform: translateY(-1px); }
.tv-copy__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-copy__btn.is-done { background: #16a34a; border-color: #16a34a; }
.tv-copy__btn--ghost { background: transparent; color: var(--accent); }
.tv-copy__hint { flex-basis: 100%; font-size: 12px; color: var(--muted); }
/* Sector, ETF and micro sector pages on phones */
.ms-more { display: block; width: 100%; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--tint); color: var(--accent); font: 700 14px var(--sans); cursor: pointer; }
@media (max-width: 639px) {
  .ms-lead__head .ms-rankby { gap: 6px; scrollbar-width: none; }
  .ms-lead__head .ms-rankby .rank-bar__label { display: none; }
  .ms-lead__head .ms-rankby .rank-btn { flex: none; padding: 6px 12px; }
  .ms-table td.name { min-width: 150px; max-width: 170px; }
  .ms-name strong { font-size: 14px; }
  .ms-score { min-width: 70px; }
  .ms-score__bar { width: 30px; margin-right: 6px; }
  .ms-map .rrg-sum__item span { font-size: 11.5px; }
  .ms-map .chart__title { font-size: 15px; }
  .ms-toggle { font-size: 13px; align-items: flex-start; }
  .ms-toggle input { margin-top: 2px; flex: none; }
}
@media (max-width: 639px) {
  .ms-table td.name { min-width: 118px; max-width: 132px; white-space: normal; }
  .ms-table td.name small { font-size: 11px; }
  .ms-table .ms-score__bar { display: none; }
  .ms-table .ms-score { min-width: 44px; }
  .ms-table th, .ms-table td { padding-left: 8px; padding-right: 8px; }
}
.tool-about { margin-bottom: 34px; }
.tool-about .h2 { margin-bottom: 12px; }
.tool-about p { color: var(--ink-2); font-size: 16px; line-height: 1.7; margin: 0 0 12px; }
/* Back to top */
.to-top { position: fixed; right: 20px; bottom: 22px; z-index: 55; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: color-mix(in srgb, var(--dark) 92%, transparent); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -12px rgba(7, 14, 38, .6), 0 0 0 1px rgba(255, 255, 255, .1);
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.8); transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1), visibility 0s .3s, box-shadow .2s; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1), visibility 0s, box-shadow .2s; }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 3; }
.to-top__ring circle:first-child { stroke: rgba(255, 255, 255, .12); }
.to-top__fill { stroke: var(--accent-light, #7fa6ff); stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.to-top__arrow { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.to-top:hover { box-shadow: 0 18px 36px -12px rgba(31, 94, 255, .7), 0 0 0 1px rgba(127, 166, 255, .4); }
.to-top:hover .to-top__arrow { animation: toTopBob .9s ease-in-out infinite; }
.to-top:active { transform: scale(.92); }
.to-top.is-launch .to-top__arrow { animation: toTopLaunch .6s cubic-bezier(.5, 0, .2, 1); }
@keyframes toTopBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes toTopLaunch { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-22px); opacity: 0; } 46% { transform: translateY(16px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@media (max-width: 639px) { .to-top { right: 14px; bottom: 16px; width: 46px; height: 46px; } .to-top__arrow { width: 18px; height: 18px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.is-on { transition: opacity .2s; transform: none; } .to-top:hover .to-top__arrow, .to-top.is-launch .to-top__arrow { animation: none; } }
/* Header search button */
.nav__search { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: var(--on-dark); font: 600 14px var(--sans); cursor: pointer; transition: background .2s, border-color .2s; }
.nav__search:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); }
.nav__search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nav__search-label, .nav__search-key { display: none; }
.nav__search-key { font: 700 11px var(--sans); padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: var(--on-dark-muted); }
.nav__toggle { margin-left: 6px; }
@media (min-width: 1200px) {
  .nav__links { margin-left: auto; }
  .nav__search { margin-left: 10px; width: 40px; padding: 0; justify-content: center; }
}
@media (min-width: 1440px) {
  .nav__search { width: auto; padding: 0 10px 0 12px; }
  .nav__search-key { display: inline-block; }
}
/* Search palette */
.srch { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; background: rgba(7, 14, 38, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.srch.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.srch__panel { width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; border-radius: 18px; background: var(--bg); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6), 0 0 0 1px var(--line); overflow: hidden; transform: translateY(-10px) scale(.98); transition: transform .25s cubic-bezier(.3, 1.3, .5, 1); }
.srch.is-open .srch__panel { transform: none; }
.srch__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.srch__bar svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
.srch__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 17px var(--sans); color: var(--ink); }
.srch__input::-webkit-search-cancel-button { display: none; }
.srch__esc { flex: none; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--tint); font: 700 12px var(--sans); color: var(--muted); cursor: pointer; }
.srch__list { overflow-y: auto; padding: 8px; }
.srch__label { margin: 6px 8px 8px; font-size: 13px; color: var(--muted); }
.srch__item { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.srch__item.is-active { background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.srch__kind { flex: none; min-width: 52px; text-align: center; padding: 3px 8px; border-radius: 999px; font: 800 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; background: var(--tint); color: var(--accent); }
.srch__kind.is-stock { background: rgba(22, 163, 74, .1); color: #16a34a; }
.srch__kind.is-micro { background: rgba(217, 119, 6, .12); color: #b45309; }
.srch__kind.is-etf { background: rgba(124, 58, 237, .1); color: #7c3aed; }
.srch__kind.is-course { background: rgba(255, 181, 71, .18); color: #b45309; }
.srch__text { min-width: 0; }
.srch__text b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch__text small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.srch-open { overflow: hidden; }
@media (max-width: 639px) { .srch { padding-top: 12px; } .srch__panel { max-height: 86vh; } .nav__search { height: 38px; padding: 0 10px; } }
/* Stars */
.ms-star { border: 0; background: transparent; padding: 0 2px; font-size: 17px; line-height: 1; color: #c3cad9; cursor: pointer; transition: transform .15s, color .15s; }
.ms-star:hover { color: #f59e0b; transform: scale(1.15); }
.ms-star.is-on { color: #f59e0b; }
.ms-star--row { font-size: 15px; margin-right: 6px; vertical-align: -1px; }
.ms-star--big { font-size: 22px; }
.ms-card__right { display: inline-flex; align-items: center; gap: 6px; }
.ms-detail__btns { display: flex; align-items: center; gap: 8px; }
.ms-starf.is-active { background: #f59e0b; border-color: #f59e0b; color: #fff; }
/* Since your last visit */
.ms-since { margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(31, 94, 255, .08), rgba(22, 163, 74, .08)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); animation: sinceIn .5s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes sinceIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ms-since__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ms-since__head strong { font-size: 14.5px; }
.ms-since__head span { font-size: 12.5px; color: var(--muted); }
.ms-since__x { margin-left: auto; border: 0; background: transparent; font-size: 18px; color: var(--muted); cursor: pointer; }
.ms-since__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ms-since__item { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font: 600 12.5px var(--sans); color: var(--ink); cursor: pointer; }
.ms-since__item.is-star { border-color: #f59e0b; }
.ms-since__more { font-size: 12px; color: var(--muted); }
.page-hero .h1-tag { display: block; margin-top: 10px; font-size: .42em; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; background: linear-gradient(100deg, #7fa6ff, #c7d6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 639px) { .page-hero .h1-tag { font-size: .52em; margin-top: 8px; } }