/* =========================================================
   Fitxlink — sections after the hero
   Shares tokens and motion identity with styles.css:
   signature curve var(--ease), spring cubic-bezier(.34,1.56,.64,1),
   durations --t-fast / --t-std / --t-slow.
   ========================================================= */

:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }

.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; transition: top var(--t-fast) var(--ease); }
.skip:focus { top: 16px; }

/* ---------- buttons ---------- */
.btn-primary, .btn-light, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; border-radius: 999px; font-size: 16px; font-weight: 600; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-std) var(--ease), background-color var(--t-fast) ease;
  touch-action: manipulation;
}
.btn-primary { padding: 0 8px 0 26px; color: #fff; background: linear-gradient(180deg, #6A80FF, #3F57EC); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -12px rgba(63,87,236,.8); }
.btn-primary .arrow { width: 40px; height: 40px; color: var(--blue); }
.btn-light { padding: 0 8px 0 26px; background: #fff; color: var(--ink); box-shadow: 0 14px 30px -14px rgba(0,0,0,.35); }
.btn-light .arrow { width: 40px; height: 40px; background: var(--ink); color: #fff; }
.btn-ghost { padding: 0 26px; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-primary:hover, .btn-light:hover { transform: translateY(-2px); }
.btn-primary:active, .btn-light:active, .btn-ghost:active, .btn-dark:active { transform: scale(.97); }

/* ---------- headings that rise word by word ---------- */
.js [data-split] .sw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin: 0 -.02em -.1em; }
.js [data-split] .sw > span { display: inline-block; transform: translateY(110%); transition: transform var(--t-slow) var(--ease); transition-delay: calc(var(--w) * 45ms); }
.js [data-split].in .sw > span { transform: none; }

/* ---------- marquee strip ---------- */
.strip { padding: 0 0 110px; }
.strip-label { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 12px; padding-right: 12px; flex: none; list-style: none; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { display: flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 15px; white-space: nowrap; box-shadow: 0 10px 24px -18px var(--shadow); }
.marquee-track .ic { width: 20px; height: 20px; color: var(--muted); }

/* ---------- before / after ---------- */
.compare { background: var(--bg-2); padding-top: 40px; }
.cmp { max-width: 820px; margin: 0 auto; padding: 14px; border-radius: 34px; background: var(--surface); box-shadow: 0 30px 60px -40px var(--shadow); }
.cmp-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--surface-2); }
.cmp-switch button { position: relative; z-index: 1; height: 50px; border: 0; background: none; border-radius: 999px; cursor: pointer; font: 600 15px Inter, sans-serif; color: var(--muted); transition: color var(--t-std) ease; }
.cmp-switch button[aria-selected="true"] { color: var(--text); }
.cmp-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--surface); box-shadow: 0 6px 16px -8px var(--shadow); transition: transform var(--t-std) var(--spring), background-color var(--t-std) ease; }
.cmp[data-state="after"] .cmp-pill { transform: translateX(100%); }
.cmp-stage { position: relative; height: 400px; margin-top: 14px; border-radius: 26px; overflow: hidden; background: var(--soft); }
.cmp-before, .cmp-after { list-style: none; position: absolute; inset: 0; }
.cmp-before li {
  position: absolute; max-width: 44%; padding: 16px 18px; border-radius: 6px;
  background: var(--note, #FFF3B8); color: #3D3415; font: 600 16px/1.35 Manrope, sans-serif;
  box-shadow: 0 14px 24px -14px rgba(60,45,0,.45);
  transform: rotate(var(--r)); opacity: 1;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-std) ease;
  transition-delay: calc(var(--i) * 50ms);
}
.cmp-before li::before { content: ""; position: absolute; top: -8px; left: 50%; width: 46px; height: 16px; margin-left: -23px; background: rgba(255,255,255,.55); transform: rotate(-3deg); }
.cmp-before li:nth-child(1) { left: 5%;  top: 9%; }
.cmp-before li:nth-child(2) { left: 50%; top: 6%;  --note: #FFD9D2; }
.cmp-before li:nth-child(3) { left: 12%; top: 41%; --note: #D9F2E3; }
.cmp-before li:nth-child(4) { left: 53%; top: 44%; }
.cmp-before li:nth-child(5) { left: 24%; top: 72%; --note: #DCE4FF; }
.cmp[data-state="after"] .cmp-before li { opacity: 0; transform: translateY(60px) rotate(calc(var(--r) * 3)) scale(.86); transition-duration: var(--t-std); }
.cmp-after { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 26px; }
.cmp-after li {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px;
  background: var(--surface); font-weight: 600; font-size: 16px; box-shadow: 0 10px 24px -20px var(--shadow);
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity var(--t-std) ease, transform var(--t-slow) var(--ease);
}
.cmp[data-state="after"] .cmp-after li { opacity: 1; transform: none; transition-delay: calc(180ms + var(--i) * 60ms); }
.ok { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(73,99,244,.12); color: var(--blue); }
.ok .ic { width: 17px; height: 17px; stroke-width: 2.4; }

/* ---------- how it works ---------- */
.how { background: var(--soft); }
.steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps-line { position: absolute; z-index: 0; top: 117px; left: 16%; right: 16%; height: 2px; border-radius: 2px; background: var(--line); }
.steps-line i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8EA2FF, var(--blue)); transform-origin: left; transform: scaleX(var(--prog, 0)); }
.step { position: relative; z-index: 1; padding: 22px 22px 30px; border-radius: 30px; background: var(--surface); box-shadow: 0 20px 44px -34px var(--shadow); }
.step-vis { position: relative; height: 190px; margin-bottom: 24px; border-radius: 22px; background: var(--soft); overflow: hidden; display: grid; place-items: center; }
.step-n { font: 800 13px Manrope, sans-serif; letter-spacing: .14em; color: var(--muted); }
.step h3 { font-family: Manrope, sans-serif; font-size: 22px; letter-spacing: -.03em; margin-top: 8px; }
.step p { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin-top: 8px; }
/* 01 — form filling */
.v-setup { align-content: center; gap: 12px; }
.v-setup i { position: relative; display: block; width: 190px; height: 14px; border-radius: 8px; background: #E5E5E5; overflow: hidden; }
.v-setup i:nth-child(2) { width: 150px; } .v-setup i:nth-child(3) { width: 170px; }
.v-setup i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #8EA2FF, var(--blue)); transform-origin: left; transform: scaleX(0); animation: fill 3.6s var(--ease) infinite; }
.v-setup i:nth-child(2)::after { animation-delay: .25s; } .v-setup i:nth-child(3)::after { animation-delay: .5s; }
.v-ok { position: absolute; right: 26px; bottom: 22px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #22C55E; color: #fff; animation: okPop 3.6s var(--spring) infinite; }
.v-ok .ic { width: 20px; height: 20px; stroke-width: 2.6; }
/* 02 — members arriving */
.v-members { grid-auto-flow: column; justify-content: center; align-items: center; }
.v-members i { width: 54px; height: 54px; margin-left: -14px; border-radius: 50%; border: 3px solid var(--surface); background: var(--c); color: #fff; display: grid; place-items: center; font: 700 17px Manrope, sans-serif; font-style: normal; animation: slideIn 3.6s var(--ease) infinite; }
.v-members i:nth-child(2) { animation-delay: .12s; } .v-members i:nth-child(3) { animation-delay: .24s; } .v-members i:nth-child(4) { animation-delay: .36s; }
.v-members b { position: absolute; top: 24px; right: 22px; padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--blue); font-size: 13px; box-shadow: 0 8px 18px -12px var(--shadow); animation: okPop 3.6s var(--spring) infinite .3s; }
/* 03 — access granted */
.v-access { gap: 14px; align-content: center; }
.v-qr { position: relative; width: 104px; height: 104px; padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: 0 12px 26px -18px var(--shadow); animation: qrOk 3.6s ease infinite; }
.v-qr .qr { display: block; width: 100%; height: 100%; fill: var(--text); }
.v-scan { position: absolute; left: 10px; right: 10px; top: 12px; height: 3px; border-radius: 3px; background: var(--blue); box-shadow: 0 0 14px 4px rgba(73,99,244,.45); animation: vScan 3.6s ease-in-out infinite; }
.v-qr .c { position: absolute; width: 16px; height: 16px; border: 3px solid var(--blue); }
.v-qr .tl { top: -4px; left: -4px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.v-qr .tr { top: -4px; right: -4px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.v-qr .bl { bottom: -4px; left: -4px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.v-qr .br { bottom: -4px; right: -4px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.v-qr .c { animation: qrCorners 3.6s var(--ease) infinite; }
.v-chip { padding: 7px 14px; border-radius: 999px; background: #DCFCE7; color: #15803D; font-size: 13px; font-weight: 600; animation: granted 3.6s var(--ease) infinite; }
.js .step:not(.in) *, .js .step:not(.in) *::after { animation-play-state: paused; }

/* ---------- why fitxlink (always a dark band) ---------- */
.why {
  --text: #F5F5F5; --muted: #A3A3A3; --surface: #161616; --line: #2A2A2A;
  color: var(--text);
  background: radial-gradient(55% 65% at 76% 50%, rgba(255,255,255,.05), transparent 70%), #0A0A0A;
  overflow: hidden;
}
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.why .sec-head, .why-copy { text-align: left; }
.why-copy h2 { font-family: Manrope, sans-serif; font-weight: 700; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -.045em; }
.why-copy .lead { margin-left: 0; }
.why-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; margin-top: 40px; }
.why-list li { display: flex; gap: 14px; }
.why-list h3 { font-family: Manrope, sans-serif; font-size: 17px; letter-spacing: -.02em; }
.why-list p { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-top: 4px; }
.mini-tile.glow { color: #fff; background: radial-gradient(120% 90% at 30% 12%, #3A3A3C 0%, #222224 55%, #161618 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.08); }

.orbit-wrap { display: grid; place-items: center; }
.orbit { --R: 215px; position: relative; width: min(540px, 100%); aspect-ratio: 1; }
/* centred with `translate` (applied after `rotate`) so the spin stays on the ring's own centre */
.orbit-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); translate: -50% -50%; }
.orbit-ring.r1 { width: 40%; height: 40%; }
.orbit-ring.r2 { width: 80%; height: 80%; border-style: dashed; border-color: rgba(255,255,255,.14); animation: spin 90s linear infinite; }
.orbit-ring.r3 { width: 100%; height: 100%; }
/* little comets riding the rings */
.orbit-ring.r1::after, .orbit-ring.r3::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #E0EE0F; box-shadow: 0 0 14px 4px rgba(224,238,15,.55); }
.orbit-ring.r3::after { background: #B58BFF; box-shadow: 0 0 14px 4px rgba(181,139,255,.55); }
.orbit-ring.r1 { animation: spin 9s linear infinite; }
.orbit-ring.r3 { animation: spin 24s linear infinite reverse; }
.orbit-core {
  position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 36px;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 30% 12%, #4A4A4C 0%, #1C1C1E 45%, #0B0B0C 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.3), inset 0 -8px 18px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1), 0 0 60px 6px rgba(255,255,255,.08);
  animation: breathe 4s ease-in-out infinite;
}
.core-mark { width: 64px; height: 64px; overflow: hidden; }
.core-mark img { width: auto; height: 64px; max-width: none; filter: brightness(0) invert(1); }
.orbit-items { list-style: none; position: absolute; inset: 0; animation: spin 48s linear infinite; }
.orbit-items li { position: absolute; left: 50%; top: 50%; transform: rotate(calc(var(--k) * 60deg)) translateX(var(--R)) rotate(calc(var(--k) * -60deg)); }
.orbit-items span {
  position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 16px 10px 12px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: spin 48s linear infinite reverse;
}
.orbit-items .ic { width: 18px; height: 18px; color: #4963F4; }
.orbit-items li:nth-child(4n+2) .ic { color: #B58BFF; }
.orbit-items li:nth-child(4n+3) .ic { color: #E0EE0F; }
.orbit-items li:nth-child(4n+4) .ic { color: #E55A32; }

/* ---------- fitness professionals (photo + glass cards rail) ---------- */
.pros { background: var(--surface); overflow: hidden; }
.pros .sec-head { margin-bottom: 48px; }
/* rail is moved by JS: slow auto-drift + drag/flick with momentum (see main.js) */
.pros-rail { display: flex; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pros-rail.dragging { cursor: grabbing; }
.pros-rail.dragging .pro-card { pointer-events: none; }
.pros-track { display: flex; gap: 14px; padding-right: 14px; flex: none; will-change: transform; }
.pros-rail img { -webkit-user-drag: none; }
.pro-card { flex: none; width: 380px; height: 430px; border-radius: 30px; overflow: hidden; position: relative; }
.pro-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.pro-photo:hover img { transform: scale(1.04); }
/* trainer ID cards: calm, few fields, one action */
.id-card {
  --ink-c: #0B0B0C; --sub-c: rgba(0,0,0,.62); --chip: rgba(0,0,0,.08);
  display: flex; flex-direction: column; padding: 30px 28px 28px; color: var(--ink-c); background: var(--c);
}
.id-blue   { --c: #4963F4; --ink-c: #fff; --sub-c: rgba(255,255,255,.75); --chip: rgba(255,255,255,.16); }
.id-lilac  { --c: #B58BFF; --ink-c: #fff; --sub-c: rgba(255,255,255,.82); --chip: rgba(255,255,255,.2); }
.id-lime   { --c: #E0EE0F; }
.id-orange { --c: #E55A32; --ink-c: #fff; --sub-c: rgba(255,255,255,.78); --chip: rgba(255,255,255,.16); }
.id-slot { width: 46px; height: 8px; margin: -10px auto 26px; border-radius: 999px; background: rgba(0,0,0,.18); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.id-card h3 { font: 700 32px/1.02 Manrope, sans-serif; letter-spacing: -.04em; }
.id-role { margin-top: 12px; font-size: 15px; font-weight: 600; }
.id-bio { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--sub-c); }
.id-facts { display: flex; gap: 8px; margin-top: auto; }
.id-facts div { flex: 1; padding: 10px 14px; border-radius: 16px; background: var(--chip); }
.id-facts dt { font-size: 12.5px; color: var(--sub-c); }
.id-facts dd { font: 700 19px Manrope, sans-serif; letter-spacing: -.02em; }
.id-ig {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; height: 44px; border-radius: 999px;
  background: var(--ink-c); color: var(--c); font-weight: 600; font-size: 14.5px;
  transition: transform var(--t-fast) var(--ease);
}
.id-ig .ic { width: 18px; height: 18px; }
.id-ig:hover { transform: translateY(-2px); }

.pros-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 48px; }
.pros-chips li { padding: 8px 16px; border-radius: 999px; background: var(--surface-2); font-size: 14.5px; font-weight: 500; color: var(--muted); }
.pros-quotes { position: relative; display: grid; max-width: 640px; margin: 34px auto 0; text-align: center; }
.pq { grid-area: 1 / 1; opacity: 0; translate: 0 10px; transition: opacity var(--t-std) ease, translate var(--t-std) var(--ease); pointer-events: none; }
.pq.on { opacity: 1; translate: none; pointer-events: auto; }
.pq blockquote { font-size: 19px; line-height: 1.5; font-weight: 500; }
.pq figcaption { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 600; font-size: 15px; }
.pq figcaption span { font-weight: 400; color: var(--muted); }
.pq figcaption i { width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 14px Manrope, sans-serif; font-style: normal; }
/* ---------- pricing ---------- */
.pricing { background: var(--surface); }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan-card {
  position: relative; padding: 26px; border-radius: 28px; background: var(--soft); border: 2px solid transparent;
  transition: transform var(--t-std) var(--spring), border-color var(--t-std) ease, box-shadow var(--t-std) var(--ease), opacity var(--t-std) ease, filter var(--t-std) ease;
}
.plan-card.is-rec { border-color: var(--blue); background: var(--surface); transform: translateY(-8px); box-shadow: 0 30px 50px -30px rgba(0,0,0,.25); }
.plan-badge { position: absolute; top: 20px; right: 20px; padding: 5px 11px; border-radius: 999px; background: #B58BFF; color: #fff; font-size: 12px; font-weight: 600; }
.plan-card h3 { font-family: Manrope, sans-serif; font-size: 20px; letter-spacing: -.02em; }
.plan-range { color: var(--muted); font-size: 14px; margin-top: 4px; }
.plan-price { margin: 26px 0 18px; display: flex; align-items: baseline; gap: 4px; }
.plan-price b { font: 800 46px/1 Manrope, sans-serif; letter-spacing: -.04em; }
.plan-price b.sm { font-size: 28px; }
.plan-price span { color: var(--muted); font-weight: 600; }
.pricing-country { margin: -24px auto 36px; max-width: 560px; text-align: center; }
.pricing-country[hidden] { display: none; }
.pricing-country-control { position: relative; width: 280px; max-width: 100%; margin-inline: auto; }
.pricing-country-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pricing-country select { appearance: none; width: 100%; min-height: 44px; padding: 11px 20px; padding-inline-end: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--text); font: 600 14px/20px Inter, sans-serif; cursor: pointer; }
.pricing-country select:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pricing-country-chevron { position: absolute; inset-inline-end: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.pricing-country-chevron svg { display: block; width: 100%; height: 100%; }
.pricing-country-title { font: 600 14px/1.5 Inter, sans-serif; }
.pricing-country-note { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.pricing-country-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
#estCta[aria-disabled="true"] { opacity: .6; cursor: wait; }
.plan-card[role="button"] { cursor: pointer; }
.plan-card[role="button"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.field-top #memberCount { width: 112px; flex-shrink: 0; min-height: 40px; border: 0; border-radius: 24px; padding: 8px 10px; background: var(--blue); color: white; font: 700 16px Manrope, sans-serif; text-align: center; }
.field-top #memberCount:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.pricing-contact { border: 0; background: transparent; color: var(--blue); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pricing-sales-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pricing-sales-badge { padding: 6px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 600 12px/20px Inter, sans-serif; }
.pricing-copy, .fx-region-switcher { padding: 10px 16px; min-height: 44px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--text); font: 600 14px/20px Inter, sans-serif; cursor: pointer; }
.pricing-copy:disabled, .pricing-country select:disabled { opacity: .6; cursor: wait; }
.pricing-copy-status { display: grid; gap: 8px; margin-top: 16px; color: var(--muted); font: 400 12px/1.6 Inter, sans-serif; }
.pricing-copy-status:empty { display: none; }
.pricing-copy-status input { width: 100%; min-width: 0; min-height: 44px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); color: var(--text); font: 400 13px/20px Inter, sans-serif; text-overflow: ellipsis; }
.pricing-copy-status input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pricing-presentation { display: flex; width: fit-content; max-width: 100%; min-height: 44px; margin: 28px auto 0; white-space: normal; text-align: start; }
.pricing-presentation .arrow { flex-shrink: 0; }
.fx-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; margin: auto; padding: 32px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); color: var(--text); box-shadow: 0 28px 100px rgba(0,0,0,.25); }
.fx-dialog::backdrop { background: rgba(0,0,0,.48); backdrop-filter: blur(8px); }
.fx-dialog h2 { max-width: calc(100% - 36px); font: 800 30px/1.15 Manrope, sans-serif; letter-spacing: -.035em; }
.fx-dialog-subtitle { margin: 12px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.fx-dialog-close { position: absolute; top: 18px; inset-inline-end: 18px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 26px; cursor: pointer; }
.fx-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.fx-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
.fx-form label:has(textarea), .fx-form-status, .fx-form > button { grid-column: 1 / -1; }
.fx-form input, .fx-form textarea { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); color: var(--text); font: 400 15px/1.5 Inter, sans-serif; }
.fx-form input:focus-visible, .fx-form textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fx-form-status { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.fx-dialog .btn-primary { justify-content: center; border: 0; width: 100%; cursor: pointer; }
.fx-region-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.fx-region-choices button { position: relative; padding: 20px 14px; border: 2px solid var(--line); border-radius: 20px; background: var(--soft); color: var(--text); text-align: start; cursor: pointer; }
.fx-region-choices button[aria-checked="true"] { border-color: var(--blue); }
.fx-region-choices b, .fx-region-choices span, .fx-region-choices small, .fx-region-choices em { display: block; }
.fx-region-choices b { font: 700 18px Manrope, sans-serif; }
.fx-region-choices span { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.fx-region-choices small { margin-top: 12px; color: var(--blue); font-size: 12px; }
.fx-region-choices em { margin-top: 10px; font-size: 11px; font-style: normal; color: var(--blue); }
.fx-remember { display: flex; align-items: center; gap: 10px; margin: 24px 0; color: var(--muted); font-size: 13px; }
.fx-remember input { width: 18px; height: 18px; accent-color: var(--blue); }
body:has(.fx-dialog[open]) { overflow: hidden; }
@media (max-width: 520px) { .fx-dialog { padding: 24px; border-radius: 24px; } .fx-form { grid-template-columns: minmax(0,1fr); } .fx-dialog h2 { font-size: 26px; } }
.estimate dd { text-align: end; overflow-wrap: anywhere; }
.plan-note { padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.5; }

.calc { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 24px; }
.calc-in { padding: 34px; border-radius: 30px; background: var(--soft); }
.calc-in h3 { font-family: Manrope, sans-serif; font-size: 26px; letter-spacing: -.03em; }
.calc-sub { color: var(--muted); margin-top: 6px; line-height: 1.5; }
.field { margin-top: 28px; }
.field-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.field label, .field-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.field-top label { margin: 0; }
.field output { min-width: 64px; text-align: center; padding: 6px 14px; border-radius: 999px; background: var(--blue); color: #fff; font: 700 16px Manrope, sans-serif; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; cursor: pointer; background: linear-gradient(90deg, var(--blue) var(--pct, 22%), var(--surface-2) var(--pct, 22%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 6px 16px -4px rgba(63,87,236,.6); transition: transform var(--t-fast) var(--spring); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.range-l { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--muted); }
.seg { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.seg button { height: 44px; padding: 0 24px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 14.5px Inter, sans-serif; color: var(--muted); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 6px 14px -8px var(--shadow); }
.access { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.access button {
  display: flex; gap: 12px; text-align: left; padding: 18px; border-radius: 20px; cursor: pointer;
  background: var(--surface); border: 2px solid transparent; color: var(--text); font-family: Inter, sans-serif;
  transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.access button:active { transform: scale(.98); }
.access button[aria-checked="true"] { border-color: var(--blue); }
.access .ic { flex: none; color: var(--blue); }
.access b { display: block; font-size: 15px; margin-bottom: 4px; }
.access em { display: inline-block; font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; margin: 2px 0 8px; border-radius: 999px; background: #DCFCE7; color: #15803D; }
.access small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; }

.gate-opts { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows var(--t-std) var(--ease), opacity var(--t-std) ease, margin-top var(--t-std) var(--ease); }
.gate-opts.open { grid-template-rows: 1fr; margin-top: 18px; opacity: 1; }
.gate-in { overflow: hidden; }
.gate-in .access b { margin-bottom: 4px; }
.gate-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.estimate dl div[hidden] { display: none; }
.estimate { display: flex; flex-direction: column; padding: 34px; border-radius: 30px; background: var(--ink); color: #fff; box-shadow: 0 30px 60px -36px rgba(0,0,0,.7); }
.est-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.est-plan { font: 800 46px/1.1 Manrope, sans-serif; letter-spacing: -.04em; margin-top: 10px; }
.est-access { color: rgba(255,255,255,.65); margin-top: 4px; }
.estimate dl { margin: 26px 0; }
.estimate dl div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 15px; }
.estimate dt { color: rgba(255,255,255,.65); }
.estimate dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.estimate .btn-primary { margin-top: auto; justify-content: space-between; background: var(--blue); box-shadow: none; }
.est-note { margin-top: 12px; text-align: center; font-size: 13px; color: rgba(255,255,255,.55); }
.bump { animation: bump .45s var(--spring); }

/* ---------- FAQ ---------- */
.faq { background: var(--bg-2); }
.faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.faq-side { position: sticky; top: 120px; }
.faq-side h2 { font-family: Manrope, sans-serif; font-weight: 700; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -.045em; }
.faq-side .lead { margin-left: 0; }
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; padding: 20px; border-radius: 24px; background: var(--surface); box-shadow: 0 18px 40px -32px var(--shadow); }
.ask div { flex: 1; min-width: 160px; }
.ask b { font-size: 16px; }
.ask p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.faq-item { margin-bottom: 12px; border-radius: 24px; background: var(--surface); box-shadow: 0 14px 34px -30px var(--shadow); transition: box-shadow var(--t-std) var(--ease), opacity var(--t-std) ease, transform var(--t-slow) var(--ease), filter var(--t-std) ease; }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--text); font: 700 17.5px/1.35 Manrope, sans-serif; letter-spacing: -.01em; border-radius: 24px; }
.faq-ic { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); transition: transform var(--t-std) var(--spring), background-color var(--t-fast) ease; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: 2px; background: var(--text); }
.faq-ic::after { transform: rotate(90deg); }
.faq-item.open .faq-ic { transform: rotate(135deg); background: var(--text); }
.faq-item.open .faq-ic::before, .faq-item.open .faq-ic::after { background: var(--surface); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-std) var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 24px 24px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 620px; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }

/* ---------- member app download ---------- */
.app { background: var(--bg-2); padding-top: 40px; }
.app-card { display: grid; grid-template-columns: 1fr 1.32fr; align-items: center; gap: 48px; padding: 56px; border-radius: 40px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.app-name { display: flex; align-items: center; gap: 12px; font: 700 20px Manrope, sans-serif; letter-spacing: -.02em; }
.app-icon { position: relative; flex: none; width: 46px; height: 46px; border-radius: 13px; overflow: hidden; background: radial-gradient(120% 90% at 30% 12%, #4A4A4C 0%, #1C1C1E 45%, #0B0B0C 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -8px rgba(0,0,0,.5); }
/* only the mark of the logo (its first ~30% of width), in white */
.app-icon img { position: absolute; left: 10px; top: 10px; height: 26px; width: auto; max-width: none; clip-path: inset(0 70% 0 0); filter: brightness(0) invert(1); }
.app-copy h2 { margin-top: 26px; font: 700 clamp(34px, 3.7vw, 54px)/1.04 Manrope, sans-serif; letter-spacing: -.045em; }
.app-os { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-weight: 600; font-size: 18px; }
.app-os svg { width: 22px; height: 22px; }
.app-desc { margin-top: 18px; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.store { display: inline-flex; align-items: center; gap: 10px; width: 176px; height: 56px; padding: 0 16px; border-radius: 14px; background: #0B0B0C; color: #fff; border: 0; cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) ease; }
.store:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(0,0,0,.6); }
.store:active { transform: scale(.97); }
.store svg { width: 24px; height: 24px; flex: none; }
.store span { display: flex; flex-direction: column; font: 600 18px/1.05 Inter, sans-serif; letter-spacing: -.01em; }
.store small { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.qr-pop { position: relative; }
.qr-btn { width: 56px !important; padding: 0; justify-content: center; }
.qr-btn .ic { width: 26px; height: 26px; color: #fff; }
.qr-panel {
  position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 16px); width: 264px; padding: 18px 18px 16px; border-radius: 26px;
  background: var(--surface); box-shadow: 0 30px 60px -24px rgba(0,0,0,.35), 0 0 0 1px var(--line); text-align: center;
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(.94); transform-origin: 50% 100%;
  transition: opacity var(--t-fast) ease, transform var(--t-std) var(--spring), visibility 0s var(--t-std);
}
.qr-panel::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: var(--surface); transform: rotate(45deg); box-shadow: 1px 1px 0 var(--line); }
.qr-pop:hover .qr-panel, .qr-pop.open .qr-panel, .qr-pop:focus-within .qr-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity var(--t-fast) ease, transform var(--t-std) var(--spring); }
.qr-panel img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px #EDEDED; }
.qr-panel > p { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.app-media { position: relative; aspect-ratio: 3 / 2; border-radius: 30px; overflow: hidden; background: #0B0B0C; box-shadow: 0 30px 60px -36px rgba(0,0,0,.5); }
.app-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- footer ---------- */
.footer { position: relative; z-index: 5; background: var(--bg-2); padding-top: 80px; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
/* footer logo: twice the size, in a soft (not washed-out) grey */
.foot-brand img { height: 68px; width: auto; filter: grayscale(1) brightness(.72); }
[data-theme="dark"] .foot-brand img { filter: grayscale(1) brightness(1.9); }
.foot-brand p { color: var(--muted); margin: 16px 0 20px; max-width: 330px; line-height: 1.55; }
.insta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 14px; box-shadow: 0 10px 24px -18px var(--shadow); transition: transform var(--t-fast) var(--ease); }
.insta:hover { transform: translateY(-2px); }
.insta .ic { width: 19px; height: 19px; color: #E1306C; }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col b { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.foot-col a { font-weight: 500; width: fit-content; transition: color var(--t-fast) ease; }
.foot-col a:hover, .to-top:hover { color: var(--blue); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 60px; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot-word {
  text-align: center; font: 800 clamp(90px, 21vw, 330px)/.78 Manrope, sans-serif; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px var(--line);
  background: linear-gradient(180deg, var(--surface-2), transparent 85%); -webkit-background-clip: text; background-clip: text;
  margin: 10px 0 -2.5vw; user-select: none;
}

/* ---------- keyframes ---------- */
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes breathe { 50% { box-shadow: inset 0 2px 1px rgba(255,255,255,.3), inset 0 -8px 18px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1), 0 0 90px 16px rgba(255,255,255,.14); } }
@keyframes fill { 0% { transform: scaleX(0); } 35%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes okPop { 0%, 40% { transform: scale(0); } 52% { transform: scale(1.15); } 58%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes slideIn { 0% { transform: translateX(-40px); opacity: 0; } 20%, 85% { transform: none; opacity: 1; } 100% { transform: translateX(20px); opacity: 0; } }
@keyframes bump { 40% { transform: scale(1.08); } }
@keyframes vScan { 0%, 8% { top: 12px; opacity: 1; } 42% { top: calc(100% - 15px); opacity: 1; } 48%, 100% { top: calc(100% - 15px); opacity: 0; } }
@keyframes qrOk { 0%, 44% { box-shadow: 0 12px 26px -18px var(--shadow); } 50%, 82% { box-shadow: 0 0 0 4px rgba(34,197,94,.35), 0 12px 26px -18px var(--shadow); } }
@keyframes qrCorners { 0%, 44% { border-color: var(--blue); transform: scale(1); } 50% { border-color: #22C55E; transform: scale(1.15); } 56%, 82% { border-color: #22C55E; transform: scale(1); } 100% { border-color: var(--blue); } }

/* ---------- dark theme specifics ---------- */
[data-theme="dark"] .cmp-before li { --note: #3B3418; color: #F5E9B8; box-shadow: 0 14px 24px -14px #000; }
[data-theme="dark"] .cmp-before li:nth-child(2) { --note: #3E2420; color: #FFD9D2; }
[data-theme="dark"] .cmp-before li:nth-child(3) { --note: #1D3427; color: #D9F2E3; }
[data-theme="dark"] .cmp-before li:nth-child(5) { --note: #202A4A; color: #DCE4FF; }
[data-theme="dark"] .cmp-before li::before { background: rgba(255,255,255,.15); }
[data-theme="dark"] .v-chip, [data-theme="dark"] .access em { background: rgba(34,197,94,.15); color: #4ADE80; }
[data-theme="dark"] .estimate { background: #141414; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
[data-theme="dark"] .v-setup i { background: var(--surface-2); }
[data-theme="dark"] .why { background: radial-gradient(55% 65% at 76% 50%, rgba(255,255,255,.05), transparent 70%), #050505; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .steps-line { display: none; }
  .why-grid { grid-template-columns: 1fr; gap: 20px; }
  .orbit { --R: 170px; width: min(440px, 100%); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .calc { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-side { position: static; }
  .app-card { grid-template-columns: 1fr; padding: 40px; gap: 36px; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .strip { padding-bottom: 72px; }
  .cmp { padding: 10px; border-radius: 28px; }
  .cmp-switch button { font-size: 14px; height: 46px; }
  .cmp-stage { height: 440px; }
  .cmp-before li { max-width: 70%; font-size: 15px; }
  .cmp-before li:nth-child(1) { left: 5%;  top: 5%; }
  .cmp-before li:nth-child(2) { left: 26%; top: 23%; }
  .cmp-before li:nth-child(3) { left: 6%;  top: 43%; }
  .cmp-before li:nth-child(4) { left: 28%; top: 62%; }
  .cmp-before li:nth-child(5) { left: 8%;  top: 80%; }
  .cmp-after { padding: 14px; }
  .cmp-after li { font-size: 14.5px; padding: 12px 14px; }
  .why-list { grid-template-columns: 1fr; }
  .orbit { --R: 120px; width: 300px; }
  .orbit-core { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 28px; }
  .core-mark { width: 46px; height: 46px; } .core-mark img { height: 46px; }
  .orbit-items span { font-size: 12px; padding: 7px 11px 7px 9px; }
  .orbit-items .ic { width: 15px; height: 15px; }
  .pro-card { width: 290px; height: 360px; border-radius: 24px; }
  .id-card { padding: 24px 22px 22px; }
  .id-card h3 { font-size: 27px; }
  .pq blockquote { font-size: 17px; }
  .plans { gap: 10px; }
  .plan-card { padding: 16px 14px; border-radius: 22px; }
  .plan-card.is-rec { transform: none; }
  .plan-card h3 { font-size: 17px; }
  .plan-range { font-size: 12.5px; }
  .plan-price { margin: 14px 0 10px; }
  .plan-price b { font-size: 30px; }
  .plan-price b.sm { font-size: 20px; line-height: 30px; }
  .plan-note { font-size: 12.5px; padding-top: 10px; }
  .plan-badge { position: static; display: inline-block; margin-bottom: 8px; font-size: 11.5px; }
  .calc-in, .estimate { padding: 24px; }
  .access { grid-template-columns: 1fr; }
  .app-card { padding: 24px; border-radius: 30px; }
  .stores { gap: 10px; }
  .store { width: calc(50% - 5px); min-width: 0; padding: 0 10px; gap: 8px; justify-content: center; }
  .store svg { width: 21px; height: 21px; }
  .store span { font-size: 15px; white-space: nowrap; }
  .store small { font-size: 10px; }
  .qr-pop { display: none; }  /* on a phone you are already on the device: store buttons only */
  .foot-bottom { flex-direction: column; }
}

/* ---------- community: original section typography, CTA and reveal motion ---------- */
.community { background: var(--surface); padding-block: 112px; }
.community-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); align-items: center; gap: 80px; }
.community-copy { min-width: 0; }
.community-tag { margin-bottom: 20px; color: var(--blue); font: 600 12px/1.5 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.community .sec-head { margin: 0; text-align: start; }
.community .sec-head h2 { overflow-wrap: anywhere; }
.community-accent { color: var(--blue); }
.community .lead { margin-inline: 0; }
.community-cta { margin-top: 28px; max-width: 100%; height: auto; min-height: 56px; padding: 8px 8px 8px 26px; white-space: normal; text-align: start; font: 600 16px/1.5 Inter, sans-serif; }
.community-cta > .ic { width: 20px; height: 20px; flex-shrink: 0; }
.community-cta > .arrow { flex-shrink: 0; }
.community-media { width: 100%; max-width: 560px; min-width: 0; margin-inline: auto; container-type: inline-size; border: 1px solid var(--line); border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 24px 48px -32px var(--shadow); }
.community-media iframe { display: block; width: 100%; height: calc(200px + 66.7cqw); border: 0; background: #fff; color-scheme: light; }
@media (max-width: 1000px) {
  .community-grid { gap: 40px; }
}
@media (max-width: 760px) {
  .community { padding-block: 88px; }
  .community-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .community-copy, .community .sec-head { text-align: center; }
  .community .lead { margin-inline: auto; }
  .community-cta { margin-top: 24px; }
  .community-media { border-radius: 24px; }
}

/* Arabic (RTL): the looping rails and the slider keep their left-to-right mechanics, the text inside stays RTL */
[dir="rtl"] .marquee, [dir="rtl"] .pros-rail, [dir="rtl"] input[type="range"] { direction: ltr; }
[dir="rtl"] .marquee li, [dir="rtl"] .pros-track > * { direction: rtl; }

[hidden]{display:none!important}
.id-ig[aria-disabled="true"]{opacity:.6;cursor:default}

.fx-preview-banner{position:fixed;z-index:999;bottom:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:12px 18px;border-radius:16px;background:#121827;color:white;font:13px/1.5 Inter,sans-serif;box-shadow:0 8px 30px #0003}
.fx-preview-banner a{color:#b7ccff;display:inline-block;margin-inline-start:12px}
.fx-preview-denied{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:32px;text-align:center}.fx-preview-denied a{color:var(--blue)}
section[id]{scroll-margin-top:110px}
@media(max-width:640px){section[id]{scroll-margin-top:96px}}