/* SELYVO website — concept E (3 Nov 2026): concept D, after Apple's way, with its sections in turn dark and light — one design for
   everyone, the bar following the section under it. Type: Plus Jakarta Sans (the app's face). */
:root {
  --bg: #FFFFFF; --bg-alt: #F4F7FA; --card: #FFFFFF; --fg: #071C3C; --fg-2: #536479; --fg-3: #8492A6; --line: #E1E8EF;
  --accent: #007C91; --accent-2: #009BB4; --accent-soft: #E3F4F8; --eyebrow: #C2560A;
  --cta: #FF8C1F; --cta-hover: #FFA04A; --cta-fg: #071C3C; --hl: #FF8C1F; --hl-glow: rgba(255, 140, 31, .2);
  --glass: rgba(255, 255, 255, .78); --shadow: 0 40px 80px -36px rgba(7, 28, 60, .38); --shadow-s: 0 14px 30px -18px rgba(7, 28, 60, .35);
  --frame-bar: #EEF2F6; --frame-line: #E1E8EF; --frame-url: #FFFFFF;
  --band: #071C3C; --band-fg: #F3F6FA; --band-fg2: #B6C4D6; --band-line: rgba(185, 228, 238, .24); --band-dot: #0B2346;
  --field: #FFFFFF; --field-line: #CFD9E3;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gn: 52px; --ln: 52px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--gn) + var(--ln) + 12px); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s, color .3s; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
img, video { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code, .mono { font-family: var(--mono); font-size: .92em; }
svg { flex: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); }
.wrap--wide { max-width: 1440px; }
.wrap--narrow { max-width: 900px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--cta); color: var(--cta-fg); padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 0; }

/* type, as large and as calm as Apple sets it */
.eyebrow-d { font-size: clamp(17px, 1.25vw, 21px); line-height: 1.3; font-weight: 700; color: var(--eyebrow); letter-spacing: -.005em; }
.d-hero { margin-top: 10px; font-size: clamp(50px, 8.6vw, 124px); line-height: 1.0; letter-spacing: -.048em; font-weight: 800; }
.d-h1 { margin-top: 10px; font-size: clamp(40px, 6.8vw, 96px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; }
.d-h2 { margin-top: 8px; font-size: clamp(36px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -.042em; font-weight: 800; }
.d-h3 { margin-top: 8px; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; }
.d-sub { margin-top: 18px; font-size: clamp(19px, 1.7vw, 27px); line-height: 1.38; letter-spacing: -.012em; font-weight: 600; color: var(--fg-2); }
.center .d-sub { margin-left: auto; margin-right: auto; max-width: 30em; }
.d-body { margin-top: 14px; color: var(--fg-2); }
.hint { margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg-3); }
.hint svg { width: 16px; height: 16px; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* buttons and links */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border: 0; border-radius: 999px; background: var(--cta); color: var(--cta-fg); font: 700 17px/1.2 var(--font); cursor: pointer; white-space: nowrap; transition: background-color .15s, transform .15s; }
.pill:hover { background: var(--cta-hover); text-decoration: none; }
.pill:active { transform: scale(.98); }
.pill--sm { min-height: 32px; padding: 6px 15px; font-size: 13.5px; }
.lk { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.lk::after { content: "›"; font-size: 1.25em; line-height: 1; margin-top: -2px; transition: transform .15s; }
.lk:hover { text-decoration: underline; }
.lk:hover::after { transform: translateX(2px); }
.lk--light { color: #8FE3F0; }
.ctas-d { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; margin-top: 30px; }
.ctas-d--left { justify-content: flex-start; }

/* the bar: thin, see-through, always there */
.gn { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--gn); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.gn__in { display: flex; align-items: center; gap: 22px; height: 100%; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 20px; width: auto; }
.gn__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); margin: 0 auto; font-size: 14px; font-weight: 600; }
.gn__links a { color: var(--fg); opacity: .78; padding: 6px 0; }
.gn__links a:hover { opacity: 1; text-decoration: none; }
.gn__links a[aria-current] { opacity: 1; color: var(--accent); }
.gn__tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.gn__links + .gn__tools { margin-left: 0; }
.themebtn { all: unset; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); cursor: pointer; }
.themebtn:hover { background: var(--bg-alt); }
.themebtn:focus-visible { outline: 3px solid var(--cta); outline-offset: 1px; }
.themebtn svg { width: 18px; height: 18px; }
.signin { font-size: 14px; font-weight: 600; color: var(--fg); }
.mm { display: none; }
.mm > summary { list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); }
.mm > summary::-webkit-details-marker { display: none; }
.mm > summary svg { width: 20px; height: 20px; }
.mm__panel { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--gn)); bottom: 0; z-index: 49; overflow: auto; background: var(--bg); padding: 26px max(22px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 28px; }
.mm__panel nav { display: flex; flex-direction: column; }
.mm__panel nav a { padding: 10px 0; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; color: var(--fg); }
.mm__panel nav a.mm__small { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-2); padding: 8px 0; }
.mm__panel nav a.mm__small:first-of-type { margin-top: 14px; }
.mm__panel nav a[aria-current] { color: var(--accent); }
.mm__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
@media (max-width: 1060px) { .gn__links, .gn .signin { display: none; } .mm { display: block; } .gn__tools, .gn__links + .gn__tools { margin-left: auto; } }
@media (max-width: 420px) { .gn__in { gap: 14px; } .brand img { height: 18px; } .d-hero, .d-h1, .d-h2 { -webkit-hyphens: auto; hyphens: auto; } }      /* a long word on a phone may break, with a hyphen, as the language does */
@media (max-width: 374px) { .gn__tools .pill--sm { display: none; } }
@media (max-width: 380px) { .d-h1 { font-size: 36px; } .d-h2 { font-size: 33px; } }      /* the smallest phones: room for the long words of German, Polish, Hungarian */
/* the language (3 Nov, 13:46): in the main bar beside Sign in — the globe and the country code the site shows; the 15 languages open
   under the bar, each the same page in that language. On a phone the bar keeps Get invited where both do not fit; the languages are
   in the menu as well (mixed site.js, fitBar) */
