:root {
  color-scheme: light;
  --font-sans: "IBM Plex Sans Hebrew", "Segoe UI", Arial, sans-serif;

  --navy-950: #0f172a;
  --navy-900: #13213e;
  --navy-800: #1e293b;

  --bg: #f8fafc;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-border: #e2e8f0;
  --text: #0f172a;
  --text-strong: #020617;
  --muted: #64748b;

  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #e9eff8;

  --cta: #b45309;
  --cta-strong: #92400e;
  --cta-soft: #fef3e2;

  --success: #15803d;
  --success-soft: #dcfce7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --ring: #2563eb;

  --shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.06);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

body > main {
  flex: 1 0 auto;
}

body > .site-footer {
  flex-shrink: 0;
}

.page-bg-warm {
  position: relative;
  background: transparent;
}

.page-bg-warm::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.04) 0 1.5px, transparent 1.5px 56px),
    linear-gradient(180deg, var(--bg) 0%, #fdf3e6 62%, #fbe6cd 100%);
}

button,
input,
select {
  font: inherit;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
}

.page-shell-inner {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.skip-link {
  position: fixed;
  top: -100px;
  right: 12px;
  z-index: 1000;
  background: var(--navy-950);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top 150ms ease;
}

.skip-link:focus-visible {
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Site header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(248, 250, 252, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-border);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-strong);
}

.brand-name {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: 800;
  letter-spacing: 0;
  color: #0f172a;
}

.brand-main {
  font-weight: 800;
  color: #111111;
  font-size: 0.9em;
  letter-spacing: 0.12em;
  line-height: 1;
}

.brand-info {
  font-weight: 700;
  color: #78350f;
  font-size: 0.9em;
  letter-spacing: 0.12em;
  line-height: 1;
}

.brand-separator {
  display: none;
}

.brand-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--navy-950);
  color: #d97706;
}

.brand-mark svg {
  width: 18px;
  height: 18px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 150ms ease, background-color 150ms ease;
}

.nav-link:hover {
  color: var(--text);
  background: var(--accent-soft);
}

.nav-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.nav-link.is-active {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.nav-cta {
  gap: 6px;
  color: var(--cta-strong);
  background: var(--cta-soft);
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.12);
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
}

.nav-cta:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--cta), var(--cta-strong));
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(180, 83, 9, 0.24);
}

.nav-cta-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 64px 0 56px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.04) 0 1.5px, transparent 1.5px 56px),
    linear-gradient(180deg, var(--bg) 0%, #fdf3e6 62%, #fbe6cd 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  /* Wider than the site's usual 1180px shell — the two-column hero (video +
     copy/search) needs more room than a single centered column did, most
     visibly so the instrument toggle group fits on one line again. */
  width: min(1360px, calc(100% - 32px));
  margin: 0 auto;
}

/* Two-column hero: copy/search on the right (first child — the RTL "start"
   side, same convention as .tool-layout's sidebar), the looping video to
   its left. Single column, video below, once there's no room for both. */
.hero-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}

@media (max-width: 900px) {
  .hero-columns {
    grid-template-columns: 1fr;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  /* Wide enough for the longest locked-category tagline ("קופות גמל
     להשקעה" — ~768px at .hero-copy's font size) to stay on one line. */
  max-width: 820px;
  margin: 0 auto;
}

/* Beside the video, the hero reads as right-aligned rather than centered —
   centering only made sense when it spanned the full width on its own.
   Mobile (stacked, full-width) keeps the original centered look below. */
@media (min-width: 901px) {
  .hero-content {
    /* Physical right edge. Under dir="rtl", align-items reads flex-end as
       inline-end, which is the LEFT side — flex-start is the one that lands
       on the right and lines the form/trust-row up with the right-aligned
       copy above them. */
    align-items: flex-start;
    text-align: right;
    max-width: none;
    margin: 0;
  }

  .hero-content .trust-row {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .hero-content {
    max-width: none;
  }
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.22;
  color: var(--text-strong);
}

.hero h1 .accent {
  color: var(--cta);
}

.hero-copy {
  max-width: 800px;
  margin: 0;
  line-height: 1.7;
  color: var(--muted);
  font-size: 1.05rem;
}

.hero-copy-instance {
  width: 100%;
  text-align: right;
}

/* ---------- Long-form article (category educational content) ---------- */

.long-article {
  max-width: 760px;
  margin: 0 auto;
  text-align: right;
  color: var(--text);
  line-height: 1.75;
}

.long-article h2 {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--text-strong);
}

.long-article h3 {
  margin: 36px 0 12px;
  font-size: 1.3rem;
  color: var(--text-strong);
}

.long-article h4 {
  margin: 22px 0 8px;
  font-size: 1.05rem;
  color: var(--text-strong);
}

.long-article p {
  margin: 0 0 14px;
  color: var(--text);
}

.long-article ul,
.long-article ol {
  margin: 0 0 14px;
  padding-inline-start: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.long-article strong {
  color: var(--text-strong);
}

.long-article hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--panel-border);
}

.long-article-footnote {
  margin-top: 24px;
  color: var(--muted);
  font-size: 0.88rem;
}

.hero-form {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

#hero-form {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  background: linear-gradient(140deg, #ffffff 8%, #f4f8ff 92%);
  box-shadow:
    0 18px 40px rgba(37, 99, 235, 0.14),
    0 6px 18px rgba(15, 23, 42, 0.08);
}

#hero-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

#hero-form .hero-form-toggle {
  padding: 5px;
  border-radius: 999px;
  border-color: rgba(148, 163, 184, 0.3);
  background: linear-gradient(180deg, #e8eef7 0%, #d9e3f0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

#hero-form .hero-form-toggle .toggle-btn {
  font-weight: 700;
  color: #5b6b80;
}

