/* «آزمایشگاه بخش تست‌ها» (/test) — 2026-10-16. Companion of tests-lab.js; only exists on the lab page.
   Everything is scoped under #tl (the wrapper around the homepage's tests section) and driven by its data-tl-* attributes,
   so nothing here can touch the hero or the other sections. No new hex colours: rgb()/rgba()/existing tokens only. */

/* ---------- wrapper + background (always white; only a pattern is drawn on it) ---------- */
/* z-index: the hero (#hero-lab, z-index 2, set in hero-lab.css) sits ABOVE this section, so the hero's own bottom shadow keeps falling onto it
   and the section reads as lying lower than the hero. */
#tl { position: relative; z-index: 0; isolation: isolate;
  --tl-ar: 61, 122, 93; --tl-acc: rgb(var(--tl-ar)); --tl-acc-soft: rgba(var(--tl-ar), .16); --tl-acc-ink: rgb(255, 255, 255);
  --tl-rb: 24px; --tl-rp: 999px;
  --tl-head: var(--ink); --tl-sub: var(--muted);
 }
.tlp { --tl-pc: 61, 122, 93; --tl-pi: 1; }
html[data-theme="dark"] .tlp[data-tl-pcol="peach"] { --tl-pc: 214, 118, 76; }
.tlp[data-tl-pcol="blue"]  { --tl-pc: 74, 124, 178; }
.tlp[data-tl-pcol="lilac"] { --tl-pc: 132, 102, 176; }
.tlp[data-tl-pcol="ink"]   { --tl-pc: 42, 67, 53; }
html[data-theme="dark"] .tlp[data-tl-pcol="green"] { --tl-pc: 150, 215, 180; }
html[data-theme="dark"] .tlp[data-tl-pcol="ink"] { --tl-pc: 200, 225, 210; }
.tlp[data-tl-pint="1"] { --tl-pi: .6; }
.tlp[data-tl-pint="3"] { --tl-pi: 1.7; }
.tlp > .tl__in { position: relative; z-index: 1; }
.tl-sec.tlp { position: relative; isolation: isolate; }
.tlp:not([data-tl-bg="plain"]) .section { background: transparent; }
#tl > .hero__fx { display: none; }
#tl .section { background: transparent; }
.tlp > .tl__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: transparent; }
.tlp > .tl__bg::before, .tlp > .tl__bg::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease); }
.tlp:not([data-tl-bg="plain"]) > .tl__bg::before { opacity: 1; }
.tlp[data-tl-mov="0"] > .tl__bg::before, .tlp[data-tl-mov="0"] > .tl__bg::after { animation: none !important; }

/* 1 dots */
.tlp[data-tl-bg="dots"] > .tl__bg::before { background: radial-gradient(circle, rgba(var(--tl-pc), calc(.34 * var(--tl-pi))) 1.5px, transparent 2px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0, 0, 0, .35), rgb(0, 0, 0)); mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0, 0, 0, .35), rgb(0, 0, 0)); animation: tl-drift-dots 40s linear infinite; }
@keyframes tl-drift-dots { to { background-position: 24px 24px; } }
/* 2 neuron network (the hero's own tile, in a soft colour) */
.tlp[data-tl-bg="neuron"] > .tl__bg::before { inset: -400px; background: rgba(var(--tl-pc), calc(.16 * var(--tl-pi)));
  -webkit-mask: url("hero-pattern.svg") 0 0 / 400px 400px repeat; mask: url("hero-pattern.svg") 0 0 / 400px 400px repeat; animation: tl-drift 120s linear infinite; will-change: transform; }
@keyframes tl-drift { to { transform: translate3d(400px, 400px, 0); } }
/* 3 EEG waves: four brain-wave lines flowing sideways */
.tlp[data-tl-bg="eeg"] > .tl__bg::before { inset: 0 -600px; background: rgba(var(--tl-pc), calc(.2 * var(--tl-pi))); direction: ltr;
  -webkit-mask-image: url("hero-wave.svg"), url("hero-wave.svg"), url("hero-wave.svg"), url("hero-wave.svg"); mask-image: url("hero-wave.svg"), url("hero-wave.svg"), url("hero-wave.svg"), url("hero-wave.svg");
  -webkit-mask-size: 600px 80px; mask-size: 600px 80px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: 0 8%, 200px 36%, 100px 64%, 300px 92%; mask-position: 0 8%, 200px 36%, 100px 64%, 300px 92%;
  animation: tl-flow 40s linear infinite; will-change: transform; }
@keyframes tl-flow { to { transform: translate3d(600px, 0, 0); } }
/* 4 topographic lines (two interleaved wavy line sets) */
.tlp[data-tl-bg="topo"] > .tl__bg::before { background: rgba(var(--tl-pc), calc(.2 * var(--tl-pi)));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M0 20Q50-10 100 20T200 20T300 20T400 20M0 60Q50 30 100 60T200 60T300 60T400 60M0 100Q50 70 100 100T200 100T300 100T400 100M0 140Q50 110 100 140T200 140T300 140T400 140M0 180Q50 150 100 180T200 180T300 180T400 180'/%3E%3Cpath d='M0 40Q50 70 100 40T200 40T300 40T400 40M0 80Q50 110 100 80T200 80T300 80T400 80M0 120Q50 150 100 120T200 120T300 120T400 120M0 160Q50 190 100 160T200 160T300 160T400 160M0 200Q50 230 100 200T200 200T300 200T400 200' stroke-opacity='.55'/%3E%3C/svg%3E") 0 0 / 400px 200px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M0 20Q50-10 100 20T200 20T300 20T400 20M0 60Q50 30 100 60T200 60T300 60T400 60M0 100Q50 70 100 100T200 100T300 100T400 100M0 140Q50 110 100 140T200 140T300 140T400 140M0 180Q50 150 100 180T200 180T300 180T400 180'/%3E%3Cpath d='M0 40Q50 70 100 40T200 40T300 40T400 40M0 80Q50 110 100 80T200 80T300 80T400 80M0 120Q50 150 100 120T200 120T300 120T400 120M0 160Q50 190 100 160T200 160T300 160T400 160M0 200Q50 230 100 200T200 200T300 200T400 200' stroke-opacity='.55'/%3E%3C/svg%3E") 0 0 / 400px 200px repeat;
  animation: tl-topo 60s linear infinite; }
