/* ==========================================================================
   FundyProp — website design tokens, light + dark themes
   ========================================================================== */

:root {
  --brand: #03A9F5;
  --brand-rgb: 3, 169, 245;
  --accent: #3BE8B0;
  --accent-rgb: 59, 232, 176;
  --ink: #1B1B1B;

  --bg: #F6F9FC;
  --bg-alt: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: #E9EFF5;
  --text: #0B1B2B;
  --text-2: #334155;
  --muted: #64748B;
  --line: rgba(11, 27, 43, 0.09);
  --line-strong: rgba(11, 27, 43, 0.16);
  --shadow: 11 27 43;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-brd: rgba(255, 255, 255, 0.75);
  --deep: #0B1B2B;
  --deep-2: #12293E;
  --on-deep: #E8F1F8;
  --code-bg: #0F172A;
}

html.dark {
  --bg: #050A12;
  --bg-alt: #080F1A;
  --surface: #0C1420;
  --surface-2: #111C2B;
  --surface-3: #16233A;
  --text: #EAF1F9;
  --text-2: #C3D0DE;
  --muted: #8A9BB0;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 0 0;
  --glass: rgba(12, 20, 32, 0.6);
  --glass-brd: rgba(255, 255, 255, 0.1);
  --deep: #070D16;
  --deep-2: #0C1726;
  --on-deep: #EAF1F9;
  --code-bg: #060B13;
}

* { border-color: var(--line); }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .35s ease, color .35s ease;
}

html[dir="rtl"] body { letter-spacing: 0; }

/* ---------- semantic helpers ---------------------------------------- */
.bg-page     { background: var(--bg); }
.bg-alt      { background: var(--bg-alt); }
.bg-surface  { background: var(--surface); }
.bg-surface2 { background: var(--surface-2); }
.bg-surface3 { background: var(--surface-3); }
.bg-deep     { background: var(--deep); }
.text-title  { color: var(--text); }
.text-body   { color: var(--text-2); }
.text-muted2 { color: var(--muted); }
.text-brand  { color: var(--brand); }
.text-accent { color: var(--accent); }
.on-deep     { color: var(--on-deep); }
.border-line { border-color: var(--line); }
.border-line-strong { border-color: var(--line-strong); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease,
              border-color .35s ease, background-color .35s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--brand-rgb), .4);
  box-shadow: 0 24px 48px -24px rgba(var(--shadow), .35);
}

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(var(--hdr-blur, 18px));
  backdrop-filter: saturate(180%) blur(var(--hdr-blur, 18px));
  border: 1px solid var(--glass-brd);
}

.gradient-text {
  background-image: linear-gradient(100deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-primary {
  background: linear-gradient(100deg, var(--brand), color-mix(in srgb, var(--brand) 62%, var(--accent)));
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(var(--brand-rgb), .65);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 20px 38px -14px rgba(var(--brand-rgb), .75); }

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.btn-ghost:hover { border-color: rgba(var(--brand-rgb), .55); transform: translateY(-2px); }

.chip {
  background: rgba(var(--brand-rgb), .10);
  color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb), .22);
}

/* tone helpers used by admin-selected card colours */
.tone-sky      { --tone: var(--brand);  --tone-rgb: var(--brand-rgb); }
.tone-emerald  { --tone: var(--accent); --tone-rgb: var(--accent-rgb); }
.tone-violet   { --tone: #8B5CF6; --tone-rgb: 139, 92, 246; }
.tone-amber    { --tone: #F59E0B; --tone-rgb: 245, 158, 11; }
.tone-rose     { --tone: #F43F5E; --tone-rgb: 244, 63, 94; }
.tone-slate    { --tone: #64748B; --tone-rgb: 100, 116, 139; }
.tone-ico {
  color: var(--tone, var(--brand));
  background: rgba(var(--tone-rgb, var(--brand-rgb)), .12);
  border: 1px solid rgba(var(--tone-rgb, var(--brand-rgb)), .22);
}
.tone-text { color: var(--tone, var(--brand)); }
.tone-bar  { background: var(--tone, var(--brand)); }

/* ---------- animations ----------------------------------------------- */
@keyframes blob {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(30px,-50px) scale(1.1); }
  66%  { transform: translate(-20px,20px) scale(.9); }
  100% { transform: translate(0,0) scale(1); }
}
.animate-blob { animation: blob var(--blob-speed, 7s) infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.animate-float { animation: float 6s ease-in-out infinite; }

/* Endless strips (platforms, testimonials). The track is always LTR and holds two
   identical groups; site.js fills each group wider than the screen and slides the
   track by exactly one group width, so the loop has no seam and no empty stretch. */
.fp-loop { position: relative; }
/* the strip can be dragged sideways with a finger or the mouse; vertical swipes
   still scroll the page */
.fp-loop { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.fp-loop.is-dragging { cursor: grabbing; }
.fp-loop img { -webkit-user-drag: none; }
.fp-loop-track { display: flex; width: max-content; will-change: transform; backface-visibility: hidden; }
.fp-loop-group { display: flex; flex-shrink: 0; }

@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@keyframes shimmer { to { background-position: 200% center; } }
.animate-shimmer { background-size: 200% auto; animation: shimmer 3s linear infinite; }

@keyframes pulse-ring {
  0%   { transform: scale(.9); opacity: .7; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.animate-ring { animation: pulse-ring 3s cubic-bezier(.24,.6,.35,1) infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow var(--mesh-speed, 20s) linear infinite; }

@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: all .8s cubic-bezier(.5,0,0,1); }
.reveal.active { opacity: 1; transform: none; }
.reveal.delay-100 { transition-delay: .1s; }
.reveal.delay-200 { transition-delay: .2s; }
.reveal.delay-300 { transition-delay: .3s; }
.reveal.delay-400 { transition-delay: .4s; }
.reveal.delay-500 { transition-delay: .5s; }
.reveal.delay-600 { transition-delay: .6s; }

/* 3D tilt for the hero screenshot */
.tilt-container { perspective: 1200px; }
.tilt-target {
  transform: rotateX(14deg) scale(.93);
  opacity: .72;
  transition: all 1s cubic-bezier(.25,.46,.45,.94);
  transform-style: preserve-3d;
}
.tilt-target.active { transform: none; opacity: 1; }

/* ---------- hero backgrounds ----------------------------------------- */
.hero-shell { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* aurora */
.aurora-blob { position: absolute; width: 26rem; height: 26rem; border-radius: 9999px;
  mix-blend-mode: multiply; }
html.dark .aurora-blob { mix-blend-mode: screen; }

/* neon grid */
.neon-grid {
  position: absolute; inset: -30%;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell, 54px) var(--grid-cell, 54px);
  transform: perspective(600px) rotateX(58deg) translateY(-8%);
  transform-origin: center 40%;
  animation: grid-move var(--grid-speed, 14s) linear infinite;
}
.neon-grid.flat { transform: none; inset: 0; }
@keyframes grid-move { to { background-position: 0 var(--grid-cell, 54px); } }
.scanline {
  position: absolute; left: 0; right: 0; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--grid-glow), transparent);
  filter: blur(40px); opacity: .5;
  animation: scan var(--grid-speed, 14s) ease-in-out infinite alternate;
}
@keyframes scan { from { top: -20%; } to { top: 70%; } }

/* gradient mesh */
.mesh-orb { position: absolute; border-radius: 9999px; filter: blur(70px); }
.mesh-cone {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, var(--m1), var(--m2), var(--m3), var(--m4), var(--m1));
  filter: blur(90px);
}
.mesh-ring { position: absolute; border: 1px solid var(--line); border-radius: 9999px; }

/* live chart */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ticker-strip {
  position: absolute; top: 0; left: 0; right: 0; display: flex; white-space: nowrap;
  font-size: .72rem; letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ticker-track { display: flex; gap: 2.5rem; padding: .5rem 1.25rem;
  animation: ticker 40s linear infinite; }

.grain::after {
  content: ''; position: absolute; inset: 0; opacity: .22; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

#spotlight {
  background: radial-gradient(600px circle at var(--x, 50%) var(--y, 50%),
              rgba(var(--brand-rgb), .10), transparent 42%);
}

/* ---------- header --------------------------------------------------- */
.site-header { transition: all .35s cubic-bezier(.2,.7,.3,1); }
.site-header.shrunk { --hdr-scale: .96; }
.nav-link { position: relative; color: var(--muted); transition: color .25s ease; }
.nav-link:hover { color: var(--brand); }
.nav-link::after {
  content: ''; position: absolute; bottom: -.35rem; inset-inline-start: 0; height: 2px; width: 0;
  background: var(--brand); transition: width .3s ease; border-radius: 2px;
}
.nav-link:hover::after { width: 100%; }
.nav-pill { transition: background-color .25s ease, color .25s ease; border-radius: 999px; }
.nav-pill:hover { background: rgba(var(--brand-rgb), .10); color: var(--brand); }

/* phones and tablets: in right-to-left languages the logo island goes left and the
   language/menu island right, with the menu button on the outer edge; the language
   button is just its globe icon there */
@media (max-width: 1023px) {
  html[dir="rtl"] [data-header] .hdr-row,
  html[dir="rtl"] [data-header] .hdr-actions { flex-direction: row-reverse; }
  [data-header] .lang-btn { width: 2.25rem; padding: 0; justify-content: center;
    border-color: transparent; background: transparent; }
  [data-header] .lang-btn:hover { border-color: transparent; }
  [data-header] .lang-btn .iconify:first-child { width: 19px; height: 19px; }
  [data-header] .lang-btn-code, [data-header] .lang-btn-caret { display: none; }
  [data-header] .lang-btn + div { left: auto; right: 0; }   /* the island hugs the right edge */
}

/* catches the tap that closes an open drop-down menu (site.js bindMenus) */
.fp-menu-backdrop {
  position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .18);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  -webkit-tap-highlight-color: transparent;
}
.fp-menu-backdrop.on { opacity: 1; visibility: visible; }

.menu-overlay {
  position: fixed; inset: 0; z-index: 90; opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.menu-overlay.open { opacity: 1; visibility: visible; }

/* ---------- footer --------------------------------------------------- */
.footer-watermark {
  font-weight: 800; letter-spacing: -.04em; line-height: .8;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  user-select: none;
}

/* ---------- misc ----------------------------------------------------- */
.no-scrollbar::-webkit-scrollbar, .scrollbar-hide::-webkit-scrollbar { display: none; }
.no-scrollbar, .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }

.shadow-3xl { box-shadow: 0 35px 60px -12px rgba(var(--shadow), .28); }

.theme-toggle .sun { display: none; }
html.dark .theme-toggle .sun { display: inline-block; }
html.dark .theme-toggle .moon { display: none; }

::selection { background: rgba(var(--brand-rgb), .22); color: var(--text); }

.prose-fp { color: var(--text-2); line-height: 2; }
.prose-fp h2 { color: var(--text); font-size: 1.5rem; font-weight: 700; margin: 2rem 0 .75rem; }
.prose-fp h3 { color: var(--text); font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.prose-fp p  { margin-bottom: 1rem; }
.prose-fp ul, .prose-fp ol { margin: 0 0 1rem; padding-inline-start: 1.5rem; }
.prose-fp ul { list-style: disc; }
.prose-fp ol { list-style: decimal; }
.prose-fp li { margin-bottom: .35rem; }
.prose-fp a { color: var(--brand); text-decoration: underline; }
.prose-fp blockquote { border-inline-start: 3px solid var(--brand);
  padding-inline-start: 1rem; color: var(--muted); margin: 1rem 0; }
.prose-fp img { max-width: 100%; border-radius: 1rem; }
.prose-fp table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.prose-fp td, .prose-fp th { border: 1px solid var(--line); padding: .5rem .75rem; }
.prose-fp th { background: var(--surface-2); color: var(--text); font-weight: 700; text-align: start; }
.prose-fp h4 { color: var(--text); font-size: 1.05rem; font-weight: 700; margin: 1.25rem 0 .4rem; }
.prose-fp strong, .prose-fp b { color: var(--text); }
.prose-fp hr { border: 0; border-top: 1px dashed var(--line-strong); margin: 1.5rem 0; }
.prose-fp code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86em;
  background: var(--surface-2); border: 1px solid var(--line); padding: .1rem .35rem; border-radius: .35rem;
}
.prose-fp pre {
  direction: ltr; text-align: left; overflow-x: auto; margin: 0 0 1rem;
  background: var(--code-bg); color: #E6EDF3; padding: 1rem 1.1rem; border-radius: .85rem; line-height: 1.7;
}
.prose-fp pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose-fp mark { background: rgba(245, 158, 11, .25); color: inherit; padding: 0 .15rem; border-radius: .25rem; }
/* coloured note boxes inserted from the panel editor */
.prose-fp .fp-note {
  margin: 0 0 1rem; padding: .85rem 1rem; border-radius: .85rem;
  border: 1px solid rgba(var(--brand-rgb), .3); background: rgba(var(--brand-rgb), .07);
  border-inline-start-width: 4px;
}
.prose-fp .fp-note > :last-child { margin-bottom: 0; }
.prose-fp .fp-note-warn   { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .08); }
.prose-fp .fp-note-danger { border-color: rgba(244, 63, 94, .4);  background: rgba(244, 63, 94, .07); }
.prose-fp .fp-note-ok     { border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .07); }

/* ==========================================================================
   FAQ accordion — animated open/close, one panel at a time
   ========================================================================== */
.fp-acc-item { overflow: hidden; }
.fp-acc-head {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  background: none; border: 0; cursor: pointer; text-align: start;
  color: inherit; font: inherit; padding: 1.25rem 1.5rem;
}
/* Height is measured and set by panel.js — the `0fr → 1fr` grid trick collapses
   to zero inside this card layout, so an explicit height is the reliable one. */
.fp-acc-body {
  overflow: hidden; height: 0;
  transition: height .42s cubic-bezier(.4, 0, .2, 1);
}
.fp-acc-body > .fp-acc-inner {
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s ease .05s, transform .35s cubic-bezier(.4, 0, .2, 1) .05s;
}
.fp-acc-item.open .fp-acc-body > .fp-acc-inner { opacity: 1; transform: none; }
.fp-acc-item .fp-acc-chevron { transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.fp-acc-item.open .fp-acc-chevron { transform: rotate(180deg); }
.fp-acc-item.open { border-color: rgba(var(--brand-rgb), .38); }
.fp-acc-item .fp-acc-mark {
  color: var(--tone, var(--brand));
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.fp-acc-item.open .fp-acc-mark {
  background: var(--tone, var(--brand));
  border-color: transparent;
  color: #fff;
}

/* ==========================================================================
   Interactive cards — cursor-following glow + lift + inner animation
   ========================================================================== */
.fx-card {
  position: relative; isolation: isolate;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease,
              border-color .35s ease;
}
.fx-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              rgba(var(--tone-rgb, var(--brand-rgb)), .16), transparent 70%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: -1;
}
.fx-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
              rgba(var(--tone-rgb, var(--brand-rgb)), .55), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.fx-card:hover { transform: translateY(-6px) scale(1.022); }
.fx-card:hover::before, .fx-card:hover::after { opacity: 1; }
.fx-card:hover {
  box-shadow: 0 28px 56px -26px rgba(var(--tone-rgb, var(--brand-rgb)), .45);
}

/* the little illustration inside each feature card */
.fx-stage {
  position: relative; height: 0; opacity: 0;
  transition: height .45s cubic-bezier(.2, .7, .3, 1), opacity .35s ease, margin .45s ease;
  overflow: hidden;
}
.fx-card:hover .fx-stage { height: 58px; opacity: 1; margin-top: 1.1rem; }

.fx-bars { display: flex; align-items: flex-end; gap: 5px; height: 100%; }
.fx-bars i {
  display: block; flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, rgba(var(--tone-rgb, var(--brand-rgb)), .3), var(--tone, var(--brand)));
  transform: scaleY(.15); transform-origin: bottom;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}
.fx-card:hover .fx-bars i { transform: scaleY(var(--h, .6)); }

.fx-track { position: relative; height: 100%; display: flex; align-items: center; }
.fx-track .rail {
  height: 6px; width: 100%; border-radius: 99px;
  background: rgba(var(--tone-rgb, var(--brand-rgb)), .16); overflow: hidden;
}
.fx-track .fill {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--tone, var(--brand)), var(--accent));
  transition: width 1s cubic-bezier(.2, .8, .3, 1);
}
.fx-card:hover .fx-track .fill { width: var(--w, 78%); }
.fx-track .dot {
  position: absolute; inset-inline-start: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--tone, var(--brand)); box-shadow: 0 0 0 4px rgba(var(--tone-rgb, var(--brand-rgb)), .22);
  transition: inset-inline-start 1s cubic-bezier(.2, .8, .3, 1);
}
.fx-card:hover .fx-track .dot { inset-inline-start: calc(var(--w, 78%) - 7px); }