.gn__in { position: relative; }
.lsel > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 8px; border-radius: 999px; color: var(--fg); opacity: .78; font-size: 14px; font-weight: 600; white-space: nowrap; -webkit-user-select: none; user-select: none; transition: opacity .15s; }
.lsel > summary::-webkit-details-marker { display: none; }
.lsel > summary:hover, .lsel[open] > summary { opacity: 1; }
.lsel > summary svg { width: 17px; height: 17px; }
.lsel > summary .chev { width: 12px; height: 12px; transition: transform .2s; }
.lsel[open] > summary .chev { transform: rotate(180deg); }
.lsel__panel { position: absolute; z-index: 2; top: calc(100% + 6px); right: max(22px, env(safe-area-inset-right, 0px)); width: 540px; max-height: calc(100vh - var(--gn) - env(safe-area-inset-top, 0px) - 24px); max-height: calc(100dvh - var(--gn) - env(safe-area-inset-top, 0px) - 24px); overflow: auto; overscroll-behavior: contain; padding: 16px 12px 12px; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 70px -28px rgba(7, 28, 60, .42); animation: lsel-in .18s ease-out; }
@keyframes lsel-in { from { opacity: 0; transform: translateY(-6px); } }
.lsel__h { padding: 0 10px 8px; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.lsel__grid, .mm__panel .mm__lgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.lsel__grid a, .mm__panel .mm__lgrid a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 10px; color: var(--fg); font-size: 15px; line-height: 1.2; font-weight: 600; letter-spacing: 0; }
.lsel__grid a:hover, .mm__panel .mm__lgrid a:hover { background: var(--bg-alt); text-decoration: none; }
.lsel__grid .cc, .mm__lgrid .cc { flex: none; width: 24px; font: 600 12px/1 var(--mono); color: var(--fg-3); }
.lsel__grid .nm, .mm__lgrid .nm { min-width: 0; overflow-wrap: anywhere; }
.lsel__grid a[aria-current], .mm__panel .mm__lgrid a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.lsel__grid a[aria-current] .cc, .mm__lgrid a[aria-current] .cc { color: var(--accent); }
.lsel__grid .ck, .mm__lgrid .ck { width: 16px; height: 16px; margin-left: auto; }
.mm__langs { padding-top: 22px; border-top: 1px solid var(--line); }
.mm__langs .lsel__h { padding-left: 0; }
.mm__panel .mm__lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.mm__panel .mm__lgrid a { padding: 9px 0; border-radius: 0; }      /* in the menu as its other links: in line with them, the current one in the accent */
.mm__panel .mm__lgrid a:hover, .mm__panel .mm__lgrid a[aria-current] { background: none; color: var(--accent); }
.gn--dark .lsel > summary { color: #F2F5F9; }
.gn__in--nolang .gn__tools .lsel { display: none; }
.gn__links a { white-space: nowrap; }      /* a link never breaks onto two lines: where the bar is too narrow for a language's words, fitBar makes room */
.gn__in--snug { gap: 14px; }      /* the first room it makes on a desktop: the bar a little closer together */
.gn__in--snug .gn__links { gap: 16px; }
.gn__in--snug .gn__tools { gap: 8px; }
.gn__in--menu .gn__links, .gn__in--menu .signin { display: none; }      /* the last resort on a desktop: the links in the menu, as on a tablet */
.gn__in--menu .mm { display: block; }
.gn__in--menu .gn__tools { margin-left: auto; }
@media (max-width: 620px) { .lsel__panel { left: max(22px, env(safe-area-inset-left, 0px)); width: auto; } .lsel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gn__in--tight .gn__tools .pill--sm { display: none; }      /* where a language's Get invited does not fit beside the logo and the menu (mixed site.js) */      /* Get invited stays in the bar down to the smallest phones; there, in the menu */

/* a page's own bar, under the main one (as on a product page) */
.ln { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--gn)); z-index: 45; height: var(--ln); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.ln__in { display: flex; align-items: center; gap: 22px; height: 100%; }
.ln__name { font-size: 21px; font-weight: 800; letter-spacing: -.025em; color: var(--fg); }
.ln__name:hover { text-decoration: none; }
.ln__links { display: flex; gap: 24px; margin-left: auto; font-size: 13.5px; font-weight: 600; }
.ln__links a { color: var(--fg-2); }
.ln__links a:hover { color: var(--fg); text-decoration: none; }
.ln .pill--sm { margin-left: 4px; }
@media (max-width: 760px) { .ln__links { display: none; } .ln .pill--sm { margin-left: auto; } }

/* sections */
.sec-d { padding-top: clamp(84px, 11vw, 150px); padding-bottom: clamp(84px, 11vw, 150px); }
.sec-d--alt { background: var(--bg-alt); }
.sec-d--tiles { padding-top: 14px; padding-bottom: 14px; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; }
.head-row .d-sub { max-width: 28em; }

/* the hero: the statement, then the product rising into place as you scroll */
.hx { padding-top: clamp(56px, 9vh, 110px); overflow: hidden; }
.hx--page { padding-top: clamp(48px, 8vh, 96px); }
.hx__media { margin: clamp(48px, 7vw, 84px) auto 0; max-width: 1240px; perspective: 2000px; }
.hx__media .dframe { transform-origin: 50% 0; transform: rotateX(calc((1 - var(--rp, 1)) * 24deg)) scale(calc(.9 + var(--rp, 1) * .1)); will-change: transform; }
.hx { padding-bottom: clamp(56px, 8vw, 110px); }

/* a device frame round each screen */
.dframe { margin: 0; border-radius: 16px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--frame-line); box-shadow: var(--shadow); }
.dframe__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--frame-bar); border-bottom: 1px solid var(--frame-line); }
.dframe__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--frame-line); flex: none; }
.dframe__bar i:nth-child(1) { background: #FF5F57; } .dframe__bar i:nth-child(2) { background: #FEBC2E; } .dframe__bar i:nth-child(3) { background: #28C840; }
.dframe__url { margin: 0 auto; max-width: 64%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.4 var(--mono); color: var(--fg-2); background: var(--frame-url); border-radius: 6px; padding: 3px clamp(12px, 4vw, 44px); }
.dframe__screen { position: relative; }
.dframe__screen img { width: 100%; height: auto; }

/* the four functions, as Apple's tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: clamp(520px, 46vw, 660px); padding: clamp(44px, 4.4vw, 64px) 26px 0; border-radius: 28px; background: var(--bg-alt); }
.tile__ico { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.tile__ico svg { width: 24px; height: 24px; }
.tile h3 { margin-top: 16px; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; }
.tile p { margin-top: 10px; max-width: 20em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; font-weight: 600; color: var(--fg-2); }
.tile .ctas-d { margin-top: 18px; gap: 10px 26px; }
.tile__img { width: 94%; margin-top: auto; padding-top: 38px; transform: translateY(16%); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.tile__img .dframe { box-shadow: var(--shadow-s); }
.tile:hover .tile__img { transform: translateY(11%); }
.tile--small { min-height: 0; padding-bottom: 44px; }
.tile--small h3 { font-size: clamp(32px, 3vw, 44px); }
@media (max-width: 860px) { .tiles, .tiles--3 { grid-template-columns: minmax(0, 1fr); } .tile { min-height: 0; } }

/* the story: a process played as you scroll — the app's stepper fills, its screens follow, what matters is marked */
.story-intro { padding-bottom: clamp(24px, 4vw, 48px); }
.story { position: relative; height: calc(var(--n) * 80vh + 100vh); }
.story__stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--gn)); height: calc(100vh - var(--gn) - env(safe-area-inset-top, 0px)); display: flex; align-items: center; }
.ln ~ main .story__stage { top: calc(env(safe-area-inset-top, 0px) + var(--gn) + var(--ln)); height: calc(100vh - var(--gn) - var(--ln) - env(safe-area-inset-top, 0px)); }
.story__wrap { width: 100%; display: flex; flex-direction: column; gap: clamp(18px, 3vh, 34px); }
.story__bar { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px clamp(10px, 2vw, 24px) 14px; box-shadow: var(--shadow-s); }
.sstp { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.sstp__track, .sstp__fill { position: absolute; top: 17px; height: 3px; border-radius: 3px; left: calc(50% / var(--n)); }
.sstp__track { right: calc(50% / var(--n)); background: var(--line); }
.sstp__fill { width: calc((100% - 100% / var(--n)) * var(--p, 0)); background: var(--accent-2); transition: width .12s linear; }
.sstp li { position: relative; z-index: 1; min-width: 0; }
.sstp button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; cursor: pointer; text-align: center; }
.sstp button:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 10px; }
.sdot { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 2px solid var(--line); color: var(--fg-3); font: 700 14px/1 var(--font); transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s; }
.sdot svg { display: none; width: 17px; height: 17px; }
.sstp b { font-size: 14px; line-height: 1.25; font-weight: 700; color: var(--fg-2); transition: color .3s; white-space: nowrap; }
.sstp li.done .sdot { background: var(--accent-2); border-color: var(--accent-2); color: #FFFFFF; }
.sstp li.done .sdot svg { display: block; }
.sstp li.done .sdot__n { display: none; }
.sstp li.now .sdot { border: 3px solid var(--accent-2); color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); transform: scale(1.08); }
.sstp li.now b, .sstp li.done b { color: var(--fg); }
.story__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.story__copy { position: relative; min-height: 300px; }
.sc { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + 26px)); opacity: 0; transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.sc.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.sc__n { font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.sc h3 { margin-top: 10px; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; }
.sc > p:not(.gtkd) { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--fg-2); }
.gtkd { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--fg); font-size: 15px; line-height: 1.5; }
.gtkd svg { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.gtkd b { color: var(--accent); margin-right: 3px; }
.scm, .scbar { display: none; }
.scbar { position: relative; margin-bottom: 16px; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.scbar::before { content: ""; position: absolute; top: 9px; height: 2px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); background: var(--line); }
.scbar i { position: relative; justify-self: center; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); }
.scbar i.done { background: var(--accent-2); border-color: var(--accent-2); }
.scbar i.now { border: 3px solid var(--accent-2); box-shadow: 0 0 0 4px var(--accent-soft); }
.story__frame { justify-self: end; width: min(100%, calc((100vh - var(--gn) - 220px) * 1.6364)); }
.ln ~ main .story__frame { width: min(100%, calc((100vh - var(--gn) - var(--ln) - 220px) * 1.6364)); }
.story__screens { position: relative; aspect-ratio: 1800 / 1100; background: #FFFFFF; }
.ss { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.ss.on { opacity: 1; }
.ss img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hl { position: absolute; border: 3px solid var(--hl); border-radius: 10px; box-shadow: 0 0 0 6px var(--hl-glow), 0 10px 26px -10px var(--hl); opacity: 0; transform: scale(1.06);
  transition: left .7s cubic-bezier(.2, .8, .2, 1), top .7s cubic-bezier(.2, .8, .2, 1), width .7s cubic-bezier(.2, .8, .2, 1), height .7s cubic-bezier(.2, .8, .2, 1), opacity .35s, transform .45s; pointer-events: none; }
.hl.on { opacity: 1; transform: none; animation: hlpulse 2.6s ease-in-out .8s infinite; }
@keyframes hlpulse { 50% { box-shadow: 0 0 0 11px var(--hl-glow), 0 10px 26px -10px var(--hl); } }
/* once every step has been seen: a still section of the stage's height — a step chosen shows it again (mixed.js) */
.story.story--seen { height: auto; }
.story.story--seen .story__stage { position: relative; top: auto; }
.story-intro--seen .hint svg { display: none; }
/* a phone, a short screen, or no motion: the steps one under another, each with its screen and its marks */
@media (max-width: 900px), (max-height: 620px), (prefers-reduced-motion: reduce) {
  .story { height: auto !important; }
  .story__stage { position: static !important; height: auto !important; }
  .story__bar, .story__frame { display: none; }
  .story__body { display: block; }
  .story__copy { min-height: 0; display: flex; flex-direction: column; gap: 64px; }
  .sc { position: static; transform: none !important; opacity: 1; pointer-events: auto; }
  .scm { display: block; margin-top: 22px; }
  .scbar { display: grid; }
  .scm .dframe__screen { aspect-ratio: 1800 / 1100; overflow: hidden; }
  .scm img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .story-intro .hint { display: none; }
}

/* verified businesses: on the brand's dark band in both themes */
.vband { background: var(--band); color: var(--band-fg); }
.vband .d-h2 { color: var(--band-fg); }
.vband .d-sub { color: var(--band-fg2); }
.vsteps { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); }
.vsteps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; text-align: center; }
.vsteps li::before { content: ""; position: absolute; top: 20px; height: 3px; left: calc(-50% + 26px); right: calc(50% + 26px); background: var(--band-line); }
.vsteps li::after { content: ""; position: absolute; top: 20px; height: 3px; left: calc(-50% + 26px); right: calc(50% + 26px); background: #2CC0D6; transform-origin: left; transform: scaleX(0); transition: transform .5s ease calc(var(--i) * .32s); }
.vsteps li:first-child::before, .vsteps li:first-child::after { display: none; }
.vdot { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--band-line); background: var(--band-dot); color: transparent; transition: background-color .35s ease calc(var(--i) * .32s + .25s), border-color .35s ease calc(var(--i) * .32s + .25s), color .35s ease calc(var(--i) * .32s + .25s); }
.vdot svg { width: 20px; height: 20px; }
.vsteps b { font-size: 17px; color: var(--band-fg); }
.vsteps small { font-size: 13.5px; color: var(--band-fg2); }
.vsteps.in li::after { transform: scaleX(1); }
.vsteps.in .vdot { background: #2CC0D6; border-color: #2CC0D6; color: #04121B; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(56px, 7vw, 96px); }
.kpi-d { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kpi-d b { font-size: clamp(64px, 8vw, 112px); line-height: 1; font-weight: 800; letter-spacing: -.05em; color: var(--band-fg); font-variant-numeric: tabular-nums; }
.kpi-d span { font-size: clamp(19px, 1.6vw, 24px); font-weight: 800; color: var(--band-fg); }
.kpi-d small { font-size: 15px; color: var(--band-fg2); }
@media (max-width: 700px) {
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .vsteps { grid-template-columns: repeat(var(--n), minmax(104px, 1fr)); overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .vsteps::-webkit-scrollbar { display: none; }
  .vsteps b { font-size: 15px; white-space: nowrap; }
  .vsteps small { font-size: 12.5px; }
}
html:not(.js) .vsteps li::after { transform: none; }
html:not(.js) .vdot { background: #2CC0D6; border-color: #2CC0D6; color: #04121B; }

/* Good to know: cards to swipe through */
.gal { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(22px, calc((100vw - 1440px) / 2 + 22px)); padding: 6px max(22px, calc((100vw - 1440px) / 2 + 22px)) 26px; scrollbar-width: none; }
.gal::-webkit-scrollbar { display: none; }
.gcard { flex: none; width: min(360px, 78vw); min-height: 300px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; border-radius: 26px; background: var(--bg-alt); }
.sec-d--alt .gcard { background: var(--card); }
.gcard__l { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.gcard__l svg { width: 16px; height: 16px; }
.gcard p { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.35; font-weight: 700; letter-spacing: -.015em; color: var(--fg); }
.galnav { display: flex; gap: 12px; }
.galnav button { all: unset; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-alt); color: var(--fg); cursor: pointer; }
.galnav button:hover { background: var(--line); }
.galnav button svg { width: 20px; height: 20px; }
.galnav button:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }

/* the tour */
.dvid { max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; }
.dvid video { width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; background: #000000; box-shadow: var(--shadow); }
.tline { display: flex; gap: 3px; margin-top: 14px; }
.tline button { all: unset; flex-basis: 0; min-width: 4px; height: 6px; border-radius: 4px; background: var(--line); cursor: pointer; }
.tline button:hover, .tline button[aria-current="true"] { background: var(--accent-2); }
.vnote { margin-top: 12px; font-size: 14px; color: var(--fg-3); text-align: center; }
.dchap { display: flex; gap: 10px; overflow-x: auto; padding: 18px 2px 4px; scrollbar-width: none; }
.dchap::-webkit-scrollbar { display: none; }
.dchap button { all: unset; box-sizing: border-box; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); cursor: pointer; font-size: 14px; font-weight: 700; color: var(--fg); max-width: 240px; white-space: nowrap; }
.dchap .t { font: 600 12px var(--mono); color: var(--fg-3); }
.dchap button:hover, .dchap button[aria-current="true"], .dchap button.here { border-color: var(--accent-2); color: var(--accent); }
.dchap button:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }

/* questions */
.dfaq { margin-top: 44px; border-top: 1px solid var(--line); }
.dfaq details { border-bottom: 1px solid var(--line); }
.dfaq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 2px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.01em; }
.dfaq summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 18px; height: 18px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 2px; background: var(--accent); transition: transform .25s; }
.pm::after { transform: rotate(90deg); }
.dfaq details[open] .pm::after { transform: rotate(0); }
.dfaq details p { padding: 0 2px 24px; color: var(--fg-2); max-width: 46em; }