@keyframes tl-topo { to { -webkit-mask-position: 400px 0; mask-position: 400px 0; } }
/* 5 pastel mesh in the four corners */
.tlp[data-tl-bg="mesh"] > .tl__bg::before { background:
  radial-gradient(48% 55% at 4% 6%, rgba(134, 195, 163, calc(.34 * var(--tl-pi))), transparent 70%),
  radial-gradient(44% 50% at 98% 12%, rgba(251, 205, 180, calc(.4 * var(--tl-pi))), transparent 70%),
  radial-gradient(50% 55% at 94% 96%, rgba(160, 200, 225, calc(.36 * var(--tl-pi))), transparent 70%),
  radial-gradient(42% 48% at 6% 94%, rgba(200, 180, 225, calc(.3 * var(--tl-pi))), transparent 70%); }
/* 6 floating pastel orbs */
.tlp[data-tl-bg="orbs"] > .tl__bg::before { inset: -10%; background:
  radial-gradient(circle at 18% 30%, rgba(134, 195, 163, calc(.4 * var(--tl-pi))) 0 90px, transparent 230px),
  radial-gradient(circle at 80% 22%, rgba(251, 205, 180, calc(.45 * var(--tl-pi))) 0 70px, transparent 210px),
  radial-gradient(circle at 70% 78%, rgba(160, 200, 225, calc(.4 * var(--tl-pi))) 0 100px, transparent 250px),
  radial-gradient(circle at 24% 84%, rgba(200, 180, 225, calc(.36 * var(--tl-pi))) 0 80px, transparent 220px);
  animation: tl-orbs 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes tl-orbs { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
/* 7 faded graph paper */
.tlp[data-tl-bg="grid"] > .tl__bg::before { background: linear-gradient(rgba(var(--tl-pc), calc(.14 * var(--tl-pi))) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(var(--tl-pc), calc(.14 * var(--tl-pi))) 1px, transparent 1px) 0 0 / 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 46%, rgba(0, 0, 0, .25), rgb(0, 0, 0)); mask-image: radial-gradient(ellipse 78% 68% at 50% 46%, rgba(0, 0, 0, .25), rgb(0, 0, 0)); }
/* 8 honeycomb */
.tlp[data-tl-bg="hex"] > .tl__bg::before { background: rgba(var(--tl-pc), calc(.13 * var(--tl-pi)));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath fill-rule='evenodd' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E") 0 0 / 56px 98px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath fill-rule='evenodd' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E") 0 0 / 56px 98px repeat; }
/* 9 ripple rings from two centres, breathing */
.tlp[data-tl-bg="ripple"] > .tl__bg::before { background:
  repeating-radial-gradient(circle at 12% 18%, transparent 0 26px, rgba(var(--tl-pc), calc(.17 * var(--tl-pi))) 27px 28.5px),
  repeating-radial-gradient(circle at 90% 86%, transparent 0 26px, rgba(var(--tl-pc), calc(.17 * var(--tl-pi))) 27px 28.5px);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 48%, transparent 10%, rgb(0, 0, 0) 90%); mask-image: radial-gradient(ellipse 70% 60% at 50% 48%, transparent 10%, rgb(0, 0, 0) 90%); animation: tl-breathe 9s ease-in-out infinite alternate; }
@keyframes tl-breathe { from { transform: scale(1); opacity: .7; } to { transform: scale(1.05); opacity: 1; } }
/* 10 tiny plus marks */
.tlp[data-tl-bg="cross"] > .tl__bg::before { background: rgba(var(--tl-pc), calc(.3 * var(--tl-pi)));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 15v10M15 20h10'/%3E%3C/svg%3E") 0 0 / 40px 40px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 15v10M15 20h10'/%3E%3C/svg%3E") 0 0 / 40px 40px repeat; animation: tl-drift-cross 50s linear infinite; }
@keyframes tl-drift-cross { to { -webkit-mask-position: 40px 40px; mask-position: 40px 40px; } }
/* 11 diagonal hairlines */
.tlp[data-tl-bg="stripes"] > .tl__bg::before { background: repeating-linear-gradient(135deg, rgba(var(--tl-pc), calc(.12 * var(--tl-pi))) 0 1px, transparent 1px 15px);
  -webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0), rgba(0, 0, 0, .25) 50%, rgb(0, 0, 0)); mask-image: linear-gradient(180deg, rgb(0, 0, 0), rgba(0, 0, 0, .25) 50%, rgb(0, 0, 0)); }