.fx-pulse { display: flex; align-items: center; justify-content: center; height: 100%; }
.fx-pulse span {
  width: 12px; height: 12px; border-radius: 50%; background: var(--tone, var(--brand));
  position: relative;
}
.fx-pulse span::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--tone, var(--brand)); opacity: 0;
}
.fx-card:hover .fx-pulse span::after { animation: pulse-ring 1.6s ease-out infinite; }

.fx-spark { display: flex; align-items: flex-end; height: 100%; }
.fx-spark svg { width: 100%; height: 100%; overflow: visible; }
.fx-spark path {
  fill: none; stroke: var(--tone, var(--brand)); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 260; stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.1s cubic-bezier(.3, .8, .3, 1);
}
.fx-card:hover .fx-spark path { stroke-dashoffset: 0; }

.fx-coins { display: flex; align-items: center; gap: 6px; height: 100%; }
.fx-coins i {
  width: 26px; height: 26px; border-radius: 50%; display: block;
  background: rgba(var(--tone-rgb, var(--brand-rgb)), .18);
  border: 1.5px solid var(--tone, var(--brand));
  transform: translateY(14px); opacity: 0;
  transition: transform .5s cubic-bezier(.2, 1.3, .4, 1), opacity .4s ease;
}
.fx-card:hover .fx-coins i { transform: none; opacity: 1; }
.fx-card:hover .fx-coins i:nth-child(2) { transition-delay: .07s; }
.fx-card:hover .fx-coins i:nth-child(3) { transition-delay: .14s; }
.fx-card:hover .fx-coins i:nth-child(4) { transition-delay: .21s; }
.fx-card:hover .fx-coins i:nth-child(5) { transition-delay: .28s; }

.fx-shield { display: flex; align-items: center; gap: 8px; height: 100%; }
.fx-shield i {
  height: 6px; flex: 1; border-radius: 99px;
  background: rgba(var(--tone-rgb, var(--brand-rgb)), .18);
  position: relative; overflow: hidden;
}
.fx-shield i::after {
  content: ''; position: absolute; inset: 0; border-radius: 99px;
  background: var(--tone, var(--brand));
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}
.fx-card:hover .fx-shield i::after { transform: none; }
.fx-card:hover .fx-shield i:nth-child(2)::after { transition-delay: .12s; }
.fx-card:hover .fx-shield i:nth-child(3)::after { transition-delay: .24s; }

/* the icon tile reacts too */
.fx-card .tone-ico { transition: transform .4s cubic-bezier(.2, 1.2, .4, 1), background-color .3s ease; }
.fx-card:hover .tone-ico { transform: rotate(-6deg) scale(1.08); }

/* ==========================================================================
   Sticky journey cards — each card carries its own colour
   ========================================================================== */
.journey-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(var(--shadow), .5);
  transition: box-shadow .4s ease, border-color .4s ease;
}
.journey-card:hover { border-color: rgba(var(--tone-rgb, var(--brand-rgb)), .4); }
.journey-visual {
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--tone-rgb, var(--brand-rgb)), .20), transparent 70%),
    linear-gradient(160deg, rgba(var(--tone-rgb, var(--brand-rgb)), .12), rgba(var(--accent-rgb), .07));
}
html.dark .journey-visual {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--tone-rgb, var(--brand-rgb)), .26), transparent 70%),
    linear-gradient(160deg, rgba(var(--tone-rgb, var(--brand-rgb)), .14), rgba(0, 0, 0, .25));
}
.journey-dots {
  position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle at 2px 2px,
                    rgba(var(--tone-rgb, var(--brand-rgb)), .55) 1px, transparent 0);
  background-size: 22px 22px;
}
.journey-num {
  font-size: 3.4rem; font-weight: 900; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--tone-rgb, var(--brand-rgb)), .35);
}

/* ==========================================================================
   Ecosystem — service switcher
   ========================================================================== */
.svc-row {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; padding: .55rem .8rem; border-radius: .85rem;
  border: 1px solid transparent; background: none; cursor: pointer;
  color: inherit; font: inherit; text-align: start;
  transition: background-color .28s ease, border-color .28s ease, transform .28s ease;
}
.svc-row:hover { background: var(--surface-2); }
.svc-row.on {
  background: rgba(var(--brand-rgb), .10);
  border-color: rgba(var(--brand-rgb), .26);
}
html[dir="ltr"] .svc-row.on { transform: translateX(4px); }
html[dir="rtl"] .svc-row.on { transform: translateX(-4px); }
.svc-ico {
  width: 38px; height: 38px; border-radius: .75rem; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
.svc-row.on .svc-ico { border-color: transparent; }
.svc-bar {
  width: 3px; height: 0; border-radius: 99px; background: var(--brand);
  transition: height .3s ease; flex-shrink: 0;
}
.svc-row.on .svc-bar { height: 22px; }

/* on short screens squeeze the rows so the whole block still fits one screen */
@media (max-height: 800px) {
  .svc-row { padding: .4rem .75rem; }
  .svc-ico { width: 32px; height: 32px; border-radius: .65rem; }
  .svc-pane { padding: 1.25rem 1.5rem; }
}

.svc-panel { position: relative; overflow: hidden; }
.svc-pane {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; padding: 1.75rem 2rem;
  opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.svc-pane.on { opacity: 1; transform: none; pointer-events: auto; }
.svc-glow {
  position: absolute; inset: 0; pointer-events: none;
  transition: background .6s ease;
}

/* ==========================================================================
   Comparison table — FundyProp against other prop firms, sized to one screen
   ========================================================================== */
@property --cmp-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.cmp-section {
  --cmp-row: clamp(44px, 6.5vh, 64px);
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  /* the fixed header (and a sticky top banner) sit on top of the screen */
  padding-top: calc(var(--hdr-h, 88px) + var(--fp-banner-pin, 0px) + clamp(4px, 1.5vh, 20px));
  padding-bottom: clamp(16px, 3.5vh, 40px);
}
/* measures one "small viewport" screen, so the fit check ignores the phone URL bar */
.cmp-probe {
  position: absolute; top: 0; width: 0; visibility: hidden; pointer-events: none;
  height: 100vh; height: 100svh;
}
.cmp-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(38% 48% at 50% 64%, rgba(var(--brand-rgb), .10), transparent 70%),
    radial-gradient(30% 36% at 50% 100%, rgba(var(--accent-rgb), .08), transparent 70%);
}
.cmp-bg::before {
  content: ''; position: absolute; inset: 0; opacity: .55;
  background-image: radial-gradient(circle at 1.5px 1.5px, var(--line-strong) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 58%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 58%, #000, transparent 75%);
}

.cmp-head  { margin-bottom: clamp(30px, 4.8vh, 54px); }
.cmp-badge { margin-bottom: clamp(.55rem, 1.5vh, 1.1rem); }
.cmp-title {
  font-size: clamp(1.35rem, min(4.1vh, 5.4vw) + .35rem, 2.85rem);
  line-height: 1.3; margin-bottom: clamp(.35rem, 1.1vh, .9rem);
  text-wrap: balance;
}
.cmp-sub { font-size: clamp(.84rem, .68rem + .6vh, 1.05rem); max-width: 40rem; margin-inline: auto; }

/* the card --------------------------------------------------------------- */
.cmp {
  --c1: 44%; --c2: 30%;
  position: relative; isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .45);
}
/* the "others" column is hatched, like something crossed out */
.cmp::before {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  inset-inline-start: calc(var(--c1) + var(--c2)); inset-inline-end: 0;
  border-start-end-radius: inherit; border-end-end-radius: inherit;
  background: repeating-linear-gradient(135deg, transparent 0 9px, var(--line) 9px 10px);
  opacity: .6;
}

.cmp-pillar {
  position: absolute; z-index: 0; top: -14px; bottom: -14px;
  inset-inline-start: var(--c1); width: var(--c2);
  border-radius: 1.4rem;
  background: linear-gradient(180deg, rgba(var(--brand-rgb), .12), rgba(var(--accent-rgb), .06) 60%, rgba(var(--brand-rgb), .10));
  box-shadow: 0 30px 70px -36px rgba(var(--brand-rgb), .6);
  transition: box-shadow .8s ease;
}
html.dark .cmp-pillar {
  background: linear-gradient(180deg, rgba(var(--brand-rgb), .16), rgba(var(--accent-rgb), .07) 60%, rgba(var(--brand-rgb), .12));
}
/* a slowly orbiting gradient border */
.cmp-pillar::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--cmp-ang), rgba(var(--brand-rgb), .95), rgba(var(--accent-rgb), .9),
              rgba(var(--brand-rgb), .18), rgba(var(--accent-rgb), .3), rgba(var(--brand-rgb), .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: cmp-spin 7s linear infinite;
}
@keyframes cmp-spin { to { --cmp-ang: 360deg; } }
.cmp.is-done .cmp-pillar { box-shadow: 0 34px 90px -30px rgba(var(--brand-rgb), .85); }