#hero-form .hero-form-toggle .toggle-btn.is-active {
  color: var(--accent-strong);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.2);
}

#hero-form .hero-search-shell input {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.32);
}

#hero-form .hero-go-btn.btn-primary {
  box-shadow: 0 8px 18px rgba(180, 83, 9, 0.28);
}

.hero-form-toggle {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

.hero-form-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.hero-search-shell {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
}

.hero-search-shell input {
  min-height: 48px;
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--bg);
  padding: 0 18px;
  cursor: pointer;
}

#hero-fund-input,
#hero-fund-input-top {
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg, #ffb000, #ff8a00, #ff6a00, #ff9f1c) border-box;
  background-size: 100% 100%, 220% 220%;
  animation: hero-input-gradient-pulse 2.9s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(255, 138, 0, 0.22),
    0 0 0 rgba(255, 106, 0, 0.2);
}

.hero-search-shell input:focus {
  cursor: text;
  outline: none;
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

@keyframes hero-input-gradient-pulse {
  0%,
  100% {
    background-position: 0% 50%;
    box-shadow:
      0 0 0 1px rgba(255, 138, 0, 0.22),
      0 0 0 rgba(255, 106, 0, 0.2);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      0 0 0 1px rgba(255, 106, 0, 0.36),
      0 0 0 6px rgba(255, 138, 0, 0.22);
  }
}

.hero-go-btn.btn-primary {
  flex: none;
  border-radius: 999px;
}

.hero-go-btn:disabled {
  cursor: not-allowed;
}

.hero .status-message {
  margin-top: 4px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 500;
}

.trust-row svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cta);
}

/* ---------- Buttons ---------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  border: 0;
  background: linear-gradient(135deg, var(--cta), var(--cta-strong));
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(180, 83, 9, 0.28);
}

.btn-primary:focus-visible {
  outline: 3px solid rgba(180, 83, 9, 0.35);
  outline-offset: 2px;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.btn-primary.btn-block {
  width: 100%;
}

/* ---------- Category loop (looping "video" strip beside the hero) ----------
   8 slides on a 28s cycle: 5 word-swooshes at 2.4s each (0-12s), the closer
   slide gets an extra ~1s for its typewriter effect before it holds (12s
   mark), then two chart slides at 4.5s each (13-22s), then a checkbox-panel
   demo slide for the remaining 6s (22-28s) before slide 1 restarts. All
   keyframe percentages below are fractions of the shared 28s duration. */

.hero-video-column {
  min-width: 0;
}

.category-loop-frame {
  padding: 4px;
  background: linear-gradient(135deg, var(--cta), var(--cta-strong));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.category-loop-track {
  position: relative;
  overflow: hidden;
  height: 400px;
  border-radius: calc(var(--radius-lg) - 4px);
  background: #fffaf3;
}

.category-loop-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 20px;
  color: var(--text-strong);
  font-size: clamp(1.45rem, 4.6vw, 2.4rem);
  font-weight: 700;
  white-space: nowrap;
  /* 28s cycle: 5 word-swooshes at 2.4s each (0-12s), then the closer's
     extended slot, then two chart slides at 4.5s each (13-17.5s,
     17.5-22s), then the checkbox demo (22-28s) before slide 1 restarts.
     Enter/exit easing is set per-keyframe below (ease-out in, ease-in out)
     rather than on this shorthand, which would apply one curve to every
     segment. */
  animation: category-loop-cycle 28s infinite both;
}

.category-loop-icon {
  width: clamp(26px, 5.5vw, 38px);
  height: clamp(26px, 5.5vw, 38px);
  flex-shrink: 0;
  color: var(--cta-strong);
}

/* Still swooshes up on entry like the other word slides, but hands off to
   the chart slides by exiting right (translateX) instead of up, so the
   chart that follows can enter from the left in the same direction. */
.category-loop-item--closer {
  color: var(--cta-strong);
  font-size: clamp(2.1rem, 6.7vw, 3.4rem);
  font-weight: 700;
  animation-name: category-loop-closer-cycle;
}

/* Each character sits in its own span, already laid out (so the block
   doesn't reflow as letters appear), invisible until its own reveal moment.
   Every letter shares the CONTAINER's own animation-delay (9.6s) rather
   than getting its own — staggering was originally done with per-letter
   animation-delay values instead, which broke on the second loop: a
   letter's own cycle boundary (where it resets back to invisible) landed
   inside the container's NEXT visible window rather than during its hidden
   phase, so from loop 2 onward every letter was still holding its "typed"
   opacity from the previous cycle when the container reappeared, and the
   whole phrase looked like it popped in at once. Sharing the delay makes
   every letter's cycle boundary coincide exactly with the container's own
   restart, so the reset always happens off-screen; the stagger is done via
   each letter's own keyframe percentages instead (same technique as the
   checkbox slide's cursor clicks below). */
.closer-letter {
  opacity: 0;
  animation-duration: 28s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: 9.6s;
}