/* 12 paper grain + a faint warm glow at the top */
.tlp[data-tl-bg="grain"] > .tl__bg::before { opacity: calc(.55 * var(--tl-pi)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tlp[data-tl-bg="grain"] > .tl__bg::after { opacity: 1; background: radial-gradient(60% 50% at 50% 0%, rgba(251, 205, 180, .3), transparent 70%); }
html[data-theme="dark"] .tlp[data-tl-bg="grain"] > .tl__bg::before { opacity: .25; }

/* edges: soft fade into the neighbours, or a floating rounded white panel */
#tl[data-tl-edge="fade"] .tl__bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0, 0, 0) 110px, rgb(0, 0, 0) calc(100% - 110px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgb(0, 0, 0) 110px, rgb(0, 0, 0) calc(100% - 110px), transparent 100%); }
#tl[data-tl-edge="panel"] { margin: 14px 14px 0; }
#tl[data-tl-edge="panel"] .tl__bg { border-radius: 40px; background: var(--card); border: 1px solid var(--border, rgba(0, 0, 0, .08)); box-shadow: 0 30px 60px -40px rgba(20, 50, 36, .35); }
@media (max-width: 600px) { #tl[data-tl-edge="panel"] { margin: 8px 8px 0; } #tl[data-tl-edge="panel"] .tl__bg { border-radius: 26px; } }

/* heading styles (same family as the hero's) */
#tl[data-tl-ttl="mark"] .section__head h2 { background: linear-gradient(transparent 62%, rgba(232, 150, 108, .4) 62% 92%, transparent 92%); display: inline-block; padding: 0 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#tl[data-tl-ttl="grad"] .section__head h2 { display: inline-block; background: linear-gradient(90deg, rgb(22, 84, 60), rgb(214, 110, 70), rgb(22, 84, 60)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: tl-shimmer 7s linear infinite; }
html[data-theme="dark"] #tl[data-tl-ttl="grad"] .section__head h2 { background-image: linear-gradient(90deg, rgb(160, 225, 190), rgb(240, 200, 150), rgb(160, 225, 190)); background-size: 220% 100%; }
@keyframes tl-shimmer { to { background-position: -220% 0; } }

/* ---------- corner level for cards ---------- */
#tl[data-tl-rad="0"] { --tl-rb: 0px;  --tl-rp: 0px; }
#tl[data-tl-rad="1"] { --tl-rb: 8px;  --tl-rp: 8px; }
#tl[data-tl-rad="2"] { --tl-rb: 16px; --tl-rp: 14px; }
#tl[data-tl-rad="3"] { --tl-rb: 24px; --tl-rp: 999px; }
#tl[data-tl-rad="4"] { --tl-rb: 36px; --tl-rp: 999px; }
#tl .hub-card { border-radius: var(--tl-rb); }
#tl .hub-card .mpt-cta, #tl .hub-badge, #tl .hub-more .mpt-cta, #tl .home-compare .mpt-cta { border-radius: var(--tl-rp); }
#tl .home-compare { border-radius: var(--tl-rb); }

/* ---------- card styles ---------- */
#tl .hub-card { position: relative; background: var(--card); transform-style: preserve-3d; }
#tl .hub-card:nth-child(5n+1) { --tl-tint: rgba(134, 195, 163, .42); }
#tl .hub-card:nth-child(5n+2) { --tl-tint: rgba(251, 205, 180, .55); }
#tl .hub-card:nth-child(5n+3) { --tl-tint: rgba(160, 200, 225, .45); }
#tl .hub-card:nth-child(5n+4) { --tl-tint: rgba(200, 180, 225, .4); }
#tl .hub-card:nth-child(5n)   { --tl-tint: rgba(235, 215, 160, .45); }

#tl[data-tl-card="soft"] .hub-card { border-color: transparent; background: linear-gradient(180deg, var(--tl-tint, transparent) 0%, var(--card) 46%); box-shadow: 0 18px 36px -26px rgba(36, 74, 57, .55); }
#tl[data-tl-card="soft"] .hub-card__visual { background: transparent; border-bottom-color: transparent; }
#tl[data-tl-card="glass"] .hub-card { background: rgba(255, 255, 255, .52); border-color: rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); box-shadow: 0 20px 44px -28px rgba(20, 50, 36, .5); }
#tl[data-tl-card="glass"] .hub-card__visual { background: rgba(255, 255, 255, .35); border-bottom-color: rgba(255, 255, 255, .6); }
html[data-theme="dark"] #tl[data-tl-card="glass"] .hub-card { background: rgba(14, 26, 20, .55); border-color: rgba(220, 231, 224, .14); }
html[data-theme="dark"] #tl[data-tl-card="glass"] .hub-card__visual { background: rgba(255, 255, 255, .04); border-bottom-color: rgba(220, 231, 224, .1); }
#tl[data-tl-card="edge"] .hub-card { border: 1.6px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, rgb(95, 154, 124), rgb(236, 160, 120) 60%, rgb(160, 200, 225)) border-box; }
#tl[data-tl-card="lifted"] .hub-card { border-color: transparent; box-shadow: 0 30px 50px -28px rgba(20, 50, 36, .55), 0 2px 0 rgba(255, 255, 255, .6) inset; }
html[data-theme="dark"] #tl[data-tl-card="soft"] .hub-card { background: linear-gradient(180deg, rgba(120, 190, 150, .14) 0%, var(--card) 50%); }

/* per-card colour on the picture band (the art has an off-white square; multiply lets the tint show through it) */
#tl[data-tl-tint="1"] .hub-card__visual { background: radial-gradient(closest-side at 50% 52%, var(--tl-tint), transparent 120%), var(--hub-bg, var(--card)); }
#tl[data-tl-tint="1"] .hub-card__visual img { mix-blend-mode: multiply; }
html[data-theme="dark"] #tl[data-tl-tint="1"] .hub-card__visual img { mix-blend-mode: normal; }
#tl[data-tl-flt="1"] .hub-card__visual img { animation: tl-float 7s ease-in-out infinite; }
#tl[data-tl-flt="1"] .hub-card:nth-child(2n) .hub-card__visual img { animation-delay: -3.5s; }
@keyframes tl-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(1deg); } }

/* ---------- hover ---------- */
#tl[data-tl-hov="none"] .hub-card:is(:hover, .is-demo) { transform: none; box-shadow: inherit; }
#tl[data-tl-hov="tilt"] .hub-card { transition: transform .18s ease-out, box-shadow var(--dur) var(--ease); will-change: transform; }
#tl[data-tl-hov="tilt"] .hub-card:is(:hover, .is-demo) { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
#tl[data-tl-hov="glow"] .hub-card:is(:hover, .is-demo) { transform: translateY(-4px); }
#tl[data-tl-hov="glow"] .hub-card::after, #tl[data-tl-shine="1"] .hub-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 2;
  background: radial-gradient(260px circle at var(--cx, 50%) var(--cy, 50%), rgba(255, 255, 255, .55), transparent 62%); mix-blend-mode: soft-light;
}
#tl[data-tl-hov="glow"] .hub-card::after { background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), var(--tl-acc-soft), transparent 65%); mix-blend-mode: normal; }
#tl[data-tl-hov="glow"] .hub-card:is(:hover, .is-demo)::after, #tl[data-tl-shine="1"] .hub-card:is(:hover, .is-demo)::after { opacity: 1; }
#tl[data-tl-hov="glow"][data-tl-shine="1"] .hub-card::after { background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), rgba(255, 255, 255, .5), var(--tl-acc-soft) 40%, transparent 68%); }

/* ---------- accent colour (icons, depth dots, hover border/title, flash) ---------- */
#tl { --tl-acc: rgb(var(--tl-ar)); --tl-acc-soft: rgba(var(--tl-ar), .16); }
#tl .hub-card:is(:hover, .is-demo) { border-color: var(--tl-acc); }
#tl .hub-depth__dots i.on { background: var(--tl-acc); }
#tl .hub-card__facts .mpt-i { color: var(--tl-acc); }
#tl .hub-card__title a:hover { color: var(--tl-acc); }