.cmp-crown {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .32rem .8rem; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(100deg, var(--brand), color-mix(in srgb, var(--brand) 50%, var(--accent)));
  box-shadow: 0 10px 24px -10px rgba(var(--brand-rgb), .9);
}

.cmp-glider {
  position: absolute; z-index: 1; top: 0; left: 6px; right: 6px; height: 0;
  border-radius: 1rem; pointer-events: none; opacity: 0;
  background: rgba(var(--tone-rgb, var(--brand-rgb)), .08);
  border: 1px solid rgba(var(--tone-rgb, var(--brand-rgb)), .3);
  box-shadow: 0 0 0 4px rgba(var(--tone-rgb, var(--brand-rgb)), .05);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1),
              opacity .3s ease, background-color .3s ease, border-color .3s ease;
}
.cmp.has-active .cmp-glider { opacity: 1; }
.cmp-glider.no-anim { transition-property: opacity, visibility; }

/* rows & cells ----------------------------------------------------------- */
.cmp-table { position: relative; z-index: 2; padding-block: 4px; }
.cmp-row {
  display: grid; align-items: stretch;
  grid-template-columns: var(--c1) var(--c2) minmax(0, 1fr);
}
.cmp-cell {
  display: flex; align-items: center; min-width: 0;
  padding: clamp(.25rem, .9vh, .55rem) clamp(.6rem, 1.6vw, 1.3rem);
}
.cmp-us, .cmp-them { justify-content: center; gap: .6rem; }
.cmp-row-head { min-height: calc(var(--cmp-row) * 1.15); }
.cmp-row-foot { min-height: calc(var(--cmp-row) * 1.25); border-top: 1px solid var(--line); }
.cmp-item {
  min-height: var(--cmp-row); cursor: pointer; outline: none;
  border-top: 1px dashed var(--line);
  transition: opacity .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.cmp.has-active .cmp-item:not(.is-active) { opacity: .48; }
.cmp-item:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--brand-rgb), .6); border-radius: 1rem; }

.cmp-feat { gap: .8rem; }
.cmp-feat-head { flex-direction: column; align-items: flex-start; justify-content: center; gap: .2rem; }
.cmp-col-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmp-hint { font-size: 11px; color: var(--muted); opacity: .85; }
.cmp-hint > span { display: inline-flex; align-items: center; gap: .3rem; }
.cmp-hint .on-touch { display: none; }
@media (hover: none) {
  .cmp-hint .on-touch { display: inline-flex; }
  .cmp-hint .on-hover { display: none; }
}

.cmp-ico {
  width: clamp(30px, 5vh, 38px); height: clamp(30px, 5vh, 38px); border-radius: .8rem; flex-shrink: 0;
  display: grid; place-items: center;
  transition: transform .4s cubic-bezier(.2, 1.2, .4, 1);
}
.cmp-item.is-active .cmp-ico { transform: rotate(-8deg) scale(1.1); }
.cmp-name {
  font-size: clamp(.8rem, .55rem + .9vw, 1rem); font-weight: 800;
  color: var(--text); line-height: 1.5;
}
.cmp-info {
  width: 16px; height: 16px; flex-shrink: 0; margin-inline-start: auto;
  color: var(--muted); opacity: .55;
  transition: color .3s ease, opacity .3s ease, transform .3s ease;
}
.cmp-item.is-active .cmp-info { color: var(--tone, var(--brand)); opacity: 1; transform: scale(1.18); }

.cmp-logo { height: clamp(18px, 3vh, 28px); width: auto; max-width: 100%; object-fit: contain; }
.cmp-them-head { gap: .5rem; text-align: start; }
.cmp-them-ico {
  width: 30px; height: 30px; border-radius: .7rem; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.cmp-them-label { font-size: clamp(.72rem, .6rem + .4vw, .9rem); font-weight: 800; color: var(--text-2); line-height: 1.3; }

/* ticks and crosses ------------------------------------------------------- */
.cmp-yes, .cmp-no { position: relative; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }
.cmp-yes {
  width: 30px; height: 30px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 8px 18px -8px rgba(var(--brand-rgb), .9);
  transition: transform .5s cubic-bezier(.2, 1.5, .4, 1), opacity .3s ease;
}
.cmp-yes::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: 0; pointer-events: none;
}
.cmp-no {
  width: 26px; height: 26px; color: #F43F5E;
  background: rgba(244, 63, 94, .10); border: 1px solid rgba(244, 63, 94, .26);
  transition: opacity .4s ease;
}
.cmp-yes svg, .cmp-no svg { width: 60%; height: 60%; overflow: visible; }
.cmp-yes path, .cmp-no path {
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .45s ease .15s;
}
.cmp-no path { stroke-width: 2.6; }
.cmp-no path + path { transition-delay: .3s; }

.cmp-note {
  font-size: 12px; font-weight: 700; line-height: 1.35; text-align: start;
  transition: opacity .4s ease .2s, transform .4s ease .2s;
}
.cmp-us .cmp-note   { color: var(--text); }
.cmp-them .cmp-note { color: var(--muted); font-weight: 600; }

/* everything waits for the table to scroll into view (only once JS runs) */
.cmp.is-armed .cmp-item:not(.is-on) .cmp-yes { transform: scale(.3); opacity: 0; }
.cmp.is-armed .cmp-item:not(.is-on) .cmp-no  { opacity: 0; }
.cmp.is-armed .cmp-item:not(.is-on) path     { stroke-dashoffset: 1; }
.cmp.is-armed .cmp-item:not(.is-on) .cmp-note { opacity: 0; transform: translateY(4px); }

.cmp-item.is-active .cmp-yes { transform: scale(1.14); }
.cmp-item.is-active .cmp-yes::after { animation: pulse-ring 1.6s ease-out infinite; }
.cmp-item.is-active .cmp-no { animation: cmp-shake .55s ease; }
@keyframes cmp-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-3px) rotate(-8deg); }
  40% { transform: translateX(3px) rotate(8deg); }
  60% { transform: translateX(-2px) rotate(-4deg); }
  80% { transform: translateX(2px) rotate(4deg); }
}