.closer-text > span:nth-child(1) { animation-name: closer-letter-1; }
.closer-text > span:nth-child(2) { animation-name: closer-letter-2; }
.closer-text > span:nth-child(3) { animation-name: closer-letter-3; }
.closer-text > span:nth-child(4) { animation-name: closer-letter-4; }
.closer-text > span:nth-child(5) { animation-name: closer-letter-5; }
.closer-text > span:nth-child(6) { animation-name: closer-letter-6; }
.closer-text > span:nth-child(7) { animation-name: closer-letter-7; }
.closer-text > span:nth-child(8) { animation-name: closer-letter-8; }
.closer-text > span:nth-child(9) { animation-name: closer-letter-9; }
.closer-text > span:nth-child(10) { animation-name: closer-letter-10; }
.closer-text > span:nth-child(11) { animation-name: closer-letter-11; }
.closer-text > span:nth-child(12) { animation-name: closer-letter-12; }
.closer-text > span:nth-child(13) { animation-name: closer-letter-13; }
.closer-text > span:nth-child(14) { animation-name: closer-letter-14; }
.closer-text > span:nth-child(15) { animation-name: closer-letter-15; }
.closer-text > span:nth-child(16) { animation-name: closer-letter-16; }
.closer-text > span:nth-child(17) { animation-name: closer-letter-17; }
.closer-text > span:nth-child(18) { animation-name: closer-letter-18; }
.closer-text > span:nth-child(19) { animation-name: closer-letter-19; }

@keyframes closer-letter-1 { 0%, 2.739% { opacity: 0; } 2.75%, 100% { opacity: 1; } }
@keyframes closer-letter-2 { 0%, 2.925% { opacity: 0; } 2.94%, 100% { opacity: 1; } }
@keyframes closer-letter-3 { 0%, 3.114% { opacity: 0; } 3.13%, 100% { opacity: 1; } }
@keyframes closer-letter-4 { 0%, 3.304% { opacity: 0; } 3.32%, 100% { opacity: 1; } }
@keyframes closer-letter-5 { 0%, 3.489% { opacity: 0; } 3.50%, 100% { opacity: 1; } }
@keyframes closer-letter-6 { 0%, 3.679% { opacity: 0; } 3.70%, 100% { opacity: 1; } }
@keyframes closer-letter-7 { 0%, 3.864% { opacity: 0; } 3.88%, 100% { opacity: 1; } }
@keyframes closer-letter-8 { 0%, 4.054% { opacity: 0; } 4.07%, 100% { opacity: 1; } }
@keyframes closer-letter-9 { 0%, 4.243% { opacity: 0; } 4.26%, 100% { opacity: 1; } }
@keyframes closer-letter-10 { 0%, 4.429% { opacity: 0; } 4.44%, 100% { opacity: 1; } }
@keyframes closer-letter-11 { 0%, 4.618% { opacity: 0; } 4.63%, 100% { opacity: 1; } }
@keyframes closer-letter-12 { 0%, 4.807% { opacity: 0; } 4.82%, 100% { opacity: 1; } }
@keyframes closer-letter-13 { 0%, 4.993% { opacity: 0; } 5.01%, 100% { opacity: 1; } }
@keyframes closer-letter-14 { 0%, 5.182% { opacity: 0; } 5.20%, 100% { opacity: 1; } }
@keyframes closer-letter-15 { 0%, 5.368% { opacity: 0; } 5.38%, 100% { opacity: 1; } }
@keyframes closer-letter-16 { 0%, 5.557% { opacity: 0; } 5.57%, 100% { opacity: 1; } }
@keyframes closer-letter-17 { 0%, 5.746% { opacity: 0; } 5.76%, 100% { opacity: 1; } }
@keyframes closer-letter-18 { 0%, 5.932% { opacity: 0; } 5.95%, 100% { opacity: 1; } }
@keyframes closer-letter-19 { 0%, 6.121% { opacity: 0; } 6.14%, 100% { opacity: 1; } }

/* Same enter as the other word slides (2.550%), but the hold is stretched
   out to 10.846% instead of the usual 7.275% — that extra room is what the
   letter-by-letter typing (below) plays out inside, followed by a plain
   static pause exactly as long as a normal word's hold (~1.3s), so "כל
   המידע במקום אחד!" gets to sit fully typed on screen for as long as any
   other slide gets, before the same exit as before. */
@keyframes category-loop-closer-cycle {
  0% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    filter: blur(8px);
  }
  2.550% {
    animation-timing-function: ease;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  10.846% {
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  12.496% {
    opacity: 0;
    transform: translateX(70px) scale(0.97);
    filter: blur(8px);
  }
  100% {
    opacity: 0;
    transform: translateX(70px) scale(0.97);
    filter: blur(8px);
  }
}

/* Slide 1 is the one the loop hands back to from the second chart slide, so
   unlike slides 2-4 it enters from the left (matching the charts' exit
   direction) rather than swooshing up from below; it still exits upward
   like the rest of the word slides, into slide 2. */
.category-loop-item:nth-child(1) {
  animation-name: category-loop-item1-cycle;
  animation-delay: 0s;
}

.category-loop-item:nth-child(2) {
  animation-delay: 2.4s;
}

.category-loop-item:nth-child(3) {
  animation-delay: 4.8s;
}

.category-loop-item:nth-child(4) {
  animation-delay: 7.2s;
}

.category-loop-item:nth-child(5) {
  animation-delay: 9.6s;
}

/* Entrance eases out (fast start, gentle settle: cubic-bezier "expo-out"),
   exit eases in and runs in a shorter window than the entrance (~65% of
   it) so the loop feels snappier leaving than arriving — not a symmetric,
   mechanical swap. A slight scale accompanies the swoosh for a touch of
   depth instead of a flat opacity/position-only move. */
@keyframes category-loop-cycle {
  0% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    filter: blur(8px);
  }
  2.550% {
    animation-timing-function: ease;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  7.275% {
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  8.925% {
    opacity: 0;
    transform: translateY(-30px) scale(0.97);
    filter: blur(8px);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.97);
    filter: blur(8px);
  }
}

@keyframes category-loop-item1-cycle {
  0% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateX(-70px) scale(0.97);
    filter: blur(8px);
  }
  2.550% {
    animation-timing-function: ease;
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  7.275% {
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  8.925% {
    opacity: 0;
    transform: translateY(-30px) scale(0.97);
    filter: blur(8px);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.97);
    filter: blur(8px);
  }
}

/* The two chart slides: no vertical swoosh, no centered short word — a real
   .chart-card that swooshes in from the left and, after its hold, swooshes
   onward to the right (opposite of its entry) instead of bouncing back —
   same direction of travel the two chart slides then hand off to each
   other, before slide 1 re-enters from the left to restart the loop. */
.category-loop-item--chart {
  padding: 14px;
  white-space: normal;
  animation-name: category-loop-chart-cycle;
}

.category-loop-item:nth-child(6) {
  animation-delay: 13s;
}

.category-loop-item:nth-child(7) {
  animation-delay: 17.5s;
}

.category-loop-item--checkbox {
  padding: 14px;
  white-space: normal;
  animation-name: category-loop-checkbox-cycle;
}

.category-loop-item:nth-child(8) {
  animation-delay: 22s;
}

.hero-loop-chart-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.hero-loop-chart-caption {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cta-strong);
}