/* ---------- buttons: colour + look (both chosen in the lab menu; they apply to every button in the section) ---------- */
#tl { --tl-b1: 95, 154, 124; --tl-b2: 61, 122, 93; --tl-b3: 42, 96, 71; --tl-bi: rgb(255, 255, 255); }
#tl .mpt-cta { background: linear-gradient(135deg, rgb(var(--tl-b1)) 0%, rgb(var(--tl-b2)) 48%, rgb(var(--tl-b3)) 100%); color: var(--tl-bi); box-shadow: 0 14px 30px -12px rgba(var(--tl-b3), .65), inset 0 1px 0 rgba(255, 255, 255, .28); }
#tl .mpt-cta::after { background: radial-gradient(60% 70% at 50% 60%, rgba(var(--tl-b2), .55), transparent 75%); }
#tl[data-tl-bsty="solid"] .mpt-cta { background: rgb(var(--tl-b2)); box-shadow: 0 8px 16px -10px rgba(var(--tl-b3), .8); }
#tl[data-tl-bsty="outline"] .mpt-cta { background: transparent; color: rgb(var(--tl-b2)); box-shadow: inset 0 0 0 2px rgb(var(--tl-b2)); }
#tl[data-tl-bsty="soft"] .mpt-cta { background: rgba(var(--tl-b2), .15); color: rgb(var(--tl-b3)); box-shadow: none; }
html[data-theme="dark"] #tl[data-tl-bsty="outline"] .mpt-cta, html[data-theme="dark"] #tl[data-tl-bsty="soft"] .mpt-cta { color: rgb(var(--tl-b1)); }
#tl[data-tl-bsty="outline"] .mpt-cta::after, #tl[data-tl-bsty="soft"] .mpt-cta::after { display: none; }
#tl[data-tl-bbeam="1"] .mpt-cta--quiet::before { opacity: 1; }
#tl[data-tl-acc="green"] { --tl-ar: 61, 122, 93; }
html[data-theme="dark"] #tl[data-tl-acc="green"] { --tl-ar: 95, 154, 124; }
#tl[data-tl-acc="peach"] { --tl-ar: 214, 118, 76; }
html[data-theme="dark"] #tl[data-tl-acc="peach"] { --tl-ar: 240, 150, 110; }
#tl[data-tl-acc="blue"] { --tl-ar: 70, 120, 175; }
html[data-theme="dark"] #tl[data-tl-acc="blue"] { --tl-ar: 110, 160, 210; }
#tl[data-tl-acc="lilac"] { --tl-ar: 132, 102, 176; }
html[data-theme="dark"] #tl[data-tl-acc="lilac"] { --tl-ar: 165, 140, 210; }
#tl[data-tl-acc="gold"] { --tl-ar: 214, 164, 52; }
html[data-theme="dark"] #tl[data-tl-acc="gold"] { --tl-ar: 236, 196, 96; }
#tl[data-tl-acc="coral"] { --tl-ar: 222, 90, 96; }
html[data-theme="dark"] #tl[data-tl-acc="coral"] { --tl-ar: 244, 128, 128; }
#tl[data-tl-acc="navy"] { --tl-ar: 48, 66, 112; }
html[data-theme="dark"] #tl[data-tl-acc="navy"] { --tl-ar: 80, 100, 150; }
#tl[data-tl-acc="ink"] { --tl-ar: 38, 46, 42; }
html[data-theme="dark"] #tl[data-tl-acc="ink"] { --tl-ar: 70, 80, 76; }
#tl[data-tl-bcol="green"] { --tl-b1: 95, 154, 124; --tl-b2: 61, 122, 93; --tl-b3: 42, 96, 71; --tl-bi: rgb(255, 255, 255); }
#tl[data-tl-bcol="peach"] { --tl-b1: 240, 150, 110; --tl-b2: 214, 118, 76; --tl-b3: 176, 88, 52; --tl-bi: rgb(255, 255, 255); }
#tl[data-tl-bcol="blue"] { --tl-b1: 110, 160, 210; --tl-b2: 70, 120, 175; --tl-b3: 44, 84, 135; --tl-bi: rgb(255, 255, 255); }
#tl[data-tl-bcol="lilac"] { --tl-b1: 165, 140, 210; --tl-b2: 132, 102, 176; --tl-b3: 98, 72, 140; --tl-bi: rgb(255, 255, 255); }
#tl[data-tl-bcol="gold"] { --tl-b1: 236, 196, 96; --tl-b2: 214, 164, 52; --tl-b3: 168, 122, 24; --tl-bi: rgb(45, 30, 6); }
#tl[data-tl-bcol="coral"] { --tl-b1: 244, 128, 128; --tl-b2: 222, 90, 96; --tl-b3: 178, 56, 66; --tl-bi: rgb(255, 255, 255); }
#tl[data-tl-bcol="navy"] { --tl-b1: 80, 100, 150; --tl-b2: 48, 66, 112; --tl-b3: 30, 42, 80; --tl-bi: rgb(255, 255, 255); }
#tl[data-tl-bcol="ink"] { --tl-b1: 70, 80, 76; --tl-b2: 38, 46, 42; --tl-b3: 20, 26, 23; --tl-bi: rgb(255, 255, 255); }

/* quick visual feedback when a setting changes: ring flash + a short fake hover (see tests-lab.js showChange) */
#tl.tl-flash .hub-card { animation: tl-flash 1s ease-out; }
@keyframes tl-flash { 0% { outline: 0 solid rgba(var(--tl-ar), 0); outline-offset: 2px; } 25% { outline: 4px solid rgba(var(--tl-ar), .55); outline-offset: 5px; } 100% { outline: 4px solid rgba(var(--tl-ar), 0); outline-offset: 9px; } }
.hlp-dot { display: inline-block; width: 11px; height: 11px; margin-inline-end: 6px; border-radius: 50%; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }

/* ---------- optional parts ---------- */
#tl[data-tl-facts="0"] .hub-card__facts li:not(.hub-depth) { display: none; }
#tl[data-tl-depth="0"] .hub-depth { display: none; }
#tl[data-tl-facts="0"][data-tl-depth="0"] .hub-card__facts { display: none; }
#tl[data-tl-forx="0"] .hub-card__for { display: none; }
#tl[data-tl-cmp="0"] .home-compare { display: none; }

/* ---------- layout ---------- */
@media (min-width: 1001px) {
  #tl[data-tl-lay="bento"] .hub-grid { grid-auto-flow: dense; }
  #tl[data-tl-lay="bento"] .hub-card:nth-child(6n+1), #tl[data-tl-lay="bento"] .hub-card:nth-child(6n+4), #tl[data-tl-lay="bento"] .hub-card:nth-child(6n) { grid-column: span 2; flex-direction: row; }
  #tl[data-tl-lay="bento"] .hub-card:nth-child(6n+1) .hub-card__visual, #tl[data-tl-lay="bento"] .hub-card:nth-child(6n+4) .hub-card__visual, #tl[data-tl-lay="bento"] .hub-card:nth-child(6n) .hub-card__visual { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; }
  #tl[data-tl-lay="bento"] .hub-card:nth-child(6n+1) .hub-card__body, #tl[data-tl-lay="bento"] .hub-card:nth-child(6n+4) .hub-card__body, #tl[data-tl-lay="bento"] .hub-card:nth-child(6n) .hub-card__body { justify-content: center; }
}
#tl[data-tl-lay="row"] .hub-grid { display: flex; gap: 16px; overflow-x: auto; padding: 8px 4px 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
#tl[data-tl-lay="row"] .hub-card { flex: 0 0 min(320px, 82vw); scroll-snap-align: center; }

