/* R60UI7 build - public pages: R60UI6 build + R60UI7 phone layer (appended at the end) */
/* R60UI6 build - public pages: R60UI5 build + R60UI6 layer (appended at the end) */
/* R60UI5 build - public pages: R60UI4 build + R60UI5 layer (appended at the end) */
/* R60UI4 build - StreamLive Pro public pages (original landing, elevated; sign-in pages to match) */
/* R60UI4 - StreamLive Pro public pages, round 4.
 * Base: the ORIGINAL landing (the one the owner prefers) - its layout, its vibrant pink-violet headline, chips, logo row,
 * sections and energy all stay. This layer only adds craft:
 *   type   - one scale (72/48/24/20/18/16/14/13), tighter display tracking, Hebrew tracked less than Latin, 4 weights
 *   space  - 8 px rhythm, 128 px between chapters on desktop, aligned 1240 px column
 *   colour - one richer brand gradient (perceptual, no grey midpoint) for the headline accent and the primary call to
 *            action; selections and badges go neutral; the coloured section washes go
 *   matter - 1 px top light on every card, a soft layered shadow instead of glow, film grain on the dark canvas
 *   motion - scroll reveals, 1 px hover lift, a breathing LIVE dot, counters; all off under reduced motion
 *   detail - one line-icon set (no typed arrows / ticks / triangles), polished chips, visible focus, two-tone statements
 * Tokens: html:not(#r4) = every public page, html:not(#r4) body.r4l = the landing (<body class="r4l">), html:not(#r4) body:has(.card) = the other public pages (sign-in etc.). */