/* Borderless — a soft shadow alone separates it from the cream screen
   behind it, so it reads as a card floating on the surface rather than a
   bordered box nested inside the frame's own gold border. */
.hero-loop-chart-card {
  width: 100%;
  border: none;
  box-shadow: var(--shadow);
}

/* Fixed, shorter than the tool's own charts — this card has far less
   height to work with, and a tall canvas here was the "dead space" the
   frame used to have below a mostly-empty plot. .chart-shell's own
   min-height (320px, sized for the real tool) has to be overridden too,
   or it reserves that height regardless of the canvas's own shorter one. */
.hero-loop-chart-card .chart-shell {
  min-height: 200px;
}

#hero-loop-chart,
#hero-loop-chart2 {
  height: 200px;
}

@keyframes category-loop-chart-cycle {
  0% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateX(-70px) scale(0.97);
    filter: blur(8px);
  }
  2.25% {
    animation-timing-function: ease;
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  13.5% {
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  15% {
    opacity: 0;
    transform: translateX(70px) scale(0.97);
    filter: blur(8px);
  }
  100% {
    opacity: 0;
    transform: translateX(70px) scale(0.97);
    filter: blur(8px);
  }
}

/* Checkbox demo slide: a mock filter panel with a cursor that glides in and
   "clicks" two checkboxes (Alpha, equity exposure) partway through the
   6s hold, on top of the slide's own left-enter/right-exit swoosh (shared
   with the two chart slides via the same translateX pattern). */
@keyframes category-loop-checkbox-cycle {
  0% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateX(-70px) scale(0.97);
    filter: blur(8px);
  }
  2.143% {
    animation-timing-function: ease;
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  19.286% {
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  21.429% {
    opacity: 0;
    transform: translateX(70px) scale(0.97);
    filter: blur(8px);
  }
  100% {
    opacity: 0;
    transform: translateX(70px) scale(0.97);
    filter: blur(8px);
  }
}

.hero-loop-checkbox-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
}

.hero-loop-checkbox-slide .hero-loop-chart-caption {
  margin-top: 4px;
  margin-bottom: 0;
}

.loop-checkbox-panel {
  position: relative;
  width: 100%;
  margin-top: 2px;
  padding: 14px 18px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.loop-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
}

.loop-checkbox-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-strong);
  white-space: normal;
  line-height: 1.25;
}

.loop-checkbox-box {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid var(--panel-border);
  background: #ffffff;
  position: relative;
}

.loop-checkbox-box::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7' /%3E%3C/svg%3E") center / 70% no-repeat;
  border-radius: 3px;
}

.loop-checkbox-box.is-checked::after {
  opacity: 1;
}

#loop-cb-alpha::after {
  animation: loop-checkbox-check-a 28s infinite both;
  animation-delay: 22s;
}

#loop-cb-management::after {
  animation: loop-checkbox-check-m 28s infinite both;
  animation-delay: 22s;
}

#loop-cb-equity::after {
  animation: loop-checkbox-check-b 28s infinite both;
  animation-delay: 22s;
}

@keyframes loop-checkbox-check-m {
  0%, 3.45% {
    opacity: 0;
  }
  3.55%, 100% {
    opacity: 1;
  }
}

@keyframes loop-checkbox-check-a {
  0%, 8.2% {
    opacity: 0;
  }
  8.3%, 100% {
    opacity: 1;
  }
}

@keyframes loop-checkbox-check-b {
  0%, 13.6% {
    opacity: 0;
  }
  13.696%, 100% {
    opacity: 1;
  }
}

.loop-cursor {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 50%;
  top: 10%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  filter: drop-shadow(0 3px 4px rgba(15, 23, 42, 0.35));
  animation: loop-cursor-cycle 28s infinite both;
  animation-delay: 22s;
}

/* Fills whatever's left below the checkbox panel — sized as large as the
   slide's own budget allows without the gallery and panel overlapping. */
.loop-preview-gallery {
  margin-top: 10px;
  position: relative;
  height: 234px;
}

/* All three cards sit centered in the exact same spot, full gallery height
   (width follows from each image's own aspect ratio) — so revealing the
   next one visually replaces the previous one in place, instead of the
   small offset "peeking stack" this used to be. Centering is baked into
   the base transform so each keyframe below only has to add the
   enter-swoosh on top of it, never overwrite it. */
.loop-preview-card {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: clip;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(8px) scale(0.98);
}

.loop-preview-card img {
  display: block;
  width: auto;
  height: 100%;
  background: #ffffff;
}

.loop-preview-card--management {
  z-index: 1;
  animation: loop-preview-management-cycle 28s infinite both;
  animation-delay: 22s;
}