/* ---------- entrance (our own, only when chosen) ---------- */
#tl[data-tl-rev="stagger"] .hub-card:not(.tl-in), #tl[data-tl-rev="pop"] .hub-card:not(.tl-in) { opacity: 0 !important; transform: translateY(26px) scale(.97) !important; }
#tl[data-tl-rev="pop"] .hub-card:not(.tl-in) { transform: scale(.88) !important; }
#tl[data-tl-rev="stagger"] .hub-card.tl-in, #tl[data-tl-rev="pop"] .hub-card.tl-in { transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
#tl[data-tl-rev="pop"] .hub-card.tl-in { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }

@media (prefers-reduced-motion: reduce) {
  .tlp > .tl__bg::before, .tlp > .tl__bg::after { animation: none !important; }
  #tl[data-tl-ttl="grad"] .section__head h2, #tl[data-tl-flt="1"] .hub-card__visual img { animation: none; }
  #tl[data-tl-rev] .hub-card:not(.tl-in) { opacity: 1 !important; transform: none !important; }
}

/* ---------- hidden sections (lab menu, «بقیه‌ی بخش‌ها») ---------- */
.tl-hide { display: none !important; }

/* ---------- lab menu: tabs + scope note + section list ---------- */
.hlp-tabs { display: flex; gap: 4px; margin: 10px 0 4px; padding: 4px; border-radius: 14px; background: rgba(120, 120, 120, .12); }
.hlp-tabs button { flex: 1; min-height: 36px; padding: 0 8px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: inherit; background: transparent; }
.hlp-tabs button.is-on { background: var(--card, rgb(255, 255, 255)); box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.hlp__scope { margin: 10px 0 8px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.9; max-width: none; background: rgba(95, 154, 124, .14); }
.hlp-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hlp-sec .hlp-sw { flex: 1; }
.hlp-go { flex: none; min-height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; color: inherit; background: transparent; border: 1.5px solid var(--border, rgba(0, 0, 0, .18)); }

/* =====================================================================================================
   Card styles made for the paper background (2026-10-16) — eleven ideas, picked in the lab menu (data-tl-card).
   ===================================================================================================== */
#tl .hub-card:nth-child(odd)  { --tl-rot: -.7deg; }
#tl .hub-card:nth-child(even) { --tl-rot: .6deg; }
#tl .hub-card:nth-child(5n+1) { --tl-solid: rgb(95, 154, 124); }
#tl .hub-card:nth-child(5n+2) { --tl-solid: rgb(236, 160, 120); }
#tl .hub-card:nth-child(5n+3) { --tl-solid: rgb(110, 160, 200); }
#tl .hub-card:nth-child(5n+4) { --tl-solid: rgb(160, 130, 200); }
#tl .hub-card:nth-child(5n)   { --tl-solid: rgb(214, 184, 100); }

/* the ones that sit a little crooked, like paper put down by hand; they straighten up on hover */
#tl[data-tl-tilt="1"]:is([data-tl-card="paper"], [data-tl-card="stack"], [data-tl-card="tape"], [data-tl-card="pin"], [data-tl-card="sticker"], [data-tl-card="polaroid"]) .hub-card { transform: rotate(var(--tl-rot, 0deg)); }
#tl:is([data-tl-card="paper"], [data-tl-card="stack"], [data-tl-card="tape"], [data-tl-card="pin"], [data-tl-card="sticker"], [data-tl-card="polaroid"])[data-tl-hov="lift"] .hub-card:is(:hover, .is-demo) { transform: rotate(0deg) translateY(-8px); }

/* 1 paper sheet */
#tl[data-tl-card="paper"] .hub-card { border-color: rgba(60, 50, 30, .08); background: linear-gradient(180deg, var(--card), rgb(252, 251, 247));
  box-shadow: 0 1px 1px rgba(60, 50, 30, .06), 0 12px 22px -12px rgba(60, 50, 30, .38), 0 30px 44px -32px rgba(60, 50, 30, .4); }
/* 2 stack of sheets */
#tl[data-tl-card="stack"] .hub-card { border-color: rgba(60, 50, 30, .1);
  box-shadow: -7px 8px 0 -1px var(--card), -7px 8px 0 0 rgba(60, 50, 30, .12), -13px 16px 0 -2px var(--card), -13px 16px 0 -1px rgba(60, 50, 30, .09), 0 26px 30px -22px rgba(60, 50, 30, .4); }
/* 3 washi tape */
#tl[data-tl-card="tape"] .hub-card, #tl[data-tl-card="pin"] .hub-card { overflow: visible; border-color: rgba(60, 50, 30, .08); box-shadow: 0 14px 26px -14px rgba(60, 50, 30, .4); }
#tl[data-tl-card="tape"] .hub-card__visual, #tl[data-tl-card="pin"] .hub-card__visual { border-radius: calc(var(--tl-rb) - 1px) calc(var(--tl-rb) - 1px) 0 0; }
#tl[data-tl-card="tape"] .hub-card::before { content: ''; position: absolute; z-index: 4; top: -13px; inset-inline-start: 50%; width: 92px; height: 26px; margin-inline-start: -46px; transform: rotate(-3deg);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px), rgba(236, 190, 150, .78); box-shadow: 0 1px 3px rgba(60, 50, 30, .25); }
#tl[data-tl-card="tape"] .hub-card:nth-child(even)::before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px), rgba(150, 200, 175, .8); transform: rotate(2.5deg); }
/* 4 push-pin */
#tl[data-tl-card="pin"] .hub-card::before { content: ''; position: absolute; z-index: 4; top: -9px; inset-inline-start: 50%; width: 18px; height: 18px; margin-inline-start: -9px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85), transparent 38%), rgb(214, 92, 70); box-shadow: 0 4px 6px rgba(60, 30, 20, .4); }
#tl[data-tl-card="pin"] .hub-card:nth-child(3n+2)::before { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85), transparent 38%), rgb(70, 130, 190); }
#tl[data-tl-card="pin"] .hub-card:nth-child(3n)::before { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85), transparent 38%), rgb(80, 150, 110); }
/* 5 die-cut sticker */
#tl[data-tl-card="sticker"] .hub-card { border: 7px solid var(--card); border-radius: calc(var(--tl-rb) + 6px); box-shadow: 0 0 0 1px rgba(60, 50, 30, .12), 0 16px 24px -10px rgba(60, 50, 30, .45); }
/* 6 neo-brutalist: hard outline + hard offset shadow */
#tl[data-tl-card="neo"] .hub-card { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--tl-solid, var(--tl-acc)); }
#tl[data-tl-card="neo"] .hub-card__visual { border-bottom: 2px solid var(--ink); }
#tl[data-tl-card="neo"][data-tl-hov="lift"] .hub-card:is(:hover, .is-demo) { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--tl-solid, var(--tl-acc)); border-color: var(--ink); }
/* 7 ticket stub: side notches + dashed tear line above the facts */
#tl[data-tl-card="ticket"] .hub-card { border: 0; box-shadow: none; background: var(--card);
  -webkit-mask: radial-gradient(circle 11px at 0 calc(100% - 112px), transparent 97%, rgb(0, 0, 0)) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% calc(100% - 112px), transparent 97%, rgb(0, 0, 0)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 calc(100% - 112px), transparent 97%, rgb(0, 0, 0)) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% calc(100% - 112px), transparent 97%, rgb(0, 0, 0)) right / 51% 100% no-repeat; }