/* score row --------------------------------------------------------------- */
.cmp-foot-label { display: flex; align-items: center; gap: inherit; min-width: 0; }
.cmp-foot-cta { display: none; }
.cmp-foot-ico {
  width: clamp(30px, 5vh, 38px); height: clamp(30px, 5vh, 38px); border-radius: .8rem; flex-shrink: 0;
  display: grid; place-items: center; color: #F59E0B;
  background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .25);
}
.cmp-foot-note { font-size: 11px; color: var(--muted); margin-top: .1rem; }
.cmp-score { display: inline-flex; align-items: baseline; font-weight: 900; line-height: 1; }
.cmp-score b { display: inline-block; font-size: clamp(1.45rem, 1rem + 1.6vh, 2.2rem); }
.cmp-score > span { font-size: .95rem; color: var(--muted); font-weight: 800; margin-left: 2px; }
.cmp-score.is-us b {
  background-image: linear-gradient(100deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cmp-score.is-them b { color: #F43F5E; opacity: .75; }
.cmp-score b.bump { animation: cmp-bump .35s ease; }
@keyframes cmp-bump { 50% { transform: scale(1.3); } }
.cmp-cta {
  align-items: center; gap: .4rem; white-space: nowrap;
  padding: .55rem 1.05rem; border-radius: 999px; font-size: 12.5px; font-weight: 800;
}

/* the explanation box: beside the table on desktop, under it below that -------- */
.cmp-detail {
  display: block; position: relative; overflow: hidden; isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .45);
  transition: border-color .4s ease;
}
.cmp-detail.is-live { border-color: rgba(var(--tone-rgb, var(--brand-rgb)), .38); }
@media (min-width: 1024px) {
  .cmp-layout {
    display: grid; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 380px);
    gap: clamp(18px, 2vw, 28px);
  }
  .cmp-detail { min-height: 100%; }
}
.cmp-detail-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 65% at 50% 0%, rgba(var(--tone-rgb, var(--brand-rgb)), .16), transparent 70%);
  transition: background .5s ease;
}
.cmp-detail-glow::after {
  content: ''; position: absolute; inset: 0; opacity: .45;
  background-image: radial-gradient(circle at 1.5px 1.5px, var(--line-strong) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%);
  mask-image: linear-gradient(to bottom, #000, transparent 55%);
}
.cmp-detail-pane {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(1.3rem, 3vh, 2rem) clamp(1.3rem, 2vw, 1.9rem) clamp(2.4rem, 5vh, 3rem);
  opacity: 0; transform: translateY(12px); filter: blur(4px); pointer-events: none;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
}
.cmp-detail-pane.is-on { opacity: 1; transform: none; filter: none; }
.cmp-detail-ico {
  width: clamp(44px, 6.5vh, 54px); height: clamp(44px, 6.5vh, 54px); border-radius: 1rem;
  display: grid; place-items: center; margin-bottom: clamp(.7rem, 1.8vh, 1.1rem);
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 14px 30px -14px rgba(var(--brand-rgb), .9);
}
.cmp-detail-ico.tone-ico {
  color: var(--tone); background: rgba(var(--tone-rgb), .12);
  box-shadow: 0 14px 30px -16px rgba(var(--tone-rgb), .8);
}
.cmp-detail-pane.is-on .cmp-detail-ico { animation: cmp-pop .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cmp-pop { from { transform: scale(.6) rotate(-12deg); } }
.cmp-detail-kicker {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 999px; margin-bottom: .55rem;
  font-size: 11px; font-weight: 800; color: var(--brand); background: rgba(var(--brand-rgb), .12);
}
.cmp-detail-title {
  font-size: clamp(1.05rem, .8rem + .9vh, 1.35rem); font-weight: 900; line-height: 1.45;
  color: var(--text); margin-bottom: .5rem;
}
.cmp-detail-text { font-size: clamp(.82rem, .7rem + .4vh, .92rem); line-height: 1.95; color: var(--text-2); }
.cmp-detail-hint {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.cmp-detail-hint > span { display: inline-flex; align-items: center; gap: .4rem; }
.cmp-detail-hint .on-touch { display: none; }
@media (hover: none) {
  .cmp-detail-hint .on-touch { display: inline-flex; }
  .cmp-detail-hint .on-hover { display: none; }
}
.cmp-detail-hint .iconify { animation: cmp-nudge 2.2s ease-in-out infinite; }
@keyframes cmp-nudge { 0%, 100% { transform: none; } 50% { transform: translate(-3px, -3px); } }
.cmp-detail-vs { width: 100%; display: grid; gap: .45rem; margin-top: clamp(.7rem, 1.8vh, 1.1rem); }
.cmp-detail-vs > div {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: .85rem; font-size: 12.5px; line-height: 1.5;
}
.cmp-detail-vs b { display: block; font-size: 10.5px; font-weight: 800; color: var(--muted); }
.cmp-detail-vs .is-us   { background: rgba(var(--brand-rgb), .09); border: 1px solid rgba(var(--brand-rgb), .22);
                          color: var(--text); font-weight: 700; }
.cmp-detail-vs .is-them { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.cmp-detail-vs .cmp-yes { width: 26px; height: 26px; }
.cmp-detail-vs .cmp-no  { width: 22px; height: 22px; }
.cmp-detail-dots {
  position: absolute; bottom: clamp(.9rem, 2vh, 1.2rem); left: 0; right: 0;
  display: flex; justify-content: center; gap: .4rem;
}
.cmp-detail-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--line-strong); transition: width .35s ease, background-color .35s ease;
}
.cmp-detail-dots button.on { width: 22px; background: var(--tone, var(--brand)); }
/* auto-tour countdown along the bottom edge */
.cmp-detail-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: 0;
  background: var(--tone, var(--brand));
  transform: scaleX(0); transform-origin: left center;
}
html[dir="rtl"] .cmp-detail-bar { transform-origin: right center; }
.cmp-detail.is-touring .cmp-detail-bar { opacity: .85; animation: cmp-progress var(--tour-ms, 4200ms) linear forwards; }
@keyframes cmp-progress { to { transform: scaleX(1); } }

/* desktop: the panes are stacked and cross-fade */
.cmp-detail-track { position: absolute; inset: 0; }

/* phones and tablets: a box under the table holding a sideways-swipeable strip,
   one explanation per width; swiping picks the matching row in the table */
@media (max-width: 1023px) {
  .cmp-detail { margin-top: clamp(22px, 3.2vh, 30px); border-radius: 1.25rem; }
  .cmp-detail-track {
    position: relative; inset: auto;
    display: flex; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .cmp-detail-track::-webkit-scrollbar { display: none; }
  .cmp-detail-pane {
    position: relative; inset: auto; flex: 0 0 100%;
    scroll-snap-align: center;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem;
    align-items: start; align-content: center;
    padding: .9rem 1rem 1.9rem;
    /* nothing inside the strip may change while it scrolls (the browser would
       re-snap it), so every pane stays fully visible here */
    opacity: 1; transform: none; filter: none; pointer-events: auto; transition: none;
  }
  .cmp-detail-pane.is-on .cmp-detail-ico { animation: none; }
  .cmp-detail-pane > * { grid-column: 2; }
  .cmp-detail-pane > .cmp-detail-ico {
    grid-column: 1; grid-row: 1 / span 4;
    width: 40px; height: 40px; border-radius: .8rem; margin-bottom: 0;
  }
  .cmp-detail-pane > .cmp-detail-vs { grid-column: 1 / -1; }
  .cmp-detail-kicker { justify-self: start; margin-bottom: .35rem; font-size: 10px; }
  .cmp-detail-title { font-size: 14.5px; margin-bottom: .2rem; }
  .cmp-detail-text { font-size: 13px; line-height: 1.85; }
  .cmp-detail-hint { margin-top: .5rem; font-size: 11.5px; }
  .cmp-detail-dots { bottom: .6rem; pointer-events: none; }
  .cmp-detail-dots button { width: 6px; height: 6px; pointer-events: auto; }
  .cmp-detail-dots button.on { width: 18px; }
}
@media (max-width: 639px) {
  .cmp-detail-vs { display: none; }
}

/* smaller screens ---------------------------------------------------------- */
@media (max-width: 767px) {
  .cmp-note { display: none; }
}
@media (max-width: 639px) {
  .cmp { --c1: 50%; --c2: 27%; border-radius: 1.25rem; }
  .cmp-cell { padding-inline: .55rem; }
  .cmp-feat { gap: .55rem; }
  .cmp-ico, .cmp-foot-ico { width: 30px; height: 30px; border-radius: .65rem; }
  .cmp-info { display: none; }
  .cmp-yes { width: 26px; height: 26px; }
  .cmp-no  { width: 22px; height: 22px; }
  .cmp-them-ico { display: none; }
  .cmp-them-head { text-align: center; }
  .cmp-head .cmp-badge { display: none; }
  .cmp-foot-label { display: none; }
  .cmp-row-foot .cmp-foot-cta { display: inline-flex; padding: .5rem .85rem; font-size: 12px; }
  .cmp-crown { font-size: 10px; padding: .26rem .6rem; }
}
/* phones: title, table and the explanation box all on one screen. The feature
   column is wider so the names wrap less, rows and the box are tighter, and the
   subtitle and kicker make room; fit() in site.js shrinks the rest if needed. */
@media (max-width: 639px) {
  .cmp-section {
    --cmp-row: 40px;
    padding-top: calc(var(--hdr-h, 88px) + var(--fp-banner-pin, 0px) + 6px);
    padding-bottom: 12px;
  }
  /* room for the "best choice" badge that rises above the FundyProp column */
  .cmp-head { margin-bottom: 40px; }
  .cmp-title { font-size: clamp(1.45rem, 6.6vw, 1.85rem); line-height: 1.45; margin-bottom: 0; }
  .cmp-sub { display: none; }
  .cmp { --c1: 58%; --c2: 21%; }
  .cmp-pillar { top: -10px; bottom: -10px; border-radius: 1.1rem; }
  .cmp-table { padding-block: 2px; }
  .cmp-cell { padding: .28rem .5rem; }
  .cmp-row-head { min-height: 46px; }
  .cmp-col-label, .cmp-hint { font-size: 10px; }
  .cmp-logo { height: 16px; }
  .cmp-them-label { font-size: 10.5px; }
  .cmp-feat { gap: .5rem; }
  .cmp-ico { width: 26px; height: 26px; border-radius: .55rem; }
  .cmp-ico .iconify { width: 15px; height: 15px; }
  .cmp-name { font-size: 12px; line-height: 1.45; }
  .cmp-yes { width: 24px; height: 24px; }
  .cmp-no  { width: 20px; height: 20px; }
  .cmp-row-foot { min-height: 48px; }
  .cmp-score b { font-size: 1.35rem; }
  .cmp-score > span { font-size: .8rem; }
  .cmp-detail { margin-top: 16px; border-radius: 1.05rem; }
  .cmp-detail-pane { padding: .65rem .8rem 1.4rem; column-gap: .65rem; }
  .cmp-detail-pane > .cmp-detail-ico { width: 32px; height: 32px; border-radius: .7rem; }
  .cmp-detail-pane > .cmp-detail-ico .iconify { width: 18px; height: 18px; }
  .cmp-detail-kicker { display: none; }
  .cmp-detail-title { font-size: 13px; margin-bottom: .1rem; }
  .cmp-detail-text { font-size: 12px; line-height: 1.75; }
  .cmp-detail-hint { margin-top: .3rem; font-size: 11px; }
  .cmp-detail-dots { bottom: .45rem; }
}

/* on short screens squeeze things so the whole table still fits */
@media (max-height: 700px) {
  .cmp-section { --cmp-row: clamp(40px, 6.2vh, 52px); }
  .cmp-sub { display: none; }
}

/* ==========================================================================
   Market ticker — sits clear of the header
   ========================================================================== */
.ticker-strip { position: absolute; inset-inline: 0; z-index: 20; }
.ticker-strip.at-top { top: calc(var(--hdr-h, 92px) + 8px); border-block: 1px solid var(--line); }
.ticker-strip.at-bottom { bottom: 0; border-top: 1px solid var(--line); }

/* the adjustable glow behind the live chart */
.chart-glow { position: absolute; pointer-events: none;
  filter: blur(var(--glow-blur, 90px)); }
.chart-glow.is-pulsing { animation: chart-glow-breathe var(--glow-speed, 6s) ease-in-out infinite; }
@keyframes chart-glow-breathe {
  0%, 100% { transform: scale(1);    filter: blur(var(--glow-blur, 90px)) brightness(1); }
  50%      { transform: scale(1.08); filter: blur(var(--glow-blur, 90px)) brightness(1.35); }
}

/* ==========================================================================
   Hero background #5 — light beams
   ========================================================================== */
.beam {
  position: absolute; top: -30%; width: 2px; height: 160%;
  transform-origin: top center;
  animation: beam-slide var(--beam-speed, 9s) ease-in-out infinite;
}
@keyframes beam-slide {
  0%, 100% { opacity: .25; transform: rotate(var(--rot, 12deg)) translateY(-8%); }
  50%      { opacity: .9;  transform: rotate(var(--rot, 12deg)) translateY(6%); }
}

/* ==========================================================================
   Hero background #6 — dot matrix with a moving highlight
   ========================================================================== */
.dot-matrix {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, var(--dot-color) 1.3px, transparent 1.4px);
  background-size: var(--dot-gap, 26px) var(--dot-gap, 26px);
}
.dot-sheen {
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 40%),
              var(--sheen), transparent 65%);
  transition: background .18s ease-out;
}
.dot-sweep {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, var(--sweep) 50%, transparent 65%);
  background-size: 260% 100%;
  animation: dot-sweep var(--sweep-speed, 11s) linear infinite;
}
@keyframes dot-sweep { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* ==========================================================================
   Hero background #7 — flowing depth waves (canvas)
   ========================================================================== */
.wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ==========================================================================
   Glassmorphism surface — every value comes from the preset the admin picked
   ========================================================================== */
.fp-glass {
  position: relative;
  background: color-mix(in srgb, var(--surface) var(--g-alpha, 55%), transparent);
  -webkit-backdrop-filter: blur(var(--g-blur, 18px)) saturate(var(--g-sat, 170%))
                           brightness(var(--g-bright, 104%));
  backdrop-filter: blur(var(--g-blur, 18px)) saturate(var(--g-sat, 170%))
                   brightness(var(--g-bright, 104%));
  border: 1px solid var(--g-border, rgba(255, 255, 255, .6));
  box-shadow: var(--g-shadow, 0 18px 44px -24px rgba(var(--shadow), .45));
  border-radius: var(--g-radius, 22px);
}
html.dark .fp-glass { border-color: var(--g-border-dark, rgba(255, 255, 255, .12)); }

/* brand tint, only when the preset asks for it */
.fp-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  background: linear-gradient(140deg,
              rgba(var(--brand-rgb), calc(var(--g-tint, 0) * 0.01)),
              rgba(var(--accent-rgb), calc(var(--g-tint, 0) * 0.006)));
  opacity: 1;
}
/* smoked presets darken instead of tinting */
.fp-glass[data-smoke="1"]::before { background: rgba(6, 12, 20, .28); }

/* the specular highlight that makes Apple glass read as glass */
.fp-glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  opacity: var(--g-highlight, .45);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .55) 0%,
                    rgba(255, 255, 255, .08) 38%, transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 60%, transparent 100%);
}
html.dark .fp-glass::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .22) 0%,
              rgba(255, 255, 255, .04) 40%, transparent 65%);
}
.fp-glass > * { position: relative; z-index: 1; }

/* a moving sheen along the top edge — the "liquid" feel */
.fp-glass[data-sheen="1"] {
  background-image: linear-gradient(115deg, transparent 30%,
                    rgba(255, 255, 255, .16) 48%, transparent 66%);
  background-size: 260% 100%;
  animation: glass-sheen 9s ease-in-out infinite;
}
@keyframes glass-sheen {
  0%, 100% { background-position: 160% 0; }
  50%      { background-position: -60% 0; }
}