.loop-preview-card--alpha {
  z-index: 2;
  animation: loop-preview-alpha-cycle 28s infinite both;
  animation-delay: 22s;
}

.loop-preview-card--equity {
  z-index: 3;
  animation: loop-preview-equity-cycle 28s infinite both;
  animation-delay: 22s;
}

@keyframes loop-preview-management-cycle {
  0%, 3.45% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(8px) scale(0.98);
  }
  3.55%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

@keyframes loop-preview-alpha-cycle {
  0%, 8.2% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(8px) scale(0.98);
  }
  8.3%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

@keyframes loop-preview-equity-cycle {
  0%, 13.6% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(8px) scale(0.98);
  }
  13.696%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

/* Positions are percentages of .loop-checkbox-panel, targeting the checkbox
   in the middle column of row 1 (Alpha) then the right column of row 3
   (equity exposure) — the checkbox sits on the inline-start (right) side of
   each cell under dir="rtl". transform always re-centers the cursor tip on
   the left/top point; the click pulse rides on top of that same transform. */
@keyframes loop-cursor-cycle {
  0%, 2.143% {
    opacity: 0;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -50%) scale(1);
  }
  3.1% {
    opacity: 1;
    left: 94.5%;
    top: 22%;
    transform: translate(-50%, -50%) scale(1);
  }
  3.6% {
    left: 94.5%;
    top: 22%;
    transform: translate(-50%, -50%) scale(0.85);
  }
  4.2% {
    left: 94.5%;
    top: 22%;
    transform: translate(-50%, -50%) scale(1);
  }
  7.6% {
    opacity: 1;
    left: 63.5%;
    top: 22%;
    transform: translate(-50%, -50%) scale(1);
  }
  8.1% {
    left: 63.5%;
    top: 22%;
    transform: translate(-50%, -50%) scale(0.85);
  }
  8.7% {
    left: 63.5%;
    top: 22%;
    transform: translate(-50%, -50%) scale(1);
  }
  12.857% {
    left: 94.5%;
    top: 82%;
    transform: translate(-50%, -50%) scale(1);
  }
  13.571% {
    left: 94.5%;
    top: 82%;
    transform: translate(-50%, -50%) scale(0.85);
  }
  14.368% {
    left: 94.5%;
    top: 82%;
    transform: translate(-50%, -50%) scale(1);
  }
  19.286% {
    opacity: 1;
    left: 94.5%;
    top: 82%;
    transform: translate(-50%, -50%) scale(1);
  }
  21.429%, 100% {
    opacity: 0;
    left: 94.5%;
    top: 82%;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ---------- Features ---------- */

.features {
  padding: 48px 0;
}

.section-title {
  margin: 0 0 24px;
  font-size: 1.5rem;
  color: var(--text-strong);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.feature-card {
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.feature-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-card h3 {
  margin: 0;
  font-size: 1.08rem;
  color: var(--text-strong);
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.94rem;
}

/* ---------- Trust / disclaimer strip ---------- */

.trust-strip {
  padding: 4px 0 48px;
}

.trust-strip-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--navy-950);
  border-radius: var(--radius-md);
  color: #cbd5e1;
}

.trust-strip-inner svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #d97706;
}

.trust-strip-inner p {
  margin: 0;
  line-height: 1.65;
  font-size: 0.88rem;
}

/* ---------- Tool section ---------- */

.tool-section {
  padding: 8px 0 56px;
}

.tool-section--standalone {
  padding-top: 32px;
}

.tool-heading {
  margin-bottom: 18px;
}

.tool-heading .eyebrow {
  margin: 0 0 6px;
  color: var(--accent-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
}

.tool-heading .tool-title {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--text-strong);
}

.panel {
  background: var(--panel);
  backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Two-column tool layout: the steps panel sits in a right-hand sidebar (in
   RTL, the first grid track), the charts fill the remaining width beside
   it, instead of the steps panel stacking full-width above the charts. */
.tool-layout {
  display: grid;
  grid-template-columns: 410px 1fr;
  gap: 20px;
}

.tool-sidebar,
.tool-main {
  min-width: 0;
}

.tool-sidebar {
  position: sticky;
  top: 97px;
  align-self: start;
  display: flex;
  flex-direction: column;
}

.tool-sidebar .steps-panel {
  position: static;
  /* Keep this panel opaque enough for readability while the whole sidebar
     (panel + link below it) is the sticky element. */
  backdrop-filter: none;
}

.tool-main .charts-grid {
  margin-top: 0;
}

/* The sidebar is a fixed width regardless of viewport, so its internal
   fields always need the same stacked treatment the mobile breakpoint
   already gives .filters-grid etc. at that width. */
.tool-sidebar .filters-grid {
  grid-template-columns: 1fr;
}

.tool-sidebar #dataset-field .toggle-group {
  flex-wrap: wrap;
}

.tool-sidebar #dataset-field .toggle-btn {
  flex: 1 1 auto;
}

@media (max-width: 900px) {
  .tool-layout {
    grid-template-columns: 1fr;
  }

  .tool-sidebar {
    position: static;
  }

  .tool-sidebar .steps-panel {
    position: static;
  }
}

/* One shared panel/box for steps 1–3; each step is a plain block inside it,
   separated by a hairline instead of each getting its own white box. */
.steps-panel > div + div {
  border-top: 1px solid var(--panel-border);
}

.controls-panel {
  position: relative;
  z-index: 30;
  padding: 14px 20px 12px;
}

.filters-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 190px;
  align-items: start;
  gap: 12px;
}

#dataset-field .toggle-group {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