#tl[data-tl-card="ticket"] .hub-card__facts { border-top: 2px dashed rgba(60, 50, 30, .25); }
#tl[data-tl-card="ticket"] .hub-card__visual { border-bottom: 0; }
/* 8 hand-drawn sketch */
#tl[data-tl-card="sketch"] .hub-card { border: 2px dashed rgba(42, 67, 53, .6); border-radius: 22px 34px 20px 38px / 34px 20px 38px 22px; box-shadow: none; background: rgba(255, 255, 255, .55); }
#tl[data-tl-card="sketch"] .hub-card__visual { background: transparent; border-bottom: 2px dashed rgba(42, 67, 53, .35); }
#tl[data-tl-card="sketch"] .hub-card__title a { text-decoration: underline wavy var(--tl-acc); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
/* 9 school notebook: ruled lines + red margin */
#tl[data-tl-card="notebook"] .hub-card { border-color: rgba(74, 124, 178, .25); box-shadow: 0 14px 26px -18px rgba(60, 50, 30, .4); }
#tl[data-tl-card="notebook"] .hub-card__body { background: repeating-linear-gradient(transparent 0 27px, rgba(74, 124, 178, .2) 27px 28px); }
#tl[data-tl-card="notebook"] .hub-card::before { content: ''; position: absolute; z-index: 3; top: 0; bottom: 0; inset-inline-end: 26px; width: 1.5px; background: rgba(214, 92, 70, .45); pointer-events: none; }
/* 10 polaroid: thick frame, picture inset, tilted */
#tl[data-tl-card="polaroid"] .hub-card { padding: 12px 12px 0; border-radius: 6px; border: 1px solid rgba(60, 50, 30, .1); box-shadow: 0 16px 26px -14px rgba(60, 50, 30, .5); }
#tl[data-tl-card="polaroid"] .hub-card__visual { border-radius: 3px; border: 1px solid rgba(60, 50, 30, .12); }
#tl[data-tl-card="polaroid"] .hub-card__body { padding-inline: 6px; }
/* 11 colour-banner on top (bookmark colour per card) */
#tl[data-tl-card="banner"] .hub-card { border-top: 7px solid var(--tl-solid, var(--tl-acc)); border-color: rgba(60, 50, 30, .1); border-top-color: var(--tl-solid, var(--tl-acc)); box-shadow: 0 14px 26px -18px rgba(60, 50, 30, .4); }
#tl[data-tl-card="banner"] .hub-card:is(:hover, .is-demo) { border-color: rgba(60, 50, 30, .1); border-top-color: var(--tl-solid, var(--tl-acc)); }

html[data-theme="dark"] #tl[data-tl-card="neo"] .hub-card, html[data-theme="dark"] #tl[data-tl-card="neo"] .hub-card__visual { border-color: rgb(220, 231, 224); }
html[data-theme="dark"] #tl[data-tl-card="sketch"] .hub-card { background: rgba(255, 255, 255, .04); border-color: rgba(220, 231, 224, .5); }

@media (prefers-reduced-motion: reduce) { #tl .hub-card { transition: none !important; } }

.hlp-bg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: rgba(120, 120, 120, .08); font-size: 12px; }
.hlp-bg > span { flex: 0 0 100%; opacity: .65; }
.hlp-bg select { flex: 1 1 90px; min-height: 34px; border-radius: 10px; font: inherit; font-size: 12.5px; color: inherit; background: var(--card, rgb(255, 255, 255)); border: 1.5px solid var(--border, rgba(0, 0, 0, .18)); padding: 0 6px; }
.hlp-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }

/* each card's own badge gets its own soft colour (same five tints as the card art band) */
#tl .hub-badge--pick { color: rgb(45, 40, 30); }
#tl .hub-card:nth-child(5n+1) .hub-badge--pick { background: rgba(190, 228, 206, .95); }
#tl .hub-card:nth-child(5n+2) .hub-badge--pick { background: rgba(251, 214, 192, .95); }
#tl .hub-card:nth-child(5n+3) .hub-badge--pick { background: rgba(190, 215, 238, .95); }
#tl .hub-card:nth-child(5n+4) .hub-badge--pick { background: rgba(218, 204, 238, .95); }
#tl .hub-card:nth-child(5n)   .hub-badge--pick { background: rgba(242, 228, 182, .95); }
html[data-theme="dark"] #tl .hub-badge--pick { color: rgb(30, 26, 18); }

/* section heading: no «تست‌ها» label above/before the title, and the lead sits on one line (wraps naturally on narrow screens) */
#tl .section__head .label { display: none; }
#tl .section__head h2 { display: block; width: fit-content; }
#tl .section__head p { max-width: none; }
#tl .section__head { max-width: none; }

/* =====================================================================================================
   «با شریکت هم مقایسه کن» banner (.home-compare) — 12 looks (data-tl-cstyle) + 12 icons (data-tl-cico), 2026-10-16.
   tests-lab.js injects the icon badge, the floating-symbol layer and the two-results strip into the banner (lab only).
   ===================================================================================================== */