/* ============================================================ tokens */
html:not(#r4) {
  --r4-bg: #050813;
  --r4-ink: #f4f6fc;
  --r4-ink-2: #a9b2c6;
  --r4-ink-3: #8089a0;
  --r4-line: rgba(255, 255, 255, .075);
  --r4-line-2: rgba(255, 255, 255, .12);
  --r4-card: linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .016));
  --r4-hl: inset 0 1px 0 rgba(255, 255, 255, .07);
  --r4-sh-1: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -6px rgba(0, 0, 0, .45);
  --r4-sh-2: 0 2px 4px rgba(0, 0, 0, .28), 0 16px 36px -12px rgba(0, 0, 0, .6), 0 40px 80px -40px rgba(0, 0, 0, .7);
  --r4-sh-3: 0 2px 6px rgba(0, 0, 0, .3), 0 30px 60px -20px rgba(0, 0, 0, .7), 0 70px 140px -50px rgba(40, 18, 90, .6);
  --r4-pink: #ff4f74;
  --r4-violet: #8b5cf6;
  --r4-lilac: #c4b5fd;
  --r4-green: #4ade80;
  /* the brand gradient: coral-pink -> magenta -> violet. Three stops so the sRGB midpoint never turns grey-mauve;
     browsers that interpolate in oklab take the second declaration */
  --r4-grad: linear-gradient(100deg, #ff4f74 0%, #e84a9a 32%, #b553e6 64%, #7d5cff 100%);
  --r4-grad-x: linear-gradient(135deg, #ff4f74 0%, #e84a9a 32%, #b553e6 64%, #7d5cff 100%);
  --r4-ease: cubic-bezier(.2, .7, .2, 1);
  --r4-ring: 0 0 0 2px #050813, 0 0 0 4px #c4b5fd;
  --r4-font: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* the page's own tokens, tuned (every inline style that reads them follows) */
  --grad-brand: var(--r4-grad-x);
  --surface: #10162b;
  --bg-1: #0a0f1f;
  --bg-2: #111830;
  --bg-3: #161e38;
  --border: rgba(255, 255, 255, .075);
  --border-strong: rgba(255, 255, 255, .13);
  --text: #f4f6fc;
  --text-2: #a9b2c6;
  --text-3: #8089a0;
  --shadow-glow: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-card: var(--r4-sh-2);
}
@supports (background: linear-gradient(in oklab, red, blue)) {
  html:not(#r4) {
    --r4-grad: linear-gradient(100deg in oklab, #ff4f74 0%, #e84a9a 32%, #b553e6 64%, #7d5cff 100%);
    --r4-grad-x: linear-gradient(135deg in oklab, #ff4f74 0%, #e84a9a 32%, #b553e6 64%, #7d5cff 100%);
  }
}

/* ============================================================ canvas: grain + one quiet light */
html:not(#r4) body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern"; }
html:not(#r4) body.r4l, html:not(#r4) body:has(.card) { background: var(--r4-bg) !important; }
html:not(#r4) body.r4l::before {
  background:
    radial-gradient(1100px 560px at 50% -120px, rgba(139, 92, 246, .14), transparent 70%),
    radial-gradient(800px 480px at 100% 30%, rgba(255, 79, 116, .05), transparent 70%) !important;
}
html:not(#r4) body.r4l::after, html:not(#r4) body:has(.card)::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================ type */
html:not(#r4) body.r4l { font-family: var(--r4-font) !important; font-size: 16px; line-height: 1.6; color: var(--r4-ink); }
html:not(#r4) body.r4l h1 {
  font-weight: 900 !important; font-size: clamp(44px, 5.2vw, 72px) !important; line-height: 1.04 !important;
  letter-spacing: -.032em !important; margin-bottom: 24px !important; text-wrap: balance;
}
html:not(#r4) body.r4l h1 .grad, html:not(#r4) body.r4l .r26l-sec .wow h2 .grad, html:not(#r4) body.r4l .grad {
  background: var(--r4-grad) !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  padding-bottom: .06em; /* descenders of the gradient line are never clipped */
}
html:not(#r4) body.r4l .section h2, html:not(#r4) body.r4l .wow h2 {
  font-weight: 800 !important; font-size: clamp(32px, 3.5vw, 48px) !important; line-height: 1.1 !important;
  letter-spacing: -.026em !important; margin-bottom: 16px !important; text-wrap: balance;
}
/* Hebrew has no capitals and a tighter native fit: track it about half as hard as Latin */
html[lang="he"]:not(#r4) body.r4l h1 { letter-spacing: -.018em !important; }
html[lang="he"]:not(#r4) body.r4l .section h2, html[lang="he"]:not(#r4) body.r4l .wow h2 { letter-spacing: -.014em !important; }
html:not(#r4) body.r4l .section p.lead { font-size: 18px !important; line-height: 1.65 !important; color: var(--r4-ink-2) !important; max-width: 680px; margin: 0 auto 56px !important; text-wrap: pretty; }
html:not(#r4) body.r4l .hero p.lead { text-align: start !important; margin-inline: 0 !important; font-size: 19px !important; line-height: 1.65 !important; color: var(--r4-ink-2) !important; max-width: 560px !important; margin-bottom: 32px !important; }
html:not(#r4) body.r4l .hero p.lead strong { color: var(--r4-ink); font-weight: 700; }
html:not(#r4) body.r4l .wow p.wow-lead { font-size: 17px !important; line-height: 1.7 !important; color: var(--r4-ink-2) !important; margin-bottom: 24px !important; }
html:not(#r4) body.r4l h3 { letter-spacing: -.01em; }
html:not(#r4) body.r4l .feature h3, html:not(#r4) body.r4l .wf-card h3, html:not(#r4) body.r4l .step-row h3 { font-weight: 700 !important; }
html:not(#r4) body.r4l .feature h3 { font-size: 19px !important; line-height: 1.3 !important; margin-bottom: 8px !important; }
html:not(#r4) body.r4l .feature p, html:not(#r4) body.r4l .wf-card p { line-height: 1.65 !important; color: var(--r4-ink-2) !important; }
html:not(#r4) body.r4l .feature p { font-size: 14.5px !important; }
html:not(#r4) body.r4l .pricing-note { color: var(--r4-ink-3) !important; font-size: 13px !important; }
/* two-tone statements: the second clause steps back */
html:not(#r4) body.r4l .r4-mute { color: #7f88a0; -webkit-text-fill-color: #7f88a0; }
html:not(#r4) body.r4l .film-copy h2 .r4-mute { color: rgba(255, 255, 255, .62); -webkit-text-fill-color: rgba(255, 255, 255, .62); }
html:not(#r4) body.r4l ::selection { background: rgba(181, 83, 230, .45); color: #fff; }

/* ============================================================ icons used in place of typed symbols */
html:not(#r4) .r4-fwd { display: inline-block; }
html[dir="ltr"]:not(#r4) .r4-fwd { transform: scaleX(-1); }
html:not(#r4) body.r4l .r4-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-inline-end: 4px; vertical-align: .12em; }
html:not(#r4) body.r4l i[data-r60i] { vertical-align: -.16em; }

/* ============================================================ header */
html:not(#r4) body.r4l header.top {
  height: 68px; padding: 0 32px !important; gap: 24px !important;
  background: rgba(5, 8, 19, .72) !important; -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px) !important;
  border-bottom: 1px solid var(--r4-line) !important;
}
html:not(#r4) body.r4l .logo { font-weight: 800 !important; font-size: 17px !important; letter-spacing: -.01em; gap: 10px !important; }
html:not(#r4) body.r4l nav.main-nav { gap: 4px !important; margin-inline-start: 32px !important; }
html:not(#r4) body.r4l nav.main-nav a { font-size: 14px !important; font-weight: 500 !important; color: var(--r4-ink-2) !important; padding: 8px 12px; border-radius: 10px; transition: color .2s var(--r4-ease), background-color .2s var(--r4-ease) !important; }
html:not(#r4) body.r4l nav.main-nav a:hover { color: var(--r4-ink) !important; background: rgba(255, 255, 255, .05); }
html:not(#r4) body.r4l #lang-btn i[data-r60i], html:not(#r4) body.r4l #lang-btn-mobile i[data-r60i] { font-size: 14px; opacity: .7; }
html:not(#r4) body.r4l .lang-menu { border-radius: 14px !important; box-shadow: var(--r4-hl), var(--r4-sh-2) !important; background: #0e1427 !important; }
html:not(#r4) body.r4l .lang-opt:hover, html:not(#r4) body.r4l .lang-opt-mobile:hover { background: rgba(255, 255, 255, .06) !important; }

/* ============================================================ buttons */
html:not(#r4) body.r4l .btn, html:not(#r4) body:has(.card) .card .btn {
  border-radius: 12px !important; font-family: var(--r4-font) !important; font-weight: 600 !important; letter-spacing: 0;
  transition: transform .2s var(--r4-ease), box-shadow .2s var(--r4-ease), background-color .2s var(--r4-ease), color .2s var(--r4-ease), filter .2s var(--r4-ease), border-color .2s var(--r4-ease) !important;
}
html:not(#r4) body.r4l .btn-primary, html:not(#r4) body:has(.card) .card .btn-primary, html:not(#r4) body.r4l .billing-toggle[data-active="1"] {
  background: var(--r4-grad) !important; color: #fff !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -10px rgba(232, 74, 154, .75) !important;
  text-shadow: 0 1px 1px rgba(60, 0, 40, .25);
}
html:not(#r4) body.r4l .btn-primary:hover, html:not(#r4) body:has(.card) .card .btn-primary:hover {
  transform: translateY(-1px) !important; filter: brightness(1.06) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .3), 0 16px 32px -12px rgba(232, 74, 154, .85) !important;
}
html:not(#r4) body.r4l .btn-primary:active, html:not(#r4) body:has(.card) .card .btn-primary:active { transform: translateY(0) !important; filter: brightness(.98); }
html:not(#r4) body.r4l .btn-ghost {
  background: rgba(255, 255, 255, .045) !important; color: var(--r4-ink) !important; border: 1px solid var(--r4-line-2) !important;
  box-shadow: var(--r4-hl) !important;
}
html:not(#r4) body.r4l .btn-ghost:hover { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .2) !important; transform: translateY(-1px) !important; }
html:not(#r4) body.r4l .btn-large { padding: 0 24px !important; min-height: 52px; font-size: 15.5px !important; border-radius: 14px !important; }
html:not(#r4) body.r4l header.top .btn { min-height: 40px; padding: 0 16px !important; font-size: 14px !important; }
html:not(#r4) body.r4l .btn:focus-visible, html:not(#r4) body.r4l a:focus-visible, html:not(#r4) body.r4l button:focus-visible, html:not(#r4) body:has(.card) .card .btn:focus-visible, html:not(#r4) body:has(.card) a:focus-visible {
  outline: none !important; box-shadow: var(--r4-ring) !important;
}
html:not(#r4) body.r4l .btn i[data-r60i] { font-size: 17px; }

/* ============================================================ hero */
html:not(#r4) body.r4l .hero { padding-top: 168px !important; padding-bottom: 112px !important; }
html:not(#r4) body.r4l .hero-grid { gap: 64px !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important; }
/* eyebrow: a gradient hairline pill, plain sans (no mono, no tracked caps) */
html:not(#r4) body.r4l .eyebrow {
  font: 600 13px/1 var(--r4-font) !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 8px 14px !important; margin-bottom: 24px !important; color: #e4d9ff !important;
  background: linear-gradient(#0d1022, #0d1022) padding-box, linear-gradient(100deg, rgba(255, 79, 116, .7), rgba(125, 92, 255, .7)) border-box !important;
  border: 1px solid transparent !important; box-shadow: 0 0 24px -8px rgba(181, 83, 230, .5);
}
html[lang="en"]:not(#r4) body.r4l .eyebrow { letter-spacing: .01em !important; }
html:not(#r4) body.r4l .eyebrow i[data-sl-ico] { color: #ff8fab; margin-inline-end: 2px; }
html:not(#r4) body.r4l .hero-cta { gap: 12px !important; margin-bottom: 28px !important; align-items: center; }
/* the film: a quiet text action with a round play mark, so the trial button is the one call to action */
html:not(#r4) body.r4l .hero-cta .r4-film {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 8px !important; color: var(--r4-ink-2) !important;
  gap: 10px !important;
}
html:not(#r4) body.r4l .hero-cta .r4-film:hover { color: var(--r4-ink) !important; transform: none !important; }
html:not(#r4) body.r4l .hero-cta .r4-film i[data-r60i] {
  width: 32px; height: 32px; border-radius: 50%; font-size: 0; background: rgba(255, 255, 255, .08); -webkit-mask: none; mask: none; position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
html:not(#r4) body.r4l .hero-cta .r4-film i[data-r60i]::after {
  content: ""; position: absolute; inset: 9px 8px 9px 10px; background: currentColor;
  -webkit-mask: var(--r60i-play) center / contain no-repeat; mask: var(--r60i-play) center / contain no-repeat;
}
html:not(#r4) body.r4l .hero-cta .r4-film:hover i[data-r60i] { background: rgba(255, 255, 255, .14); }
/* proof chips */
html:not(#r4) body.r4l .hero-proof { gap: 8px !important; margin: 0 0 20px !important; }
html:not(#r4) body.r4l .hero-proof > span {
  height: 34px; padding: 0 14px !important; gap: 8px !important; border-radius: 999px !important;
  background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--r4-line-2) !important; box-shadow: var(--r4-hl);
  font: 500 13px/1 var(--r4-font) !important; color: var(--r4-ink-2) !important;
}
html:not(#r4) body.r4l .hero-proof > span span { all: unset; }
html:not(#r4) body.r4l .hero-proof > span > i[data-sl-ico] { color: var(--r4-lilac); font-size: 15px; }
html:not(#r4) body.r4l .hero-proof > span:first-child { color: var(--r4-ink) !important; }
html:not(#r4) body.r4l .hero-proof b {
  font: 800 15px/1 var(--r4-font) !important; font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: center;
  background: var(--r4-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html:not(#r4) body.r4l .hero-trust { gap: 8px 24px !important; font-size: 13.5px !important; color: var(--r4-ink-3) !important; }
html:not(#r4) body.r4l .hero-trust > span { display: inline-flex; align-items: center; gap: 6px; }
html:not(#r4) body.r4l .hero-trust .check { color: var(--r4-green) !important; display: inline-flex; }
/* the stage: same player, a crisper frame and a soft light behind it */
html:not(#r4) body.r4l .stg {
  border-radius: 24px !important; padding: 16px !important; border: 1px solid rgba(255, 255, 255, .11) !important;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 79, 116, .16), transparent 60%),
    radial-gradient(110% 80% at 92% 18%, rgba(125, 92, 255, .2), transparent 62%),
    linear-gradient(170deg, #141834, #0a0d20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), var(--r4-sh-3) !important;
}
html:not(#r4) body.r4l .stg::before {
  content: ""; position: absolute; inset: -14% -12% -18%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 46%, rgba(139, 92, 246, .3), rgba(232, 74, 154, .1) 55%, transparent 75%);
  filter: blur(30px);
}
html:not(#r4) body.r4l .stg-rail { gap: 8px !important; margin-bottom: 16px !important; }
html:not(#r4) body.r4l .stg-live {
  font: 700 11px/1 var(--r4-font) !important; letter-spacing: .08em !important; padding: 0 12px !important; height: 30px;
  background: rgba(255, 59, 92, .14) !important; border-color: rgba(255, 89, 112, .45) !important; color: #ffd2da !important;
}
html:not(#r4) body.r4l .stg-live i, html:not(#r4) body.r4l .live-pill::before { animation: r4live 1.8s var(--r4-ease) infinite !important; box-shadow: 0 0 0 0 rgba(255, 59, 92, .6); background: #ff3b5c !important; opacity: 1 !important; }
@keyframes r4live { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 92, .55); } 70% { box-shadow: 0 0 0 7px rgba(255, 59, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0); } }
html:not(#r4) body.r4l .stg-arrow { transform: none !important; color: var(--r4-ink-3) !important; display: inline-flex; font-size: 15px !important; }
html:not(#r4) body.r4l .stg-ai, html:not(#r4) body.r4l .stg-out { font: 700 12px/1 var(--r4-font) !important; height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px !important; }
html:not(#r4) body.r4l .stg-ai { background: rgba(139, 92, 246, .14) !important; border-color: rgba(167, 139, 250, .38) !important; color: #ddd3ff !important; }
html:not(#r4) body.r4l .stg-out { background: rgba(34, 197, 94, .12) !important; border-color: rgba(74, 222, 128, .36) !important; color: #b7f5cb !important; }
html:not(#r4) body.r4l .stg-phone { border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 2px 6px rgba(0, 0, 0, .35), 0 26px 56px -18px rgba(0, 0, 0, .8) !important; }
html:not(#r4) body.r4l .stg-step { border-radius: 14px !important; padding: 12px 14px !important; background: rgba(255, 255, 255, .035) !important; border-color: var(--r4-line) !important; box-shadow: var(--r4-hl); }
html:not(#r4) body.r4l .stg-step--hot { background: linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(255, 79, 116, .08)) !important; border-color: rgba(167, 139, 250, .34) !important; }
html:not(#r4) body.r4l .stg-step b { font: 700 14px/1.35 var(--r4-font) !important; display: flex !important; align-items: center; gap: 6px; }
html:not(#r4) body.r4l .stg-step b i[data-sl-ico] { color: var(--r4-lilac); }
html:not(#r4) body.r4l .stg-step span { font-size: 12px !important; line-height: 1.55 !important; }
html:not(#r4) body.r4l .stg-ready, html:not(#r4) body.r4l .stg-badge { border-radius: 999px !important; font: 600 12px/1 var(--r4-font) !important; height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px !important; }
html:not(#r4) body.r4l .stg-thumb { border-radius: 8px !important; }

/* ============================================================ sections: one rhythm, no coloured washes */
html:not(#r4) body.r4l .section { padding: 112px 32px !important; max-width: 1304px !important; background: none !important; }
html:not(#r4) body.r4l .section.hero { padding-top: 168px !important; padding-bottom: 112px !important; }
html:not(#r4) body.r4l #workflow, html:not(#r4) body.r4l #podcast-director, html:not(#r4) body.r4l #autopublish, html:not(#r4) body.r4l #security, html:not(#r4) body.r4l #pricing { position: relative; }
/* a hairline that fades at both ends between chapters (stands in for the coloured washes) */
html:not(#r4) body.r4l #podcast-director::before, html:not(#r4) body.r4l #autopublish::before, html:not(#r4) body.r4l #features::before, html:not(#r4) body.r4l #pricing::before, html:not(#r4) body.r4l #security::before, html:not(#r4) body.r4l #faq::before {
  content: ""; position: absolute; top: 0; inset-inline: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent);
}

/* logo row */
html:not(#r4) body.r4l .logos-strip {
  background: none !important; padding: 72px 32px 80px !important; border-top: 1px solid var(--r4-line) !important; border-bottom: 1px solid var(--r4-line) !important;
}
html:not(#r4) body.r4l .logos-strip h3 { font: 500 15px/1.5 var(--r4-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--r4-ink-3) !important; margin-bottom: 32px !important; }
html:not(#r4) body.r4l .logos-grid { gap: 12px !important; max-width: 1080px; margin: 0 auto; }
html:not(#r4) body.r4l .platform-pill {
  height: 56px; padding: 0 18px !important; gap: 12px !important; border-radius: 14px !important;
  background: var(--r4-card) !important; border: 1px solid var(--r4-line) !important; box-shadow: var(--r4-hl);
  transition: transform .2s var(--r4-ease), border-color .2s var(--r4-ease), background-color .2s var(--r4-ease) !important;
}
html:not(#r4) body.r4l .platform-pill:hover { transform: translateY(-1px) !important; border-color: var(--r4-line-2) !important; }
html:not(#r4) body.r4l .platform-pill .name { font: 600 14px/1 var(--r4-font) !important; color: var(--r4-ink) !important; }
/* official marks: one height for every network (29 px, Instagram's own minimum) */
html:not(#r4) svg.slbrand { height: 29px !important; width: auto !important; flex: none !important; filter: none !important; opacity: 1 !important; }
html:not(#r4) body.r4l .stg-nets { gap: 10px !important; align-items: center; }
html:not(#r4) body.r4l .stg-nets i, html:not(#r4) body.r4l .wf-dot[data-brand-mark], html:not(#r4) body.r4l .mockup-logo[data-brand-mark], html:not(#r4) body.r4l .tg-node .ic[data-brand-mark] {
  background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important;
}
html:not(#r4) body.r4l .r26l-podrow { gap: 8px !important; margin-top: 24px !important; }
html:not(#r4) body.r4l .r26l-podlbl { font: 500 14px/1.4 var(--r4-font) !important; letter-spacing: 0 !important; color: var(--r4-ink-3) !important; }
html:not(#r4) body.r4l .r26l-podchip { height: 34px; padding: 0 14px !important; font: 600 13px/1 var(--r4-font) !important; background: rgba(255, 255, 255, .035) !important; border-color: var(--r4-line) !important; box-shadow: var(--r4-hl); }
html:not(#r4) body.r4l a.r26l-podmore { font: 600 13px/1 var(--r4-font) !important; color: var(--r4-lilac) !important; display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px !important; }

/* film band */
html:not(#r4) body.r4l .film-band { margin: 0 !important; min-height: 600px !important; }
html:not(#r4) body.r4l .film-time { font-size: 14px !important; letter-spacing: .32em !important; color: #ff8fab !important; }
html:not(#r4) body.r4l .film-copy h2 { font-weight: 800 !important; letter-spacing: -.02em !important; line-height: 1.14 !important; margin: 16px 0 32px !important; }
html:not(#r4) body.r4l .film-play { font: 600 16px/1 var(--r4-font) !important; padding: 0 28px 0 24px !important; height: 56px; background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 20px 40px -20px rgba(0, 0, 0, .7) !important; transition: transform .2s var(--r4-ease), background-color .2s var(--r4-ease) !important; }
html:not(#r4) body.r4l .film-play:hover { transform: translateY(-1px) !important; background: rgba(255, 255, 255, .16) !important; }

/* ============================================================ cards: one material */
html:not(#r4) body.r4l .feature, html:not(#r4) body.r4l .wf-card, html:not(#r4) body.r4l .price-card, html:not(#r4) body.r4l .tg-node, html:not(#r4) body.r4l .faq-item, html:not(#r4) body.r4l .demo-conn-card, html:not(#r4) body.r4l .demo-stat {
  background: var(--r4-card), #0b1020 !important; border: 1px solid var(--r4-line) !important; box-shadow: var(--r4-hl), var(--r4-sh-1) !important;
  transition: transform .25s var(--r4-ease), border-color .25s var(--r4-ease), box-shadow .25s var(--r4-ease) !important;
}
html:not(#r4) body.r4l .feature:hover, html:not(#r4) body.r4l .wf-card:hover, html:not(#r4) body.r4l .price-card:hover, html:not(#r4) body.r4l .tg-node:hover {
  transform: translateY(-1px) !important; border-color: var(--r4-line-2) !important; box-shadow: var(--r4-hl), var(--r4-sh-2) !important;
}
html:not(#r4) body.r4l .feature { border-radius: 20px !important; padding: 32px 28px !important; }
html:not(#r4) body.r4l .features-grid { gap: 16px !important; }
/* icon tiles: tinted glass in the tile's own colour (three colours stay, the gradient squares and their glow go) */
html:not(#r4) body.r4l .feature-icon {
  width: 48px !important; height: 48px !important; border-radius: 14px !important; font-size: 22px !important; margin-bottom: 24px !important;
  background: linear-gradient(180deg, rgba(255, 79, 116, .2), rgba(181, 83, 230, .12)) !important; color: #ffb3c4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 120, 150, .28) !important;
}
html:not(#r4) body.r4l .feature-icon.purple { background: linear-gradient(180deg, rgba(139, 92, 246, .24), rgba(99, 102, 241, .12)) !important; color: #d4c8ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(167, 139, 250, .32) !important; }
html:not(#r4) body.r4l .feature-icon.success { background: linear-gradient(180deg, rgba(34, 197, 94, .2), rgba(20, 184, 166, .1)) !important; color: #9ff0bf; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(74, 222, 128, .3) !important; }
html:not(#r4) body.r4l .feature--ai-editor { background: radial-gradient(120% 90% at 100% 0%, rgba(139, 92, 246, .16), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(255, 79, 116, .08), transparent 60%), var(--r4-card), #0b1020 !important; border-color: rgba(167, 139, 250, .26) !important; }
html:not(#r4) body.r4l .feature--ai-editor::before { display: none !important; }
html:not(#r4) body.r4l .feature--ai-editor .ai-badge { font: 600 12px/1 var(--r4-font) !important; letter-spacing: 0 !important; text-transform: none !important; padding: 6px 10px !important; color: #e4d9ff !important; }

/* workflow rail */
html:not(#r4) body.r4l .promo-card { border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--r4-sh-3) !important; margin: 48px auto 64px !important; }
html:not(#r4) body.r4l .promo-sound { font: 600 14px/1 var(--r4-font) !important; height: 40px; padding: 0 16px !important; background: rgba(0, 0, 0, .55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
html:not(#r4) body.r4l .wf { gap: 16px !important; padding: 0 !important; margin-top: 0 !important; }
html:not(#r4) body.r4l .wf-card { border-radius: 20px !important; padding: 24px 20px !important; }
html:not(#r4) body.r4l .wf-card::after {
  content: "" !important; width: 16px; height: 16px; background: var(--r4-ink-3); inset-inline-end: -16px !important;
  -webkit-mask: var(--r60i-arrow) center / contain no-repeat; mask: var(--r60i-arrow) center / contain no-repeat;
}
html[dir="ltr"]:not(#r4) body.r4l .wf-card::after { transform: translateY(-50%) scaleX(-1) !important; }
html:not(#r4) body.r4l .wf-n {
  font: 700 13px/1 var(--r4-font) !important; letter-spacing: .04em !important; font-variant-numeric: tabular-nums; margin-bottom: 16px !important;
  background: var(--r4-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;
}
html:not(#r4) body.r4l .wf-icon { display: none !important; }
html:not(#r4) body.r4l .wf-viz { height: 40px !important; margin-bottom: 16px !important; gap: 6px !important; }
html:not(#r4) body.r4l .wf-chip { font: 700 11px/1 var(--r4-font) !important; padding: 5px 8px !important; border-radius: 999px !important; display: inline-flex; align-items: center; gap: 3px; }
html:not(#r4) body.r4l .wf-tile { border-radius: 5px !important; width: 16px !important; height: 28px !important; background: linear-gradient(180deg, rgba(181, 83, 230, .55), rgba(255, 79, 116, .3)) !important; border-color: rgba(255, 255, 255, .14) !important; }
html:not(#r4) body.r4l .wf-card h3 { font-size: 18px !important; margin-bottom: 8px !important; }
html:not(#r4) body.r4l .wf-card p { font-size: 13.5px !important; }

/* split chapters */
html:not(#r4) body.r4l .wow { gap: 72px !important; padding: 0 !important; }
html:not(#r4) body.r4l .wow-list { gap: 12px !important; }
html:not(#r4) body.r4l .wow-list li { font-size: 15px !important; line-height: 1.6 !important; color: var(--r4-ink-2) !important; gap: 12px !important; }
html:not(#r4) body.r4l .wow-list li::before, html:not(#r4) body.r4l .price-feats li::before {
  content: "" !important; width: 18px; height: 18px; flex: none; margin-top: 3px; background: var(--r4-green);
  -webkit-mask: var(--r60i-check) center / contain no-repeat; mask: var(--r60i-check) center / contain no-repeat;
}
html:not(#r4) body.r4l .wow-tags { gap: 8px !important; margin-top: 24px !important; }
html:not(#r4) body.r4l .wow-tags span { font: 500 13px/1 var(--r4-font) !important; letter-spacing: 0 !important; height: 32px; display: inline-flex; align-items: center; padding: 0 12px !important; background: rgba(255, 255, 255, .035) !important; border-color: var(--r4-line) !important; color: var(--r4-ink-2) !important; box-shadow: var(--r4-hl); }
html:not(#r4) body.r4l .pod, html:not(#r4) body.r4l .guest, html:not(#r4) body.r4l .r26l-card, html:not(#r4) body.r4l .ed {
  border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, .1) !important;
  background: radial-gradient(100% 80% at 100% 0%, rgba(139, 92, 246, .12), transparent 60%), linear-gradient(170deg, #11162d, #0a0e1f) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--r4-sh-3) !important;
}
html:not(#r4) body.r4l .pod { padding: 24px !important; }
html:not(#r4) body.r4l .pod-cam { border-radius: 14px !important; }
html:not(#r4) body.r4l .pod-cut { font: 500 13px/1.4 var(--r4-font) !important; letter-spacing: 0 !important; }
html:not(#r4) body.r4l .pod-lower span { font: 600 12px/1.4 var(--r4-font) !important; letter-spacing: .02em !important; }
html:not(#r4) body.r4l .guest-box { border-radius: 16px !important; background: rgba(0, 0, 0, .28) !important; box-shadow: var(--r4-hl); }
html:not(#r4) body.r4l .guest-box .t { font: 500 13px/1.3 var(--r4-font) !important; letter-spacing: 0 !important; }
html:not(#r4) body.r4l .guest-arrow, html:not(#r4) body.r4l .tg-arrow { color: var(--r4-lilac) !important; font-size: 22px !important; display: inline-flex; justify-content: center; }
html:not(#r4) body.r4l .r26l-cover { background: var(--r4-grad-x) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -10px rgba(232, 74, 154, .7) !important; }
html:not(#r4) body.r4l .r26l-flow { font: 500 13px/1.4 var(--r4-font) !important; letter-spacing: 0 !important; display: flex; align-items: center; justify-content: center; gap: 6px; }
html:not(#r4) body.r4l .r26l-badge { font: 600 11.5px/1 var(--r4-font) !important; letter-spacing: 0 !important; padding: 5px 9px !important; }
html:not(#r4) body.r4l .r26l-cta { margin-top: 24px !important; }
html:not(#r4) body.r4l .r26l-cta .btn i[data-r60i] { font-size: 16px; }
html:not(#r4) body.r4l .ed { padding: 12px !important; }
html:not(#r4) body.r4l .ed img { border-radius: 14px !important; }
html:not(#r4) body.r4l .ed figcaption, html:not(#r4) body.r4l .r4-shot figcaption { font: 500 13px/1.4 var(--r4-font) !important; letter-spacing: 0 !important; color: var(--r4-ink-3) !important; margin-top: 12px !important; text-align: center; }

/* telegram -> everywhere */
html:not(#r4) body.r4l .tg { gap: 16px !important; padding: 0 !important; margin-top: 0 !important; max-width: 1040px !important; }
html:not(#r4) body.r4l .tg-node { border-radius: 20px !important; padding: 24px 20px !important; }
html:not(#r4) body.r4l .tg-node[style] { background: radial-gradient(100% 90% at 50% 0%, rgba(139, 92, 246, .2), transparent 70%), var(--r4-card), #0b1020 !important; border-color: rgba(167, 139, 250, .32) !important; }
html:not(#r4) body.r4l .tg-node .ic i[data-sl-ico] { color: var(--r4-lilac); }
html:not(#r4) body.r4l .tg-out i { font: 600 11.5px/1 var(--r4-font) !important; letter-spacing: 0 !important; padding: 6px 9px !important; border-radius: 999px !important; }

/* product shots (real screens rendered from the dashboard) */
html:not(#r4) body.r4l .r4-shot { margin: 56px auto 0; max-width: 1080px; position: relative; }
html:not(#r4) body.r4l .r4-shot::before {
  content: ""; position: absolute; inset: 8% 6% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, .28), rgba(232, 74, 154, .08) 55%, transparent 75%); filter: blur(40px);
}
html:not(#r4) body.r4l .r4-win { position: relative; border-radius: 16px; overflow: hidden; background: #08090f; border: 1px solid rgba(255, 255, 255, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--r4-sh-3); }
html:not(#r4) body.r4l .r4-win-bar { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: linear-gradient(180deg, #15182a, #10121f); border-bottom: 1px solid rgba(255, 255, 255, .06); }
html:not(#r4) body.r4l .r4-win-bar > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); flex: none; }
html:not(#r4) body.r4l .r4-win-bar > span { margin-inline: auto; padding: 4px 14px; border-radius: 8px; background: rgba(255, 255, 255, .05); font: 500 11.5px/1.2 ui-monospace, 'JetBrains Mono', monospace; color: var(--r4-ink-3); direction: ltr; }
html:not(#r4) body.r4l .r4-win img { display: block; width: 100%; height: auto; }
html:not(#r4) body.r4l .demo-panel .r4-shot { margin: 0 auto; max-width: none; }
html:not(#r4) body.r4l .demo-panel .r4-shot--narrow { max-width: 820px; }
html:not(#r4) body.r4l .demo-panel .r4-shot::before { display: none; }

/* ============================================================ how / demo / instead */
html:not(#r4) body.r4l .steps { gap: 16px !important; max-width: 880px; margin: 0 auto; }
html:not(#r4) body.r4l .step-row { gap: 24px !important; grid-template-columns: 56px 1fr !important; padding: 24px; border-radius: 20px; background: var(--r4-card); border: 1px solid var(--r4-line); box-shadow: var(--r4-hl); }
html:not(#r4) body.r4l .step-num { width: 48px !important; height: 48px !important; border-radius: 14px !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--r4-line-2) !important; box-shadow: var(--r4-hl); }
html:not(#r4) body.r4l .step-num span { background: var(--r4-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; font-weight: 800; }
html:not(#r4) body.r4l .step-row h3 { font-size: 20px !important; margin-bottom: 6px !important; }
html:not(#r4) body.r4l .step-row p { font-size: 15px !important; color: var(--r4-ink-2) !important; }
html:not(#r4) body.r4l .demo-wrap { border-radius: 28px !important; padding: 24px !important; background: linear-gradient(180deg, #0e1428, #0a0e1e) !important; border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--r4-sh-3) !important; margin-top: 0 !important; }
html:not(#r4) body.r4l .demo-tabs { background: rgba(0, 0, 0, .35) !important; border-radius: 14px !important; padding: 4px !important; gap: 2px !important; box-shadow: inset 0 0 0 1px var(--r4-line); margin-bottom: 24px !important; }
html:not(#r4) body.r4l .demo-tab { border-radius: 10px !important; font: 600 13.5px/1 var(--r4-font) !important; padding: 0 16px !important; height: 40px; display: inline-flex !important; align-items: center; gap: 7px; transition: background-color .2s var(--r4-ease), color .2s var(--r4-ease) !important; }
html:not(#r4) body.r4l .demo-tab:hover { color: var(--r4-ink) !important; background: rgba(255, 255, 255, .04) !important; }
html:not(#r4) body.r4l .demo-tab.active { background: rgba(255, 255, 255, .1) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 3px rgba(0, 0, 0, .4) !important; }
html:not(#r4) body.r4l .demo-tab.active i[data-sl-ico] { color: #ff8fab; }
html:not(#r4) body.r4l .demo-sample { font: 600 12px/1 var(--r4-font) !important; padding: 7px 12px !important; }
html:not(#r4) body.r4l .demo-stat-label { font: 500 12px/1.3 var(--r4-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
html:not(#r4) body.r4l .demo-conn-status { font: 600 11px/1 var(--r4-font) !important; padding: 5px 9px !important; }
html:not(#r4) body.r4l .demo-panel > div > div[style*="aspect-ratio:9/16"] span[style*="font:600 9px"] { font: 700 10px/1 var(--r4-font) !important; letter-spacing: .04em; padding: 5px 9px !important; }
html:not(#r4) body.r4l .instead-grid { gap: 10px !important; }
html:not(#r4) body.r4l .instead-grid span { font: 500 14px/1 var(--r4-font) !important; padding: 12px 16px !important; border-radius: 12px !important; }
html:not(#r4) body.r4l .instead-down { font-size: 26px !important; display: flex; justify-content: center; margin: 8px 0 24px !important; color: var(--r4-ink-3) !important; }
html:not(#r4) body.r4l .instead-one {
  background: var(--r4-grad) !important; font: 800 22px/1 var(--r4-font) !important; letter-spacing: -.01em; padding: 0 32px !important; height: 64px; border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 6px rgba(0, 0, 0, .3), 0 24px 48px -20px rgba(232, 74, 154, .8) !important;
}

/* ============================================================ pricing */
html:not(#r4) body.r4l .billing-toggle { background: transparent !important; color: var(--r4-ink-2) !important; height: 40px; padding: 0 18px !important; border-radius: 10px !important; font: 600 14px/1 var(--r4-font) !important; display: inline-flex !important; align-items: center; gap: 8px; }
html:not(#r4) body.r4l .billing-toggle.active:not([data-active="0"]), html:not(#r4) body.r4l .billing-toggle[data-active="1"] { background: rgba(255, 255, 255, .11) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 3px rgba(0, 0, 0, .4) !important; text-shadow: none; }
html:not(#r4) body.r4l #pricing div[style*="inline-flex"][style*="padding:6px"] { padding: 4px !important; border-radius: 14px !important; background: rgba(0, 0, 0, .35) !important; gap: 2px !important; }
html:not(#r4) body.r4l .pricing-grid { gap: 16px !important; }
html:not(#r4) body.r4l .price-card { border-radius: 22px !important; padding: 32px 26px !important; }
html:not(#r4) body.r4l .price-card.popular {
  border: 1px solid transparent !important;
  background: linear-gradient(180deg, #151633, #0c0f22) padding-box, linear-gradient(160deg, rgba(255, 79, 116, .75), rgba(125, 92, 255, .55) 50%, rgba(255, 255, 255, .08)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(232, 74, 154, .45), var(--r4-sh-2) !important;
}
html:not(#r4) body.r4l .price-card.popular::before { font: 700 12px/1 var(--r4-font) !important; letter-spacing: 0 !important; padding: 7px 12px !important; background: var(--r4-grad) !important; box-shadow: 0 6px 16px -6px rgba(232, 74, 154, .7); top: -13px !important; }
html[data-ui-lang="en"]:not(#r4) body.r4l .price-card.popular::before { content: "Most popular" !important; }
html:not(#r4) body.r4l .price-name { font-weight: 800 !important; font-size: 21px !important; letter-spacing: -.01em; }
html:not(#r4) body.r4l .price-tag { margin: 20px 0 !important; }
html:not(#r4) body.r4l .price-tag .num { font-weight: 800 !important; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: none !important; -webkit-text-fill-color: var(--r4-ink) !important; color: var(--r4-ink) !important; }
html:not(#r4) body.r4l .price-card.popular .price-tag .num, html:not(#r4) body.r4l .price-card--trial .price-tag .num { background: var(--r4-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
html:not(#r4) body.r4l .price-annual { font-weight: 600 !important; color: var(--r4-green) !important; }
html:not(#r4) body.r4l .price-big { border-radius: 14px !important; background: rgba(139, 92, 246, .1) !important; border-color: rgba(167, 139, 250, .26) !important; padding: 14px 16px !important; gap: 8px !important; box-shadow: var(--r4-hl); }
html:not(#r4) body.r4l .price-big li { font: 600 13px/1.45 var(--r4-font) !important; }
html:not(#r4) body.r4l .price-big li i[data-sl-ico] { color: var(--r4-lilac); margin-inline-end: 4px; }
/* each line reads as one sentence: the old flex layout split bold words into columns (the trial card) */
html:not(#r4) body.r4l .price-feats { gap: 12px !important; margin: 24px 0 !important; }
html:not(#r4) body.r4l .price-feats li { display: block !important; position: relative; padding-inline-start: 28px; font-size: 14px !important; line-height: 1.55 !important; color: var(--r4-ink-2) !important; }
html:not(#r4) body.r4l .price-feats li::before { position: absolute; inset-inline-start: 0; top: 0; margin-top: 2px !important; }
html:not(#r4) body.r4l .price-feats li strong { color: var(--r4-ink); font-weight: 700; }
html:not(#r4) body.r4l .price-card .btn { min-height: 48px; }
html:not(#r4) body.r4l .ent-card { border-radius: 22px !important; padding: 32px !important; background: radial-gradient(100% 120% at 100% 0%, rgba(251, 191, 36, .1), transparent 60%), var(--r4-card), #0b1020 !important; border-color: rgba(251, 191, 36, .28) !important; box-shadow: var(--r4-hl), var(--r4-sh-1); }
html:not(#r4) body.r4l .ent-tag { font: 700 12px/1 var(--r4-font) !important; letter-spacing: .06em !important; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
html:not(#r4) body.r4l .ent-card h3 { font-weight: 800 !important; font-size: 24px !important; letter-spacing: -.015em; }
html:not(#r4) body.r4l .ent-list { font-size: 14px !important; gap: 8px 24px !important; }
html:not(#r4) body.r4l .ent-list li::before { content: "" !important; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #fbbf24; vertical-align: .2em; margin-inline-end: 10px !important; }

/* ============================================================ security (inline-styled markup) */
html:not(#r4) body.r4l #security div[style*="border-radius:999px"] { font: 600 13px/1 var(--r4-font) !important; letter-spacing: 0 !important; text-transform: none !important; padding: 8px 14px !important; }
html:not(#r4) body.r4l #security h3[style] { font-weight: 800 !important; font-size: clamp(22px, 2.4vw, 28px) !important; letter-spacing: -.015em !important; line-height: 1.3 !important; }
html:not(#r4) body.r4l #security p[style] { font-size: 16px !important; line-height: 1.7 !important; color: var(--r4-ink-2) !important; }
html:not(#r4) body.r4l #security div[style*="rgba(255,255,255,.03)"] { background: var(--r4-card), #0b1020 !important; border-radius: 18px !important; padding: 20px !important; gap: 14px !important; box-shadow: var(--r4-hl), var(--r4-sh-1); }
html:not(#r4) body.r4l #security div[style*="text-align:left"] { text-align: start !important; gap: 16px !important; }
html:not(#r4) body.r4l #security div[style*="width:36px;height:36px"] { width: 40px !important; height: 40px !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
html:not(#r4) body.r4l #security div[style*="width:36px;height:36px"] svg { stroke-width: 1.8; }
html:not(#r4) body.r4l #security div[style*="font:700 13px"] { font: 700 14px/1.35 var(--r4-font) !important; }
html:not(#r4) body.r4l #security div[style*="font-size:12px"] { font-size: 13px !important; color: var(--r4-ink-2) !important; }
html:not(#r4) body.r4l .section h2 > i[data-sl-ico] { font-size: .66em; vertical-align: -.02em; color: var(--r4-lilac); margin-inline-end: 4px; }

/* ============================================================ faq / closing / footer */
html:not(#r4) body.r4l .faq { gap: 8px !important; max-width: 840px !important; }
html:not(#r4) body.r4l .faq-item { border-radius: 16px !important; box-shadow: var(--r4-hl) !important; }
html:not(#r4) body.r4l .faq-item:hover { border-color: var(--r4-line-2) !important; }
html:not(#r4) body.r4l .faq-q { font: 600 16px/1.45 var(--r4-font) !important; padding: 20px 24px !important; min-height: 64px; }
html:not(#r4) body.r4l .faq-q::after {
  content: "" !important; width: 18px; height: 18px; flex: none; background: var(--r4-ink-3);
  -webkit-mask: var(--r60i-chevd) center / contain no-repeat; mask: var(--r60i-chevd) center / contain no-repeat; transition: transform .25s var(--r4-ease) !important;
}
html:not(#r4) body.r4l .faq-item.open .faq-q::after { transform: rotate(180deg) !important; }
html:not(#r4) body.r4l .faq-item.open { border-color: var(--r4-line-2) !important; }
html:not(#r4) body.r4l .faq-a { font-size: 15px !important; line-height: 1.7 !important; padding: 0 24px 24px !important; color: var(--r4-ink-2) !important; }
html:not(#r4) body.r4l .cta-banner {
  border-radius: 32px !important; padding: 80px 32px !important; border: 1px solid rgba(255, 255, 255, .1) !important;
  background: radial-gradient(70% 120% at 50% 0%, rgba(232, 74, 154, .22), transparent 70%), radial-gradient(60% 100% at 100% 100%, rgba(125, 92, 255, .2), transparent 70%), linear-gradient(180deg, #11122a, #0a0c1d) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), var(--r4-sh-3) !important;
}
html:not(#r4) body.r4l .cta-banner::before { opacity: .7; -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent); }
html:not(#r4) body.r4l .cta-banner h2 { font-size: clamp(32px, 3.6vw, 48px) !important; margin-bottom: 16px !important; }
html:not(#r4) body.r4l .cta-banner p { font-size: 18px !important; line-height: 1.6 !important; margin-bottom: 32px !important; }
html:not(#r4) body.r4l footer { background: #070a17 !important; border-top: 1px solid var(--r4-line) !important; padding: 72px 32px 32px !important; }
html:not(#r4) body.r4l .foot-grid { gap: 48px !important; max-width: 1240px !important; }
html:not(#r4) body.r4l .foot-col h4 { font: 700 14px/1.3 var(--r4-font) !important; letter-spacing: 0 !important; color: var(--r4-ink) !important; margin-bottom: 16px !important; }
html:not(#r4) body.r4l .foot-col a { font-size: 14px !important; color: var(--r4-ink-3) !important; transition: color .2s var(--r4-ease); }
html:not(#r4) body.r4l .foot-col a:hover { color: var(--r4-ink) !important; }
html:not(#r4) body.r4l .foot-bottom { margin-top: 48px !important; font-size: 13px !important; color: var(--r4-ink-3) !important; }

/* ============================================================ motion */
html.r4-anim:not(#r4) body.r4l .r4-rv { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--r4-ease), transform .8s var(--r4-ease) !important; }
html.r4-anim:not(#r4) body.r4l .r4-rv.r4-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(#r4) body.r4l .r4-rv { opacity: 1 !important; transform: none !important; }
  html:not(#r4) body.r4l .stg-live i, html:not(#r4) body.r4l .live-pill::before { animation: none !important; }
  html:not(#r4) body.r4l .btn:hover, html:not(#r4) body.r4l .feature:hover, html:not(#r4) body.r4l .wf-card:hover, html:not(#r4) body.r4l .price-card:hover, html:not(#r4) body.r4l .platform-pill:hover, html:not(#r4) body.r4l .tg-node:hover, html:not(#r4) body:has(.card) .card .btn:hover { transform: none !important; }
  html:not(#r4) body.r4l *, html:not(#r4) body:has(.card) * { transition-duration: .01ms !important; }
}

/* ============================================================ tablets & phones */
@media (max-width: 1100px) {
  html:not(#r4) body.r4l .section { padding: 104px 28px !important; }
  html:not(#r4) body.r4l .wow { gap: 48px !important; }
  html:not(#r4) body.r4l .wf-card::after { display: none !important; }
}
@media (max-width: 1100px) {
  html:not(#r4) body.r4l .tg-arrow { transform: rotate(90deg) !important; }
  html[dir="rtl"]:not(#r4) body.r4l .tg-arrow { transform: rotate(-90deg) !important; }
}
@media (max-width: 640px) {
  html:not(#r4) body.r4l .guest-arrow { transform: rotate(90deg) !important; }
  html[dir="rtl"]:not(#r4) body.r4l .guest-arrow { transform: rotate(-90deg) !important; }
}
@media (max-width: 980px) {
  html:not(#r4) body.r4l header.top { padding: 0 20px !important; height: 64px; }
  html:not(#r4) body.r4l .hero-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  html:not(#r4) body.r4l .section.hero, html:not(#r4) body.r4l .hero { padding-top: 120px !important; padding-bottom: 80px !important; }
}
@media (max-width: 720px) {
  html:not(#r4) body.r4l .section { padding: 80px 20px !important; }
  html:not(#r4) body.r4l .section.hero, html:not(#r4) body.r4l .hero { padding-top: 112px !important; padding-bottom: 64px !important; }
  html:not(#r4) body.r4l h1, html:not(#r4) body.r4l .hero h1 { font-size: clamp(38px, 10.6vw, 48px) !important; line-height: 1.06 !important; }
  html:not(#r4) body.r4l .section h2, html:not(#r4) body.r4l .wow h2, html:not(#r4) body.r4l h2 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.14 !important; }
  html:not(#r4) body.r4l .hero p.lead { font-size: 17px !important; }
  html:not(#r4) body.r4l .section p.lead { font-size: 16.5px !important; margin-bottom: 40px !important; }
  html:not(#r4) body.r4l .hero-cta { flex-direction: column; align-items: stretch !important; }
  html:not(#r4) body.r4l .hero-cta .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.3; }
  html:not(#r4) body.r4l .hero-cta .r4-film { min-height: 44px; }
  html:not(#r4) body.r4l .hero-cta .btn-primary { font-size: 15px !important; padding: 12px 16px !important; min-height: 54px; letter-spacing: -.005em; }
  html:not(#r4) body.r4l .hero-cta .btn-ghost { min-height: 50px; }
  html:not(#r4) body.r4l .hero-proof > span { height: 32px; padding: 0 12px !important; font-size: 12.5px !important; }
  html:not(#r4) body.r4l .eyebrow { font-size: 12.5px !important; line-height: 1.35 !important; white-space: normal; }
  html:not(#r4) body.r4l .logos-strip { padding: 56px 16px !important; }
  html:not(#r4) body.r4l .platform-pill { height: 48px; padding: 0 14px !important; }
  html:not(#r4) body.r4l .feature { padding: 28px 22px !important; }
  html:not(#r4) body.r4l .step-row { grid-template-columns: 1fr !important; gap: 16px !important; padding: 22px; }
  html:not(#r4) body.r4l .demo-wrap { padding: 14px !important; border-radius: 22px !important; }
  html:not(#r4) body.r4l .demo-tab { height: 36px; padding: 0 12px !important; font-size: 12.5px !important; }
  html:not(#r4) body.r4l .r4-shot { margin-top: 40px; }
  html:not(#r4) body.r4l .r4-win { border-radius: 12px; }
  html:not(#r4) body.r4l .r4-win-bar { height: 28px; }
  html:not(#r4) body.r4l .r4-win-bar > span { font-size: 10px; padding: 3px 10px; }
  html:not(#r4) body.r4l .cta-banner { padding: 56px 20px !important; border-radius: 24px !important; }
  html:not(#r4) body.r4l .cta-banner .btn, html:not(#r4) body.r4l .price-card .btn, html:not(#r4) body.r4l .r26l-cta .btn { white-space: normal !important; text-align: center; line-height: 1.3; padding-block: 12px !important; height: auto; }
  html:not(#r4) body.r4l footer { padding: 56px 20px 28px !important; }
  html:not(#r4) body.r4l .film-band { min-height: 460px !important; }
}
@media (max-width: 420px) {
  html:not(#r4) body.r4l .platform-pill .name { display: none; }
}

/* ============================================================ sign-in / sign-up / password / verify */
html:not(#r4) body:has(.card)::before {
  background: radial-gradient(900px 520px at 15% -10%, rgba(139, 92, 246, .16), transparent 62%), radial-gradient(800px 480px at 95% 105%, rgba(255, 79, 116, .1), transparent 62%) !important;
}
html:not(#r4) body:has(.card) { font-family: var(--r4-font) !important; }
html:not(#r4) body:has(.card) .auth-wrap, html:not(#r4) body:has(.card) .card { position: relative; z-index: 1; }
html:not(#r4) body:has(.card) .card {
  border-radius: 24px !important; padding: 40px !important; border: 1px solid rgba(255, 255, 255, .11) !important;
  background: linear-gradient(180deg, #11172e, #0a0e1f) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--r4-sh-3) !important;
}
html:not(#r4) body:has(.card) .card h1 { font-weight: 800 !important; font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.015em !important; margin-bottom: 8px !important; }
html:not(#r4) body:has(.card) .sub { font-size: 15px !important; color: var(--r4-ink-2) !important; margin-bottom: 28px !important; }
html:not(#r4) body:has(.card) .brand { margin-bottom: 32px !important; }
html:not(#r4) body:has(.card) .brand-name { font-weight: 800 !important; letter-spacing: -.01em; }
html:not(#r4) body:has(.card) .brand-name small { letter-spacing: 0 !important; font-size: 13px !important; font-weight: 400 !important; color: var(--r4-ink-3) !important; margin-top: 2px; }
html:not(#r4) body:has(.card) .auth-side h2 { font-weight: 900 !important; font-size: clamp(34px, 3.4vw, 46px) !important; line-height: 1.08 !important; letter-spacing: -.02em !important; margin-bottom: 16px !important; }
html:not(#r4) body:has(.card) .auth-side h2 .grad { background: var(--r4-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
html:not(#r4) body:has(.card) .auth-side p { font-size: 17px !important; line-height: 1.65 !important; color: var(--r4-ink-2) !important; margin-bottom: 32px !important; }
html:not(#r4) body:has(.card) .auth-feats { gap: 16px !important; }
html:not(#r4) body:has(.card) .auth-feat { gap: 14px !important; align-items: flex-start; }
html:not(#r4) body:has(.card) .auth-feat-icon {
  width: 40px !important; height: 40px !important; border-radius: 12px !important; font-size: 19px !important; color: #e4d9ff;
  background: linear-gradient(180deg, rgba(139, 92, 246, .22), rgba(255, 79, 116, .1)) !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(167, 139, 250, .3) !important;
}
html:not(#r4) body:has(.card) .auth-feat strong { font-size: 15px !important; font-weight: 700 !important; margin-bottom: 2px !important; }
html:not(#r4) body:has(.card) .auth-feat span { font-size: 14px !important; color: var(--r4-ink-3) !important; }
html:not(#r4) body:has(.card) .field { gap: 8px !important; margin-bottom: 16px !important; }
html:not(#r4) body:has(.card) .field label, html:not(#r4) body:has(.card) .card label { font-weight: 500 !important; color: var(--r4-ink-2) !important; font-size: 14px !important; }
html:not(#r4) body:has(.card) .field input:not([type="checkbox"]):not([type="radio"]), html:not(#r4) body:has(.card) .field select, html:not(#r4) body:has(.card) .card input[type="email"], html:not(#r4) body:has(.card) .card input[type="password"], html:not(#r4) body:has(.card) .card input[type="text"], html:not(#r4) body:has(.card) .card input[type="tel"] {
  min-height: 50px; border-radius: 12px !important; background: rgba(0, 0, 0, .28) !important; border: 1px solid var(--r4-line-2) !important;
  color: var(--r4-ink) !important; font: 400 16px var(--r4-font) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
  transition: border-color .2s var(--r4-ease), box-shadow .2s var(--r4-ease), background-color .2s var(--r4-ease) !important;
}
html:not(#r4) body:has(.card) .field input::placeholder { color: #5f6880 !important; }
html:not(#r4) body:has(.card) .field input:not([type="checkbox"]):hover { border-color: rgba(255, 255, 255, .2) !important; }
html:not(#r4) body:has(.card) .field input:focus, html:not(#r4) body:has(.card) .card input:focus { outline: none !important; border-color: rgba(196, 181, 253, .8) !important; background: rgba(0, 0, 0, .36) !important; box-shadow: 0 0 0 4px rgba(139, 92, 246, .2) !important; }
html:not(#r4) body:has(.card) .card .btn { min-height: 50px; font-size: 16px !important; }
html:not(#r4) body:has(.card) .btn-google { background: #fff !important; color: #1f1f1f !important; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .3) !important; border: 0 !important; }
html:not(#r4) body:has(.card) .btn-google:hover { background: #f3f4f8 !important; transform: translateY(-1px) !important; }
html:not(#r4) body:has(.card) .divider { color: var(--r4-ink-3) !important; font-size: 13px !important; margin: 24px 0 !important; }
html:not(#r4) body:has(.card) .divider::before, html:not(#r4) body:has(.card) .divider::after { background: var(--r4-line-2) !important; }
html:not(#r4) body:has(.card) .card a:not(.btn), html:not(#r4) body:has(.card) .field-row a, html:not(#r4) body:has(.card) .foot a { color: var(--r4-lilac) !important; }
html:not(#r4) body:has(.card) .foot { font-size: 14px !important; margin-top: 24px !important; color: var(--r4-ink-3) !important; }
html:not(#r4) body:has(.card) .pw-toggle { color: var(--r4-ink-3) !important; font-size: 19px !important; border-radius: 10px !important; }
html:not(#r4) body:has(.card) .pw-toggle:hover { color: var(--r4-ink) !important; background: rgba(255, 255, 255, .06) !important; }
html:not(#r4) body:has(.card) input[type="checkbox"] { accent-color: #a77bf7; }
html:not(#r4) body:has(.card) label.field { align-items: center !important; font-size: 13px !important; }
html:not(#r4) body:has(.card) .back {
  height: 40px; padding: 0 14px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .045) !important; border: 1px solid var(--r4-line-2) !important;
  color: var(--r4-ink-2) !important; font: 500 14px/1 var(--r4-font) !important; display: inline-flex !important; align-items: center; gap: 6px; box-shadow: var(--r4-hl);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html:not(#r4) body:has(.card) .back:hover { color: var(--r4-ink) !important; background: rgba(255, 255, 255, .08) !important; }
html:not(#r4) body:has(.card) .back-arrow { font-size: 0 !important; width: 16px; height: 16px; display: inline-block; background: currentColor; -webkit-mask: var(--r60i-chev) center / contain no-repeat; mask: var(--r60i-chev) center / contain no-repeat; transform: scaleX(-1); }
html[dir="rtl"]:not(#r4) body:has(.card) .back-arrow { transform: none !important; }
html:not(#r4) body:has(.card) .error-msg, html:not(#r4) body:has(.card) .success-msg { border-radius: 12px !important; font-size: 14px !important; }
html:not(#r4) body:has(.card) .icon-hero { border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(167, 139, 250, .3) !important; background: linear-gradient(180deg, rgba(139, 92, 246, .22), rgba(255, 79, 116, .1)) !important; }
html:not(#r4) body:has(.card) .icon-hero.success::before, html:not(#r4) body:has(.card) .icon-hero.error::before { content: ""; width: 28px; height: 28px; background: currentColor; }
html:not(#r4) body:has(.card) .icon-hero.success, html:not(#r4) body:has(.card) .icon-hero.error { font-size: 0 !important; display: grid !important; place-items: center; }
html:not(#r4) body:has(.card) .icon-hero.success { color: #4ade80 !important; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .4) !important; background: rgba(34, 197, 94, .12) !important; }
html:not(#r4) body:has(.card) .icon-hero.success::before { -webkit-mask: var(--r60i-check) center / contain no-repeat; mask: var(--r60i-check) center / contain no-repeat; }
html:not(#r4) body:has(.card) .icon-hero.error { color: #ff7a85 !important; box-shadow: inset 0 0 0 1px rgba(255, 122, 133, .4) !important; background: rgba(255, 59, 92, .1) !important; }
html:not(#r4) body:has(.card) .icon-hero.error::before { -webkit-mask: var(--r60i-x) center / contain no-repeat; mask: var(--r60i-x) center / contain no-repeat; }
@media (max-width: 880px) { html:not(#r4) body:has(.card) .card { padding: 32px 24px !important; } }
@media (max-width: 480px) { html:not(#r4) body:has(.card) .card { padding: 28px 20px !important; border-radius: 20px !important; } html:not(#r4) body:has(.card) .card h1 { font-size: 24px !important; } }

/* the flagship card takes two columns where the grid has four, so 15 cards close in full rows */
@media (min-width: 1101px) { html:not(#r4) body.r4l .features-grid > .feature--ai-editor { grid-column: span 2; } html:not(#r4) body.r4l .feature--ai-editor p { max-width: 560px; } }

/* icon set (R60UI line icons: 20 px grid, 1.6 stroke, painted in currentColor) */
html:not(#r4) {
  --r60i-globe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M3%2010h14%22%2F%3E%3Cpath%20d%3D%22M10%203a11%2011%200%200%201%200%2014%2011%2011%200%200%201%200-14z%22%2F%3E%3C%2Fsvg%3E");
  --r60i-auto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.6%2010a5.6%205.6%200%201%201-1.9-4.2%22%2F%3E%3Cpath%20d%3D%22M15.8%203.6v3.4h-3.4%22%2F%3E%3Cpath%20d%3D%22M10%207.4v2.8l1.8%201.2%22%2F%3E%3C%2Fsvg%3E");
  --r60i-pen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.4%203.9l2.7%202.7L7.4%2015.3l-3.4.7.7-3.4z%22%2F%3E%3Cpath%20d%3D%22M11.9%205.4l2.7%202.7%22%2F%3E%3C%2Fsvg%3E");
  --r60i-zap: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.4%202.6L4.8%2011.2h4.2l-.9%206.2%206.8-8.8h-4.3z%22%2F%3E%3C%2Fsvg%3E");
  --r60i-repeat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209.2V8a2.5%202.5%200%200%201%202.5-2.5H15%22%2F%3E%3Cpath%20d%3D%22M12.6%203.4L15%205.5l-2.4%202.1%22%2F%3E%3Cpath%20d%3D%22M16%2010.8V12a2.5%202.5%200%200%201-2.5%202.5H5%22%2F%3E%3Cpath%20d%3D%22M7.4%2016.6L5%2014.5l2.4-2.1%22%2F%3E%3C%2Fsvg%3E");
  --r60i-scissors: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225.6%22%20cy%3D%2214.4%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2214.4%22%20cy%3D%2214.4%22%20r%3D%222.1%22%2F%3E%3Cpath%20d%3D%22M6.9%2012.8L15%203.4M13.1%2012.8L5%203.4%22%2F%3E%3C%2Fsvg%3E");
  --r60i-chat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.4%2012.2a1.3%201.3%200%200%201-1.3%201.3H7.4L4%2016.4V5.1a1.3%201.3%200%200%201%201.3-1.3h9.8a1.3%201.3%200%200%201%201.3%201.3z%22%2F%3E%3C%2Fsvg%3E");
  --r60i-gift: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.4%22%20y%3D%227.4%22%20width%3D%2213.2%22%20height%3D%223.4%22%20rx%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M4.6%2010.8v5a.8.8%200%200%200%20.8.8h9.2a.8.8%200%200%200%20.8-.8v-5%22%2F%3E%3Cpath%20d%3D%22M10%207.4v9.2%22%2F%3E%3Cpath%20d%3D%22M10%207.4C8.6%204.4%205.6%204.6%206%206.4c.3%201.2%202.4%201%204%201z%22%2F%3E%3Cpath%20d%3D%22M10%207.4c1.4-3%204.4-2.8%204-1-.3%201.2-2.4%201-4%201z%22%2F%3E%3C%2Fsvg%3E");
  --r60i-timer: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2211%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M10%207.8V11l2.2%201.6%22%2F%3E%3Cpath%20d%3D%22M8%202.8h4%22%2F%3E%3C%2Fsvg%3E");
  --r60i-shield: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202.8l5.8%202.2v4.4c0%203.8-2.5%206.4-5.8%207.8-3.3-1.4-5.8-4-5.8-7.8V5z%22%2F%3E%3Cpath%20d%3D%22M7.4%2010l1.8%201.8%203.4-3.6%22%2F%3E%3C%2Fsvg%3E");
  --r60i-eye: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2010s3-4.5%208-4.5S18%2010%2018%2010s-3%204.5-8%204.5S2%2010%202%2010z%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
  --r60i-eyeoff: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.6%205.9A8.6%208.6%200%200%201%2010%205.5c5%200%208%204.5%208%204.5a13.6%2013.6%200%200%201-2.2%202.6%22%2F%3E%3Cpath%20d%3D%22M5.1%206.9A13.3%2013.3%200%200%200%202%2010s3%204.5%208%204.5a8%208%200%200%200%203.6-.9%22%2F%3E%3Cpath%20d%3D%22M8.6%208.6a2%202%200%200%200%202.8%202.8%22%2F%3E%3Cpath%20d%3D%22M3.4%203.4l13.2%2013.2%22%2F%3E%3C%2Fsvg%3E");
  --r60i-lock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224.6%22%20y%3D%228.8%22%20width%3D%2210.8%22%20height%3D%227.4%22%20rx%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M7%208.8V6.8a3%203%200%200%201%206%200v2%22%2F%3E%3C%2Fsvg%3E");
  --r60i-key: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226.8%22%20cy%3D%2213.2%22%20r%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M9.1%2010.9l6.5-6.5%22%2F%3E%3Cpath%20d%3D%22M13.6%206.4l1.8%201.8%22%2F%3E%3Cpath%20d%3D%22M12%208l1.4%201.4%22%2F%3E%3C%2Fsvg%3E");
  --r60i-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.8%22%20y%3D%225%22%20width%3D%2214.4%22%20height%3D%2210%22%20rx%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M3.2%206l6.8%205%206.8-5%22%2F%3E%3C%2Fsvg%3E");
  --r60i-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%222.5%22%20width%3D%228%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2015.2h2%22%2F%3E%3C%2Fsvg%3E");
  --r60i-sound: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h2.5L10%205v10L6.5%2012H4z%22%2F%3E%3Cpath%20d%3D%22M13%207.6a3.4%203.4%200%200%201%200%204.8%22%2F%3E%3Cpath%20d%3D%22M15%205.6a6.2%206.2%200%200%201%200%208.8%22%2F%3E%3C%2Fsvg%3E");
  --r60i-record: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%226.6%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222.8%22%2F%3E%3C%2Fsvg%3E");
  --r60i-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.4%22%20y%3D%224.8%22%20width%3D%2213.2%22%20height%3D%2211.4%22%20rx%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M3.4%208.4h13.2%22%2F%3E%3Cpath%20d%3D%22M7%203.4v2.6M13%203.4v2.6%22%2F%3E%3C%2Fsvg%3E");
  --r60i-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224.5%22%20width%3D%2215%22%20height%3D%2211%22%20rx%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%228.5%22%20r%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M3%2014l4.5-4%203.5%203%203-2.5%203%203.5%22%2F%3E%3C%2Fsvg%3E");
  --r60i-chroma: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224.5%22%20width%3D%2215%22%20height%3D%2211%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M7%2015.5l6-11%22%2F%3E%3C%2Fsvg%3E");
  --r60i-ratio: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M3%2012h9v5%22%2F%3E%3C%2Fsvg%3E");
  --r60i-monitor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2215%22%20height%3D%2210%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M7%2017h6%22%2F%3E%3Cpath%20d%3D%22M10%2014v3%22%2F%3E%3C%2Fsvg%3E");
  --r60i-card: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%224.8%22%20width%3D%2214.8%22%20height%3D%2210.4%22%20rx%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M2.6%208.4h14.8%22%2F%3E%3Cpath%20d%3D%22M5.4%2012.4h3%22%2F%3E%3C%2Fsvg%3E");
  --r60i-receipt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%202.8h10v14.4l-2-1.2-1.6%201.2-1.4-1.2-1.4%201.2L7%2016l-2%201.2z%22%2F%3E%3Cpath%20d%3D%22M7.6%207h4.8M7.6%2010h4.8%22%2F%3E%3C%2Fsvg%3E");
  --r60i-ticket: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206.4a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v2a1.6%201.6%200%200%200%200%203.2v2a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1v-2a1.6%201.6%200%200%200%200-3.2z%22%2F%3E%3Cpath%20d%3D%22M12%205.4v9.2%22%20stroke-dasharray%3D%221.4%201.6%22%2F%3E%3C%2Fsvg%3E");
  --r60i-plans: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203l7%203.6-7%203.6-7-3.6z%22%2F%3E%3Cpath%20d%3D%22M3%2010.2l7%203.6%207-3.6%22%2F%3E%3Cpath%20d%3D%22M3%2013.6l7%203.6%207-3.6%22%2F%3E%3C%2Fsvg%3E");
  --r60i-building: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224.4%22%20y%3D%222.8%22%20width%3D%2211.2%22%20height%3D%2214.4%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M7.6%206.2h1.2M11.2%206.2h1.2M7.6%209.2h1.2M11.2%209.2h1.2M7.6%2012.2h1.2M11.2%2012.2h1.2%22%2F%3E%3Cpath%20d%3D%22M8.8%2017.2v-2.6h2.4v2.6%22%2F%3E%3C%2Fsvg%3E");
  --r60i-font: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2015.6L8.2%204.4h.6l4.2%2011.2%22%2F%3E%3Cpath%20d%3D%22M5.6%2011.6h5.8%22%2F%3E%3Cpath%20d%3D%22M14%209.2v6.4%22%2F%3E%3Cpath%20d%3D%22M14%2011.6a2%202%200%201%201%200%202.4%22%2F%3E%3C%2Fsvg%3E");
  --r60i-box: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202.8l6.6%203.4v7.6L10%2017.2l-6.6-3.4V6.2z%22%2F%3E%3Cpath%20d%3D%22M3.6%206.3L10%209.6l6.4-3.3%22%2F%3E%3Cpath%20d%3D%22M10%209.6v7.4%22%2F%3E%3C%2Fsvg%3E");
  --r60i-send: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%203L8.6%2011.4%22%2F%3E%3Cpath%20d%3D%22M17%203l-5.4%2014-3-5.6L3%208.4z%22%2F%3E%3C%2Fsvg%3E");
  --r60i-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010.5l4%204%208-9%22%2F%3E%3C%2Fsvg%3E");
  --r60i-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%205.5l9%209%22%2F%3E%3Cpath%20d%3D%22M14.5%205.5l-9%209%22%2F%3E%3C%2Fsvg%3E");
  --r60i-users: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.6%22%20cy%3D%227.4%22%20r%3D%222.7%22%2F%3E%3Cpath%20d%3D%22M2.8%2016.2a4.9%204.9%200%200%201%209.6%200%22%2F%3E%3Cpath%20d%3D%22M13.6%205.2a2.7%202.7%200%200%201%200%205.2%22%2F%3E%3Cpath%20d%3D%22M14.4%2012.2a4.9%204.9%200%200%201%203%204%22%2F%3E%3C%2Fsvg%3E");
  --r60i-devices: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.4%22%20y%3D%224.2%22%20width%3D%2211.2%22%20height%3D%228%22%20rx%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M5%2015.6h6%22%2F%3E%3Crect%20x%3D%2214.2%22%20y%3D%227.6%22%20width%3D%223.6%22%20height%3D%228.2%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
  --r60i-door: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.6%203.2H5.4a1%201%200%200%200-1%201v11.6a1%201%200%200%200%201%201h7.2%22%2F%3E%3Cpath%20d%3D%22M9.4%2010h8%22%2F%3E%3Cpath%20d%3D%22M15%207.4l2.6%202.6-2.6%202.6%22%2F%3E%3C%2Fsvg%3E");
  --r60i-inbox: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011.2l2.2-6.4h9.6l2.2%206.4v4a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1z%22%2F%3E%3Cpath%20d%3D%22M3%2011.2h4l1%202h4l1-2h4%22%2F%3E%3C%2Fsvg%3E");
  --r60i-ticker: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206.5h14%22%2F%3E%3Cpath%20d%3D%22M3%2010h9%22%2F%3E%3Cpath%20d%3D%22M3%2013.5h11%22%2F%3E%3C%2Fsvg%3E");
  --r60i-drop: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203s5%205.4%205%208.8A5%205%200%200%201%205%2011.8C5%208.4%2010%203%2010%203z%22%2F%3E%3C%2Fsvg%3E");
  --r60i-blur: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%226.6%22%20stroke-dasharray%3D%221.6%202%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222.8%22%2F%3E%3C%2Fsvg%3E");
  --r60i-stethoscope: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203.2v4.2a3.4%203.4%200%200%200%206.8%200V3.2%22%2F%3E%3Cpath%20d%3D%22M8.4%2010.8v1.8a3.8%203.8%200%200%200%207.6%200v-1.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%229.6%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E");
  --r60i-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M10%206v4l2.6%201.6%22%2F%3E%3C%2Fsvg%3E");
  --r60i-chev: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.4%204.6L7%2010l5.4%205.4%22%2F%3E%3C%2Fsvg%3E");
  --r60i-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2010H4.4%22%2F%3E%3Cpath%20d%3D%22M9%205.2L4.2%2010%209%2014.8%22%2F%3E%3C%2Fsvg%3E");
  --r60i-play: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.4%204.4v11.2L15.6%2010z%22%2F%3E%3C%2Fsvg%3E");
  --r60i-copy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%229.4%22%20height%3D%229.4%22%20rx%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M13%207V5a1.4%201.4%200%200%200-1.4-1.4H5A1.4%201.4%200%200%200%203.6%205v6.6A1.4%201.4%200%200%200%205%2013h2%22%2F%3E%3C%2Fsvg%3E");
  --r60i-chevd: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.2%207.8l4.8%204.8%204.8-4.8%22%2F%3E%3C%2Fsvg%3E");
  --r60i-plus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204.4v11.2M4.4%2010h11.2%22%2F%3E%3C%2Fsvg%3E");
}
i[data-r60i]{display:inline-block;width:1em;height:1em;vertical-align:-.14em;background-color:currentColor;flex:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;font-style:normal}
i[data-r60i="globe"]{-webkit-mask-image:var(--r60i-globe);mask-image:var(--r60i-globe)}
i[data-r60i="auto"]{-webkit-mask-image:var(--r60i-auto);mask-image:var(--r60i-auto)}
i[data-r60i="pen"]{-webkit-mask-image:var(--r60i-pen);mask-image:var(--r60i-pen)}
i[data-r60i="zap"]{-webkit-mask-image:var(--r60i-zap);mask-image:var(--r60i-zap)}
i[data-r60i="repeat"]{-webkit-mask-image:var(--r60i-repeat);mask-image:var(--r60i-repeat)}
i[data-r60i="scissors"]{-webkit-mask-image:var(--r60i-scissors);mask-image:var(--r60i-scissors)}
i[data-r60i="chat"]{-webkit-mask-image:var(--r60i-chat);mask-image:var(--r60i-chat)}
i[data-r60i="gift"]{-webkit-mask-image:var(--r60i-gift);mask-image:var(--r60i-gift)}
i[data-r60i="timer"]{-webkit-mask-image:var(--r60i-timer);mask-image:var(--r60i-timer)}
i[data-r60i="shield"]{-webkit-mask-image:var(--r60i-shield);mask-image:var(--r60i-shield)}
i[data-r60i="eye"]{-webkit-mask-image:var(--r60i-eye);mask-image:var(--r60i-eye)}
i[data-r60i="eyeoff"]{-webkit-mask-image:var(--r60i-eyeoff);mask-image:var(--r60i-eyeoff)}
i[data-r60i="lock"]{-webkit-mask-image:var(--r60i-lock);mask-image:var(--r60i-lock)}
i[data-r60i="key"]{-webkit-mask-image:var(--r60i-key);mask-image:var(--r60i-key)}
i[data-r60i="mail"]{-webkit-mask-image:var(--r60i-mail);mask-image:var(--r60i-mail)}
i[data-r60i="phone"]{-webkit-mask-image:var(--r60i-phone);mask-image:var(--r60i-phone)}
i[data-r60i="sound"]{-webkit-mask-image:var(--r60i-sound);mask-image:var(--r60i-sound)}
i[data-r60i="record"]{-webkit-mask-image:var(--r60i-record);mask-image:var(--r60i-record)}
i[data-r60i="calendar"]{-webkit-mask-image:var(--r60i-calendar);mask-image:var(--r60i-calendar)}
i[data-r60i="image"]{-webkit-mask-image:var(--r60i-image);mask-image:var(--r60i-image)}
i[data-r60i="chroma"]{-webkit-mask-image:var(--r60i-chroma);mask-image:var(--r60i-chroma)}
i[data-r60i="ratio"]{-webkit-mask-image:var(--r60i-ratio);mask-image:var(--r60i-ratio)}
i[data-r60i="monitor"]{-webkit-mask-image:var(--r60i-monitor);mask-image:var(--r60i-monitor)}
i[data-r60i="card"]{-webkit-mask-image:var(--r60i-card);mask-image:var(--r60i-card)}
i[data-r60i="receipt"]{-webkit-mask-image:var(--r60i-receipt);mask-image:var(--r60i-receipt)}
i[data-r60i="ticket"]{-webkit-mask-image:var(--r60i-ticket);mask-image:var(--r60i-ticket)}
i[data-r60i="plans"]{-webkit-mask-image:var(--r60i-plans);mask-image:var(--r60i-plans)}
i[data-r60i="building"]{-webkit-mask-image:var(--r60i-building);mask-image:var(--r60i-building)}
i[data-r60i="font"]{-webkit-mask-image:var(--r60i-font);mask-image:var(--r60i-font)}
i[data-r60i="box"]{-webkit-mask-image:var(--r60i-box);mask-image:var(--r60i-box)}
i[data-r60i="send"]{-webkit-mask-image:var(--r60i-send);mask-image:var(--r60i-send)}
i[data-r60i="check"]{-webkit-mask-image:var(--r60i-check);mask-image:var(--r60i-check)}
i[data-r60i="x"]{-webkit-mask-image:var(--r60i-x);mask-image:var(--r60i-x)}
i[data-r60i="users"]{-webkit-mask-image:var(--r60i-users);mask-image:var(--r60i-users)}
i[data-r60i="devices"]{-webkit-mask-image:var(--r60i-devices);mask-image:var(--r60i-devices)}
i[data-r60i="door"]{-webkit-mask-image:var(--r60i-door);mask-image:var(--r60i-door)}
i[data-r60i="inbox"]{-webkit-mask-image:var(--r60i-inbox);mask-image:var(--r60i-inbox)}
i[data-r60i="ticker"]{-webkit-mask-image:var(--r60i-ticker);mask-image:var(--r60i-ticker)}
i[data-r60i="drop"]{-webkit-mask-image:var(--r60i-drop);mask-image:var(--r60i-drop)}
i[data-r60i="blur"]{-webkit-mask-image:var(--r60i-blur);mask-image:var(--r60i-blur)}
i[data-r60i="stethoscope"]{-webkit-mask-image:var(--r60i-stethoscope);mask-image:var(--r60i-stethoscope)}
i[data-r60i="clock"]{-webkit-mask-image:var(--r60i-clock);mask-image:var(--r60i-clock)}
i[data-r60i="chev"]{-webkit-mask-image:var(--r60i-chev);mask-image:var(--r60i-chev)}
i[data-r60i="arrow"]{-webkit-mask-image:var(--r60i-arrow);mask-image:var(--r60i-arrow)}
i[data-r60i="play"]{-webkit-mask-image:var(--r60i-play);mask-image:var(--r60i-play)}
i[data-r60i="copy"]{-webkit-mask-image:var(--r60i-copy);mask-image:var(--r60i-copy)}
i[data-r60i="chevd"]{-webkit-mask-image:var(--r60i-chevd);mask-image:var(--r60i-chevd)}
i[data-r60i="plus"]{-webkit-mask-image:var(--r60i-plus);mask-image:var(--r60i-plus)}

/* ==================================================================================================================
 * R60UI5 layer (public pages) - appended to the R60UI4 build. Restraint over decoration:
 *   - one neutral canvas (the per-section tinted washes go), one section-head look, no icons inside h2
 *   - hero: plain eyebrow line, 2 CTAs + a note; quieter primary button (no coloured glow)
 *   - #trust-section: one row of official marks (twpro-brand-marks.js draws them at its uniform 29px; never resized,
 *     faded or filtered here), no boxes
 *   - #try: the Publish Everywhere demo;  #security: hairline list of checkable statements;  footer: signature + trust
 *   - features: a hairline list instead of 20 equal cards
 * html:not(#r4):not(#r5) body.r4l = the landing (body.r4l) with one more id-level :not() than R60UI4, so these win where both use !important.
 * ================================================================================================================== */

/* ---------- canvas & rhythm */
html:not(#r4):not(#r5) body.r4l #trust-section, html:not(#r4):not(#r5) body.r4l #podcast-director, html:not(#r4):not(#r5) body.r4l #editor, html:not(#r4):not(#r5) body.r4l #autopublish, html:not(#r4):not(#r5) body.r4l #security, html:not(#r4):not(#r5) body.r4l .r26l-sec, html:not(#r4):not(#r5) body.r4l #features, html:not(#r4):not(#r5) body.r4l #how { background: none !important; }
html:not(#r4):not(#r5) body.r4l .section > h2 > i[data-sl-ico], html:not(#r4):not(#r5) body.r4l .section h2 > i[data-sl-ico] { display: none !important; }
html:not(#r4):not(#r5) body.r4l .section > h2, html:not(#r4):not(#r5) body.r4l .r5-head h2 { font-weight: 750 !important; letter-spacing: -.028em !important; }
html[lang="he"]:not(#r4):not(#r5) body.r4l .section > h2, html[lang="he"]:not(#r4):not(#r5) body.r4l .r5-head h2 { letter-spacing: -.012em !important; }
html:not(#r4):not(#r5) body.r4l .r5-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons: the brand gradient stays on the primary action, the glow goes */
html:not(#r4):not(#r5) body.r4l .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .35) !important; text-shadow: none !important; }
html:not(#r4):not(#r5) body.r4l .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 2px 6px rgba(0, 0, 0, .35), 0 10px 24px -14px rgba(232, 74, 154, .6) !important; }

/* ---------- hero */
html:not(#r4):not(#r5) body.r4l .r5-eyebrow { font: 500 15px/1.4 var(--r4-font) !important; color: var(--r4-ink-2) !important; margin: 0 0 20px !important; letter-spacing: 0 !important; }
html:not(#r4):not(#r5) body.r4l .r5-cta { gap: 12px !important; margin-top: 8px !important; }
html:not(#r4):not(#r5) body.r4l .r5-cta-note { margin: 16px 0 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--r4-ink-3) !important; }
html:not(#r4):not(#r5) body.r4l .hero-proof, html:not(#r4):not(#r5) body.r4l .hero-trust { display: none !important; }
html:not(#r4):not(#r5) body.r4l .stg-ready, html:not(#r4):not(#r5) body.r4l .stg-badge { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; font: 500 13px/1.4 var(--r4-font) !important; }
html:not(#r4):not(#r5) body.r4l .stg-ready { color: var(--r4-green) !important; }
html:not(#r4):not(#r5) body.r4l .stg-badge { color: var(--r4-ink-3) !important; }
html:not(#r4):not(#r5) body.r4l .stg-rail .stg-ai, html:not(#r4):not(#r5) body.r4l .stg-rail .stg-out { background: none !important; border-color: transparent !important; box-shadow: none !important; color: var(--r4-ink-2) !important; }

/* ---------- integrations row */
html:not(#r4):not(#r5) body.r4l .r5-int { padding: 40px 32px 104px !important; max-width: 1240px; margin: 0 auto !important; text-align: center; }
html:not(#r4):not(#r5) body.r4l .r5-int-h { font: 500 15px/1.5 var(--r4-font) !important; color: var(--r4-ink-3) !important; margin: 0 0 28px !important; }
html:not(#r4):not(#r5) body.r4l .r5-int-row { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 40px; max-width: 980px; }
html:not(#r4):not(#r5) body.r4l .r5-int-row li { display: flex; align-items: center; line-height: 0; }
html:not(#r4):not(#r5) body.r4l .r5-mk { display: inline-flex; align-items: center; line-height: 0; }
html:not(#r4):not(#r5) body.r4l .r5-mk:not(:has(svg))::before { content: ""; width: 29px; height: 29px; }
html:not(#r4):not(#r5) body.r4l .r5-int-sub { font-size: 14px !important; line-height: 1.6 !important; color: var(--r4-ink-3) !important; margin: 32px auto 0 !important; max-width: 640px; }

/* ---------- #try: the product moment */
html:not(#r4):not(#r5) body.r4l .r5-try { padding-top: 24px !important; }
html:not(#r4):not(#r5) body.r4l .r5-head { text-align: center; }
html:not(#r4):not(#r5) body.r4l .r5-app {
  max-width: 1040px; margin: 0 auto; text-align: start; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #0d1226, #0a0e1f); border: 1px solid var(--r4-line-2); box-shadow: var(--r4-hl), var(--r4-sh-2);
}
html:not(#r4):not(#r5) body.r4l .r5-app-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--r4-line); background: rgba(255, 255, 255, .02); }
html:not(#r4):not(#r5) body.r4l .r5-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--r4-ink-3); white-space: nowrap; overflow: hidden; }
html:not(#r4):not(#r5) body.r4l .r5-crumb b { color: var(--r4-ink); font-weight: 600; }
html:not(#r4):not(#r5) body.r4l .r5-sep { font-size: 12px; opacity: .6; }
html[dir="ltr"]:not(#r4):not(#r5) body.r4l .r5-sep { transform: scaleX(-1); }
html:not(#r4):not(#r5) body.r4l .r5-demo-tag { font-size: 12px; color: var(--r4-ink-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
html:not(#r4):not(#r5) body.r4l .r5-demo-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c4b5fd; }
html:not(#r4):not(#r5) body.r4l .r5-app-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html:not(#r4):not(#r5) body.r4l .r5-pane { padding: 24px; min-width: 0; }
html:not(#r4):not(#r5) body.r4l .r5-nets { border-inline-start: 1px solid var(--r4-line); }
html:not(#r4):not(#r5) body.r4l .r5-step { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 15px; color: var(--r4-ink); }
html:not(#r4):not(#r5) body.r4l .r5-step b { font-weight: 650; }
html:not(#r4):not(#r5) body.r4l .r5-num { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 12px/1 var(--r4-font); color: var(--r4-ink-2); border: 1px solid var(--r4-line-2); font-variant-numeric: tabular-nums; }
html:not(#r4):not(#r5) body.r4l .r5-picked { margin-inline-start: auto; font-size: 12.5px; color: var(--r4-ink-3); font-variant-numeric: tabular-nums; }
html:not(#r4):not(#r5) body.r4l .r5-clips { display: flex; gap: 12px; }
html:not(#r4):not(#r5) body.r4l .r5-clip {
  position: relative; flex: 1 1 0; max-width: 112px; aspect-ratio: 9 / 16; padding: 0; border: 1px solid var(--r4-line-2); border-radius: 10px; overflow: hidden;
  background: #060914; cursor: pointer; transition: border-color .2s var(--r4-ease), box-shadow .2s var(--r4-ease), opacity .2s var(--r4-ease) !important; opacity: .7;
}
html:not(#r4):not(#r5) body.r4l .r5-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
html:not(#r4):not(#r5) body.r4l .r5-clip:hover { opacity: .9; }
html:not(#r4):not(#r5) body.r4l .r5-clip[aria-checked="true"] { opacity: 1; border-color: transparent; box-shadow: 0 0 0 2px #c4b5fd !important; }
html:not(#r4):not(#r5) body.r4l .r5-dur { position: absolute; inset-inline-start: 6px; bottom: 6px; font: 600 11px/1 var(--r4-font); color: #fff; background: rgba(0, 0, 0, .62); padding: 4px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; direction: ltr; }
html:not(#r4):not(#r5) body.r4l .r5-meta { margin: 12px 0 20px !important; font-size: 13px !important; color: var(--r4-ink-3) !important; }
html:not(#r4):not(#r5) body.r4l .r5-label { display: block; font-size: 13px; font-weight: 600; color: var(--r4-ink-2); margin-bottom: 8px; }
html:not(#r4):not(#r5) body.r4l .r5-cap {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--r4-line-2);
  background: rgba(255, 255, 255, .03); color: var(--r4-ink); font: 400 15px/1.55 var(--r4-font); transition: border-color .2s var(--r4-ease), box-shadow .2s var(--r4-ease);
}
html:not(#r4):not(#r5) body.r4l .r5-cap:focus { outline: none; border-color: rgba(196, 181, 253, .55); box-shadow: 0 0 0 3px rgba(196, 181, 253, .18); }
html:not(#r4):not(#r5) body.r4l .r5-capfoot { display: flex; justify-content: flex-end; margin-top: 6px; }
html:not(#r4):not(#r5) body.r4l .r5-cc { font-size: 12px; color: var(--r4-ink-3); font-variant-numeric: tabular-nums; direction: ltr; }
html:not(#r4):not(#r5) body.r4l .r5-netlist { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--r4-line); }
html:not(#r4):not(#r5) body.r4l .r5-net { border-bottom: 1px solid var(--r4-line); }
html:not(#r4):not(#r5) body.r4l .r5-sw-btn {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 4px; background: none; border: 0; color: inherit; cursor: pointer; text-align: start;
  font: inherit; border-radius: 8px; transition: background-color .15s var(--r4-ease);
}
html:not(#r4):not(#r5) body.r4l .r5-sw-btn:hover { background: rgba(255, 255, 255, .03); }
html:not(#r4):not(#r5) body.r4l .r5-sw-btn:disabled { cursor: default; }
html:not(#r4):not(#r5) body.r4l .r5-nn { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--r4-ink); line-height: 1.25; }
html:not(#r4):not(#r5) body.r4l .r5-nn small { display: block; font-size: 12.5px; font-weight: 400; color: var(--r4-ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(#r4):not(#r5) body.r4l .r5-sw-btn[aria-checked="false"] .r5-nn { color: var(--r4-ink-3); }
html:not(#r4):not(#r5) body.r4l .r5-sw { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background-color .2s var(--r4-ease); }
html:not(#r4):not(#r5) body.r4l .r5-sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); transition: inset-inline-start .2s var(--r4-ease); }
html:not(#r4):not(#r5) body.r4l .r5-sw-btn[aria-checked="true"] .r5-sw { background: #7d5cff; }
html:not(#r4):not(#r5) body.r4l .r5-sw-btn[aria-checked="true"] .r5-sw::after { inset-inline-start: 16px; }
html:not(#r4):not(#r5) body.r4l .r5-st { font-size: 12.5px; color: var(--r4-ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
html:not(#r4):not(#r5) body.r4l .r5-net[data-s] .r5-sw { display: none; }
html:not(#r4):not(#r5) body.r4l .r5-net[data-s="up"] .r5-st::before { content: ""; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(196, 181, 253, .9) 0 40%, rgba(255, 255, 255, .12) 40% 100%); background-size: 200% 100%; animation: r5bar 1s linear infinite; }
html:not(#r4):not(#r5) body.r4l .r5-net[data-s="ok"] .r5-st { color: var(--r4-green); font-weight: 600; }
html:not(#r4):not(#r5) body.r4l .r5-net[data-s="ok"] .r5-st::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--r60i-check) center / contain no-repeat; mask: var(--r60i-check) center / contain no-repeat; }
@keyframes r5bar { from { background-position: 100% 0; } to { background-position: -100% 0; } }
html:not(#r4):not(#r5) body.r4l .r5-when { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--r4-line); margin-bottom: 16px; }
html:not(#r4):not(#r5) body.r4l .r5-when button { border: 0; background: none; color: var(--r4-ink-2); font: 500 13.5px/1 var(--r4-font); padding: 8px 14px; border-radius: 7px; cursor: pointer; transition: background-color .15s var(--r4-ease), color .15s var(--r4-ease); }
html:not(#r4):not(#r5) body.r4l .r5-when button[aria-checked="true"] { background: rgba(255, 255, 255, .1); color: var(--r4-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
html:not(#r4):not(#r5) body.r4l .r5-go { width: 100%; min-height: 46px; font-size: 15px !important; }
html:not(#r4):not(#r5) body.r4l .r5-go:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
html:not(#r4):not(#r5) body.r4l .r5-result { margin: 14px 0 0 !important; min-height: 1.5em; font-size: 14px !important; line-height: 1.55 !important; color: var(--r4-ink-2) !important; }
html:not(#r4):not(#r5) body.r4l .r5-result a { color: #c4b5fd; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
html:not(#r4):not(#r5) body.r4l .r5-clip:focus-visible, html:not(#r4):not(#r5) body.r4l .r5-sw-btn:focus-visible, html:not(#r4):not(#r5) body.r4l .r5-when button:focus-visible { outline: none !important; box-shadow: var(--r4-ring) !important; }

/* ---------- trust & security */
html:not(#r4):not(#r5) body.r4l .r5-trust-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 72px; max-width: 1180px; margin: 0 auto; text-align: start; }
html:not(#r4):not(#r5) body.r4l .r5-trust-intro { position: sticky; top: 112px; align-self: start; }
html:not(#r4):not(#r5) body.r4l .r5-trust-intro h2 { text-align: start !important; }
html:not(#r4):not(#r5) body.r4l .r5-trust-intro p.lead { text-align: start !important; margin: 0 0 28px !important; font-size: 17px !important; }
html:not(#r4):not(#r5) body.r4l .r5-doclinks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--r4-line); }
html:not(#r4):not(#r5) body.r4l .r5-doclinks a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--r4-line); font-size: 14.5px; color: var(--r4-ink-2); text-decoration: none; transition: color .15s var(--r4-ease); }
html:not(#r4):not(#r5) body.r4l .r5-doclinks a::after { content: ""; width: 14px; height: 14px; background: currentColor; opacity: .6; -webkit-mask: var(--r60i-arrow) center / contain no-repeat; mask: var(--r60i-arrow) center / contain no-repeat; }
html[dir="ltr"]:not(#r4):not(#r5) body.r4l .r5-doclinks a::after { transform: scaleX(-1); }
html:not(#r4):not(#r5) body.r4l .r5-doclinks a:hover { color: var(--r4-ink); }
html:not(#r4):not(#r5) body.r4l .r5-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
html:not(#r4):not(#r5) body.r4l .r5-trust-list li { display: flex; gap: 14px; padding: 22px 0; border-top: 1px solid var(--r4-line); }
html:not(#r4):not(#r5) body.r4l .r5-trust-list li > i[data-r60i] { font-size: 20px; color: var(--r4-ink-2); margin-top: 1px; flex: none; vertical-align: 0; }
html:not(#r4):not(#r5) body.r4l .r5-trust-list b { display: block; font-size: 15.5px; font-weight: 650; color: var(--r4-ink); margin-bottom: 6px; }
html:not(#r4):not(#r5) body.r4l .r5-trust-list p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--r4-ink-2); }

/* ---------- features: a hairline list, not 20 equal cards */
html:not(#r4):not(#r5) body.r4l .features-grid { gap: 0 40px !important; }
html:not(#r4):not(#r5) body.r4l .features-grid .feature { background: none !important; border: 0 !important; border-top: 1px solid var(--r4-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 28px 0 32px !important; }
html:not(#r4):not(#r5) body.r4l .features-grid .feature::before, html:not(#r4):not(#r5) body.r4l .features-grid .feature::after { display: none !important; }
html:not(#r4):not(#r5) body.r4l .features-grid .feature:hover { transform: none !important; }
html:not(#r4):not(#r5) body.r4l .features-grid .feature-icon { background: none !important; box-shadow: none !important; border: 0 !important; width: auto !important; height: auto !important; font-size: 22px !important; color: var(--r4-ink-2) !important; justify-content: flex-start !important; margin-bottom: 14px !important; }
html:not(#r4):not(#r5) body.r4l .features-grid .ai-badge { background: none !important; border: 1px solid var(--r4-line-2) !important; box-shadow: none !important; color: var(--r4-ink-2) !important; }

/* ---------- footer */
html:not(#r4):not(#r5) body.r4l footer.r5-foot { padding: 80px 32px 32px !important; background: #04060f !important; }
html:not(#r4):not(#r5) body.r4l .r5-foot-top { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr); gap: 64px; }
html:not(#r4):not(#r5) body.r4l .r5-foot-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--r4-ink); text-decoration: none; }
html:not(#r4):not(#r5) body.r4l .r5-foot-logo .logo-mark { width: 28px !important; height: 28px !important; }
html:not(#r4):not(#r5) body.r4l .r5-foot-brand p { margin: 14px 0 20px; font-size: 14px; line-height: 1.6; color: var(--r4-ink-3); max-width: 300px; }
html:not(#r4):not(#r5) body.r4l .r5-status { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--r4-line-2); font-size: 13px; color: var(--r4-ink-2); text-decoration: none; transition: border-color .15s var(--r4-ease), color .15s var(--r4-ease); }
html:not(#r4):not(#r5) body.r4l .r5-status:hover { color: var(--r4-ink); border-color: rgba(255, 255, 255, .22); }
html:not(#r4):not(#r5) body.r4l .r5-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--r4-ink-3); }
html:not(#r4):not(#r5) body.r4l .r5-dot[data-ok="1"] { background: var(--r4-green); box-shadow: 0 0 0 3px rgba(74, 222, 128, .16); }
html:not(#r4):not(#r5) body.r4l .r5-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
html:not(#r4):not(#r5) body.r4l .r5-foot-cols h4 { font: 600 13px/1.3 var(--r4-font) !important; color: var(--r4-ink) !important; margin: 0 0 14px !important; letter-spacing: 0 !important; }
html:not(#r4):not(#r5) body.r4l .r5-foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html:not(#r4):not(#r5) body.r4l .r5-foot-cols a { font-size: 14px; color: var(--r4-ink-3); text-decoration: none; transition: color .15s var(--r4-ease); }
html:not(#r4):not(#r5) body.r4l .r5-foot-cols a:hover { color: var(--r4-ink); }
html:not(#r4):not(#r5) body.r4l .r5-foot-bottom { max-width: 1240px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--r4-line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--r4-ink-3); }
html:not(#r4):not(#r5) body.r4l .r5-foot-lang { display: inline-flex; gap: 16px; }
html:not(#r4):not(#r5) body.r4l .r5-foot-lang a { color: var(--r4-ink-3); text-decoration: none; }
html:not(#r4):not(#r5) body.r4l .r5-foot-lang a:hover { color: var(--r4-ink); }

/* ---------- motion & responsive */
@media (prefers-reduced-motion: reduce) {
  html:not(#r4):not(#r5) body.r4l .r5-net[data-s="up"] .r5-st::before { animation: none !important; }
}
@media (max-width: 980px) {
  html:not(#r4):not(#r5) body.r4l .r5-trust-grid { grid-template-columns: 1fr; gap: 32px; }
  html:not(#r4):not(#r5) body.r4l .r5-trust-intro { position: static; }
  html:not(#r4):not(#r5) body.r4l .r5-foot-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  html:not(#r4):not(#r5) body.r4l .r5-app-body { grid-template-columns: 1fr; }
  html:not(#r4):not(#r5) body.r4l .r5-nets { border-inline-start: 0; border-top: 1px solid var(--r4-line); }
  html:not(#r4):not(#r5) body.r4l .r5-pane { padding: 20px 16px; }
  html:not(#r4):not(#r5) body.r4l .r5-demo-tag { display: none; }
  html:not(#r4):not(#r5) body.r4l .r5-trust-list { grid-template-columns: 1fr; }
  html:not(#r4):not(#r5) body.r4l .r5-int { padding: 24px 20px 72px !important; }
  html:not(#r4):not(#r5) body.r4l .r5-int-row { gap: 22px 28px; }
  html:not(#r4):not(#r5) body.r4l .r5-foot-cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  html:not(#r4):not(#r5) body.r4l footer.r5-foot { padding: 56px 20px 28px !important; }
  html:not(#r4):not(#r5) body.r4l .r5-cta-note { margin-top: 4px !important; text-align: center; }
}

/* ==================================================================================================================
 * R60UI6 layer (public pages) - appended to the R60UI5 build. What it adds is measured from Stripe / Linear / Raycast
 * (research.md):
 *   type     display weight 900 -> 700, tighter but lighter; hierarchy by ink (two-tone), not by weight; tabular numerals
 *   colour   a tonal violet scale around the brand violet; the pink->violet gradient appears ONCE (the h1 accent line);
 *            the primary action is a solid violet button with an inner highlight
 *   material light-inside / dark-outside 1px rings, two negative-spread shadows, no glows
 *   motion   140 ms micro / 420 ms spatial on expo-out; press = scale(.98); pointer light on card edges; all off under
 *            prefers-reduced-motion
 *   hero     the live studio (src/hero6.html + landing6.js)
 *   rule     no decoration ever crosses text (tools/overlap.py checks every page x width x language)
 * html:not(#r4):not(#r5):not(#r6) = every public page, html:not(#r4):not(#r5):not(#r6) body.r4l = the landing. One more id-level :not() than R60UI5, so these win where both use !important.
 * ================================================================================================================== */

html:not(#r4):not(#r5):not(#r6) {
  --v-50: #f4f1ff; --v-100: #e9e3ff; --v-200: #d4c9ff; --v-300: #b8a6ff; --v-400: #9b84ff; --v-500: #7b61ff;
  --v-600: #6a4ff0; --v-700: #5a3fd6; --v-800: #3f2c99; --v-900: #21184f;
  --r6-accent: linear-gradient(96deg in oklab, #b7a4ff 0%, #8f74ff 34%, #c06cf2 68%, #f17aa5 100%);
  --r6-ink: #f3f4fa; --r6-ink-2: #a3abc0; --r6-ink-3: #7a8299; --r6-ink-4: #596079;
  --r6-line: rgba(255, 255, 255, .07); --r6-line-2: rgba(255, 255, 255, .11);
  --r6-surface: #0b0f1f; --r6-surface-2: #0f1427;
  --r6-ring: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .075), 0 0 0 1px rgba(0, 0, 0, .45);
  --r6-sh: 0 1px 1px rgba(0, 0, 0, .25), 0 12px 24px -12px rgba(0, 0, 0, .55), 0 32px 64px -32px rgba(0, 0, 0, .7);
  --r6-sh-hi: 0 1px 1px rgba(0, 0, 0, .25), 0 24px 48px -16px rgba(0, 0, 0, .6), 0 48px 96px -40px rgba(20, 10, 70, .75);
  --r6-focus: 0 0 0 1px var(--v-300), 0 0 0 4px rgba(155, 132, 255, .32);
  --r6-micro: 140ms cubic-bezier(.2, .8, .2, 1);
  --r6-spring: 420ms cubic-bezier(.16, 1, .3, 1);
}
@supports not (background: linear-gradient(in oklab, red, blue)) {
  html:not(#r4):not(#r5):not(#r6) { --r6-accent: linear-gradient(96deg, #b7a4ff 0%, #8f74ff 34%, #c06cf2 68%, #f17aa5 100%); }
}

/* ---------------------------------------------------------------- type */
html:not(#r4):not(#r5):not(#r6) body.r4l h1 { font-weight: 700 !important; font-size: clamp(40px, 4.5vw, 64px) !important; line-height: 1.06 !important; letter-spacing: -.03em !important; }
html[lang="he"]:not(#r4):not(#r5):not(#r6) body.r4l h1 { letter-spacing: -.014em !important; line-height: 1.1 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l h1 .grad { background: var(--r6-accent) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; animation: r6sheen 14s ease-in-out infinite alternate; }
@keyframes r6sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
html:not(#r4):not(#r5):not(#r6) body.r4l .section > h2, html:not(#r4):not(#r5):not(#r6) body.r4l .r5-head h2, html:not(#r4):not(#r5):not(#r6) body.r4l .wow h2, html:not(#r4):not(#r5):not(#r6) body.r4l .r5-trust-intro h2 { font-weight: 650 !important; font-size: clamp(30px, 3.2vw, 44px) !important; line-height: 1.12 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .section h2 .grad, html:not(#r4):not(#r5):not(#r6) body.r4l .wow h2 .grad { background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r4-mute { color: var(--r6-ink-3) !important; -webkit-text-fill-color: var(--r6-ink-3) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .section p.lead { font-size: 17px !important; color: var(--r6-ink-2) !important; max-width: 640px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .hero p.lead { font-size: 18px !important; max-width: 520px !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .eyebrow { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font: 600 13px/1.4 var(--r4-font) !important; color: var(--v-300) !important; letter-spacing: .01em !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .eyebrow i { display: none !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .num, html:not(#r4):not(#r5):not(#r6) body.r4l .price-tag, html:not(#r4):not(#r5):not(#r6) body.r4l .step-num, html:not(#r4):not(#r5):not(#r6) body.r4l [data-r4-count], html:not(#r4):not(#r5):not(#r6) body.r4l .film-time, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-stage { font-variant-numeric: tabular-nums; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r5-eyebrow { display: inline-flex !important; align-items: center; gap: 10px; color: var(--r6-ink-2) !important; font-size: 14px !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r5-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 0 3px rgba(255, 77, 94, .18); animation: r6pulse 2.4s ease-in-out infinite; flex: none; }
@keyframes r6pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 77, 94, .18); } 50% { box-shadow: 0 0 0 6px rgba(255, 77, 94, .06); } }
html:not(#r4):not(#r5):not(#r6) ::selection { background: rgba(123, 97, 255, .45); color: #fff; }

/* ---------------------------------------------------------------- buttons: solid violet, inner light, press */
html:not(#r4):not(#r5):not(#r6) .btn { transition: background-color var(--r6-micro), box-shadow var(--r6-micro), color var(--r6-micro), transform 100ms ease-out !important; -webkit-tap-highlight-color: transparent; }
html:not(#r4):not(#r5):not(#r6) .btn-primary, html:not(#r4):not(#r5):not(#r6) .card .btn-primary, html:not(#r4):not(#r5):not(#r6) body.r4l .btn-primary {
  background: #6e54f5 !important; color: #fff !important; border: 0 !important; font-weight: 600 !important; letter-spacing: 0 !important;   /* R147FIX: 4.94:1 (was --v-500, 4.20:1) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 0 0 1px rgba(40, 20, 120, .55), 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -8px rgba(123, 97, 255, .55) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .12) !important;
}
html:not(#r4):not(#r5):not(#r6) .btn-primary:hover, html:not(#r4):not(#r5):not(#r6) body.r4l .btn-primary:hover { background: var(--v-700) !important; transform: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 0 0 1px rgba(40, 20, 120, .6), 0 2px 4px rgba(0, 0, 0, .35), 0 10px 24px -10px rgba(123, 97, 255, .7) !important; }
html:not(#r4):not(#r5):not(#r6) .btn:active, html:not(#r4):not(#r5):not(#r6) body.r4l .btn:active, html:not(#r4):not(#r5):not(#r6) .btn-primary:active { transform: scale(.98) !important; transition-duration: 60ms !important; }
html:not(#r4):not(#r5):not(#r6) .btn-ghost, html:not(#r4):not(#r5):not(#r6) body.r4l .btn-ghost { background: rgba(255, 255, 255, .035) !important; border: 0 !important; color: var(--r6-ink) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .05) !important; }
html:not(#r4):not(#r5):not(#r6) .btn-ghost:hover, html:not(#r4):not(#r5):not(#r6) body.r4l .btn-ghost:hover { background: rgba(255, 255, 255, .07) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .06) !important; transform: none !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .btn-large { min-height: 48px; padding: 0 22px !important; font-size: 15.5px !important; border-radius: 12px !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l header.top .btn { min-height: 36px; padding: 0 14px !important; font-size: 14px !important; border-radius: 10px !important; }
html:not(#r4):not(#r5):not(#r6) a:focus-visible, html:not(#r4):not(#r5):not(#r6) button:focus-visible, html:not(#r4):not(#r5):not(#r6) input:focus-visible, html:not(#r4):not(#r5):not(#r6) select:focus-visible, html:not(#r4):not(#r5):not(#r6) textarea:focus-visible, html:not(#r4):not(#r5):not(#r6) summary:focus-visible, html:not(#r4):not(#r5):not(#r6) [tabindex]:focus-visible { outline: none !important; box-shadow: var(--r6-focus) !important; border-radius: 8px; }
html:not(#r4):not(#r5):not(#r6) .btn:focus-visible { box-shadow: var(--r6-focus) !important; }

/* ---------------------------------------------------------------- header */
html:not(#r4):not(#r5):not(#r6) body.r4l header.top { background: rgba(5, 8, 19, .7) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .055) !important; border-bottom: 0 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l nav.main-nav a { color: var(--r6-ink-2) !important; transition: color var(--r6-micro), background-color var(--r6-micro) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l nav.main-nav a:hover { color: var(--r6-ink) !important; background: rgba(255, 255, 255, .05) !important; }

/* ---------------------------------------------------------------- hero */
html:not(#r4):not(#r5):not(#r6) body.r4l .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important; gap: 56px !important; align-items: center !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r5-cta { display: flex !important; flex-wrap: wrap; gap: 12px !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r5-cta-note { color: var(--r6-ink-3) !important; font-size: 13.5px !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r4-film i[data-r60i] { opacity: .8; }

/* the studio */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-stage { position: relative; margin: 0; padding: 22px; container-type: inline-size; isolation: isolate; min-width: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-plate { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; z-index: -1; background: #100b29; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, .25) 85%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, .25) 85%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .08); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-plate::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(5, 8, 19, .5)); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-mesh { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(48px); opacity: .9; will-change: transform; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-m1 { background: radial-gradient(closest-side, #6a4ff0, transparent); top: -30%; inset-inline-start: -15%; animation: r6m1 22s ease-in-out infinite alternate; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-m2 { background: radial-gradient(closest-side, #b04ad8, transparent); bottom: -35%; inset-inline-end: -20%; opacity: .55; animation: r6m2 26s ease-in-out infinite alternate; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-m3 { background: radial-gradient(closest-side, #2f5bff, transparent); top: 20%; inset-inline-end: 10%; width: 50%; opacity: .35; animation: r6m3 30s ease-in-out infinite alternate; }
@keyframes r6m1 { to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes r6m2 { to { transform: translate(-16%, -18%) scale(.9); } }
@keyframes r6m3 { to { transform: translate(-30%, 25%) scale(1.2); } }

html:not(#r4):not(#r5):not(#r6) body.r4l .r6-win { position: relative; border-radius: 14px; background: linear-gradient(180deg, #0e1326, #0a0e1d); color: var(--r6-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .5), var(--r6-sh-hi);
  font: 400 13px/1.4 var(--r4-font); text-align: start; overflow: hidden; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--r6-line); background: rgba(255, 255, 255, .018); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-crumb { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--r6-ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-crumb b { color: var(--r6-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-chev { transform: rotate(90deg); font-size: 12px; opacity: .6; flex: none; }
html[dir="ltr"]:not(#r4):not(#r5):not(#r6) body.r4l .r6-chev { transform: rotate(-90deg); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-bar-end { display: inline-flex; align-items: center; gap: 10px; flex: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-demo { font-size: 11.5px; color: var(--r6-ink-3); padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--r6-line-2); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-live { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border-radius: 7px; background: rgba(255, 77, 94, .12); color: #ff8a95; font: 600 11.5px/1 var(--r4-font); letter-spacing: .04em; direction: ltr; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; animation: r6pulse 2s ease-in-out infinite; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-clock { color: var(--r6-ink); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }

html:not(#r4):not(#r5):not(#r6) body.r4l .r6-body { display: grid; grid-template-columns: minmax(0, 1fr) 208px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-prog { min-width: 0; padding: 12px; display: grid; gap: 10px; align-content: start; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-feed { position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #05070f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-feed-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 40%; animation: r6kb 24s ease-in-out infinite alternate; }
@keyframes r6kb { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-2%, 1%); } }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-feed-tl { position: absolute; top: 8px; inset-inline-end: 8px; display: flex; gap: 6px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-q { font: 600 10.5px/1 var(--r4-font); color: #fff; background: rgba(0, 0, 0, .55); padding: 5px 7px; border-radius: 6px; direction: ltr; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-l3 { position: absolute; bottom: 10px; inset-inline-start: 10px; display: grid; gap: 1px; padding: 7px 11px 8px; border-radius: 8px; background: rgba(10, 8, 30, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); border-inline-start: 2px solid var(--v-400); max-width: calc(100% - 20px); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-l3 b { font-size: 13px; font-weight: 650; color: #fff; white-space: nowrap; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-l3 span { font-size: 11px; color: rgba(255, 255, 255, .72); white-space: nowrap; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-preview { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 7, 15, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-preview[hidden] { display: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-preview-v { height: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-back { position: absolute; top: 8px; inset-inline-start: 8px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; cursor: pointer; font: 600 12px/1 var(--r4-font); color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background-color var(--r6-micro); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-back:hover { background: rgba(255, 255, 255, .2); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-feed.is-preview .r6-l3, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-feed.is-preview .r6-feed-tl { visibility: hidden; }

html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tl { display: grid; gap: 8px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--r6-ink-2); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tl-t { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tl-t i { color: var(--v-300); flex: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tl-n { color: var(--r6-ink-3); font-variant-numeric: tabular-nums; direction: ltr; flex: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tl-n b { color: var(--r6-ink); font-weight: 600; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-wave { position: relative; height: 38px; display: flex; align-items: center; gap: 2px; padding: 0 2px; border-radius: 7px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--r6-line); overflow: hidden; direction: ltr; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-b { flex: 1 1 0; min-width: 1px; height: calc(var(--h) * 26px); border-radius: 2px; background: rgba(255, 255, 255, .16); transition: background-color 400ms ease, box-shadow 400ms ease; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-b.hit { background: var(--v-400); box-shadow: 0 0 6px rgba(155, 132, 255, .5); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph { position: absolute; top: 3px; bottom: 3px; left: calc(var(--p, 0) * 100%); width: 2px; border-radius: 1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); transition: left 1s linear; }

html:not(#r4):not(#r5):not(#r6) body.r4l .r6-health { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: 8px; overflow: hidden; background: var(--r6-line); box-shadow: inset 0 0 0 1px var(--r6-line); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-health > div { background: #0c1022; padding: 8px 10px; min-width: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-health dt { font-size: 11px; color: var(--r6-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-health dd { margin: 2px 0 0; font-size: 12.5px; color: var(--r6-ink-2); white-space: nowrap; direction: ltr; text-align: start; }
html[dir="rtl"]:not(#r4):not(#r5):not(#r6) body.r4l .r6-health dd { text-align: end; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-health dd b { font-weight: 650; color: var(--r6-ink); font-variant-numeric: tabular-nums; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-health dd.r6-ok { color: #4ade80; direction: inherit; text-align: start !important; font-weight: 600; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dest { border-inline-start: 1px solid var(--r6-line); display: flex; flex-direction: column; min-width: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dest-h, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dest-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; height: 36px; font-size: 12px; color: var(--r6-ink-3); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dest-h { border-bottom: 1px solid var(--r6-line); font-weight: 600; color: var(--r6-ink-2); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dest-n { font-variant-numeric: tabular-nums; direction: ltr; font-weight: 500; color: var(--r6-ink-3); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dest-l { list-style: none; margin: 0; padding: 4px 0; flex: 1; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-d { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 44px; padding: 0 12px; opacity: .45; transition: opacity 500ms ease, background-color var(--r6-micro); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-d:hover { background: rgba(255, 255, 255, .03); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-d.is-on { opacity: 1; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-mk { display: inline-flex; align-items: center; justify-content: center; line-height: 0; min-height: 29px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-mk:not(:has(svg))::before { content: ""; width: 29px; height: 29px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dn { display: grid; min-width: 0; line-height: 1.25; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dn b { font-size: 12.5px; font-weight: 600; color: var(--r6-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ds { font-size: 11px; color: var(--r6-ink-3); white-space: nowrap; min-height: 14px; display: inline-flex; align-items: center; gap: 5px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-d.is-on .r6-ds { color: #4ade80; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-d.is-on .r6-ds::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dv { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--r6-ink); direction: ltr; min-width: 30px; text-align: end; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-dest-f { border-top: 1px solid var(--r6-line); height: 40px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-total { font-size: 15px; font-weight: 650; color: var(--r6-ink); font-variant-numeric: tabular-nums; direction: ltr; }

html:not(#r4):not(#r5):not(#r6) body.r4l .r6-shorts { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 14px 14px; border-top: 1px solid var(--r6-line); background: rgba(255, 255, 255, .012); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh-head { display: grid; gap: 3px; min-width: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh-head b { font-size: 13px; font-weight: 650; color: var(--r6-ink); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh-st { font-size: 12px; color: var(--r6-ink-2); min-height: 17px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-stage.is-done .r6-sh-st { color: #4ade80; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh-hint { font-size: 11.5px; color: var(--r6-ink-4); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh { position: relative; display: grid; gap: 5px; justify-items: center; width: 58px; padding: 0; border: 0; background: none; color: inherit; cursor: default; font: inherit; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh img { width: 58px; height: 103px; object-fit: cover; border-radius: 7px; display: block; background: #121630; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(6px) scale(.96); filter: saturate(.4) brightness(.6); transition: opacity 500ms ease, transform var(--r6-spring), filter 700ms ease, box-shadow var(--r6-micro); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh::before { content: ""; position: absolute; top: 0; left: 0; width: 58px; height: 103px; border-radius: 7px; background: linear-gradient(110deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .03) 70%) 0 0 / 220% 100%, #10142a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: opacity 400ms ease; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-cut::before { animation: r6shimmer 1.2s linear infinite; }
@keyframes r6shimmer { to { background-position: -220% 0, 0 0; } }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-cut img, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-ready img, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-pub img { opacity: 1; transform: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-ready img, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-pub img { filter: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-ready::before, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-pub::before { opacity: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh-bar { position: absolute; top: 93px; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; opacity: 0; transition: opacity 300ms ease; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh-bar > i { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-cut .r6-sh-bar { opacity: 1; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-cut .r6-sh-bar > i { animation: r6fill 1.5s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes r6fill { to { width: 100%; } }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh-s { font-size: 11px; line-height: 14px; min-height: 14px; color: var(--r6-ink-3); white-space: nowrap; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-ready .r6-sh-s { color: var(--r6-ink); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-pub .r6-sh-s { color: #4ade80; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh:not(:disabled) { cursor: pointer; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh:not(:disabled):hover img { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 16px -6px rgba(0, 0, 0, .6); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-playing img { box-shadow: 0 0 0 2px var(--v-300) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh:focus-visible { box-shadow: none !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh:focus-visible img { box-shadow: var(--r6-focus) !important; }

/* the studio, narrow (phone, small tablet column) */
@container (max-width: 520px) {
  .r6-body { grid-template-columns: minmax(0, 1fr) !important; }
  .r6-dest { border-inline-start: 0 !important; border-top: 1px solid rgba(255, 255, 255, .07); }
  .r6-dest-l { display: grid !important; grid-template-columns: 1fr 1fr; padding: 4px 0 !important; }
  .r6-d { grid-template-columns: 40px minmax(0, 1fr) auto !important; padding: 0 10px !important; }
  .r6-shorts { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .r6-sh-row { justify-content: space-between; }
  .r6-sh-hint { display: none; }
  .r6-health { display: none !important; }
}
@container (max-width: 380px) {
  .r6-dest-l { grid-template-columns: 1fr !important; }
  .r6-d:nth-child(n+5) { display: none !important; }
  .r6-sh, .r6-sh img, .r6-sh::before { width: 52px !important; }
  .r6-sh img, .r6-sh::before { height: 92px !important; }
  .r6-sh-bar { top: 82px !important; }
  .r6-crumb-root, .r6-chev { display: none !important; }
}

/* ---------------------------------------------------------------- material: one card language across the page */
html:not(#r4):not(#r5):not(#r6) body.r4l .wf-card, html:not(#r4):not(#r5):not(#r6) body.r4l .price-card, html:not(#r4):not(#r5):not(#r6) body.r4l .r26l-card, html:not(#r4):not(#r5):not(#r6) body.r4l .step-row, html:not(#r4):not(#r5):not(#r6) body.r4l .tg-node, html:not(#r4):not(#r5):not(#r6) body.r4l .ent-card, html:not(#r4):not(#r5):not(#r6) body.r4l .demo-wrap, html:not(#r4):not(#r5):not(#r6) body.r4l .r5-app, html:not(#r4):not(#r5):not(#r6) body.r4l .cta-banner, html:not(#r4):not(#r5):not(#r6) body.r4l .r4-win, html:not(#r4):not(#r5):not(#r6) body.r4l .pod, html:not(#r4):not(#r5):not(#r6) body.r4l .guest-stage, html:not(#r4):not(#r5):not(#r6) body.r4l .ed {
  background: linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .012)) !important; border: 0 !important;
  box-shadow: var(--r6-ring), var(--r6-sh) !important; border-radius: 16px !important; position: relative;
}
html:not(#r4):not(#r5):not(#r6) body.r4l .r4-win { border-radius: 14px !important; background: #0a0e1d !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .wf-card:hover, html:not(#r4):not(#r5):not(#r6) body.r4l .price-card:hover, html:not(#r4):not(#r5):not(#r6) body.r4l .step-row:hover { transform: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .11), 0 0 0 1px rgba(0, 0, 0, .45), var(--r6-sh) !important; }
/* pointer light on the edge (landing6.js sets --mx / --my) */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-lit::after, html:not(#r4):not(#r5):not(#r6) body.r4l .wf-card.r6-lit::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(184, 166, 255, .55), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
html:not(#r4):not(#r5):not(#r6) body.r4l .wf-card.r6-lit::after { content: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-win.r6-lit::after { z-index: 5; }

/* chips used as decoration go quiet: hairline, no fill */
html:not(#r4):not(#r5):not(#r6) body.r4l .wf-chip, html:not(#r4):not(#r5):not(#r6) body.r4l .wow-tags > *, html:not(#r4):not(#r5):not(#r6) body.r4l .r26l-badge, html:not(#r4):not(#r5):not(#r6) body.r4l .guest-box .t { background: transparent !important; box-shadow: inset 0 0 0 1px var(--r6-line-2) !important; border: 0 !important; color: var(--r6-ink-2) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .wf-n, html:not(#r4):not(#r5):not(#r6) body.r4l .step-num { background: transparent !important; box-shadow: inset 0 0 0 1px var(--r6-line-2) !important; border: 0 !important; color: var(--r6-ink-2) !important; -webkit-text-fill-color: var(--r6-ink-2) !important; }

/* ---------------------------------------------------------------- "instead of all this": the replaced tools are struck through, the one system is lit */
html:not(#r4):not(#r5):not(#r6) body.r4l .instead { background: none !important; box-shadow: none !important; border: 0 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .instead-grid span { background: transparent !important; box-shadow: none !important; border: 0 !important; color: var(--r6-ink-3) !important; padding: 6px 10px !important;
  text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .28); text-decoration-thickness: 1px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .instead-one { background: var(--v-500) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; font-weight: 650 !important; font-size: 18px !important; padding: 14px 26px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 0 0 1px rgba(40, 20, 120, .55), 0 12px 32px -12px rgba(123, 97, 255, .6) !important; text-shadow: none !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .step-num span { background: none !important; -webkit-text-fill-color: var(--r6-ink) !important; color: var(--r6-ink) !important; font-weight: 600 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .num.r6-swap { animation: r6swap 420ms cubic-bezier(.16, 1, .3, 1); }
@keyframes r6swap { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------------------------------------------------------------- film band */
html:not(#r4):not(#r5):not(#r6) body.r4l .film-time { color: #ff8a95 !important; letter-spacing: .2em !important; font-weight: 500 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .film-copy h2 { font-weight: 700 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .film-play { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 24px -8px rgba(0, 0, 0, .6) !important; background: rgba(255, 255, 255, .1) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--r6-micro), transform 100ms ease-out !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .film-play:hover { background: rgba(255, 255, 255, .16) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .film-play:active { transform: scale(.98); }

/* ---------------------------------------------------------------- pricing */
html:not(#r4):not(#r5):not(#r6) body.r4l .billing-toggle { background: transparent !important; color: var(--r6-ink-2) !important; transition: background-color var(--r6-micro), color var(--r6-micro) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .billing-toggle.active { background: rgba(255, 255, 255, .1) !important; color: var(--r6-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .3) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .billing-toggle.active span[style] { background: rgba(123, 97, 255, .3) !important; color: var(--v-200) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .price-card { padding: 28px 24px !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .price-card.popular { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(155, 132, 255, .45), 0 0 0 1px rgba(0, 0, 0, .45), 0 24px 56px -24px rgba(90, 63, 214, .55) !important; background: linear-gradient(180deg, rgba(123, 97, 255, .09), rgba(123, 97, 255, .02) 40%, rgba(255, 255, 255, .012)) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .price-card.popular::before { background: var(--v-500) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .price-tag .num { background: none !important; -webkit-text-fill-color: var(--r6-ink) !important; color: var(--r6-ink) !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .price-card--trial .price-tag .num { color: var(--v-300) !important; -webkit-text-fill-color: var(--v-300) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .price-name { font-weight: 650 !important; letter-spacing: -.01em !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .price-feats li, html:not(#r4):not(#r5):not(#r6) body.r4l .price-big li { color: var(--r6-ink-2) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .price-feats li strong, html:not(#r4):not(#r5):not(#r6) body.r4l .price-big li strong { color: var(--r6-ink) !important; font-weight: 600 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .price-big { background: rgba(123, 97, 255, .07) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(155, 132, 255, .18) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .ent-card .btn-primary, html:not(#r4):not(#r5):not(#r6) body.r4l .ent-card [class*=btn] { background: var(--v-500) !important; }

/* ---------------------------------------------------------------- FAQ: a hairline list, + turns into - */
html:not(#r4):not(#r5):not(#r6) body.r4l .faq { max-width: 820px; margin-inline: auto; }
html:not(#r4):not(#r5):not(#r6) body.r4l .faq-item { background: none !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid var(--r6-line) !important; border-radius: 0 !important; margin: 0 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .faq-item:first-child { border-top: 1px solid var(--r6-line) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .faq-item.r6-lit::after { content: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .faq-q { padding: 22px 4px !important; font-weight: 600 !important; font-size: 16.5px !important; color: var(--r6-ink) !important; transition: color var(--r6-micro) !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .faq-q:hover { color: #fff !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .faq-a { color: var(--r6-ink-2) !important; line-height: 1.7 !important; }

/* ---------------------------------------------------------------- closing CTA: the same lit plate as the hero */
html:not(#r4):not(#r5):not(#r6) body.r4l .cta-banner { overflow: hidden; background: radial-gradient(80% 120% at 50% 0%, rgba(106, 79, 240, .28), transparent 70%), #0d0a24 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .cta-banner::before { display: none !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .cta-banner h2 { font-weight: 700 !important; }

/* ---------------------------------------------------------------- integrations row: a little life on hover */
html:not(#r4):not(#r5):not(#r6) body.r4l .r5-int-row li { transition: transform var(--r6-spring); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r5-int-row li:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------- reveals: shorter travel, expo-out, staggered */
html.r4-anim:not(#r4):not(#r5):not(#r6) body.r4l .r4-rv { transform: translateY(12px) !important; transition: opacity 620ms cubic-bezier(.16, 1, .3, 1), transform 620ms cubic-bezier(.16, 1, .3, 1) !important; }

/* ---------------------------------------------------------------- sign-in pages (login, register, password, verify) */
html:not(#r4):not(#r5):not(#r6) body:has(.card) .card { background: linear-gradient(180deg, #0f1428, #0b0f20) !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--r6-ring), var(--r6-sh-hi) !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) .card h1 { font-weight: 650 !important; letter-spacing: -.012em !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) .field label { font-weight: 500 !important; color: var(--r6-ink-2) !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) input[type=email], html:not(#r4):not(#r5):not(#r6) body:has(.card) input[type=password], html:not(#r4):not(#r5):not(#r6) body:has(.card) input[type=text] {
  background: rgba(255, 255, 255, .03) !important; border: 0 !important; border-radius: 10px !important; min-height: 46px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 2px rgba(0, 0, 0, .25) !important; transition: box-shadow 200ms ease, background-color 200ms ease !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) input[type=email]:hover, html:not(#r4):not(#r5):not(#r6) body:has(.card) input[type=password]:hover, html:not(#r4):not(#r5):not(#r6) body:has(.card) input[type=text]:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 2px rgba(0, 0, 0, .25) !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) input[type=email]:focus, html:not(#r4):not(#r5):not(#r6) body:has(.card) input[type=password]:focus, html:not(#r4):not(#r5):not(#r6) body:has(.card) input[type=text]:focus { outline: none !important; background: rgba(255, 255, 255, .045) !important; box-shadow: inset 0 0 0 1px var(--v-300), 0 0 0 4px rgba(155, 132, 255, .22) !important; }
/* the Google button keeps Google's own light treatment (sign-in branding guidelines) */
html:not(#r4):not(#r5):not(#r6) body:has(.card) .card .btn-primary { min-height: 46px; border-radius: 10px !important; font-size: 15px !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) .auth-side h2 { font-weight: 700 !important; letter-spacing: -.02em !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) .auth-side h2 .grad { background: var(--r6-accent) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) .auth-feat-icon { background: rgba(123, 97, 255, .1) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(155, 132, 255, .22) !important; color: var(--v-300) !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) .divider { color: var(--r6-ink-3) !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card) .back { color: var(--r6-ink-2) !important; transition: color var(--r6-micro); }
html:not(#r4):not(#r5):not(#r6) body:has(.card) .back:hover { color: var(--r6-ink) !important; }
html:not(#r4):not(#r5):not(#r6) body:has(.card)::before { background: radial-gradient(900px 520px at 70% -10%, rgba(106, 79, 240, .2), transparent 70%), radial-gradient(700px 500px at 0% 110%, rgba(176, 74, 216, .1), transparent 70%) !important; background-size: 140% 140% !important; animation: r6drift 24s ease-in-out infinite alternate; }
@keyframes r6drift { from { background-position: 0% 0%, 100% 100%; } to { background-position: 30% 20%, 70% 80%; } }

/* the RSS address in the podcast card: one line, ellipsis, never out of its box */
html:not(#r4):not(#r5):not(#r6) body.r4l .r26l-rss { min-width: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r26l-rss code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
/* sign-in pages on narrow screens: the back link sits above the card instead of floating over it */
@media (max-width: 980px) {
  html:not(#r4):not(#r5):not(#r6) body:has(.card) .back { position: static !important; justify-self: start; margin: 4px 0 12px !important; }
}

/* ---------------------------------------------------------------- the app ("From your phone") */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app { padding-top: 120px !important; padding-bottom: 120px !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; max-width: 1180px; margin: 0 auto; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-copy { text-align: start; min-width: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-copy h2 { text-align: start !important; margin-bottom: 16px !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-copy .r6-app-lead { text-align: start !important; margin: 0 0 32px !important; max-width: 520px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-list { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-list li { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--r6-line); min-width: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-list li > i { flex: none; font-size: 18px; color: var(--v-300); margin-top: 2px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-list b { display: block; font-size: 15px; font-weight: 650; color: var(--r6-ink); margin-bottom: 3px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-list span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--r6-ink-2); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 40px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-store { display: inline-flex; line-height: 0; border-radius: 8px; transition: transform var(--r6-spring), opacity var(--r6-micro); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-store:hover { transform: translateY(-1px); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-store[hidden], html:not(#r4):not(#r5):not(#r6) body.r4l .r6-stores-soon[hidden], html:not(#r4):not(#r5):not(#r6) body.r4l [data-r6-applink][hidden] { display: none !important; }
/* official artwork, never altered: Apple at its 40px on-screen minimum; Google's PNG carries its own padding, so it is drawn
   at 59px (about 40px of visible badge) and the margins only cancel that padding, keeping the two badges optically equal */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-store--ios img { height: 40px; width: auto; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-store--play img { height: 59px; width: auto; margin: -9.5px -9px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-stores-soon { margin: 0 !important; font-size: 14px !important; color: var(--r6-ink-2) !important; line-height: 1.6 !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-stores-soon a { color: var(--v-200); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* the phone: a quiet titanium-dark frame, 9:19.5 screen, real app screens inside */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-phone-wrap { margin: 0; display: grid; justify-items: center; gap: 14px; position: relative; isolation: isolate; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-phone-wrap::before { content: ""; position: absolute; z-index: -1; width: 78%; aspect-ratio: 1; top: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(106, 79, 240, .35), transparent); filter: blur(30px); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-phone { position: relative; width: 300px; aspect-ratio: 9 / 19.5; padding: 10px; box-sizing: border-box; border-radius: 48px;
  background: linear-gradient(160deg, #2a2d3a, #12141c 40%, #1d2030); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 0, 0, .6), var(--r6-sh-hi); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #07080e; display: flex; flex-direction: column; font: 400 12px/1.4 var(--r4-font); color: var(--r6-ink); text-align: start; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-status { position: relative; z-index: 3; flex: none; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: 12px; font-weight: 600; direction: ltr; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-island { position: absolute; left: 50%; top: 10px; width: 86px; height: 24px; margin-left: -43px; border-radius: 14px; background: #000; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-bat { width: 22px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); position: relative; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-bat::after { content: ""; position: absolute; inset: 2.5px 6px 2.5px 2.5px; border-radius: 1px; background: #fff; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-views { position: relative; flex: 1; min-height: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv { position: absolute; inset: 0; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(8px) scale(.985); pointer-events: none;
  transition: opacity 360ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv.is-on { opacity: 1; transform: none; pointer-events: auto; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-h { font-size: 17px; font-weight: 700; letter-spacing: -.01em; padding: 6px 0 2px; }
/* live */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv[data-pv="live"] { padding: 0; margin-top: -40px; overflow: hidden; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; transform: scale(1.04); animation: r6kb 26s ease-in-out infinite alternate; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv[data-pv="live"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 26%, transparent 62%, rgba(0, 0, 0, .7)); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-top, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-bottom { position: absolute; z-index: 2; inset-inline: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-top { top: 48px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-bottom { bottom: 16px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-live--sm { height: 24px; background: rgba(255, 77, 94, .9) !important; color: #fff !important; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-live--sm .r6-live-dot { background: #fff; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-live--sm time { color: #fff; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-eye { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; background: rgba(0, 0, 0, .5); font-size: 11.5px; direction: ltr; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-eye b { font-weight: 600; font-variant-numeric: tabular-nums; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-dest { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-dest .r6-mk:not(:has(svg))::before { content: ""; width: 29px; height: 29px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-end { display: inline-grid; place-items: center; height: 40px; padding: 0 16px; border-radius: 20px; background: #ff4d5e; color: #fff; font-weight: 650; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
/* publish */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-post { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--r6-line); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-post img { width: 54px; height: 96px; object-fit: cover; border-radius: 8px; flex: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-post p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--r6-ink-2); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-nets { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--r6-line); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-nets li { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; font-size: 12.5px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-nets li + li { box-shadow: inset 0 1px 0 var(--r6-line); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tg { position: relative; width: 30px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .16); flex: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tg::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tg.is-on { background: var(--v-500); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-tg.is-on::after { inset-inline-start: 14px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-cta { margin-top: auto; display: grid; place-items: center; height: 44px; border-radius: 14px; background: var(--v-500); color: #fff; font-weight: 650; font-size: 13.5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
/* clips */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-clips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-clips span { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 9 / 16; background: #11131d; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-clips img { width: 100%; height: 100%; object-fit: cover; display: block; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-clips b { position: absolute; bottom: 8px; inset-inline-start: 8px; font-size: 10.5px; font-weight: 650; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-clips b.is-pub { color: #4ade80; }
/* comments */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-cm { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-cm li { display: flex; gap: 10px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--r6-line); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-cm li > i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 650; background: rgba(123, 97, 255, .18); color: var(--v-200); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-cm div { display: grid; gap: 3px; min-width: 0; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-cm b { font-size: 12.5px; font-weight: 600; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-cm small { font-size: 10.5px; font-weight: 500; color: var(--r6-ink-3); margin-inline-start: 4px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-cm span { font-size: 12.5px; color: var(--r6-ink-2); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-reply { display: block; margin-top: 4px; padding: 7px 10px; border-radius: 10px 10px 10px 3px; background: var(--v-500); color: #fff; font-style: normal; font-size: 12px; justify-self: start;
  opacity: 0; transform: translateY(6px); transition: opacity 300ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1); }
html[dir="rtl"]:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-reply { border-radius: 10px 10px 3px 10px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-reply.is-in { opacity: 1; transform: none; }
/* analytics */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-big b { display: block; font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
html[dir="rtl"]:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-big b { text-align: right; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-big span { font-size: 12px; color: var(--r6-ink-3); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-spark { width: 100%; height: 70px; display: block; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-spark path { fill: none; stroke: var(--v-300); stroke-width: 2; vector-effect: non-scaling-stroke; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-spark .r6-pv-area { fill: rgba(123, 97, 255, .16); stroke: none; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-kpi { margin: 0; display: grid; gap: 1px; border-radius: 14px; overflow: hidden; background: var(--r6-line); box-shadow: inset 0 0 0 1px var(--r6-line); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-kpi > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #0b0d16; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-kpi dt { font-size: 12px; color: var(--r6-ink-2); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-kpi dd { margin: 0; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* tab bar */
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 8px 20px; background: rgba(12, 14, 24, .92); box-shadow: inset 0 1px 0 var(--r6-line); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-tabs button { display: grid; justify-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; color: var(--r6-ink-3); font: 500 10px/1.2 var(--r4-font); cursor: pointer; border-radius: 10px; transition: color var(--r6-micro); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-tabs button i { font-size: 18px; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-tabs button[aria-selected="true"] { color: #fff; }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-tabs button[aria-selected="true"] i { color: var(--v-300); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph-tabs button:hover { color: var(--r6-ink); }
html:not(#r4):not(#r5):not(#r6) body.r4l .r6-phone-note { margin: 0 !important; font-size: 12px !important; color: var(--r6-ink-4) !important; }
@media (max-width: 980px) {
  html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app { padding-top: 72px !important; padding-bottom: 72px !important; }
}
@media (max-width: 600px) {
  html:not(#r4):not(#r5):not(#r6) body.r4l .r6-app-list { grid-template-columns: 1fr; }
  html:not(#r4):not(#r5):not(#r6) body.r4l .r6-phone { width: 272px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-pv-reply, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-store { transition: none !important; }
}

/* ---------------------------------------------------------------- reduced motion: nothing moves */
@media (prefers-reduced-motion: reduce) {
  html:not(#r4):not(#r5):not(#r6) body.r4l h1 .grad, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-mesh, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-feed-img, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-live-dot, html:not(#r4):not(#r5):not(#r6) body.r4l .r5-eyebrow::before, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-cut::before, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh.is-cut .r6-sh-bar > i { animation: none !important; }
  html:not(#r4):not(#r5):not(#r6) body.r4l .num.r6-swap { animation: none !important; }
  html:not(#r4):not(#r5):not(#r6) body.r4l .r6-ph, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-b, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-sh img, html:not(#r4):not(#r5):not(#r6) body.r4l .r6-d, html:not(#r4):not(#r5):not(#r6) body.r4l .btn, html:not(#r4):not(#r5):not(#r6) body.r4l .r5-int-row li { transition: none !important; }
  html:not(#r4):not(#r5):not(#r6) .btn:active { transform: none !important; }
  html:not(#r4):not(#r5):not(#r6) body:has(.card)::before { animation: none !important; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) and (min-width: 981px) {
  html:not(#r4):not(#r5):not(#r6) body.r4l .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 40px !important; }
}
@media (max-width: 980px) {
  html:not(#r4):not(#r5):not(#r6) body.r4l .hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; }
  html:not(#r4):not(#r5):not(#r6) body.r4l .r6-stage { max-width: 760px; margin-inline: auto; width: 100%; box-sizing: border-box; }
}
@media (max-width: 600px) {
  html:not(#r4):not(#r5):not(#r6) body.r4l .r6-stage { padding: 12px; }
  html:not(#r4):not(#r5):not(#r6) body.r4l .r6-plate { border-radius: 18px; }
  html:not(#r4):not(#r5):not(#r6) body.r4l .faq-q { padding: 18px 2px !important; font-size: 15.5px !important; }
}

/* ==================================================================================================================
 * R60UI7 layer (public pages) - appended to the R60UI6 build. Only phones (max-width: 767px) change:
 *   landing: one sticky "Start free" at the thumb (src/landing7.js); taps that press; the hero kept light
 *   sign-in pages: 16px fields (no iOS zoom), 48px controls, the one-password register (src/auth7.js), safe areas
 * html:not(#r4):not(#r5):not(#r6):not(#r7) = every public page, html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l = the landing.
 * ================================================================================================================== */
html:not(#r4):not(#r5):not(#r6):not(#r7) .r7-hide { display: none !important; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-sticky { display: none; }
/* ---------- three ways to start (hero) ---------- */
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-entries { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 8px; max-width: 540px; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-entries a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--r6-ink);
  background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--r6-line); transition: background-color var(--r6-micro), box-shadow var(--r6-micro); }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-entries a:hover { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--r6-line-2); }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-entries a:active { transform: scale(.99); }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-entries i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(123, 97, 255, .14); color: var(--v-300); font-size: 17px; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-entries b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.35; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-entries small { display: block; font-size: 12.5px; color: var(--r6-ink-3); line-height: 1.4; }

/* ---------- every service ---------- */
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-services { text-align: center; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: start; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc a { display: grid; gap: 6px; height: 100%; box-sizing: border-box; padding: 18px; border-radius: 14px; text-decoration: none; color: var(--r6-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .012)); box-shadow: var(--r6-ring); transition: box-shadow var(--r6-micro), background-color var(--r6-micro); }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc a:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .13), 0 0 0 1px rgba(0, 0, 0, .45); }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc i { font-size: 20px; color: var(--v-300); margin-bottom: 4px; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc b { font-size: 15.5px; font-weight: 650; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc span { font-size: 13.5px; line-height: 1.55; color: var(--r6-ink-2); }

/* ---------- "send a video on WhatsApp" - three steps, the official marks at their size ---------- */
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-chat { max-width: 1180px; margin: 40px auto 0; padding: 28px; border-radius: 18px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; text-align: start;
  background: radial-gradient(70% 120% at 100% 0%, rgba(37, 211, 102, .08), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .012)); box-shadow: var(--r6-ring); }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-chat h3 { margin: 0 0 10px; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-chat p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--r6-ink-2); }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; position: relative; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow li { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 16px 10px; border-radius: 14px; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px var(--r6-line); text-align: center; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow b { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--r6-ink); }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 29px; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f-mk { display: inline-flex; line-height: 0; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f-mk:not(:has(svg))::before { content: ""; width: 29px; height: 29px; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f2 img { width: 44px; height: 44px; border-radius: 12px; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f-bub { display: inline-flex; gap: 4px; padding: 6px 10px; border-radius: 12px 12px 12px 4px; background: rgba(37, 211, 102, .16); }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f-bub i { width: 6px; height: 6px; border-radius: 50%; background: #25d366; animation: r7dots 1.4s ease-in-out infinite; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f-bub i:nth-child(2) { animation-delay: .2s; } html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f-bub i:nth-child(3) { animation-delay: .4s; }
@keyframes r7dots { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow li.r7-f2, html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow li.r7-f3 { animation: r7step 4.2s ease-in-out infinite; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow li.r7-f2 { animation-delay: 1.2s; } html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow li.r7-f3 { animation-delay: 2.4s; }
@keyframes r7step { 0%, 20%, 100% { box-shadow: inset 0 0 0 1px var(--r6-line); } 8% { box-shadow: inset 0 0 0 1px rgba(155, 132, 255, .55), 0 0 0 4px rgba(123, 97, 255, .08); } }
@media (max-width: 1100px) { html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-chat { grid-template-columns: 1fr; } }
@media (max-width: 760px) { html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc { grid-template-columns: 1fr 1fr; gap: 10px; } html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc a { padding: 14px; } html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow { grid-template-columns: 1fr; } html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow li { grid-template-columns: auto 1fr; justify-items: start; text-align: start; align-items: center; } html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f-bub { display: none; } html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-chat { padding: 20px 16px; } }
@media (max-width: 400px) { html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-svc { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-f-bub i, html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-flow li { animation: none !important; } }


/* "For professionals": the pro terms, one quiet line under the services */
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-pro { max-width: 860px; margin: 28px auto 0; font-size: 14px; line-height: 1.7; color: var(--r6-ink-2); text-align: center; }
html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-pro b { color: var(--r6-ink); font-weight: 650; margin-inline-end: 6px; }

@media (max-width: 767px) {
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-sticky { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 900; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 9, 20, .86); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: translateY(110%); transition: transform 320ms cubic-bezier(.16, 1, .3, 1); }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-sticky.is-on { transform: none; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l:has(#mobile-nav-drawer.open) .r7-sticky { display: none; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-sticky .btn-primary { flex: 1; min-height: 50px; justify-content: center; font-size: 16px !important; border-radius: 14px !important; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-sticky small { flex: none; max-width: 38%; font-size: 12.5px; line-height: 1.35; color: var(--r6-ink-2); }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l { -webkit-tap-highlight-color: transparent; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .btn, html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l a, html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l button { touch-action: manipulation; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .btn:active { transform: scale(.97) !important; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .hero .r5-cta .btn { min-height: 52px; }
  /* render only what is near the screen: sections below the fold are skipped until they approach (big win at 4x CPU) */
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l main > .section:not(.hero), html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l main > section.film-band, html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l main > .logos-strip { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l footer.r5-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  /* sign-in pages */
  html:not(#r4):not(#r5):not(#r6):not(#r7) body:has(.card) input[type=email], html:not(#r4):not(#r5):not(#r6):not(#r7) body:has(.card) input[type=password], html:not(#r4):not(#r5):not(#r6):not(#r7) body:has(.card) input[type=text] { font-size: 16px !important; min-height: 50px; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body:has(.card) .card .btn-primary, html:not(#r4):not(#r5):not(#r6):not(#r7) body:has(.card) .btn-google { min-height: 50px; font-size: 16px !important; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body:has(.card) .card { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body:has(.card) .field { margin-bottom: 14px !important; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body:has(.card) .pw-toggle { min-width: 44px; min-height: 44px; }
  html:not(#r4):not(#r5):not(#r6):not(#r7) body:has(.card) .btn:active { transform: scale(.98) !important; }
}
@media (prefers-reduced-motion: reduce) { html:not(#r4):not(#r5):not(#r6):not(#r7) body.r4l .r7-sticky { transition: none !important; } }

/* R71QA F-32: the consent notice uses the brand colour */
#slp-consent button[data-c="1"] { background: #7b61ff !important; }