#dataset-field .toggle-btn {
  flex: 1 1 0;
  min-height: 36px;
  padding: 0 4px;
  font-size: 0.76rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field span:not(.step-badge) {
  font-size: 0.84rem;
  color: var(--muted);
}

.controls-panel-header {
  margin-bottom: 10px;
}

.controls-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  color: var(--text-strong);
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

input {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.95);
  padding: 0 14px;
  color: var(--text);
  width: 100%;
}

input:focus {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.42);
}

/* Segmented toggle-group control, shared by the dataset switch and the
   per-chart time-range toggles. */
.toggle-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  max-width: 100%;
  background: var(--accent-soft);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
}

.toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.toggle-btn:hover {
  color: var(--text);
}

.toggle-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.toggle-btn.is-active {
  background: #ffffff;
  color: var(--accent-strong);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.toggle-group--lg .toggle-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 22px;
  font-size: 0.98rem;
}

.toggle-group--sm .toggle-btn {
  min-height: 36px;
  min-width: 36px;
  padding: 0 14px;
  font-size: 0.84rem;
}

/* Match the instrument-selection buttons' actual rendered font size (step
   1) — #dataset-field .toggle-btn overrides --lg down to 0.76rem there, so
   that's the real size to match, not the --lg class value itself. Padding
   is intentionally left at the shared .toggle-group default so this box is
   the exact same height as #dataset-toggle in step 1. */
#global-range-toggle .toggle-btn {
  font-size: 0.76rem;
  padding: 0 8px;
}

/* The always-present (zero-height-when-closed) custom-range row forces a
   second flex line here, which would otherwise add one extra row-gap of
   height that #dataset-toggle (a single line) never pays. */
#global-range-toggle {
  row-gap: 0;
  column-gap: 4px;
  justify-content: space-between;
  padding-inline: 4px;
}

/* Steps 1 and 2 share this softer corner shape rather than the base
   .toggle-group's full 999px pill (used elsewhere, e.g. the landing-page
   hero toggle). */
#dataset-toggle,
#global-range-toggle {
  border-radius: var(--radius-lg);
}

.field-search {
  position: relative;
}

.field-search input {
  font-family: var(--font-sans);
  font-size: 0.84rem;
}

.controls-panel input {
  min-height: 40px;
}

.search-shell {
  position: relative;
}

.additional-funds {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.additional-fund-row {
  display: flex;
  align-items: center;
}

.additional-fund-row .search-shell {
  flex: 1;
  min-width: 0;
}

.additional-fund-row input {
  border-style: dashed;
}

.additional-fund-row.is-filled input {
  border-style: solid;
  /* Room for the remove button living inside the box, on its end side. */
  padding-left: 40px;
}

.remove-fund-btn {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  min-height: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}

.remove-fund-btn:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.suggestions {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 20;
  display: grid;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}

.suggestion-item {
  border: 0;
  background: transparent;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: right;
  color: var(--text);
  width: 100%;
  cursor: pointer;
  overflow-wrap: break-word;
}

.suggestion-item:hover,
.suggestion-item.is-active {
  background: rgba(37, 99, 235, 0.08);
}

.hidden {
  display: none;
}

.status-message {
  min-height: 24px;
  margin: 14px 4px 0;
  color: var(--muted);
  overflow-wrap: break-word;
}

/* Inside the steps panel this sits right before the hairline divider to
   section 2 — the default reserved 14px+24px height pushes that divider
   noticeably farther from the field above it than section 3's divider
   (which has no such element). Collapse it to nothing while idle/empty;
   a real loading/error message still gets a little breathing room. */
.controls-panel #status-message {
  min-height: 0;
  margin: 0;
}

.controls-panel #status-message:not(:empty) {
  margin: 6px 4px 0;
}

.fund-history-link {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.03));
  color: var(--accent-strong);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.fund-history-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.4);
}

.fund-history-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.fund-history-link-icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
}

.fund-history-link-icon svg {
  width: 17px;
  height: 17px;
}

.fund-history-link-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fund-history-link-text strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.fund-history-link-text span {
  color: var(--muted);
  font-size: 0.77rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fund-history-link-arrow {
  margin-inline-start: auto;
  font-size: 0.95rem;
  color: var(--accent);
}

.tool-sidebar > .fund-history-link {
  width: 100%;
}

.tool-email-updates {
  margin-top: 10px;
  background: linear-gradient(135deg, #ffffff 12%, #eef5ff 100%);
  border-color: rgba(37, 99, 235, 0.22);
}

.tool-email-updates input[type="email"] {
  min-height: 40px;
  border-radius: 999px;
  padding-inline: 14px;
}

.tool-email-updates .email-updates-btn {
  border-radius: 999px;
  padding-inline: 18px;
}

.chart-share-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.chart-share-strip--side {
  /* Sticky (not absolute) so it stays put on screen as the whole charts
     column scrolls past, instead of traveling with the first chart card.
     height:0 + overflow:visible keeps its own box from pushing
     #charts-grid down, since the icons are rendered outside their own
     (zero-height) flow box via the translateX offset. width:fit-content +
     margin-right:auto pin that box to the physical left edge of the card
     (not the RTL "start"/right edge) so translateX can push it further
     left, clear of the card, instead of centering it under align-items. */
  position: sticky;
  top: 113px;
  height: 0;
  width: fit-content;
  margin: 0 auto 0 0;
  overflow: visible;
  z-index: 4;
  flex-direction: column;
  direction: ltr;
  transform: translateX(-46px);
}

.share-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2f3338;
  color: #ffffff;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.share-icon-btn svg {
  width: 19px;
  height: 19px;
}

.share-icon-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
}

.share-icon-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.share-icon-btn--x {
  background: #0b0b0d;
  font-size: 1.12rem;
}