#tl .home-compare { position: relative; overflow: hidden; isolation: isolate; align-items: center; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
#tl .tl-cmp-ico { flex: none; display: none; width: 66px; height: 66px; border-radius: 50%; align-items: center; justify-content: center; color: var(--tl-acc);
  background: rgba(255, 255, 255, .78); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .8); }
#tl:not([data-tl-cico="none"]) .tl-cmp-ico { display: flex; }
#tl .tl-cmp-ico svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#tl .tl-cmp-ico .f { fill: currentColor; fill-opacity: .22; }
#tl .tl-cmp-ico .hp { stroke: rgb(226, 98, 120); }
#tl .tl-cmp-ico .hp.f { fill: rgb(226, 98, 120); fill-opacity: .25; }
#tl[data-tl-cmov="1"] .tl-cmp-ico svg { animation: tl-beat 1.8s ease-in-out infinite; }
@keyframes tl-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.15); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } }
#tl .tl-cmp-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; }
#tl .tl-cmp-fx i { position: absolute; display: block; font-style: normal; line-height: 1; }
#tl .tl-cmp-duo { display: none; flex: none; align-items: center; gap: 10px; }
#tl .home-compare__text, #tl .home-compare > .mpt-cta { position: relative; z-index: 2; }

/* 1 default: untouched */

/* 2 floating hearts */
#tl[data-tl-cstyle="hearts"] .home-compare { background: linear-gradient(120deg, rgb(255, 238, 242), rgb(255, 232, 216)); border-color: rgba(240, 130, 150, .35); }
#tl[data-tl-cstyle="hearts"] .tl-cmp-fx, #tl[data-tl-cstyle="sparkle"] .tl-cmp-fx { display: block; }
#tl[data-tl-cstyle="hearts"] .tl-cmp-fx i::before { content: '\2665'; }
#tl[data-tl-cstyle="hearts"] .tl-cmp-fx i { color: rgba(236, 100, 128, .4); font-size: var(--s, 18px); inset-inline-start: var(--x, 10%); bottom: -24px; animation: tl-rise var(--d, 9s) linear var(--dl, 0s) infinite; }
@keyframes tl-rise { 0% { transform: translateY(0) rotate(-8deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(-190px) rotate(12deg); opacity: 0; } }
#tl .tl-cmp-fx i:nth-child(1) { --x: 4%;  --s: 18px; --d: 8s;  --dl: -1s; }
#tl .tl-cmp-fx i:nth-child(2) { --x: 17%; --s: 26px; --d: 11s; --dl: -6s; }
#tl .tl-cmp-fx i:nth-child(3) { --x: 31%; --s: 14px; --d: 9s;  --dl: -3s; }
#tl .tl-cmp-fx i:nth-child(4) { --x: 46%; --s: 22px; --d: 12s; --dl: -9s; }
#tl .tl-cmp-fx i:nth-child(5) { --x: 61%; --s: 16px; --d: 8.5s; --dl: -2s; }
#tl .tl-cmp-fx i:nth-child(6) { --x: 74%; --s: 28px; --d: 13s; --dl: -7s; }
#tl .tl-cmp-fx i:nth-child(7) { --x: 86%; --s: 15px; --d: 9.5s; --dl: -4s; }
#tl .tl-cmp-fx i:nth-child(8) { --x: 94%; --s: 22px; --d: 10.5s; --dl: -8s; }

/* 3 venn circles */
#tl[data-tl-cstyle="venn"] .home-compare { background: var(--card); border-color: rgba(60, 50, 30, .1); }
#tl[data-tl-cstyle="venn"] .tl-cmp-fx { display: block; }
#tl[data-tl-cstyle="venn"] .tl-cmp-fx::before, #tl[data-tl-cstyle="venn"] .tl-cmp-fx::after { content: ''; position: absolute; top: 50%; width: 210px; height: 210px; margin-top: -105px; border-radius: 50%; mix-blend-mode: multiply; }
#tl[data-tl-cstyle="venn"] .tl-cmp-fx::before { inset-inline-end: 110px; background: rgba(134, 195, 163, .42); animation: tl-venn-a 7s ease-in-out infinite alternate; }
#tl[data-tl-cstyle="venn"] .tl-cmp-fx::after { inset-inline-end: -10px; background: rgba(251, 205, 180, .55); animation: tl-venn-b 7s ease-in-out infinite alternate; }
@keyframes tl-venn-a { to { transform: translateX(26px); } }
@keyframes tl-venn-b { to { transform: translateX(-26px); } }

/* 4 two halves meeting at a heart */
#tl[data-tl-cstyle="split"] .home-compare { background: linear-gradient(to left, rgba(160, 214, 186, .5) 50%, rgba(251, 205, 180, .6) 50%); border-color: rgba(60, 50, 30, .08); }
#tl[data-tl-cstyle="split"] .tl-cmp-fx { display: block; }
#tl[data-tl-cstyle="split"] .tl-cmp-fx::after { content: '\2665'; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 22px; color: rgb(226, 98, 120); background: var(--card); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .4); animation: tl-beat 1.8s ease-in-out infinite; }

/* 5 dark + glow */
#tl[data-tl-cstyle="dark"] .home-compare { background: linear-gradient(135deg, rgb(16, 38, 29), rgb(30, 66, 50)); border-color: rgba(190, 225, 205, .2); box-shadow: 0 26px 44px -26px rgba(10, 30, 20, .7); }
#tl[data-tl-cstyle="dark"] .home-compare__text b { color: rgb(246, 251, 248); }
#tl[data-tl-cstyle="dark"] .home-compare__text span { color: rgba(226, 238, 231, .82); }
#tl[data-tl-cstyle="dark"] .tl-cmp-fx { display: block; background: radial-gradient(40% 90% at 12% 20%, rgba(236, 160, 120, .32), transparent 70%), radial-gradient(40% 90% at 88% 90%, rgba(134, 195, 163, .3), transparent 70%); animation: tl-glow 6s ease-in-out infinite alternate; }
@keyframes tl-glow { to { opacity: .55; } }

/* 6 heartbeat line running through the banner */
#tl[data-tl-cstyle="pulse"] .home-compare { background: var(--card); border-color: rgba(60, 50, 30, .1); }
#tl[data-tl-cstyle="pulse"] .tl-cmp-fx { display: block; }
#tl[data-tl-cstyle="pulse"] .tl-cmp-fx::before { content: ''; position: absolute; inset: 0 -600px; direction: ltr; background: rgba(var(--tl-ar), .3);
  -webkit-mask: url("hero-wave.svg") 0 50% / 600px 80px repeat-x; mask: url("hero-wave.svg") 0 50% / 600px 80px repeat-x; animation: tl-flow 18s linear infinite; }