/* fine frosted grain */
.fp-glass[data-noise="1"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* the glowing rim of the neon preset */
.fp-glass[data-rim="1"] > .rim {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent,
              rgba(var(--brand-rgb), .9), rgba(var(--accent-rgb), .7), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}

/* ==========================================================================
   Header #6 — centred two-row
   ========================================================================== */
.hdr-center .row-two {
  max-height: 60px; opacity: 1;
  transition: max-height .4s cubic-bezier(.2, .7, .3, 1), opacity .3s ease,
              margin .4s ease;
  overflow: hidden;
}
.hdr-center.collapsed .row-two { max-height: 0; opacity: 0; margin-top: 0 !important; }
.hdr-center.collapsed .row-one { padding-top: .35rem; padding-bottom: .35rem; }
.hdr-center .inline-nav { display: none; }
.hdr-center.collapsed .inline-nav { display: flex; }
.hdr-center .track-wide { letter-spacing: .08em; }
.hdr-center .track-wider { letter-spacing: .16em; }

/* ==========================================================================
   Header #7 — utility strip + main bar
   ========================================================================== */
.hdr-utility .utility-bar {
  font-size: 12px;
  transition: max-height .35s ease, opacity .3s ease;
  max-height: 44px; overflow: hidden;
}
.hdr-utility.scrolled .utility-bar { max-height: 0; opacity: 0; }

/* ==========================================================================
   Top banner
   ========================================================================== */
.fp-banner {
  position: relative; z-index: 60; width: 100%;
  color: var(--b-text, #fff);
  transition: transform .35s ease, opacity .3s ease;
}
.fp-banner.is-sticky { position: fixed; inset-inline: 0; top: 0; }
.fp-banner.is-gone { display: none !important; }

.fp-banner-inner {
  max-width: 1280px; margin: 0 auto; padding-inline: 3.25rem;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  justify-content: center;
}
.fp-banner[data-align="between"] .fp-banner-inner { justify-content: space-between; }
.fp-banner[data-h="compact"] .fp-banner-inner { min-height: 36px; padding-block: .35rem; }
.fp-banner[data-h="normal"]  .fp-banner-inner { min-height: 46px; padding-block: .55rem; }
.fp-banner[data-h="tall"]    .fp-banner-inner { min-height: 64px; padding-block: .85rem; }

.fp-banner-close {
  position: absolute; inset-inline-end: .75rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); color: inherit;
  transition: background-color .2s ease, transform .2s ease;
}
.fp-banner-close:hover { background: rgba(255, 255, 255, .3); transform: translateY(-50%) rotate(90deg); }

.fp-banner-btn {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .4rem 1rem; font-size: 12.5px; font-weight: 800;
  border-radius: var(--b-radius, 999px);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
  border: 1px solid transparent;
}
.fp-banner-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.fp-banner-btn[data-style="solid"]   { background: var(--b-btn-bg); color: var(--b-btn-text); }
.fp-banner-btn[data-style="outline"] { background: transparent; color: var(--b-text);
                                       border-color: currentColor; }
.fp-banner-btn[data-style="soft"]    { background: rgba(255, 255, 255, .18); color: var(--b-text); }
.fp-banner-btn[data-style="glow"]    { background: var(--b-btn-bg); color: var(--b-btn-text);
                                       box-shadow: 0 0 18px -2px var(--b-btn-bg); }
.fp-banner-btn[data-style="link"]    { background: transparent; color: var(--b-text);
                                       text-decoration: underline; text-underline-offset: 3px;
                                       padding-inline: .25rem; }

.fp-code {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .7rem; border-radius: 8px; cursor: pointer;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800;
  font-size: 13px; letter-spacing: .06em; direction: ltr;
  border: 1.5px dashed currentColor; background: rgba(255, 255, 255, .14);
  transition: background-color .2s ease, transform .2s ease;
}
.fp-code:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.fp-code.copied { border-style: solid; }

.fp-cd { display: inline-flex; align-items: center; gap: .35rem; }
.fp-cd-box {
  min-width: 40px; padding: .2rem .35rem; border-radius: 7px; text-align: center;
  background: rgba(255, 255, 255, .18); line-height: 1.1;
}
.fp-cd-box b { display: block; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fp-cd-box span { display: block; font-size: 8.5px; opacity: .8; }
.fp-cd-sep { opacity: .5; font-weight: 700; }

.fp-banner[data-anim="shimmer"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%,
              transparent 65%);
  background-size: 280% 100%;
  animation: banner-shimmer 6s linear infinite;
}
@keyframes banner-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.fp-banner[data-anim="pulse"] .fp-banner-btn { animation: banner-pulse 2.4s ease-in-out infinite; }
@keyframes banner-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }
.fp-banner[data-anim="shine"] .fp-banner-btn {
  background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%,
                    transparent 65%);
  background-size: 260% 100%;
  animation: banner-shimmer 3.4s linear infinite;
}

.fp-banner-marquee { display: flex; width: max-content; }
.fp-banner-marquee .track {
  display: flex; gap: 2.5rem; padding-inline: 1.25rem; align-items: center;
  animation: scroll-left var(--b-speed, 26s) linear infinite;
}
html[dir="rtl"] .fp-banner-marquee .track { animation-direction: reverse; }
.fp-banner[data-pause="1"]:hover .fp-banner-marquee .track { animation-play-state: paused; }

/* the header slides down by however tall the banner is */
.site-header { top: var(--fp-banner-offset, 0px) !important; }

/* ==========================================================================
   Shared by the rules and downloads pages
   ========================================================================== */
.rl-hero, .dl-hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--hdr-h, 88px) + var(--fp-banner-pin, 0px) + clamp(24px, 6vh, 64px));
  padding-bottom: clamp(28px, 5vh, 52px);
}
.rl-hero-bg, .dl-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 70% at 80% 0%, rgba(var(--brand-rgb), .14), transparent 70%),
    radial-gradient(35% 60% at 12% 35%, rgba(var(--accent-rgb), .10), transparent 70%);
}
.rl-hero-bg::after, .dl-hero-bg::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle at 1.5px 1.5px, var(--line-strong) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
}

.rl-search {
  position: relative; display: flex; align-items: center; max-width: 580px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 1.1rem;
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .55);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.rl-search:focus-within {
  border-color: rgba(var(--brand-rgb), .6);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14), 0 18px 40px -30px rgba(0, 0, 0, .55);
}
.rl-search-ico { position: absolute; inset-inline-start: 1rem; width: 18px; height: 18px; color: var(--muted);
                 pointer-events: none; transition: color .25s ease; }
.rl-search:focus-within .rl-search-ico { color: var(--brand); }
.rl-search-input {
  flex: 1; min-width: 0; padding: .95rem 1rem; padding-inline-start: 2.85rem;
  background: transparent; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--text);
}
.rl-search-input::placeholder { color: var(--muted); }
.rl-search-input::-webkit-search-cancel-button { display: none; }
.rl-search-count { font-size: 12px; font-weight: 800; color: var(--brand); white-space: nowrap; padding-inline: .4rem; }
.rl-search-kbd {
  margin-inline-end: .85rem; padding: .2rem .45rem; border-radius: .4rem;
  font: 700 11px/1.2 ui-monospace, Menlo, Consolas, monospace; color: var(--muted);
  border: 1px solid var(--line-strong); background: var(--surface-2);
}
.rl-search.has-value .rl-search-kbd { display: none; }
@media (hover: none) { .rl-search-kbd { display: none; } }
.rl-search-clear {
  margin-inline-end: .55rem; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; border: 0; cursor: pointer;
  color: var(--muted); background: var(--surface-2); transition: color .2s ease, transform .25s ease;
}
.rl-search-clear:hover { color: var(--text); transform: rotate(90deg); }
.rl-empty { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }
.rl-empty .iconify { opacity: .45; margin-bottom: .6rem; }

/* ==========================================================================
   Rules page — grouped accordions with a side navigation
   ========================================================================== */
.rl-meta {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
}
.rl-meta b { color: var(--text); font-weight: 800; }

/* phones: sticky row of group chips under the header */
.rl-chips {
  position: sticky; z-index: 30; margin-bottom: 1.25rem;
  top: calc(var(--hdr-h, 88px) + var(--fp-banner-pin, 0px) - 10px);
  padding-block: .55rem;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
}
.rl-chips-track { display: flex; gap: .5rem; overflow-x: auto; padding-inline: 1rem; scrollbar-width: none; }
.rl-chips-track::-webkit-scrollbar { display: none; }
.rl-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--line);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rl-chip .iconify { color: var(--tone); transition: color .3s ease; }
.rl-chip.on { color: #fff; background: var(--tone); border-color: transparent;
              box-shadow: 0 8px 20px -10px rgba(var(--tone-rgb), .9); }
.rl-chip.on .iconify { color: #fff; }
.rl-chip.is-empty { opacity: .35; }

.rl-layout { display: grid; gap: 2rem; padding-bottom: clamp(4rem, 10vh, 7rem); }
@media (min-width: 1024px) {
  .rl-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 2.75rem; align-items: start; }
}
/* the side column runs the full height of the rules, so the nav inside it can
   stay pinned beside the accordions the whole way down */
.rl-aside { align-self: stretch; }
.rl-aside-inner {
  position: sticky; display: flex; flex-direction: column; gap: 1rem;
  top: calc(var(--hdr-h, 88px) + var(--fp-banner-pin, 0px) + 18px);
  max-height: calc(100vh - var(--hdr-h, 88px) - var(--fp-banner-pin, 0px) - 36px);
  overflow-y: auto; scrollbar-width: none;
}
.rl-aside-inner::-webkit-scrollbar { display: none; }
.rl-nav {
  padding: .7rem; border-radius: 1.4rem;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -48px rgba(0, 0, 0, .6);
}
.rl-nav-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .45rem .6rem .7rem; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.rl-progress { flex: 1; max-width: 96px; height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rl-progress i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .15s linear;
}
.rl-nav-item {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .55rem .6rem; border-radius: .9rem;
  font-size: 13.5px; font-weight: 700; color: var(--text-2);
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.rl-nav-item::before {
  content: ''; position: absolute; inset-inline-start: -.7rem; top: 24%; bottom: 24%; width: 3px;
  border-radius: 3px; background: var(--tone); transform: scaleY(0);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.rl-nav-item:hover { background: var(--surface-2); color: var(--text); }
.rl-nav-item.on { background: rgba(var(--tone-rgb), .10); color: var(--text); }
.rl-nav-item.on::before { transform: none; }
.rl-nav-item.is-empty { opacity: .35; }
.rl-nav-ico {
  width: 32px; height: 32px; border-radius: .7rem; flex-shrink: 0; display: grid; place-items: center;
  transition: background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.2, 1.3, .4, 1);
}
.rl-nav-item.on .rl-nav-ico { background: var(--tone); color: #fff; border-color: transparent; transform: scale(1.06); }
.rl-nav-name { flex: 1; min-width: 0; line-height: 1.5; }
.rl-nav-count {
  font-size: 11px; font-weight: 800; color: var(--muted); padding: .05rem .5rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.rl-help {
  padding: 1.15rem; border-radius: 1.4rem;
  border: 1px solid rgba(var(--brand-rgb), .25);
  background: linear-gradient(160deg, rgba(var(--brand-rgb), .12), rgba(var(--accent-rgb), .05));
}
.rl-help-ico {
  width: 38px; height: 38px; border-radius: .8rem; display: grid; place-items: center; margin-bottom: .7rem;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent));
}

.rl-main { min-width: 0; overflow-anchor: none; display: flex; flex-direction: column; gap: clamp(2.2rem, 5vh, 3.5rem); }
.rl-group, .rl-item { scroll-margin-top: calc(var(--hdr-h, 88px) + var(--fp-banner-pin, 0px) + 24px); }
@media (max-width: 1023px) {
  .rl-group, .rl-item { scroll-margin-top: calc(var(--hdr-h, 88px) + var(--fp-banner-pin, 0px) + 72px); }
}
.rl-group-head {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem; padding: 1.1rem 1.25rem; border-radius: 1.4rem;
  background: linear-gradient(120deg, rgba(var(--tone-rgb), .13), rgba(var(--tone-rgb), .02) 75%);
  border: 1px solid rgba(var(--tone-rgb), .2);
}
.rl-group-ico {
  width: 52px; height: 52px; border-radius: 1rem; flex-shrink: 0; display: grid; place-items: center;
}
.rl-group-title { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 900; line-height: 1.4; color: var(--text); }
.rl-group-desc { font-size: 13.5px; line-height: 1.8; color: var(--text-2); margin-top: .2rem; }
.rl-group-num {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 900; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--tone-rgb), .38);
}
.rl-list { display: flex; flex-direction: column; gap: .7rem; }