.share-icon-btn--x::after {
  direction: rtl;
  unicode-bidi: isolate;
}

.share-icon-btn--facebook {
  background: #4267b2;
  font-family: Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
}

.share-icon-btn--whatsapp {
  background: #25d366;
}

.share-icon-btn.is-copied {
  background: #16a34a;
}

.share-icon-btn.is-copied:hover {
  background: #15803d;
}

.share-icon-btn.is-copied::after {
  background: rgba(22, 163, 74, 0.95);
}

.share-icon-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  direction: rtl;
  unicode-bidi: plaintext;
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  padding: 7px 9px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.share-icon-btn:hover::after,
.share-icon-btn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.status-message.is-error {
  color: var(--danger);
}

.status-message.is-success {
  color: var(--success);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  min-width: 0;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.summary-icon-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.summary-icon-badge svg {
  width: 22px;
  height: 22px;
}

.summary-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.summary-label {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

.summary-card strong {
  display: block;
  direction: ltr;
  text-align: right;
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: break-word;
}

.summary-card[data-tone="positive"] .summary-icon-badge {
  background: var(--success-soft);
  color: var(--success);
}

.summary-card[data-tone="positive"] strong {
  color: var(--success);
}

.summary-card[data-tone="negative"] .summary-icon-badge {
  background: var(--danger-soft);
  color: var(--danger);
}

.summary-card[data-tone="negative"] strong {
  color: var(--danger);
}

.range-toggle-panel {
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.range-toggle-panel-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.range-toggle-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  color: var(--text-strong);
}

.advanced-options {
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.advanced-options-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.advanced-options-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  color: var(--text-strong);
}

.advanced-options-hint {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.advanced-options-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 20px;
}

.advanced-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}

.advanced-option span {
  white-space: nowrap;
}

.advanced-option--fx span {
  white-space: nowrap;
}

.advanced-option--stocks span {
  white-space: nowrap;
}

.advanced-option input[type="checkbox"] {
  min-height: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  cursor: pointer;
  flex-shrink: 0;
}

.advanced-option input[type="checkbox"]:checked {
  border-color: #94a3b8;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5L6.2 11.5L13 4.5' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.email-updates-panel {
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.email-updates-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.email-updates-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  color: var(--text-strong);
}

.email-updates-hint {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.email-updates-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.email-updates-btn {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.email-updates-btn:hover {
  background: var(--accent-strong);
}

.email-updates-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.email-updates-panel input.is-invalid {
  border-color: rgba(220, 38, 38, 0.72);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.charts-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.chart-card {
  position: relative;
  padding: 18px 18px 14px;
  min-width: 0;
}

.management-fee-subchart + .management-fee-subchart {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--panel-border);
}

.chart-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.chart-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}

.chart-header-top .chart-title {
  margin: 0;
  font-size: 1.1rem;
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--text-strong);
}

.chart-caption {
  color: var(--muted);
  font-size: 0.88rem;
  overflow-wrap: break-word;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.chart-legend:empty {
  display: none;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Decorative hero preview only: the colored dot stays sharp (still reads
   as "this dot maps to that line"), but the fund name itself is blurred —
   it's real data, not a placeholder, and the real tool is where visitors
   should look up an actual fund by name. */
#hero-loop-chart-legend .chart-legend-label,
#hero-loop-chart2-legend .chart-legend-label {
  filter: blur(4px);
  user-select: none;
}

.chart-range-toggle {
  align-self: flex-start;
}

.custom-range-collapse {
  display: grid;
  grid-template-rows: 0fr;
  /* Forces this onto its own row below the buttons (in the flex-wrap
     toggle-group) instead of growing inline and pushing them sideways. */
  flex: 1 1 100%;
  transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-range-collapse.is-open {
  grid-template-rows: 1fr;
}

.custom-range-collapse-inner {
  overflow: hidden;
  min-height: 0;
}

.chart-custom-range {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px 10px;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  padding-top: 10px;
  padding-inline: 4px;
  border-top: 1px solid var(--panel-border);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

#global-custom-range {
  flex-wrap: nowrap;
}

#global-custom-range .custom-range-group {
  flex: 0 0 auto;
}

#global-custom-range .range-select {
  min-width: 0;
}

#global-range-start-month,
#global-range-end-month {
  width: 78px;
}

#global-range-start-year,
#global-range-end-year {
  width: 64px;
}

.custom-range-collapse.is-open .chart-custom-range {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}

.custom-range-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  white-space: nowrap;
}

/* Match the instrument-selection buttons' font/size exactly (step 1). */
.custom-range-group label {
  font-family: var(--font-sans);
  font-size: 0.76rem;
}

.range-select {
  min-height: 36px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 4px;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
}

.chart-shell {
  position: relative;
  width: 100%;
  min-height: 320px;
}

canvas {
  width: 100%;
  height: 320px;
  display: block;
}

.chart-empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
  pointer-events: none;
}

.chart-empty-hint svg {
  width: 30px;
  height: 30px;
  opacity: 0.5;
}

.charts-grid.is-populated .chart-empty-hint {
  display: none;
}

/* ---------- Historical data pages ---------- */

.history-back {
  margin: 0 0 12px;
}

.history-intro {
  margin: 0;
}

.history-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 18px;
}

.history-text-block {
  flex: 1 1 540px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-general-summary {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
}

.history-tool-link {
  margin-top: 2px;
  width: min(380px, 100%);
}

.history-table-actions {
  display: flex;
  justify-content: flex-start;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--panel-border);
}

.history-export-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent-strong);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.history-export-btn svg {
  width: 14px;
  height: 14px;
}

.history-export-btn:hover {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}