/* 7 paper note with tape */
#tl[data-tl-cstyle="paper"] .home-compare { overflow: visible; background: rgb(255, 252, 244); border: 1px solid rgba(60, 50, 30, .12); transform: rotate(-.5deg); box-shadow: 0 16px 28px -16px rgba(60, 50, 30, .45); }
#tl[data-tl-cstyle="paper"] .home-compare::before { content: ''; position: absolute; z-index: 4; top: -12px; inset-inline-start: 50%; width: 96px; height: 24px; margin-inline-start: -48px; transform: rotate(-2deg);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px), rgba(236, 190, 150, .8); box-shadow: 0 1px 3px rgba(60, 50, 30, .25); }

/* 8 spinning gradient border */
@property --tl-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#tl[data-tl-cstyle="glowborder"] .home-compare { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, conic-gradient(from var(--tl-ang), rgb(95, 154, 124), rgb(236, 160, 120), rgb(160, 200, 225), rgb(200, 180, 225), rgb(95, 154, 124)) border-box; animation: tl-spin 6s linear infinite; }
@keyframes tl-spin { to { --tl-ang: 360deg; } }

/* 9 centred, stacked */
#tl[data-tl-cstyle="center"] .home-compare { flex-direction: column; justify-content: center; text-align: center; padding: 34px 26px; gap: 16px; background: linear-gradient(160deg, rgb(244, 240, 252), rgb(253, 238, 228)); }
#tl[data-tl-cstyle="center"] .home-compare__text { flex: 0 1 auto; max-width: 62ch; }
#tl[data-tl-cstyle="center"] .tl-cmp-ico { width: 78px; height: 78px; }
#tl[data-tl-cstyle="center"] .tl-cmp-ico svg { width: 44px; height: 44px; }

/* 10 two results side by side with a heart between */
#tl[data-tl-cstyle="duo"] .home-compare { background: linear-gradient(120deg, rgb(238, 247, 241), rgb(253, 240, 232)); border-color: rgba(60, 50, 30, .08); }
#tl[data-tl-cstyle="duo"] .tl-cmp-duo { display: flex; }
#tl .tl-duo__p { display: grid; gap: 6px; width: 84px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .8); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .4); }
#tl .tl-duo__p i { display: block; height: 7px; border-radius: 6px; background: rgb(95, 154, 124); width: var(--w, 70%); }
#tl .tl-duo__p--b i { background: rgb(236, 160, 120); }
#tl .tl-duo__p i:nth-child(1) { --w: 90%; } #tl .tl-duo__p i:nth-child(2) { --w: 55%; } #tl .tl-duo__p i:nth-child(3) { --w: 75%; } #tl .tl-duo__p--b i:nth-child(1) { --w: 60%; } #tl .tl-duo__p--b i:nth-child(2) { --w: 85%; } #tl .tl-duo__p--b i:nth-child(3) { --w: 70%; }
#tl .tl-duo__h { width: 26px; height: 26px; color: rgb(226, 98, 120); animation: tl-beat 1.8s ease-in-out infinite; }

/* 11 sparkles on a soft gradient */
#tl[data-tl-cstyle="sparkle"] .home-compare { background: linear-gradient(120deg, rgb(240, 234, 252), rgb(255, 236, 222)); border-color: rgba(160, 130, 200, .3); }
#tl[data-tl-cstyle="sparkle"] .tl-cmp-fx i::before { content: '\2726'; }
#tl[data-tl-cstyle="sparkle"] .tl-cmp-fx i { color: rgba(176, 130, 214, .55); font-size: var(--s, 18px); inset-inline-start: var(--x, 10%); top: calc(10% + var(--x, 10%) * .6); animation: tl-tw 3.4s ease-in-out var(--dl, 0s) infinite; }
@keyframes tl-tw { 0%, 100% { opacity: .1; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(35deg); } }

/* 12 sliding candy stripes */
#tl[data-tl-cstyle="stripes"] .home-compare { background: repeating-linear-gradient(135deg, rgba(251, 205, 180, .42) 0 18px, rgba(190, 228, 206, .42) 18px 36px), var(--card); background-size: 51px 51px, auto; border-color: rgba(60, 50, 30, .08); animation: tl-slide 4s linear infinite; }
@keyframes tl-slide { to { background-position: 51px 0, 0 0; } }

html[data-theme="dark"] #tl:is([data-tl-cstyle="hearts"], [data-tl-cstyle="venn"], [data-tl-cstyle="split"], [data-tl-cstyle="pulse"], [data-tl-cstyle="paper"], [data-tl-cstyle="glowborder"], [data-tl-cstyle="center"], [data-tl-cstyle="duo"], [data-tl-cstyle="sparkle"], [data-tl-cstyle="stripes"]) .home-compare { background-color: rgb(24, 38, 31); }
html[data-theme="dark"] #tl[data-tl-cstyle="glowborder"] .home-compare { background: linear-gradient(rgb(24, 38, 31), rgb(24, 38, 31)) padding-box, conic-gradient(from var(--tl-ang), rgb(95, 154, 124), rgb(236, 160, 120), rgb(160, 200, 225), rgb(200, 180, 225), rgb(95, 154, 124)) border-box; }
html[data-theme="dark"] #tl:is([data-tl-cstyle="hearts"], [data-tl-cstyle="split"], [data-tl-cstyle="paper"], [data-tl-cstyle="center"], [data-tl-cstyle="duo"], [data-tl-cstyle="sparkle"]) .home-compare { background-image: none; }
#tl.tl-cflash .home-compare { outline: 4px solid rgba(var(--tl-ar), .5); outline-offset: 5px; transition: outline-color .9s ease-out, outline-offset .9s ease-out; }
@media (prefers-reduced-motion: reduce) { #tl .home-compare, #tl .tl-cmp-fx i, #tl .tl-cmp-fx::before, #tl .tl-cmp-fx::after, #tl .tl-cmp-ico svg, #tl .tl-duo__h { animation: none !important; } }
@media (max-width: 700px) { #tl .tl-cmp-duo { display: none !important; } #tl .home-compare { gap: 14px; } }

/* the hero stays above the tests section (its bottom shadow keeps falling onto it) — on the real homepage too */
.hero--home { position: relative; z-index: 2; }