/* the accordion ----------------------------------------------------------- */
.rl-item {
  position: relative; border-radius: 1.15rem;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .4s ease, box-shadow .55s ease, transform .4s cubic-bezier(.2, .8, .2, 1),
              background-color .4s ease;
}
/* an accent bar grows down the leading edge of an open rule */
.rl-item::before {
  content: ''; position: absolute; inset-block: 16px; inset-inline-start: -1px; width: 3px;
  border-radius: 3px; background: linear-gradient(var(--tone), var(--accent));
  transform: scaleY(0); transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.rl-item:hover { border-color: rgba(var(--tone-rgb), .35); transform: translateY(-2px);
                 box-shadow: 0 18px 40px -32px rgba(var(--tone-rgb), .8); }
.rl-item.open {
  transform: none; border-color: rgba(var(--tone-rgb), .45);
  background: linear-gradient(180deg, rgba(var(--tone-rgb), .055), transparent 160px), var(--surface);
  box-shadow: 0 26px 60px -38px rgba(var(--tone-rgb), .85), 0 0 0 4px rgba(var(--tone-rgb), .06);
}
.rl-item.open::before { transform: none; }
.rl-head {
  position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem;
  background: none; border: 0; border-radius: inherit; cursor: pointer;
  font: inherit; color: inherit; text-align: start;
}
.rl-head:focus-visible { outline: 2px solid rgba(var(--tone-rgb), .6); outline-offset: 2px; }
/* a band of light sweeps across the header as it opens */
.rl-head::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(var(--tone-rgb), .18) 50%, transparent 70%);
  transform: translateX(-120%);
}
.rl-item.open .rl-head::after { animation: rl-sweep .95s cubic-bezier(.4, 0, .2, 1); }
html[dir="rtl"] .rl-item.open .rl-head::after { animation-name: rl-sweep-rtl; }
@keyframes rl-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes rl-sweep-rtl { from { transform: translateX(120%); } to { transform: translateX(-120%); } }
.rl-num {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: .7rem; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: var(--tone);
  background: rgba(var(--tone-rgb), .10); border: 1px solid rgba(var(--tone-rgb), .22);
  transition: transform .5s cubic-bezier(.2, 1.4, .4, 1), background-color .4s ease, color .4s ease,
              box-shadow .4s ease;
}
.rl-item.open .rl-num {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--tone), var(--accent));
  transform: rotate(-8deg) scale(1.08); box-shadow: 0 10px 22px -10px rgba(var(--tone-rgb), .9);
}
.rl-title {
  flex: 1; min-width: 0; line-height: 1.65; color: var(--text);
  font-size: clamp(.92rem, .85rem + .25vw, 1.03rem); font-weight: 800;
  transition: color .3s ease;
}
.rl-item.open .rl-title { color: var(--tone); }
.rl-toggle {
  position: relative; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background-color .4s ease, border-color .4s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.rl-item:hover .rl-toggle { border-color: rgba(var(--tone-rgb), .4); }
.rl-toggle i {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: var(--text-2);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), background-color .4s ease;
}
.rl-toggle i + i { transform: rotate(90deg); }
/* plus turns into minus while the circle spins and fills */
.rl-item.open .rl-toggle { background: var(--tone); border-color: transparent; transform: rotate(180deg); }
.rl-item.open .rl-toggle i { background: #fff; }
.rl-item.open .rl-toggle i + i { transform: rotate(0deg); }

.rl-body { height: 0; overflow: hidden; transition: height .6s cubic-bezier(.22, 1, .36, 1); }
.rl-inner { padding: 0 1.15rem 1.1rem; padding-inline-start: calc(1.15rem + 32px + .9rem); }
.rl-content { border-top: 1px dashed var(--line-strong); padding-top: 1rem; font-size: 14.5px; }
/* the content rises in, block by block */
.rl-content > * {
  opacity: 0; transform: translateY(-8px); filter: blur(3px);
  transition: opacity .4s ease, transform .55s cubic-bezier(.22, 1, .36, 1), filter .4s ease;
}
.rl-item.open .rl-content > * {
  opacity: 1; transform: none; filter: none;
  transition-delay: calc(.1s + var(--i, 0) * .06s);
}
@media (max-width: 639px) {
  .rl-head { padding: .9rem .95rem; gap: .7rem; }
  .rl-inner { padding: 0 .95rem 1rem; }
  .rl-group-head { padding: .95rem 1rem; }
  .rl-group-ico { width: 44px; height: 44px; }
  .rl-group-num { display: none; }
}

/* ==========================================================================
   Downloads page
   ========================================================================== */
.dl-stat {
  display: flex; align-items: center; gap: .85rem; padding: .9rem 1.25rem; border-radius: 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -48px rgba(0, 0, 0, .6);
}
.dl-stat-ico {
  width: 48px; height: 48px; border-radius: 1rem; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 14px 30px -14px rgba(var(--brand-rgb), .9);
}
.dl-stat b { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.1; color: var(--text); }
.dl-stat span { font-size: 12px; color: var(--muted); }
.dl-tools { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.dl-search { flex: 1 1 320px; max-width: 460px; }
.dl-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.dl-tag {
  padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line);
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dl-tag:hover { color: var(--brand); border-color: rgba(var(--brand-rgb), .4); }
.dl-tag.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(100deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
  box-shadow: 0 10px 24px -12px rgba(var(--brand-rgb), .9);
}

.dl-grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dl-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.4rem;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -50px rgba(0, 0, 0, .65);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .35s ease;
  animation: dl-in .7s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes dl-in { from { opacity: 0; transform: translateY(26px) scale(.98); } }
.dl-card:hover {
  transform: translateY(-6px); border-color: rgba(var(--brand-rgb), .38);
  box-shadow: 0 40px 70px -42px rgba(var(--brand-rgb), .55);
}
.dl-card.is-hidden { display: none; }
.dl-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.dl-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.dl-card:hover .dl-media img { transform: scale(1.06); }
.dl-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .32), transparent 45%);
}
.dl-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .95);
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 35%, var(--accent)));
}
.dl-placeholder::before {
  content: ''; position: absolute; inset: 0; opacity: .25;
  background-image: radial-gradient(circle at 1.5px 1.5px, #fff 1px, transparent 0);
  background-size: 18px 18px;
}
.dl-placeholder .iconify { position: relative; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25));
                           transition: transform .6s cubic-bezier(.2, 1.3, .4, 1); }