/* joining and contact */
.djoin { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dmail { max-width: 420px; margin-left: auto; padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; color: var(--fg); }
.dmail__from { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dmail__av { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 14px; }
.dmail__from small { display: block; font-size: 13px; color: var(--fg-2); }
.dmail p { font-size: 15px; color: var(--fg-2); }
.dmail__btn { display: block; padding: 12px; border-radius: 10px; background: #007C91; color: #FFFFFF; text-align: center; font-weight: 700; font-size: 15px; }
.dmail > small { font-size: 12.5px; color: var(--fg-3); text-align: center; }
.dcontact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(84px, 10vw, 140px); padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.dform { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
#join:not(.sec-d--alt) .dform { background: var(--bg-alt); }
.dform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dform label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--fg); }
.dform input, .dform select, .dform textarea { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--field-line); background: var(--field); color: var(--fg); font: 500 16px/1.4 var(--font); }
.dform textarea { resize: vertical; }
.dform input:focus, .dform select:focus, .dform textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent-2); }
.dform [aria-invalid="true"] { border-color: #DA0C30; }
.form__err { color: #DA0C30; font-size: 14px; font-weight: 600; }
.dform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.dform__foot small { color: var(--fg-3); font-size: 13px; }
@media (max-width: 900px) { .djoin, .dcontact { grid-template-columns: minmax(0, 1fr); } .dmail { margin: 0; } }
@media (max-width: 560px) { .dform__row { grid-template-columns: minmax(0, 1fr); } }

/* a function's page: features as a bento, more screens, Good to know */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.bx { display: flex; flex-direction: column; gap: 12px; min-height: 230px; padding: 32px 30px; border-radius: 26px; background: var(--card); }
.bx--wide { grid-column: span 2; }
.bx__n { font: 600 13px var(--mono); color: var(--accent); }
.bx h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
.bx p { color: var(--fg-2); max-width: 36em; }
@media (max-width: 900px) { .bento { grid-template-columns: minmax(0, 1fr); } .bx--wide { grid-column: auto; } .bx { min-height: 0; } }
.dnote { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 22px 24px; border-radius: 22px; background: var(--card); border: 1px dashed var(--line); }
.dnote svg { width: 22px; height: 22px; color: var(--accent); margin-top: 3px; }
.dnote b { font-size: 18px; }
.dnote p { margin-top: 4px; color: var(--fg-2); }
.soon { display: inline-flex; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; vertical-align: 2px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--bg-alt); font-size: 14.5px; font-weight: 600; color: var(--fg); }
.chips svg { width: 15px; height: 15px; color: var(--accent); }
.chips li span { min-width: 0; }
.chips code { overflow-wrap: anywhere; }
.row-d { max-width: 1180px; margin: clamp(40px, 5vw, 64px) auto 0; perspective: 2000px; }
.row-d .dframe { transform-origin: 50% 0; transform: rotateX(calc((1 - var(--rp, 1)) * 16deg)) scale(calc(.93 + var(--rp, 1) * .07)); will-change: transform; }
.dgallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.dgallery .cap { margin-top: 12px; font-size: 14px; color: var(--fg-2); text-align: center; }
@media (max-width: 900px) { .dgallery { grid-template-columns: minmax(0, 1fr); } }

/* the footer */
.dft { background: var(--bg-alt); color: var(--fg-2); font-size: 13.5px; padding-top: 56px; padding-bottom: 40px; border-top: 1px solid var(--line); }
.dft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.dft__brand img { height: 20px; width: auto; }
.dft__brand p { margin-top: 14px; max-width: 30em; }
.dft h4 { font-size: 13.5px; color: var(--fg); margin-bottom: 12px; }
.dft ul { display: flex; flex-direction: column; gap: 8px; }
.dft a { color: var(--fg-2); }
.dft a:hover { color: var(--fg); }
.dft__langs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dft__langs a[aria-current] { color: var(--fg); font-weight: 700; }
.dft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--fg-3); }
@media (max-width: 900px) { .dft__grid { grid-template-columns: 1fr 1fr; } .dft__brand { grid-column: 1 / -1; } }