.history-export-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.history-share-strip {
  top: 190px;
  z-index: 6;
  transform: translate(-46px, 70px);
}

.email-updates-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
}

.email-updates-icon svg {
  width: 15px;
  height: 15px;
}

/* Compact signup next to the fund-profile summary, up top — the full
   panel further down (.history-email-updates) is the "real" one; this
   is a shortcut for people who won't scroll that far. Same card
   treatment as that panel (gradient fill, blue-tinted border, soft
   shadow, badge + pill input + pill button), just squeezed into one
   row instead of a stacked title/hint/form card, so the two read as
   the same component at two sizes. */
.email-updates-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--accent-soft), #ffffff 65%);
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.email-updates-compact .email-updates-icon {
  width: 24px;
  height: 24px;
}

.email-updates-compact .email-updates-icon svg {
  width: 13px;
  height: 13px;
}

.email-updates-compact input {
  min-height: 34px;
  width: clamp(140px, 15vw, 190px);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 12px;
  font-size: 0.82rem;
}

.email-updates-compact .email-updates-btn {
  min-height: 34px;
  padding-inline: 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
}

.email-updates-compact .email-updates-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.3);
}

.history-list-card {
  padding: 20px;
}

.history-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 28px;
}

.history-link-list li {
  break-inside: avoid;
  margin-bottom: 6px;
}

.history-link-list a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  overflow-wrap: break-word;
}

.history-link-list a:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.history-count {
  flex: none;
  margin-inline-start: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.history-table-card {
  padding: 0;
  margin-top: 18px;
  overflow: hidden;
}

.history-table-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 70vh;
}

.history-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.history-table th,
.history-table td {
  padding: 10px 8px;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--panel-border);
}

.history-table th {
  position: sticky;
  top: 0;
  background: var(--panel);
  backdrop-filter: blur(6px);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  vertical-align: top;
  line-height: 1.2;
  z-index: 1;
}

.history-table th.history-col-fx {
  white-space: nowrap;
  overflow-wrap: normal;
}

.history-table th.history-col-stocks {
  white-space: nowrap;
  overflow-wrap: normal;
}

.history-header-unit {
  display: block;
  margin-top: 2px;
  font-weight: 500;
}

.history-table tbody tr:hover {
  background: var(--accent-soft);
}

.history-table td:not(:first-child) {
  direction: ltr;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.history-email-updates {
  margin-top: 14px;
  padding: 18px 22px 20px;
  /* A fixed card width (not fit-content) — the hint line's unwrapped
     max-content width (it includes the fund name, which can run long)
     was blowing the box out much wider than the input+button row,
     leaving a dead gap beside the button. */
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(135deg, var(--accent-soft), #ffffff 65%);
  border-color: rgba(37, 99, 235, 0.22);
}

.history-email-updates--top {
  width: calc((100% - 32px) / 3);
  min-width: 0;
  align-self: flex-start;
  margin-top: -52px;
}

.history-email-updates .email-updates-header {
  min-width: 0;
}

.history-email-updates .email-updates-title {
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
}

.history-email-updates .email-updates-hint {
  margin-inline-start: 38px;
  font-size: 0.8rem;
}

.history-email-updates .email-updates-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
}

.history-email-updates #history-updates-email,
.history-email-updates #history-updates-email-top {
  min-height: 42px;
  width: 100%;
  border-radius: 999px;
  padding-inline: 16px;
}

.history-email-updates .email-updates-btn {
  min-height: 42px;
  padding-inline: 20px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.history-email-updates .email-updates-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.32);
}

.email-updates-consent {
  grid-column: 1 / -1;
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.email-updates-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  flex: 0 0 18px;
  aspect-ratio: 1 / 1;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  cursor: pointer;
}

.email-updates-consent input[type="checkbox"]:checked {
  border-color: #94a3b8;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5L6.2 11.5L13 4.5' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.history-email-updates input.is-invalid {
  border-color: rgba(220, 38, 38, 0.72);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--panel-border);
  background: var(--navy-950);
  color: #cbd5e1;
  padding: 32px 0;
}

.site-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer .brand {
  color: #ffffff;
  flex-shrink: 0;
}

.site-footer .brand-name {
  color: #ffffff;
}

.site-footer .brand-main {
  color: #ffffff;
}

.site-footer .brand-info {
  color: #b45309;
}

.site-footer .brand-separator {
  display: none;
}

.footer-top {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px 16px;
  max-width: 100%;
}

.footer-disclaimer {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #94a3b8;
  white-space: nowrap;
}

.footer-copy {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #94a3b8;
  max-width: 720px;
}

.footer-copy {
  font-size: 0.8rem;
}

.footer-links {
  margin: 0;
  font-size: 0.84rem;
}

.footer-links a {
  color: #cbd5e1;
  text-decoration: underline;
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-separator {
  display: inline-block;
  margin-inline: 14px;
  color: #94a3b8;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .filters-grid,
  .summary-grid,
  .features-grid {
    grid-template-columns: 1fr;
  }

  #dataset-field .toggle-group {
    flex-wrap: wrap;
  }

  #dataset-field .toggle-btn {
    flex: 1 1 auto;
  }

  .history-link-list {
    columns: 2;
  }

  .footer-top {
    flex-wrap: wrap;
  }

  .history-email-updates--top {
    width: 100%;
  }

  .footer-disclaimer {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .toggle-group--lg .toggle-btn {
    padding: 0 16px;
    font-size: 0.9rem;
  }

  .toggle-group--sm .toggle-btn {
    padding: 0 10px;
    font-size: 0.78rem;
  }

  .hero {
    padding: 96px 0 32px;
  }

  .history-link-list {
    columns: 1;
  }
}