.dl-card:hover .dl-placeholder .iconify { transform: translateY(-5px) scale(1.08) rotate(-4deg); }
.dl-ext {
  position: absolute; z-index: 1; top: .8rem; inset-inline-start: .8rem;
  display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .6rem; border-radius: .6rem;
  font: 800 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; color: #fff;
  background: rgba(8, 15, 26, .55); border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dl-chip {
  position: absolute; z-index: 1; top: .8rem; inset-inline-end: .8rem;
  padding: .3rem .7rem; border-radius: 999px; font-size: 11px; font-weight: 800;
  color: var(--brand); background: var(--surface); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
}
.dl-body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.25rem; }
.dl-title { font-size: 1.08rem; font-weight: 900; line-height: 1.55; color: var(--text); margin-bottom: .45rem; }
.dl-text {
  font-size: 13.5px; line-height: 1.9; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dl-text-wrap.open .dl-text { display: block; -webkit-line-clamp: unset; }
.dl-more {
  margin-top: .2rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; color: var(--brand);
}
.dl-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: auto; padding-top: 1rem;
  font-size: 12px; color: var(--muted);
}
.dl-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.dl-btn {
  position: relative; overflow: hidden; margin-top: 1rem;
  display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem; padding-inline-end: .75rem;
  border-radius: 1rem; font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(100deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
  box-shadow: 0 14px 30px -14px rgba(var(--brand-rgb), .85);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.dl-btn:hover { transform: translateY(-2px); filter: brightness(1.06);
                box-shadow: 0 20px 36px -16px rgba(var(--brand-rgb), .9); }
/* a sheen passes over the button on hover */
.dl-btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  background-size: 260% 100%; background-position: 160% 0;
  transition: background-position .9s ease;
}
.dl-btn:hover::after { background-position: -60% 0; }
/* thin progress line while the file is being prepared */
.dl-btn::before {
  content: ''; position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; width: 0;
  background: rgba(255, 255, 255, .75);
}
.dl-btn.is-busy::before { animation: dl-bar 1.2s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes dl-bar { to { width: 100%; } }
.dl-btn.is-done { background: linear-gradient(100deg, #10B981, var(--accent)); }
.dl-btn-ico {
  position: relative; width: 36px; height: 36px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; border-radius: .75rem; background: rgba(255, 255, 255, .18);
}
/* the "tray" the arrow drops into */
.dl-btn-ico::after {
  content: ''; position: absolute; bottom: 7px; left: 50%; width: 14px; height: 2px; margin-left: -7px;
  border-radius: 2px; background: currentColor;
}
.dl-btn:hover .dl-btn-ico .iconify, .dl-btn.is-busy .dl-btn-ico .iconify {
  animation: dl-drop 1s cubic-bezier(.5, 0, .3, 1) infinite;
}
@keyframes dl-drop {
  0%   { transform: translateY(-160%); opacity: 0; }
  30%  { opacity: 1; }
  65%  { transform: translateY(-2px); }
  80%  { transform: translateY(1px); }
  100% { transform: translateY(0); opacity: 1; }
}
.dl-btn-label { flex: 1; }
.dl-btn-ext {
  padding: .18rem .45rem; border-radius: .4rem; font: 800 10.5px/1.4 ui-monospace, Menlo, Consolas, monospace;
  background: rgba(255, 255, 255, .18);
}

/* ==========================================================================
   Signal design — WebGL beam hero (always dark) and the matching site skin.
   The skin is switched on with body.skin-signal from the hero design options.
   ========================================================================== */
:root { --sig-page: var(--bg); }   /* page colour, kept before .hero-signal darkens --bg */

@property --sig-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sig-spin { to { --sig-angle: 360deg; } }
@keyframes sig-shimmer { 0%, 55% { transform: translateX(-120%) skewX(-15deg); }
                         100% { transform: translateX(420%) skewX(-15deg); } }
@keyframes sig-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
@keyframes sig-breathe { 0%, 100% { box-shadow: 0 0 32px rgba(var(--brand-rgb), .32), 0 0 80px rgba(var(--brand-rgb), .10),
                                                inset 0 1px 0 rgba(255, 255, 255, .18); }
                         50% { box-shadow: 0 0 44px rgba(var(--brand-rgb), .45), 0 0 100px rgba(var(--brand-rgb), .16),
                                           inset 0 1px 0 rgba(255, 255, 255, .22); } }
@keyframes sig-badge { 0%, 100% { box-shadow: 0 0 0 rgba(var(--brand-rgb), 0); }
                       50% { box-shadow: 0 0 22px rgba(var(--brand-rgb), .28); } }
@keyframes sig-orb { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 24px); } }
@keyframes sig-travel { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes sig-ring { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---- hero: tokens -------------------------------------------------------- */
.hero-signal {
  --bg: var(--sig-bg, #050A12);
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .06);
  --text: #F4F8FC;
  --text-2: rgba(244, 248, 252, .75);
  --muted: rgba(244, 248, 252, .45);
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  background: var(--bg);
  color: var(--text);
}

/* ---- hero: background layers ---------------------------------------------- */
.sig-bg { background: var(--sig-bg); }
/* Without WebGL (or a GPU too weak for it) the hero shows a still frame of the
   same shader, rendered ahead of time; it is only downloaded in that case. */
.sig-fallback { position: absolute; inset: 0; background: var(--sig-bg); }
.sig-bg.is-static .sig-fallback { background: url("../img/signal-poster.webp") center / cover no-repeat, var(--sig-bg); }
.sig-bg.is-static .sig-canvas { display: none; }
.sig-canvas { opacity: 0; transition: opacity .6s ease; }
.sig-bg.is-live .sig-canvas { opacity: 1; }
.sig-overlay {
  position: absolute; inset: 0; opacity: var(--sig-overlay, 1);
  background:
    radial-gradient(80% 50% at 30% 40%, rgba(var(--sig-beam-rgb), .12) 0%, transparent 60%),
    radial-gradient(60% 40% at 70% 60%, rgba(var(--accent-rgb), .08) 0%, transparent 50%),
    radial-gradient(50% 35% at 50% 30%, rgba(var(--sig-light-rgb), .08) 0%, transparent 55%),
    linear-gradient(rgba(var(--sig-bg-rgb), .32) 0%, rgba(var(--sig-bg-rgb), .18) 35%,
                    rgba(var(--sig-bg-rgb), .35) 65%, rgba(var(--sig-bg-rgb), .88) 100%),
    radial-gradient(100% 80%, transparent 0%, rgba(var(--sig-bg-rgb), .35) 70%, rgba(var(--sig-bg-rgb), .85) 100%);
}
/* soft glows: a radial gradient looks like a blurred blob without a costly filter */
.sig-orb { position: absolute; border-radius: 50%; will-change: transform; animation: sig-orb 8s ease-in-out infinite; }
.sig-orb-1 { width: 760px; height: 560px; top: -280px; inset-inline-end: -280px;
             background: radial-gradient(closest-side, rgba(var(--sig-beam-rgb), .07), transparent); }
.sig-orb-2 { width: 560px; height: 760px; bottom: -280px; inset-inline-start: -180px;
             background: radial-gradient(closest-side, rgba(var(--sig-light-rgb), .05), transparent);
             animation-delay: -4s; }
.sig-fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 380px;
  background: linear-gradient(to top, var(--sig-page) 0%,
              color-mix(in srgb, var(--sig-page) 85%, transparent) 40%, transparent 100%);
}
/* on a light page a tall fade would wash the buttons out, so keep it to the very bottom */
html:not(.dark) .sig-fade { height: 120px; }

/* ---- hero: content -------------------------------------------------------- */
.hero-signal .hero-badge {
  gap: .55rem; padding: .3rem .8rem .3rem .55rem; border-radius: 999px;
  background: rgba(var(--brand-rgb), .16); border-color: rgba(var(--brand-rgb), .32);
  color: color-mix(in srgb, var(--brand) 45%, #fff); box-shadow: none;
  animation: sig-badge 3s ease-in-out infinite;
}
.hero-signal .hero-badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .2), 0 0 12px rgba(var(--brand-rgb), .6);
  animation: sig-pulse 2s ease-in-out infinite;
}
.hero-signal .hero-badge-tag {
  padding: 0; background: none; border: 0; letter-spacing: .08em;
  color: color-mix(in srgb, var(--brand) 35%, #fff);
}
.hero-signal .hero-title {
  font-weight: 300; line-height: 1.08; color: var(--text);
  text-shadow: 0 4px 32px rgba(0, 0, 0, .85);
}
html[dir="ltr"] .hero-signal .hero-title { letter-spacing: -.04em; }
.hero-signal .hero-title-em {
  font-weight: 400; background: none; color: #fff; -webkit-text-fill-color: #fff;
  text-shadow: 0 0 80px rgba(var(--brand-rgb), .9), 0 0 32px rgba(var(--sig-light-rgb), .6),
               0 4px 40px rgba(0, 0, 0, .95);
}
.hero-signal .hero-sub { color: var(--text-2); text-shadow: 0 2px 20px rgba(0, 0, 0, .8); }

.hero-signal .hero-btn-primary,
.hero-signal .hero-btn-ghost {
  position: relative; min-width: 200px; height: 52px; font-weight: 500; overflow: hidden; isolation: isolate;
}
.hero-signal .hero-btn-primary {
  background: rgba(var(--brand-rgb), .18); color: #fff;
  border: 1px solid rgba(var(--brand-rgb), .45);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  animation: sig-breathe 4s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .35s ease, border-color .35s ease;
}
.hero-signal .hero-btn-primary::before {   /* light running around the rim */
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from var(--sig-angle), transparent 0%, rgba(255, 255, 255, .9) 18%,
              rgba(var(--brand-rgb), .7) 35%, transparent 52%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sig-spin 3.5s linear infinite;
}
.hero-signal .hero-btn-primary::after {    /* glint sweeping across */
  content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .22) 50%, transparent 100%);
  animation: sig-shimmer 4.5s ease-in-out .8s infinite; pointer-events: none;
}
.hero-signal .hero-btn-primary:hover {
  background: rgba(var(--brand-rgb), .34); border-color: rgba(var(--brand-rgb), .75); filter: none;
  transform: translateY(-2px); animation: none;
  box-shadow: 0 0 60px rgba(var(--brand-rgb), .6), 0 0 120px rgba(var(--brand-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.hero-signal .hero-btn-ghost {
  background: rgba(255, 255, 255, .04); color: rgba(244, 248, 252, .75);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hero-signal .hero-btn-ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08); }

.hero-signal .hero-stats {
  display: flex; gap: 0; width: auto; max-width: 100%; margin-top: 2.5rem;
  border: 1px solid var(--line); border-radius: 1.5rem; overflow: hidden;
}
.hero-signal .hero-stat {
  position: relative; flex: 1 1 0; padding: .7rem 1.4rem; text-align: center;
  background: rgba(var(--sig-bg-rgb), .45);
}
.hero-signal .hero-stat + .hero-stat::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 20%; bottom: 20%; width: 1px; background: var(--line);
}
.hero-signal .hero-stat-value {
  font-size: 1.3rem; font-weight: 800;
  background: linear-gradient(180deg, #fff 20%, rgb(var(--sig-light-rgb)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-signal .hero-stat-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
html[dir="ltr"] .hero-signal .hero-stat-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .06em;
}
/* ---- hero: light theme ----------------------------------------------------
   The same picture recoloured (site.js swaps the shader palette); the text,
   buttons and glass switch to dark-on-light. */
html:not(.dark) .hero-signal {
  --bg: var(--sig-bg-l, #F2F7FC);
  --sig-bg-rgb: var(--sig-bg-l-rgb, 242, 247, 252) !important;
  --surface: rgba(255, 255, 255, .55);
  --surface-2: rgba(255, 255, 255, .7);
  --text: #0B1B2B;
  --text-2: rgba(11, 27, 43, .74);
  --muted: rgba(11, 27, 43, .52);
  --line: rgba(11, 27, 43, .10);
  --line-strong: rgba(11, 27, 43, .18);
}
html:not(.dark) .sig-bg { background: var(--sig-bg-l, #F2F7FC); }
html:not(.dark) .sig-fallback { background: var(--sig-bg-l, #F2F7FC); }
html:not(.dark) .sig-bg.is-static .sig-fallback {
  background: url("../img/signal-poster-light.webp") center / cover no-repeat, var(--sig-bg-l, #F2F7FC);
}
/* a soft white haze behind the headline keeps dark text readable over the blue bands */
html:not(.dark) .sig-overlay {
  background:
    radial-gradient(52% 42% at 50% 46%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .25) 55%, transparent 80%),
    radial-gradient(80% 50% at 30% 40%, rgba(var(--sig-beam-rgb), .08) 0%, transparent 60%),
    linear-gradient(rgba(var(--sig-bg-rgb), .30) 0%, rgba(var(--sig-bg-rgb), .12) 35%,
                    rgba(var(--sig-bg-rgb), .30) 65%, rgba(var(--sig-bg-rgb), .85) 100%),
    radial-gradient(100% 80%, transparent 0%, rgba(var(--sig-bg-rgb), .3) 70%, rgba(var(--sig-bg-rgb), .8) 100%);
}
html:not(.dark) .hero-signal .hero-badge {
  background: rgba(255, 255, 255, .7); border-color: rgba(var(--brand-rgb), .3);
  color: color-mix(in srgb, var(--brand) 55%, #0B1B2B);
}
html:not(.dark) .hero-signal .hero-badge-tag { color: color-mix(in srgb, var(--brand) 70%, #0B1B2B); }
html:not(.dark) .hero-signal .hero-title { text-shadow: 0 2px 28px rgba(255, 255, 255, .9); }
html:not(.dark) .hero-signal .hero-title-em {
  color: color-mix(in srgb, var(--brand) 55%, #0B1B2B);
  -webkit-text-fill-color: color-mix(in srgb, var(--brand) 55%, #0B1B2B);
  text-shadow: 0 0 60px rgba(255, 255, 255, .95), 0 0 24px rgba(var(--brand-rgb), .25);
}
html:not(.dark) .hero-signal .hero-sub { text-shadow: 0 1px 16px rgba(255, 255, 255, .95); }
html:not(.dark) .hero-signal .hero-btn-primary {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 72%, #0B1B2B));
  border-color: rgba(255, 255, 255, .5); color: #fff;
}
html:not(.dark) .hero-signal .hero-btn-primary:hover { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 65%, #0B1B2B)); }
html:not(.dark) .hero-signal .hero-btn-ghost {
  background: rgba(255, 255, 255, .62); color: #0B1B2B; border-color: rgba(11, 27, 43, .14);
}
html:not(.dark) .hero-signal .hero-btn-ghost:hover { background: rgba(255, 255, 255, .85); color: #0B1B2B;
  border-color: rgba(var(--brand-rgb), .4); }
html:not(.dark) .hero-signal .hero-stat { background: rgba(255, 255, 255, .62); }
html:not(.dark) .hero-signal .hero-stat-value {
  background: linear-gradient(180deg, #0B1B2B 20%, color-mix(in srgb, var(--brand) 70%, #0B1B2B));
  -webkit-background-clip: text; background-clip: text;
}

/* the theme switch: every colour changes in the same frame (site.js applyTheme) */
.fp-theme-swap *, .fp-theme-swap *::before, .fp-theme-swap *::after { transition: none !important; }

/* phones: the opening view is exactly one screen (svh = with the browser bars
   showing): badge, headline, text and buttons centred under the header, the
   stats waiting just below the fold */
@media (max-width: 767px) {
  .hero-shell.hero-signal { min-height: 0; }
  .hero-signal > main { padding-top: 0; padding-bottom: 3.5rem; justify-content: flex-start; }
  .hero-signal .hero-first {
    min-height: calc(100vh - var(--fp-banner-h, 0px));
    min-height: calc(100svh - var(--fp-banner-h, 0px));
    padding-top: calc(var(--hdr-h, 88px) + .75rem);
    padding-bottom: clamp(1.5rem, 5svh, 3rem);
    justify-content: center;
  }
  .hero-signal .hero-stats { margin-top: 0; }
}
@media (min-width: 640px) { .hero-signal .hero-stat-value { white-space: nowrap; } }
@media (max-width: 639px) {
  .hero-signal .hero-stat { padding: .6rem .7rem; }
  .hero-signal .hero-stat-value { font-size: 1.05rem; }
  .hero-signal .hero-btn-primary, .hero-signal .hero-btn-ghost { min-width: 0; }
}

/* ---- skin: the rest of the site ------------------------------------------- */
.skin-signal { --sig-card: color-mix(in srgb, var(--surface) 82%, transparent); }
html.dark .skin-signal { --sig-card: rgba(12, 20, 32, .6); }

/* film grain over the whole page. Light and dark specks with their own alpha,
   so no blend mode is needed: a blended full-screen layer would make the
   browser recomposite the whole page on every scroll frame. */
.skin-signal::after {
  content: ''; position: fixed; inset: 0; z-index: 9997; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 -.035'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  transform: translateZ(0);
}
html:not(.dark) .skin-signal::after { opacity: .35; }

/* softer, springier entrance */
.skin-signal .reveal {
  transform: translateY(36px);
  transition-property: opacity, transform; transition-duration: .8s;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
.skin-signal .reveal.active { transform: none; }

/* one calm background with a faint dot field instead of alternating bands */
.skin-signal section.bg-alt {
  background-color: var(--bg);
  background-image:
    radial-gradient(70% 60% at 50% 40%, transparent 0%, var(--bg) 100%),
    radial-gradient(rgba(var(--brand-rgb), .16) 1px, transparent 1px);
  background-size: auto, 24px 24px;
}

/* a glowing hairline with a travelling spark between sections */
.skin-signal section[data-fp-section]:not(#hero) { position: relative; }
.skin-signal section[data-fp-section]:not(#hero)::before,
.skin-signal section[data-fp-section]:not(#hero)::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(960px, 92%); height: 1px; pointer-events: none; z-index: 1;
}
.skin-signal section[data-fp-section]:not(#hero)::before {
  background: linear-gradient(90deg, transparent 5%, rgba(var(--brand-rgb), .25) 30%,
              rgba(var(--accent-rgb), .15) 50%, rgba(var(--brand-rgb), .25) 70%, transparent 95%);
}
.skin-signal section[data-fp-section]:not(#hero)::after {
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .85), transparent) no-repeat;
  background-size: 80px 1px;
  animation: sig-travel 3s ease-in-out infinite alternate;
}

/* section headings: mono capsule + light, gradient title */
.skin-signal .sec-tag {
  gap: .5rem; padding: .25rem .9rem; font-weight: 600; letter-spacing: .08em;
  background: rgba(var(--brand-rgb), .12); border: 1px solid rgba(var(--brand-rgb), .3);
  color: color-mix(in srgb, var(--brand) 70%, var(--text));
}
html.dark .skin-signal .sec-tag { color: color-mix(in srgb, var(--brand) 45%, #fff); }
html[dir="ltr"] .skin-signal .sec-tag { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.skin-signal .sec-tag .iconify { display: none; }
.skin-signal .sec-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--brand);
  box-shadow: 0 0 10px rgba(var(--brand-rgb), .7);
}
.skin-signal .sec-title {
  font-weight: 300;
  background-image: linear-gradient(100deg, currentColor 35%, color-mix(in srgb, var(--brand) 70%, currentColor) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[dir="ltr"] .skin-signal .sec-title { letter-spacing: -.03em; }

/* glassy cards with a light seam along the top edge */
.skin-signal .card {
  border-radius: 1.5rem;
  background:
    linear-gradient(90deg, transparent 20%, rgba(var(--brand-rgb), .6) 45%, rgba(var(--accent-rgb), .4) 60%, transparent 80%)
      top center / 0% 1px no-repeat,
    linear-gradient(145deg, rgba(var(--brand-rgb), .06) 0%, var(--sig-card) 40%, rgba(var(--accent-rgb), .04) 100%);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, box-shadow .3s ease,
              background-size .5s cubic-bezier(.16, 1, .3, 1);
}
.skin-signal #features .card { border-radius: 2rem; }
.skin-signal .card:hover {
  background-size: 100% 1px, auto;
  border-color: rgba(var(--brand-rgb), .35);
  box-shadow: 0 24px 80px -30px rgba(var(--shadow), .6), 0 0 48px rgba(var(--brand-rgb), .10);
}
.skin-signal .card .tone-ico { border: 1px solid rgba(var(--tone-rgb, var(--brand-rgb)), .22); }

/* buttons */
.skin-signal .btn-primary:not(.hero-btn-primary) {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 72%, #000));
  box-shadow: 0 0 24px rgba(var(--brand-rgb), .35);
}
.skin-signal .btn-primary:not(.hero-btn-primary):hover {
  filter: none; transform: translateY(-1px); box-shadow: 0 0 36px rgba(var(--brand-rgb), .55);
}
.skin-signal .btn-ghost:not(.hero-btn-ghost) {
  background: transparent; color: var(--text-2); border-color: var(--line-strong);
}
.skin-signal .btn-ghost:not(.hero-btn-ghost):hover {
  color: var(--text); border-color: rgba(var(--brand-rgb), .4); background: rgba(var(--brand-rgb), .10);
}

/* closing call-to-action becomes a glass panel with pulsing rings */
.sig-ring { display: none; }
.skin-signal .cta-inner {
  max-width: 56rem; padding: 3.5rem 1.5rem; border-radius: 2rem; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(var(--brand-rgb), .22);
  background: linear-gradient(145deg, rgba(var(--brand-rgb), .08) 0%, var(--sig-card) 40%, rgba(var(--accent-rgb), .06) 100%);
}
@media (min-width: 640px) { .skin-signal .cta-inner { padding: 3.5rem; } }
.skin-signal .cta-inner::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .7), rgba(var(--accent-rgb), .5), transparent);
}
.skin-signal .sig-ring {
  display: block; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  border: 1px solid rgba(var(--brand-rgb), .16); animation: sig-ring 4s ease-in-out infinite;
}
.skin-signal .sig-ring-1 { width: 300px; height: 300px; top: -100px; inset-inline-end: -100px; }
.skin-signal .sig-ring-2 { width: 200px; height: 200px; bottom: -60px; inset-inline-start: -60px; animation-delay: -2s; }
.skin-signal .sig-ring-3 { width: 150px; height: 150px; top: calc(50% - 75px); left: calc(50% - 75px); animation-delay: -1s; }

/* ==========================================================================
   Scroll background animations (panel: «انیمیشن بک‌گراند هنگام اسکرول»)
   site.js builds one .fp-fx layer behind everything and moves its pieces with
   the scroll (transform/opacity only). While it is on, the sections drop their
   own background colour so the layer shows through.
   ========================================================================== */
.fp-fx {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict;
  --fx-a: 1;
  opacity: min(1, calc(var(--fx-s, .6) * 1.55 * var(--fx-a)));
}
html:not(.dark) .fp-fx { --fx-a: .62; }
html.fx-on section[data-fp-section]:not(#hero) { background-color: transparent !important; }
html.fx-on .skin-signal section.bg-alt { background-image: radial-gradient(rgba(var(--brand-rgb), .14) 1px, transparent 1px); }
html.fx-on #traders { --deep: transparent; }

/* aurora — three glows that rearrange per section */
.fx-blob {
  position: absolute; left: 0; top: 0; width: 70vmax; height: 70vmax; margin: -22vmax 0 0 -22vmax;
  border-radius: 50%; opacity: .5; will-change: transform;
}

/* grid — a perspective floor and a horizon that lights up at each seam */
.fx-grid-stage { position: absolute; inset: 0; perspective: 520px; perspective-origin: 50% 30%; }
.fx-grid-floor {
  position: absolute; left: -60%; right: -60%; top: 56%; height: 140%;
  transform-origin: 50% 0; will-change: transform;
  background-image:
    linear-gradient(rgba(var(--brand-rgb), .42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb), .32) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 45%, transparent 80%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 45%, transparent 80%);
}
.fx-grid-sky {
  position: absolute; left: 0; right: 0; top: -48px; height: calc(56% + 48px); will-change: transform;
  background-image: radial-gradient(rgba(var(--brand-rgb), .30) 1px, transparent 1.4px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 85%);
  mask-image: linear-gradient(to top, #000, transparent 85%);
  opacity: .55;
}
.fx-grid-horizon {
  position: absolute; left: 8%; right: 8%; top: 56%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .95), rgba(var(--accent-rgb), .75), transparent);
  box-shadow: 0 0 46px 10px rgba(var(--brand-rgb), .32);
  will-change: opacity, transform;
}

/* beams — diagonal light at different speeds, brighter near seams */
.fx-beams { position: absolute; inset: -40% -20%; transform: rotate(35deg); will-change: opacity; }
.fx-beam { position: absolute; top: 0; width: 3px; height: 1200px; border-radius: 3px; will-change: transform; }
.fx-beam.is-wide { width: 160px; }

/* glow (phones) — a band of light riding the seam between sections */
.fx-seam {
  position: absolute; left: -10%; right: -10%; top: 0; height: 320px; will-change: transform, opacity;
  background: radial-gradient(55% 50% at 50% 50%, rgba(var(--fx-c, var(--brand-rgb)), .34), transparent 72%);
}
.fx-seam-line {
  position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; will-change: transform;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-c, var(--brand-rgb)), .95), transparent);
}

/* curtain (phones) — each section has its own tint, cross-faded by the scroll */
.fx-tint {
  position: absolute; inset: -60px 0; will-change: opacity, transform;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(var(--fx-c, var(--brand-rgb)), .32), transparent 64%),
    radial-gradient(120% 55% at 50% 100%, rgba(var(--fx-c, var(--brand-rgb)), .24), transparent 64%);
}

/* stars (phones) — three depths of fine particles */
.fx-stars { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 340px); will-change: transform;
  opacity: calc(.7 + .3 * var(--fx-k, 0)); }
.fx-stars-0 {
  background-size: 140px 140px;
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.4px 1.4px at 96px 112px, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.4px 1.4px at 120px 18px, rgba(255, 255, 255, .7), transparent);
}
.fx-stars-1 {
  background-size: 220px 220px;
  background-image:
    radial-gradient(2px 2px at 40px 150px, rgba(var(--brand-rgb), .95), transparent),
    radial-gradient(2px 2px at 170px 60px, rgba(var(--brand-rgb), .8), transparent);
}
.fx-stars-2 {
  background-size: 320px 320px;
  background-image:
    radial-gradient(2.6px 2.6px at 260px 90px, rgba(var(--accent-rgb), .9), transparent),
    radial-gradient(2.6px 2.6px at 70px 250px, rgba(var(--brand-rgb), .85), transparent);
}
html:not(.dark) .fx-stars-0 {
  background-image:
    radial-gradient(1px 1px at 22px 34px, rgba(11, 27, 43, .35), transparent),
    radial-gradient(1px 1px at 96px 112px, rgba(11, 27, 43, .25), transparent),
    radial-gradient(1px 1px at 120px 18px, rgba(11, 27, 43, .3), transparent);
}

/* ==========================================================================
   Bookstore mode (temporary — SiteSettings.site_mode == 'store', website/store.py)
   ========================================================================== */
.store-nav {
  border-radius: 1.25rem; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.store-hero { padding-top: calc(var(--hdr-h, 84px) + var(--fp-banner-pin, 0px) + 48px); padding-bottom: 72px; }
@media (min-width: 1024px) { .store-hero { min-height: 88vh; display: flex; align-items: center; } }
.store-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 55% at 75% 40%, rgba(var(--brand-rgb), .16), transparent 70%),
    radial-gradient(40% 45% at 20% 80%, rgba(var(--accent-rgb), .12), transparent 70%);
}
.store-hero .store-hero-glow + div { width: 100%; }
.store-page { padding-top: calc(var(--hdr-h, 84px) + var(--fp-banner-pin, 0px) + 40px); padding-bottom: 80px; min-height: 70vh; }

/* covers */
.store-cover { position: relative; aspect-ratio: 4 / 5; background: var(--surface-2); overflow: hidden; }
.store-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-cover-drawn {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem;
  padding: 1.4rem 1.3rem; color: #fff; text-align: start;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--tone, var(--brand)) 85%, #fff), color-mix(in srgb, var(--tone, var(--brand)) 70%, #0B1B2B));
  box-shadow: inset 10px 0 0 rgba(0, 0, 0, .12);
}
html[dir="rtl"] .store-cover-drawn { box-shadow: inset -10px 0 0 rgba(0, 0, 0, .12); }
.store-cover-drawn .iconify { margin-bottom: auto; align-self: flex-end; opacity: .9; }
.store-cover-drawn b { font-size: 1.15rem; font-weight: 900; line-height: 1.4; }
.store-cover-drawn small { font-size: .78rem; opacity: .85; }
.store-badge {
  position: absolute; top: .8rem; inset-inline-start: .8rem; padding: .25rem .65rem; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #fff; background: rgba(11, 27, 43, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.store-book { height: 100%; }
.store-book:hover { transform: translateY(-4px); }

/* the fan of covers beside the hero text */
.store-fan { position: relative; height: 420px; }
.store-fan-item {
  position: absolute; top: 50%; left: 50%; width: 220px; aspect-ratio: 3 / 4; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(var(--shadow), .55); border: 1px solid var(--line);
  background: var(--surface-2);
}
.store-fan-item img { width: 100%; height: 100%; object-fit: cover; }
.store-fan-item:nth-child(1) { transform: translate(-95%, -50%) rotate(-10deg); }
.store-fan-item:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; }
.store-fan-item:nth-child(3) { transform: translate(-5%, -50%) rotate(10deg); }

/* sign-in form */
.store-field { display: flex; flex-direction: column; gap: .4rem; font-size: 13px; font-weight: 600; color: var(--text-2); }
.store-field input {
  height: 46px; padding: 0 .9rem; border-radius: .8rem; font-size: 15px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-strong); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.store-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }
.store-footer { background: var(--bg-alt); }
/* the eNamad seal sits on a small white tile so it reads on the dark theme too */
.store-trust { display: none; padding: .4rem; border-radius: .9rem; background: #fff;
  border: 1px solid var(--line); line-height: 0; }
.store-trust.is-ok { display: inline-block; }
.store-trust img { display: block; max-height: 110px; width: auto; }

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