/* things come in as you reach them */
.js [data-rv] { opacity: 0; transform: translateY(34px); transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
.js [data-rv].in { opacity: 1; transform: none; }
.js .ctas-d[data-rv], .js p[data-rv] { transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rv] { opacity: 1; transform: none; transition: none; }
  .hx__media .dframe, .row-d .dframe { transform: none !important; }
  .hl.on { animation: none; }
  .vsteps li::after { transform: none; transition: none; }
  .vdot { transition: none; background: #2CC0D6; border-color: #2CC0D6; color: #04121B; }
  .hint svg { animation: none; }
}


/* ═══ concept E: each section carries its own tone ═══ */
.logo-d { display: none; }
.tone-l, .tone-la {
  --bg: #FFFFFF; --bg-alt: #F4F7FA; --card: #FFFFFF; --fg: #071C3C; --fg-2: #536479; --fg-3: #8492A6; --line: #E1E8EF;
  --accent: #007C91; --accent-2: #009BB4; --accent-soft: #E3F4F8; --eyebrow: #C2560A; --hl: #FF8C1F; --hl-glow: rgba(255, 140, 31, .2);
  --shadow: 0 40px 80px -36px rgba(7, 28, 60, .38); --shadow-s: 0 14px 30px -18px rgba(7, 28, 60, .35);
  --frame-bar: #EEF2F6; --frame-line: #E1E8EF; --frame-url: #FFFFFF; --field: #FFFFFF; --field-line: #CFD9E3;
  color: var(--fg);
}
.tone-la { --bg: #F4F7FA; --bg-alt: #FFFFFF; --card: #FFFFFF; }
.tone-d {
  --bg: #04080F; --bg-alt: #0D1522; --card: #111B2B; --fg: #F2F5F9; --fg-2: #A3B1C3; --fg-3: #74849A; --line: rgba(255, 255, 255, .11);
  --accent: #5FD3E6; --accent-2: #2CC0D6; --accent-soft: rgba(44, 192, 214, .15); --eyebrow: #FFA351; --hl: #FF9F43; --hl-glow: rgba(255, 159, 67, .26);
  --shadow: 0 50px 120px -50px rgba(44, 192, 214, .42); --shadow-s: 0 20px 50px -26px rgba(44, 192, 214, .38);
  --frame-bar: #172234; --frame-line: rgba(255, 255, 255, .12); --frame-url: #0E1726; --field: #0E1726; --field-line: rgba(255, 255, 255, .16);
  color: var(--fg);
}
section.tone-l, section.tone-la, section.tone-d, footer.tone-la { background: var(--bg); }
.tone-d .dframe { box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .05); }
/* on a white section, boxes that are white elsewhere take the pale */
.tone-l .bx { background: var(--bg-alt); }
/* a dark tile among light ones */
.tile.tone-d { background: var(--bg-alt); }
.tone-l .tile:not(.tone-d) { background: var(--bg-alt); }
/* the trust band takes its section's tone */
.vband { color: var(--fg); }
.vband .d-h2 { color: var(--fg); }
.vband .d-sub { color: var(--fg-2); }
.vsteps li::before { background: var(--line); }
.vsteps li::after { background: var(--accent-2); }
.vdot { border-color: var(--line); background: var(--bg); }
.vsteps.in .vdot, html:not(.js) .vdot { background: var(--accent-2); border-color: var(--accent-2); color: #FFFFFF; }
.vsteps b { color: var(--fg); }
.vsteps small { color: var(--fg-2); }
.kpi-d b, .kpi-d span { color: var(--fg); }
.kpi-d small { color: var(--fg-2); }
.lk--light { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .vdot { background: var(--accent-2); border-color: var(--accent-2); color: #FFFFFF; } }
/* the bar follows the section under it: dark glass over dark, light glass over light */
.gn, .ln { transition: background-color .35s, border-color .35s; }
.gn--dark, .ln--dark { background: rgba(5, 9, 16, .74); border-bottom-color: rgba(255, 255, 255, .08); }
.gn--dark .gn__links a, .gn--dark .signin, .gn--dark .mm > summary { color: #F2F5F9; }
.gn--dark .gn__links a[aria-current] { color: #5FD3E6; }
.gn--dark .logo-l { display: none; }
.gn--dark .logo-d { display: inline; }
.ln--dark .ln__name { color: #F2F5F9; }
.ln--dark .ln__links a { color: #A3B1C3; }
.ln--dark .ln__links a:hover { color: #FFFFFF; }
.gn .mm[open] > summary { color: var(--fg); }
/* the phone menu open: the bar without its glass — a bar with a backdrop filter would hold the menu's fixed panel to its own 52 px */
.gn.gn--open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
/* the bars sit above the dark hero, on the page itself: the page is dark under them (and past the top and the end when the page is pulled) */
body { background: #04080F; }
body::before { background: #04080F; transition: background-color .35s; }
body.bar-light::before { background: #FFFFFF; }
/* the footer closes the page on dark, as it opened */
footer.tone-d { background: var(--bg); border-top-color: var(--line); }
.tone-d .logo-l { display: none; }
.tone-d .logo-d { display: inline; }

/* ═══ the films (3 Nov, 09:25): one player for the page, its chapters as a timeline that fills as it plays, the page's films as cards ═══ */
.fplayer { max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; }
.fstage video { width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; background: #000000; box-shadow: var(--shadow); }
.tone-d .fstage video { box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .06); }
.ftl { display: flex; gap: 3px; margin-top: 16px; }
.ftl button { all: unset; position: relative; overflow: hidden; flex-basis: 0; min-width: 4px; height: 6px; border-radius: 4px; background: var(--line); cursor: pointer; transition: height .2s, margin .2s; }
.ftl button i { position: absolute; inset: 0; border-radius: inherit; background: var(--accent-2); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.ftl:hover button { height: 10px; margin-top: -2px; }
.ftl button:hover { background: var(--fg-3); }
.fnow { margin-top: 22px; }
.fnow__l { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.fnow__t { margin-top: 6px; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
.fnow__x { margin-top: 6px; max-width: 46em; color: var(--fg-2); }
.fchap .dchap { padding-top: 16px; }
.fchap .dchap button { max-width: none; }
.fchap .dchap.fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.fchap .dchap.fl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px); mask-image: linear-gradient(90deg, transparent, #000 64px); }
.fchap .dchap.fl.fr { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 12px; flex: none; }
.eq i { flex: 1; height: 35%; border-radius: 1px; background: currentColor; }
.eq i:nth-child(2) { height: 70%; }
.films.playing .fnow .eq i, .films.playing .fcard[aria-pressed="true"] .eq i { animation: eqb .9s ease-in-out infinite; }
.films.playing .eq i:nth-child(2) { animation-delay: -.3s; }
.films.playing .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eqb { 0%, 100% { height: 25%; } 50% { height: 100%; } }
/* the page's films: a card chosen plays in the player above */
.fcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1120px; margin: clamp(30px, 4vw, 48px) auto 0; }
.fcards li { flex: 0 1 362px; min-width: 0; }
.fcard { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; height: 100%; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--bg-alt); color: var(--fg); cursor: pointer; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, background-color .25s; }
.tone-la .fcard, .sec-d--alt .fcard { background: var(--card); }
.tone-d .fcard { background: var(--card); }
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-s); }
.fcard[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-2), var(--shadow-s); }
.fcard:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; }
.fcard__img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: #071C3C; }
.fcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.fcard:hover .fcard__img img { transform: scale(1.05); }
.fcard__play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(4, 8, 15, .62); color: #FFFFFF; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .25s, background-color .25s; }
.fcard__play svg { width: 16px; height: 16px; margin-left: 2px; }
.fcard:hover .fcard__play { transform: scale(1.12); background: var(--cta); color: #071C3C; }
.fcard__dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(4, 8, 15, .74); color: #FFFFFF; font: 600 11px/1.5 var(--mono); }
.fcard__txt { min-width: 0; }
.fcard__l { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.fcard__l .eq, .fcard__now { display: none; }
.fcard[aria-pressed="true"] .fcard__l .eq { display: inline-flex; }
.films.playing .fcard[aria-pressed="true"] .fcard__kind { display: none; }
.films.playing .fcard[aria-pressed="true"] .fcard__now { display: inline; }
.fcard b { display: block; margin-top: 4px; font-size: 16.5px; line-height: 1.25; letter-spacing: -.012em; font-weight: 800; }
@media (max-width: 560px) {
  .fstage video { border-radius: 16px; }
  .fcards li { flex-basis: 100%; }
  .fcard { grid-template-columns: 124px minmax(0, 1fr); gap: 12px; }
  .fcard b { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .films.playing .eq i { animation: none; }
  .fcard, .fcard__img img, .fcard__play { transition: none; }
  .fcard:hover { transform: none; }
  .fcard:hover .fcard__img img { transform: none; }
}

/* ═══ the light version (3 Nov, 13:01 — Jiri: "just light, footer is dark and the section have slightly higher contrast of light"):
   every section light, white and pale in turn, the pale one a step deeper than before so that sections stand apart; the footer dark ═══ */
body, body::before { background: #FFFFFF; }
body.bar-light::before { background: #FFFFFF; }
.tone-la { --bg: #EAEFF5; --bg-alt: #FFFFFF; --card: #FFFFFF; --line: #D8E0EA; --frame-bar: #F3F6FA; }
.tone-l { --bg-alt: #EAEFF5; }
.tone-la .dchap button, .tone-la .story__bar { border-color: #D8E0EA; }

/* 3 Nov, 13:08 — Jiri: "do the text in orange buttons white + the a little bit darker background sections colour would be light but as the
   green-blue used in selyvo": white on the orange buttons; the deeper of the two light backgrounds a light tint of SELYVO's teal
   (#009BB4), its lines and soft accents a step deeper teal so that the tile icons, the Good to know boxes and the cards still stand out */
:root { --cta-fg: #FFFFFF; }
.fcard:hover .fcard__play { color: #FFFFFF; }
.tone-la { --bg: #E2F2F6; --bg-alt: #FFFFFF; --card: #FFFFFF; --line: #C5E3EA; --accent-soft: #CDEAF1; --frame-bar: #F1F8FA; }
.tone-l { --bg-alt: #E2F2F6; }
.tone-la .dchap button, .tone-la .story__bar { border-color: #C5E3EA; }