/* Self-hosted copies of Inter, Alexandria and Readex Pro (variable weights), only the
   latin, latin-ext and arabic subsets. Each file is downloaded by the browser only when a
   character in its unicode-range is on the page. */

/* Alexandria arabic */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/wasl/fonts/alexandria-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Alexandria latin-ext */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/wasl/fonts/alexandria-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Alexandria latin */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/wasl/fonts/alexandria-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/wasl/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/wasl/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Readex Pro arabic */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/wasl/fonts/readexpro-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Readex Pro latin-ext */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/wasl/fonts/readexpro-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Readex Pro latin */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/wasl/fonts/readexpro-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Wasl — deep night with a violet → magenta → orange gradient, glass cards and a liquid
   blob in the hero. Inter for Latin, Alexandria (display) and Readex Pro (body) for Arabic.
   Dark by default; the theme switch turns it to a soft lavender-white. */

:root {
  --bg: #07060d;
  --bg-2: #0d0b17;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-2: rgba(255, 255, 255, 0.07);
  --panel-solid: #12101d;
  --ink: #f5f3ff;
  --ink-2: #c3bfd6;
  --muted: #8b86a1;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.16);
  --violet: #7c5cff;
  --magenta: #d946ef;
  --orange: #ff8a3d;
  --blue: #4f7cff;
  --accent: #a28bff;
  --on-accent: #ffffff;
  --grad: linear-gradient(100deg, #7c5cff 0%, #c04cf5 45%, #ff6aa8 72%, #ff9a3d 100%);
  --grad-soft: linear-gradient(140deg, rgba(124, 92, 255, 0.22), rgba(217, 70, 239, 0.14) 50%, rgba(255, 138, 61, 0.16));
  --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
  --danger: #ff6b81;
  --ok: #4ade80;
  --warn: #fbbf24;
  --radius: 18px;
  --radius-lg: 26px;
  --wrap: 1200px;
  --display: 'Inter', 'Alexandria', system-ui, sans-serif;
  --body: 'Inter', 'Readex Pro', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  color-scheme: dark;
}
[dir='rtl'] {
  --display: 'Alexandria', 'Inter', Tahoma, sans-serif;
  --body: 'Readex Pro', 'Inter', Tahoma, sans-serif;
}
:root[data-theme='light'] {
  --bg: #f6f5fb;
  --bg-2: #eeecf7;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-2: rgba(255, 255, 255, 0.9);
  --panel-solid: #ffffff;
  --ink: #14111f;
  --ink-2: #4a4560;
  --muted: #77728a;
  --line: rgba(20, 17, 31, 0.1);
  --line-2: rgba(20, 17, 31, 0.16);
  --accent: #6d4aff;
  --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow: 0 30px 60px -32px rgba(48, 30, 110, 0.35);
  --danger: #e11d48;
  --ok: #16a34a;
  --warn: #b45309;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main {
  /* the scroll choreography tilts cards past the edges; never let that scroll sideways */
  overflow-x: clip;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
}
p {
  margin: 0;
  text-wrap: pretty;
}
.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
[dir='rtl'] .display {
  letter-spacing: 0;
  line-height: 1.25;
}
.c-grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* room for descenders and the last glyph's overhang inside the clipped gradient */
  padding-bottom: 0.06em;
  padding-inline-end: 0.04em;
}
.num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.eyebrow,
.index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.eyebrow::before,
.index::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(192, 76, 245, 0.8);
}

/* glass surface used by every card */
.glass,
.panel,
.plan,
.step,
.fcard,
.pcard {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-edge), var(--shadow);
}
/* a real backdrop blur is costly to repaint, so only the cards that sit over the moving
   hero blob get one; elsewhere the background behind the glass is static and dark */
.hero .glass,
.fcard {
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
}

/* soft colour fields behind the page, so the glass has something to blur */
.aurora {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.aurora::before,
.aurora::after {
  content: '';
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  opacity: 0.32;
}
.aurora::before {
  background: radial-gradient(closest-side, #7c5cff, transparent);
  top: -20vmax;
  inset-inline-start: -22vmax;
}
.aurora::after {
  background: radial-gradient(closest-side, #ff7a59, transparent);
  bottom: -26vmax;
  inset-inline-end: -24vmax;
  opacity: 0.22;
}
:root[data-theme='light'] .aurora::before,
:root[data-theme='light'] .aurora::after {
  opacity: 0.18;
}

/* --- nav ----------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* fully clear at the top of the page; wasl.js adds .scrolled once the page moves */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
}
.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.03em;
  line-height: 1;
}
[dir='rtl'] .brand-name {
  letter-spacing: 0;
}
.nav-links {
  display: flex;
  gap: 4px;
  margin-inline: auto;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover {
  color: var(--ink);
  background: var(--panel-2);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.icon-btn:hover {
  border-color: var(--line-2);
  background: var(--panel-2);
}
.icon-btn:active {
  transform: scale(0.95);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-moon {
  display: none;
}
:root[data-theme='light'] .i-sun {
  display: none;
}
:root[data-theme='light'] .i-moon {
  display: block;
}

/* --- buttons ------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.15s ease, border-color 0.15s, opacity 0.15s, filter 0.2s;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn .arrow {
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.2s;
}
.btn:hover .arrow {
  transform: translateX(3px);
}
[dir='rtl'] .btn:hover .arrow {
  transform: translateX(-3px);
}
.btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir='rtl'] .arrow svg,
[dir='rtl'] .flip {
  transform: scaleX(-1);
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(192, 76, 245, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
  box-shadow: 0 16px 44px -10px rgba(217, 70, 239, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  filter: saturate(1.15) brightness(1.05);
}
.btn-outline,
.btn-glass {
  border-color: var(--line-2);
  color: var(--ink);
  background: var(--panel);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-outline:hover,
.btn-glass:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line-2));
  background: var(--panel-2);
}
.btn-glass .play {
  width: 26px;
  height: 26px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.btn-glass .play svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
  stroke: none;
}
.btn-ink {
  background: var(--ink);
  color: var(--bg);
}
.btn-danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
  background: transparent;
}
.btn-sm {
  min-height: 38px;
  padding: 7px 16px;
  font-size: 14px;
}
.btn-lg {
  min-height: 54px;
  padding: 12px 28px;
  font-size: 16px;
}
.btn-block {
  width: 100%;
}
.btn[disabled],
.btn.is-busy {
  opacity: 0.55;
  pointer-events: none;
}
.text-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.text-link:hover {
  text-decoration: underline;
}

/* --- hero ---------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hero {
  position: relative;
  z-index: 0;
  padding: 28px 0 8px;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 8px;
  align-items: stretch;
  min-height: 600px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
}
.hero-side {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 36px;
}
.pill-new {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
[dir='rtl'] .pill-new {
  padding: 5px 5px 5px 12px;
}
.pill-new .new {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}
.pill-new svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.hero h1 {
  font-size: clamp(52px, 7vw, 100px);
  margin-top: 24px;
  letter-spacing: -0.042em;
}
[dir='rtl'] .hero h1 {
  font-size: clamp(40px, 5.2vw, 72px);
}
.hero .ln {
  display: inline-block;
}
.hero .lede {
  margin-top: 24px;
  max-width: 28em;
  color: var(--ink-2);
  font-size: 17.5px;
  line-height: 1.6;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

/* the blob fills the right half of the hero and runs off the top, the side and down
   behind the feature cards */
.orb {
  position: absolute;
  z-index: 0;
  top: -96px;
  inset-inline-end: 0;
  width: min(64vw, 1180px);
  height: calc(100% + 330px);
  pointer-events: none;
}
.orb canvas,
.orb .orb-fallback {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.orb .orb-fallback {
  inset: 12% 0 22% 14%;
  width: auto !important;
  height: auto !important;
  border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%;
  background: radial-gradient(circle at 25% 30%, #6a5bff, transparent 55%), radial-gradient(circle at 75% 70%, #ff9a5a, transparent 55%),
    linear-gradient(135deg, #3d2bff, #d13cf0 55%, #ff8f3d);
  filter: blur(6px) drop-shadow(0 0 80px rgba(124, 92, 255, 0.5));
}
.orb.has-webgl .orb-fallback {
  display: none;
}

/* floating analytics card over the blob */
.stat-float {
  /* a darker, denser glass than the cards: it sits on the brightest part of the blob */
  position: relative !important;
  background: linear-gradient(160deg, rgba(24, 20, 40, 0.72), rgba(12, 10, 22, 0.62)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
  backdrop-filter: blur(26px) saturate(1.5) !important;
  color: #f5f3ff;
  --ink-2: #c3bfd6;
  z-index: 3;
  width: 250px;
  padding: 18px 18px 16px;
  border-radius: 22px;
}
.stat-float .sf-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  color: var(--accent);
}
.stat-float .sf-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-float small {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.stat-float b {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat-float .sf-spark {
  display: block;
  width: 100%;
  height: 54px;
  margin-top: 8px;
  overflow: visible;
}
.stat-float .up {
  font-size: 12.5px;
}

.up {
  color: var(--ok);
  font-weight: 600;
}
.down {
  color: var(--danger);
  font-weight: 600;
}
.up::before {
  content: '↑ ';
}
.down::before {
  content: '↓ ';
}

.works {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13.5px;
}
.works li svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.works ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.works li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

/* --- sections ------------------------------------------------------------------------ */

.section {
  position: relative;
  padding: 96px 0;
}
.features {
  position: relative;
  z-index: 1;
  padding-top: 48px;
}
.section-head {
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin-bottom: 48px;
}
.section-head h2,
.see-head h2 {
  font-size: clamp(36px, 4.6vw, 60px);
}
[dir='rtl'] .section-head h2,
[dir='rtl'] .see-head h2 {
  font-size: clamp(30px, 3.8vw, 48px);
}
.section-head p {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 36em;
}
.see-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin-bottom: 44px;
}
.see-head > div {
  display: grid;
  gap: 14px;
  max-width: 680px;
}
.see-head p {
  color: var(--ink-2);
}

/* feature cards */
.cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.fcard {
  --tone: var(--violet);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 24px;
  transition: transform 0.3s ease, border-color 0.3s;
}
.fcard:hover {
  border-color: color-mix(in srgb, var(--tone) 45%, var(--line));
}
.fcard::before {
  /* tinted glow in the corner where the 3D object sits */
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  inset-inline-end: -90px;
  bottom: -90px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 45%, transparent), transparent);
  pointer-events: none;
}
.fcard.tone-orange {
  --tone: var(--orange);
}
.fcard.tone-blue {
  --tone: var(--blue);
}
.fcard.tone-pink {
  --tone: var(--magenta);
}
.f-ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
}
.f-ico svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fcard h3 {
  margin-top: 22px;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
[dir='rtl'] .fcard h3 {
  letter-spacing: 0;
  font-size: 20px;
  line-height: 1.45;
}
.fcard p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 14.5px;
  max-width: 24em;
}
.fcard .visual {
  position: absolute;
  inset-inline-end: -4%;
  bottom: -6%;
  width: 66%;
  aspect-ratio: 1;
  pointer-events: none;
}
.fcard .visual canvas {
  position: absolute;
  inset: 0;
}
.fcard .go {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 42px;
  height: 42px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: var(--tone);
  color: #fff;
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--tone) 80%, transparent);
}
.fcard .go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir='rtl'] .fcard .go svg {
  transform: scaleX(-1);
}

/* analytics + pricing teaser row */
.duo {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.analytics {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 22px;
  background: linear-gradient(170deg, rgba(20, 16, 36, 0.92), rgba(9, 8, 16, 0.9));
  color: #f5f3ff;
  --ink-2: #c3bfd6;
  --muted: #8b86a1;
  --line: rgba(255, 255, 255, 0.1);
}
.an-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.an-head h3 {
  font-size: 17px;
  font-weight: 600;
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--line);
}
.live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
.an-big {
  margin-top: 18px;
  font-family: 'Inter', var(--display);
  font-weight: 800;
  font-size: 46px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.an-big + small {
  display: block;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 13px;
}
.wave {
  position: relative;
  margin: 10px -26px 0;
  height: 190px;
}
.wave svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wave .line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.wave .tip {
  position: absolute;
  left: 66.6%;
  top: 30%;
  transform: translate(-50%, -110%);
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(10, 8, 20, 0.85);
  border: 1px solid var(--line);
  font-size: 12px;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}
.wave .tip b {
  display: block;
  font-size: 13px;
}
.wave .tip small {
  color: var(--ink-2);
}
.wave .dot {
  position: absolute;
  left: 66.6%;
  top: 44.4%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.4), 0 0 20px #d946ef;
}
.wave .stem {
  position: absolute;
  left: 66.6%;
  top: 44.4%;
  bottom: 0;
  width: 1px;
  background: linear-gradient(rgba(255, 255, 255, 0.4), transparent);
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.kpis div {
  display: grid;
  gap: 2px;
}
.kpis dt {
  font-size: 12px;
  color: var(--muted);
}
.kpis dd {
  margin: 0;
  font-family: 'Inter', var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.kpis span {
  font-size: 12px;
}
.promo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
}
.promo::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  inset-inline-end: -110px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.35), transparent);
  pointer-events: none;
}
.promo h3 {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
[dir='rtl'] .promo h3 {
  letter-spacing: 0;
  font-size: 26px;
  line-height: 1.45;
}
.promo p {
  color: var(--ink-2);
  font-size: 15px;
}
.promo .btn {
  margin-top: auto;
  align-self: flex-start;
}
.pay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pay-row span,
.pay-methods span {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-2);
}

/* app screens */
.pcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.pcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 26px;
}
.pcard.light {
  border-color: transparent;
  background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--grad) border-box;
  border: 1px solid transparent;
  transform: translateY(26px);
}
:root:not([data-theme='light']) .pcard.light {
  background: linear-gradient(160deg, #1a1530, #120f20) padding-box, var(--grad) border-box;
}
.pcard .p-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pcard .kick {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.pcard .corner {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.pcard .corner svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.pcard h3 {
  margin-top: 16px;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: -0.03em;
}
[dir='rtl'] .pcard h3 {
  letter-spacing: 0;
}
.pcard .p-sub {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 14.5px;
}
.pcard .p-stage {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 26px;
  padding: 10px 0 4px;
}
.pcard .p-stage::before {
  content: '';
  position: absolute;
  inset: 12% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.45), transparent);
}
.pcard.light .p-stage::before {
  background: radial-gradient(closest-side, rgba(255, 106, 168, 0.4), transparent);
}
.pcard:nth-child(3) .p-stage::before {
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.35), transparent);
}
.pcard .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
}
.pcard .chips span {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-2);
}

/* steps */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.step {
  padding: 28px;
}
.step .big {
  font-family: 'Inter', var(--display);
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.05em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.step h3 {
  font-family: var(--display);
  font-size: 21px;
  margin-top: 18px;
  letter-spacing: -0.02em;
}
[dir='rtl'] .step h3 {
  letter-spacing: 0;
}
.step p {
  color: var(--ink-2);
  margin-top: 8px;
  font-size: 15px;
}
.step code {
  font-family: inherit;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 1px 8px;
  border-radius: 8px;
  direction: ltr;
  unicode-bidi: isolate;
}

/* plans (landing + pricing) */
.cycle {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 28px;
}
.cycle button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-2);
}
.cycle button[aria-pressed='true'] {
  background: var(--grad);
  color: #fff;
}
.cycle .save {
  font-size: 12px;
  margin-inline-start: 6px;
  color: var(--orange);
}
.cycle button[aria-pressed='true'] .save {
  color: rgba(255, 255, 255, 0.85);
}
/* a field label with a small switch pushed to the far end (right, or left in Arabic),
   e.g. Plan · Monthly / Yearly */
.field-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.field-head > label {
  flex: 1;
}
.cycle-sm {
  flex: none;
  margin: 0 !important;
  margin-inline-start: auto !important;
  padding: 4px;
}
.cycle-sm button {
  font-size: 12px;
  line-height: 1.2;
  padding: 7px 14px;
}
.cycle-sm .save {
  font-size: 10px;
  margin-inline-start: 4px;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
}
.plan.hot {
  background: linear-gradient(170deg, #1d1636, #120f20) padding-box, var(--grad) border-box;
  border: 1px solid transparent;
  box-shadow: 0 30px 80px -30px rgba(192, 76, 245, 0.55);
}
:root[data-theme='light'] .plan.hot {
  background: linear-gradient(170deg, #ffffff, #f7f3ff) padding-box, var(--grad) border-box;
}
.plan .badge {
  position: absolute;
  top: -12px;
  inset-inline-start: 24px;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--grad);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.plan h3 {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: -0.02em;
}
[dir='rtl'] .plan h3 {
  letter-spacing: 0;
}
.plan .tagline {
  color: var(--ink-2);
  font-size: 14.5px;
  margin-top: 6px;
  min-height: 2.6em;
}
.plan .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
}
.plan .amount {
  font-family: 'Inter', var(--display);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.plan .per {
  color: var(--muted);
  font-size: 14px;
}
.plan ul {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.plan li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.plan li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--grad);
  transform: translateY(-2px);
}
.plan .btn {
  margin-top: auto;
}
.fineprint {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
}
.fineprint a {
  color: var(--accent);
}

/* faq */
.faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
}
.faq details {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass);
  padding: 4px 22px;
  transition: border-color 0.2s;
}
.faq details[open] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  font-size: 16.5px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 18px;
  font-weight: 400;
  transition: transform 0.25s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding: 0 0 18px;
  color: var(--ink-2);
  font-size: 15px;
}

/* closing band */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 32px;
  padding: 64px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 28px;
  align-items: center;
  color: #fff;
  background: #0d0a1c;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: -40% -10% -40% 30%;
  z-index: -1;
  background: radial-gradient(closest-side at 40% 50%, rgba(124, 92, 255, 0.9), transparent 70%),
    radial-gradient(closest-side at 70% 40%, rgba(217, 70, 239, 0.75), transparent 70%),
    radial-gradient(closest-side at 80% 75%, rgba(255, 138, 61, 0.7), transparent 70%);
}
[dir='rtl'] .cta-band::before {
  inset: -40% 30% -40% -10%;
}
.cta-band h2 {
  font-size: clamp(32px, 4vw, 54px);
}
.cta-band p {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
}
.cta-band .btn-primary {
  background: #fff;
  color: #14111f;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.6);
}

/* footer */
.footer {
  margin-top: 96px;
  padding: 44px 0 36px;
  border-top: 1px solid var(--line);
}
.footer-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px 40px;
  align-items: start;
}
.footer-brand p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  max-width: 28em;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: flex-end;
}
.footer-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
}
.footer-links a:hover {
  color: var(--ink);
}
.footer .wrap > .footer-note:only-child {
  border-top: 0;
  padding-top: 0;
}
.footer-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
/* --- forms and app pages (pricing, signup, sign-in, billing, reset, welcome) ----------- */

.page-head {
  position: relative;
  padding: 64px 0 8px;
}
.page-head h1 {
  font-size: clamp(42px, 5.6vw, 76px);
  margin-top: 16px;
}
[dir='rtl'] .page-head h1 {
  font-size: clamp(34px, 4.4vw, 60px);
}
.page-head p {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 17px;
  max-width: 40em;
}
.panel {
  padding: 32px;
}
.panel h3 {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
[dir='rtl'] .panel h3 {
  letter-spacing: 0;
  font-size: 21px;
  line-height: 1.45;
}
.kicker {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field {
  display: grid;
  gap: 7px;
  align-content: start;
}
.field.full {
  grid-column: 1 / -1;
}
.field label,
.label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
:root[data-theme='light'] .input {
  background: #fff;
}
.input::placeholder {
  color: var(--muted);
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input[aria-invalid='true'] {
  border-color: var(--danger);
}
.ltr {
  direction: ltr;
  text-align: left;
}
[dir='rtl'] .ltr {
  text-align: right;
}
.addon {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  overflow: hidden;
  direction: ltr;
}
:root[data-theme='light'] .addon {
  background: #fff;
}
.addon:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.addon .input {
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent;
  min-width: 0;
}
.addon span {
  display: grid;
  place-items: center;
  padding: 0 14px;
  color: var(--muted);
  font-size: 15px;
  background: var(--panel-2);
  white-space: nowrap;
}
.hint {
  font-size: 13px;
  color: var(--muted);
  min-height: 1.2em;
}
.hint.ok {
  color: var(--ok);
}
.hint.bad {
  color: var(--danger);
}
.alert {
  display: none;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 15px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
}
.alert.show {
  display: block;
}
.alert.info {
  background: color-mix(in srgb, var(--violet) 14%, transparent);
  border-color: color-mix(in srgb, var(--violet) 30%, transparent);
  color: var(--ink);
}
.choice {
  display: grid;
  gap: 8px;
}
.choice label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  font-size: 15px;
  transition: border-color 0.15s, background 0.15s;
}
:root[data-theme='light'] .choice label {
  background: #fff;
}
.choice label:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
}
.choice input {
  accent-color: var(--violet);
}
.choice .c-price {
  margin-inline-start: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.signup-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 20px;
  align-items: start;
  padding: 32px 0 0;
}
.summary {
  position: sticky;
  top: 96px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-2);
}
.summary-row b {
  color: var(--ink);
  font-weight: 600;
}
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 18px;
}
.summary-total .amount {
  font-family: 'Inter', var(--display);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pay-methods {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.testcard {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  border: 1px dashed color-mix(in srgb, var(--orange) 55%, transparent);
  border-radius: 14px;
  padding: 12px 14px;
}

.center-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.center-main {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 56px 24px;
}
.auth {
  position: relative;
  width: 100%;
  max-width: 460px;
}
.auth h1 {
  font-size: 46px;
}
[dir='rtl'] .auth h1 {
  font-size: 38px;
}
.auth .sub {
  margin-top: 10px;
  color: var(--ink-2);
}
.auth form {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.auth .switch {
  margin-top: 22px;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-2);
}
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ws-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.ws-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  text-decoration: none;
  background: var(--panel);
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: start;
  transition: border-color 0.15s;
}
.ws-item:hover {
  border-color: var(--accent);
}
.ws-item .ws-mono {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}
.ws-item small {
  display: block;
  color: var(--muted);
  direction: ltr;
  unicode-bidi: isolate;
}

.status-card {
  max-width: 620px;
  margin: 72px auto 0;
  text-align: center;
}
.status-ico {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 16px 40px -14px rgba(192, 76, 245, 0.8);
}
.status-ico svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.status-card h1 {
  font-size: 40px;
}
[dir='rtl'] .status-card h1 {
  font-size: 30px;
}
.status-card p {
  margin-top: 12px;
  color: var(--ink-2);
}
.status-card .btn {
  margin-top: 26px;
}
.progress {
  display: grid;
  gap: 12px;
  margin: 28px auto 0;
  max-width: 360px;
  padding: 0;
  text-align: start;
}
.progress li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
}
.progress li::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 99px;
  border: 2px solid var(--line-2);
  flex: none;
}
.progress li.on {
  color: var(--ink);
}
.progress li.on::before {
  border-color: var(--accent);
  border-top-color: transparent;
  animation: spin 0.9s linear infinite;
}
.progress li.done {
  color: var(--ink);
}
.progress li.done::before {
  border-color: transparent;
  background: var(--grad);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.url-pill {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 15px;
  direction: ltr;
}

/* billing */
.bill-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items: start;
  margin-top: 24px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.stat {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: var(--panel);
}
.stat .label {
  display: block;
}
.stat b {
  display: block;
  margin-top: 6px;
  font-family: 'Inter', var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
[dir='rtl'] .stat b {
  font-family: var(--display);
  letter-spacing: 0;
  font-size: 21px;
}
.meter {
  height: 8px;
  border-radius: 99px;
  background: var(--panel-2);
  overflow: hidden;
  margin-top: 10px;
}
.meter span {
  display: block;
  height: 100%;
  background: var(--grad);
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
}
.status-chip.warn {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}
.status-chip.bad {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}
.table th {
  text-align: start;
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}
.table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table-scroll {
  overflow-x: auto;
}
.quote {
  margin-top: 16px;
  border-radius: 16px;
  padding: 16px;
  border: 1px dashed var(--line-2);
  font-size: 15px;
  color: var(--ink-2);
}
.quote b {
  color: var(--ink);
}
.stack {
  display: grid;
  gap: 14px;
}
.hr {
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}

/* entrance */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) both;
  }
  .rise.d1 {
    animation-delay: 0.08s;
  }
  .rise.d2 {
    animation-delay: 0.16s;
  }
  .rise.d3 {
    animation-delay: 0.24s;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- responsive ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .duo {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .hero-grid,
  .signup-grid,
  .bill-grid {
    grid-template-columns: 1fr;
  }
  .hero-grid {
    min-height: 0;
  }
  .hero {
    padding-bottom: 0;
  }
  /* phones: the blob sits under the copy instead of beside it */
  .orb {
    position: relative;
    top: auto;
    width: 130%;
    height: 430px;
    margin: 0 -15% -90px;
  }
  .hero {
    display: flex;
    flex-direction: column;
  }
  .hero .hero-grid {
    order: 1;
  }
  .hero .orb {
    order: 2;
  }
  .hero .works {
    order: 3;
  }
  .hero-side {
    display: none;
  }
  .plans,
  .steps,
  .pcards,
  .cards3 {
    grid-template-columns: 1fr;
  }
  /* app screens: a swipeable row of cards that snaps to each card */
  .pcards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 360px);
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    margin-inline: -24px;
    padding: 4px 24px 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pcards::-webkit-scrollbar {
    display: none;
  }
  .pcards .pcard {
    scroll-snap-align: start;
  }
  .pcard.light {
    transform: none;
  }
  .cta-band {
    grid-template-columns: 1fr;
    padding: 40px 28px;
  }
  .summary {
    position: static;
  }
  .nav-links {
    display: none;
  }
  .footer-row {
    grid-template-columns: 1fr;
  }
  .footer-links {
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  .wrap {
    padding-inline: 16px;
  }
  .pcards {
    scroll-padding-inline: 16px;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .hide-sm {
    display: none;
  }
  .cards3,
  .form-grid,
  .stat-row {
    grid-template-columns: 1fr;
  }
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .section {
    padding: 72px 0;
  }
  .panel {
    padding: 22px;
  }
  .an-big {
    font-size: 38px;
  }
  .stat-float {
    inset-inline-end: 2%;
    bottom: 6%;
    width: 52%;
    padding: 14px;
  }
  .stat-float b {
    font-size: 26px;
  }
}


/* --- phone mockups (em-based: 1em = 1/36 of the phone width) ---------------------------- */

.phone {
  position: relative;
  width: 74%;
  container-type: inline-size;
  border-radius: 42px;
  padding: 8px;
  background: linear-gradient(145deg, #3b3747, #15131c 40%, #2a2733);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ph {
  font-size: calc(100cqw / 36);
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 34px;
  overflow: hidden;
  background: #f6f5fb;
  color: #14111f;
  font-family: 'Readex Pro', system-ui, sans-serif;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  text-align: start;
}
.ph * {
  box-sizing: border-box;
}
.ph-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4em 2.4em 0.4em;
  font-size: 1.25em;
  font-weight: 600;
  direction: ltr;
}
.ph-island {
  width: 9em;
  height: 2.6em;
  border-radius: 2em;
  background: #000;
}
.ph-bat {
  width: 2.2em;
  height: 1.1em;
  border-radius: 0.35em;
  border: 0.14em solid #14111f;
  position: relative;
}
.ph-bat::after {
  content: '';
  position: absolute;
  inset: 0.15em 0.5em 0.15em 0.15em;
  background: #14111f;
  border-radius: 0.15em;
}
.ph-head {
  background: #fff;
  border-radius: 0 0 2.6em 2.6em;
  padding: 0.8em 2em 1.6em;
  box-shadow: 0 0.6em 2em rgba(40, 30, 80, 0.07);
}
.ph-head.plain {
  background: transparent;
  box-shadow: none;
  padding-bottom: 0.6em;
}
.ph-logo {
  color: #14111f;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 1.7em;
  font-family: 'Anton', 'Alexandria', sans-serif;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.ph-logo i {
  width: 0.32em;
  height: 0.32em;
  border-radius: 99px;
  background: #d946ef;
}
.ph-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-top: 0.6em;
}
.ph-hello {
  font-weight: 700;
  font-size: 1.55em;
}
.ph-big {
  font-weight: 700;
  font-size: 3em;
  letter-spacing: -0.02em;
}
.ph-sub {
  color: #6b6680;
  font-size: 1.25em;
  margin-top: 0.2em;
}
.ph-icons {
  display: flex;
  gap: 0.6em;
}
.ph-icons i,
.ph-search {
  width: 3.6em;
  height: 3.6em;
  border-radius: 99em;
  background: #fff;
  box-shadow: 0 0.3em 1.2em rgba(40, 30, 80, 0.1);
  display: block;
}
.ph-icons i.ink {
  background: #1a1626;
}
.ph-search {
  box-shadow: none;
  background: radial-gradient(circle at 42% 42%, transparent 0.7em, #14111f 0.75em 0.95em, transparent 1em);
}
.ph-body {
  flex: 1;
  padding: 1.4em 2em 0;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  overflow: hidden;
}
.ph-chips {
  display: flex;
  gap: 0.7em;
}
.ph-chips span {
  padding: 0.8em 1.3em;
  border-radius: 99em;
  background: #fff;
  font-size: 1.2em;
  font-weight: 500;
  box-shadow: 0 0.3em 1em rgba(40, 30, 80, 0.07);
  white-space: nowrap;
}
.ph-chips span.on {
  background: #7c5cff;
  color: #fff;
}
.ph-chart {
  position: relative;
  height: 13em;
}
.ph-chart svg {
  position: absolute;
  inset: 1.6em 0 2em;
  width: 100%;
  height: calc(100% - 3.6em);
}
.ph-bubble {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  background: #fff;
  border-radius: 99em;
  padding: 0.3em 0.9em;
  font-size: 1.1em;
  font-weight: 600;
  box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.08);
}
.ph-bubble::first-letter {
  color: #f7b8e1;
}
.ph-axis {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  display: flex;
  justify-content: space-between;
  color: #6b6680;
  font-size: 1.05em;
}
.ph-insight {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  background: #1a1626;
  color: #fff;
  border-radius: 2em;
  padding: 1.4em;
  font-size: 1.15em;
}
.ph-insight i {
  width: 2.8em;
  height: 2.8em;
  flex: none;
  border-radius: 0.8em;
  background: #7c5cff;
}
.ph-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9em;
}
.ph-tiles div {
  border-radius: 1.8em;
  padding: 1.2em 1.3em;
}
.ph-tiles .blue {
  background: #d9d0ff;
}
.ph-tiles .pink {
  background: #f7b8e1;
}
.ph-tiles small {
  display: block;
  font-size: 1.1em;
  color: #2c2738;
}
.ph-tiles b {
  display: block;
  font-size: 2.8em;
  line-height: 1.1;
}
.ph-tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  padding: 1em 1.4em 2.4em;
  border-top: 1px solid #e4e1ee;
}
.ph-tabs span {
  display: grid;
  justify-items: center;
  gap: 0.2em;
  padding: 0.7em 1.4em;
  border-radius: 1.6em;
}
.ph-tabs span.on {
  background: #eeeaff;
}
.ph-tabs b {
  font-size: 1.05em;
}
.ic {
  width: 2.2em;
  height: 2.2em;
  display: block;
  border-radius: 0.5em;
  background: #14111f;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.ic-chart {
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10h3v10zM10.5 20V4h3v16zM17 20v-7h3v7z'/%3E%3C/svg%3E");
}
.ic-people {
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.5-3.5 3.2-5.5 6.5-5.5s6 2 6.5 5.5M16 4.5a3.5 3.5 0 0 1 0 7M18 14.6c2 .8 3.3 2.6 3.5 5.4'/%3E%3C/svg%3E");
}
.ic-deals {
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='8' width='18' height='12' rx='2.5'/%3E%3Cpath d='M5 5h14M7 2.5h10'/%3E%3C/svg%3E");
}
.ic-call {
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}
.ph-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 1.8em;
  font-size: 1.3em;
}
.ph-back,
.ph-more {
  width: 2.8em;
  height: 2.8em;
  border-radius: 99em;
  background: #fff;
  box-shadow: 0 0.3em 1em rgba(40, 30, 80, 0.1);
}
.ph-rec {
  display: flex;
  gap: 1.2em;
  align-items: flex-start;
}
.ph-av {
  width: 4.6em;
  height: 4.6em;
  flex: none;
  border-radius: 99em;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.3em;
}
.ph-av.sq {
  border-radius: 1.3em;
  width: 4em;
  height: 4em;
  font-size: 1.15em;
}
.ph-av.mint {
  background: #ddfbef;
}
.ph-av.pink {
  background: #fde7f4;
}
.ph-av.blue {
  background: #eeeaff;
}
.ph-title {
  font-size: 2.2em;
  font-weight: 700;
}
.ph-pill {
  display: inline-block;
  margin-top: 0.4em;
  padding: 0.35em 1em;
  border-radius: 99em;
  font-size: 1.15em;
  font-weight: 600;
}
.ph-pill.amber {
  background: #fef3e2;
  color: #b45309;
}
.ph-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  gap: 0.8em;
  background: #fff;
  border-radius: 1.8em;
  padding: 1.2em 1.4em;
}
.ph-strip small {
  display: block;
  color: #6b6680;
  font-size: 1em;
}
.ph-strip b {
  display: block;
  font-size: 1.25em;
  white-space: nowrap;
}
.ph-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  background: #7c5cff;
  color: #fff;
  border-radius: 99em;
  padding: 1.1em;
  font-weight: 600;
  font-size: 1.35em;
}
.ph-call .ic {
  background: #fff;
  width: 1.4em;
  height: 1.4em;
}
.ph-actions {
  display: flex;
  justify-content: space-between;
}
.ph-actions span {
  display: grid;
  justify-items: center;
  gap: 0.4em;
  color: #6b6680;
  font-size: 1.05em;
}
.ph-actions i {
  width: 3.6em;
  height: 3.6em;
  border-radius: 99em;
  background: #efedf7;
}
.ph-card {
  background: #fff;
  border-radius: 2em;
  padding: 1.4em 1.5em;
}
.ph-card-h {
  font-weight: 700;
  font-size: 1.45em;
}
.ph-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8em;
  padding: 0.9em 0;
  border-bottom: 1px solid #e4e1ee;
  font-size: 1.15em;
}
.ph-line small {
  display: block;
  color: #6b6680;
  font-size: 0.9em;
}
.ph-total {
  display: flex;
  justify-content: space-between;
  padding-top: 0.9em;
  font-size: 1.35em;
}
.ph-stages {
  display: flex;
  gap: 0.8em;
}
.ph-stages div {
  flex: 1;
  background: #efedf7;
  border-radius: 1.6em;
  padding: 1em;
  min-width: 0;
}
.ph-stages div.on {
  background: #fff;
  border: 0.15em solid #14111f;
}
.ph-stages small {
  display: block;
  font-size: 0.95em;
  color: #6b6680;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-stages b {
  display: block;
  font-size: 1.8em;
}
.ph-deal {
  display: flex;
  align-items: center;
  gap: 1em;
  background: #fff;
  border-radius: 2em;
  padding: 1.2em;
  box-shadow: 0 0.4em 1.6em rgba(40, 30, 80, 0.06);
}
.ph-deal .grow {
  flex: 1;
  min-width: 0;
}
.ph-deal b {
  display: block;
  font-size: 1.3em;
}
.ph-deal small {
  display: block;
  color: #6b6680;
  font-size: 1.05em;
}
.ph-deal .end {
  display: grid;
  justify-items: end;
  gap: 0.4em;
}
.ph-deal .end b {
  font-size: 1.15em;
  white-space: nowrap;
}
.ph-dial {
  width: 3em;
  height: 3em;
  border-radius: 99em;
  background: #7c5cff;
}


/* --- scroll choreography -------------------------------------------------------------
   motion.js sets --p / --e / --o on [data-scroll] elements and adds .motion to <html>.
   Defaults below are the finished state, so without the script (or with reduced motion)
   everything simply sits in place. Transforms use the individual translate / rotate /
   scale properties so they stack on top of each element's own transform. */

:root {
  --dir: 1;
  --scroll: 0;
}
[dir='rtl'] {
  --dir: -1;
}
[data-scroll] {
  --p: 0.5;
  --e: 1;
  --o: 0;
}
.cards3 .fcard:nth-child(1) { --k: 0; --r: -6deg; }
.cards3 .fcard:nth-child(2) { --k: 1; --r: 4deg; }
.cards3 .fcard:nth-child(3) { --k: 2; --r: -3deg; }
.steps .step:nth-child(1) { --k: 0; }
.steps .step:nth-child(2) { --k: 1; }
.steps .step:nth-child(3) { --k: 2; }

@media (prefers-reduced-motion: no-preference) {
  /* one-off entrances */
  .motion .reveal {
    opacity: 0;
    translate: 0 34px;
    transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.1, 1), translate 0.9s cubic-bezier(0.2, 0.7, 0.1, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .motion .reveal.in {
    opacity: 1;
    translate: none;
  }
  .motion .mask {
    clip-path: inset(0 0 100% 0);
    translate: 0 0.4em;
    transition: clip-path 1s cubic-bezier(0.7, 0, 0.2, 1), translate 1s cubic-bezier(0.2, 0.7, 0.1, 1);
  }
  .motion .mask.in {
    clip-path: inset(-0.3em -0.6em -0.4em -0.6em);
    translate: none;
  }

  /* hero: the headline lines drift apart, the copy fades and the stat card lifts away */
  .motion .hero .ln {
    will-change: translate;
  }
  .motion .hero .ln:nth-of-type(1) {
    translate: calc(var(--o) * -14% * var(--dir)) 0;
  }
  .motion .hero .ln:nth-of-type(2) {
    translate: calc(var(--o) * 10% * var(--dir)) 0;
  }
  .motion .hero .ln:nth-of-type(3) {
    translate: calc(var(--o) * -6% * var(--dir)) 0;
  }
  .motion .hero .lede,
  .motion .hero .hero-cta,
  .motion .hero .works {
    translate: 0 calc(var(--o) * -60px);
    filter: opacity(max(0, calc(1 - var(--o) * 1.8)));
  }
  .motion .hero .stat-float {
    translate: 0 calc(var(--o) * -160px);
    rotate: calc(var(--o) * -6deg);
  }

  /* feature cards rise in a loose fan and settle */
  .motion .cards3 .fcard {
    translate: 0 calc((1 - var(--e)) * (140px + var(--k) * 80px));
    rotate: calc((1 - var(--e)) * var(--r));
  }

  /* analytics: the wave draws itself, the marker and tooltip pop in at the end */
  .motion .analytics .line {
    stroke-dashoffset: calc(1 - var(--e));
  }
  .motion .analytics .area {
    opacity: var(--e);
  }
  .motion .analytics .tip,
  .motion .analytics .dot,
  .motion .analytics .stem {
    opacity: clamp(0, calc((var(--e) - 0.75) * 4), 1);
  }
  .motion .duo .promo {
    translate: calc((1 - var(--e)) * 60px * var(--dir)) 0;
    opacity: calc(0.2 + var(--e) * 0.8);
  }

  /* how it works: a line draws across, the steps climb in one after another */
  .motion .steps::before {
    content: '';
    position: absolute;
    top: -24px;
    inset-inline: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
    transform: scaleX(var(--e));
    transform-origin: left;
  }
  .motion[dir='rtl'] .steps::before {
    transform-origin: right;
  }
  .motion .steps .step {
    translate: 0 calc((1 - var(--e)) * (60px + var(--k) * 70px));
    opacity: calc(0.15 + var(--e) * 0.85);
  }

  /* closing band grows to full size as it arrives */
  .motion .cta-band {
    scale: calc(0.88 + var(--e) * 0.12);
    border-radius: calc(32px + (1 - var(--e)) * 90px);
  }
}

/* app screens: the three cards start stacked behind the middle one and deal out sideways */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .motion .pcards .pcard:nth-child(1) {
    translate: calc((1 - var(--e)) * (100% + 18px) * var(--dir)) calc((1 - var(--e)) * 80px);
    rotate: calc((1 - var(--e)) * -8deg);
  }
  .motion .pcards .pcard:nth-child(3) {
    translate: calc((1 - var(--e)) * (-100% - 18px) * var(--dir)) calc((1 - var(--e)) * 80px);
    rotate: calc((1 - var(--e)) * 8deg);
  }
  .motion .pcards .pcard.light {
    z-index: 2;
    scale: calc(0.92 + var(--e) * 0.08);
  }
  .motion .pcards .p-stage .phone {
    translate: 0 calc((0.5 - var(--p)) * 60px);
  }
}


/* --- multi-page site: shared pieces ------------------------------------------------------ */

::selection {
  background: color-mix(in srgb, var(--violet) 55%, transparent);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
html {
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}
.nav-links a[aria-current='page'] {
  color: var(--ink);
  background: var(--panel-2);
}
.arrow-ico {
  display: inline-grid;
  place-items: center;
}
.arrow-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir='rtl'] .arrow-ico svg {
  transform: scaleX(-1);
}
.lead {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 17.5px;
  line-height: 1.65;
  max-width: 34em;
}
.ticks {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.ticks svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--violet) 22%, transparent);
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ticks.cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
}
.text-link.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

/* store badges */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 16px 7px 12px;
  border-radius: 12px;
  background: #0b0a10;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
[dir='rtl'] .store {
  padding: 7px 12px 7px 16px;
}
.store:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
.store:active {
  transform: translateY(1px);
}
.store span {
  display: grid;
  line-height: 1.1;
  text-align: start;
}
.store small {
  font-size: 10.5px;
  opacity: 0.8;
}
.store b {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.store-ico {
  width: 24px;
  height: 24px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.store-ico.apple {
  --icon: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E");
}
.store-ico.play {
  --icon: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.018 13.298l-3.919 2.218-3.515-3.493 3.543-3.521 3.891 2.202a1.49 1.49 0 0 1 0 2.594zM1.337.924a1.486 1.486 0 0 0-.112.568v21.017c0 .217.045.419.124.6l11.155-11.087L1.337.924zm12.207 10.065l3.258-3.238L3.45.195a1.466 1.466 0 0 0-.946-.179l11.04 10.973zm0 2.067l-11 10.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21z'/%3E%3C/svg%3E");
  width: 21px;
  height: 21px;
}
.stores-sm .store {
  min-height: 40px;
  padding-block: 5px;
  border-radius: 10px;
}
.stores-sm .store b {
  font-size: 14.5px;
}
.stores-sm .store-ico {
  width: 20px;
  height: 20px;
}
.hero-stores .stores {
  margin-top: 18px;
}

/* text + phone, side by side */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.split h1,
.split h2 {
  font-size: clamp(36px, 4.6vw, 60px);
}
[dir='rtl'] .split h1,
[dir='rtl'] .split h2 {
  font-size: clamp(30px, 3.8vw, 48px);
}
.split-media {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.split-media::before {
  content: '';
  position: absolute;
  inset: 8% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.45), transparent), radial-gradient(closest-side at 70% 70%, rgba(255, 138, 61, 0.3), transparent);
}
.split-media .phone {
  width: min(320px, 78%);
}

/* home: "everything a sales team runs on" list */
.inside-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-bottom: 28px;
}
.inside-head h2 {
  font-size: clamp(32px, 4vw, 52px);
}
.inside-head p {
  color: var(--ink-2);
  max-width: 26em;
}
.inside-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.inside-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 0.2s;
}
.inside-list .inside-row:nth-child(odd) {
  padding-inline-end: 28px;
  border-inline-end: 1px solid var(--line);
}
.inside-list .inside-row:nth-child(even) {
  padding-inline-start: 28px;
}
.inside-row b {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.inside-row span {
  grid-column: 1;
  color: var(--ink-2);
  font-size: 14.5px;
}
.inside-row .arrow-ico {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.inside-row:hover .arrow-ico {
  color: var(--ink);
  border-color: var(--accent);
  transform: translateX(3px);
}
[dir='rtl'] .inside-row:hover .arrow-ico {
  transform: translateX(-3px);
}

/* --- features page ---------------------------------------------------------------------- */

.feat-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 56px;
  margin-top: 40px;
}
.feat-index {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  gap: 2px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--line);
}
.feat-index a {
  position: relative;
  padding: 7px 0;
  color: var(--muted);
  font-size: 14.5px;
  text-decoration: none;
  transition: color 0.2s;
}
.feat-index a:hover {
  color: var(--ink);
}
.feat-index a[aria-current] {
  color: var(--ink);
  font-weight: 600;
}
.feat-index a[aria-current]::before {
  content: '';
  position: absolute;
  inset-inline-start: -15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 80px;
}
.feat:first-child {
  padding-top: 8px;
}
.feat:last-child {
  border-bottom: 0;
}
.feat h2 {
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
[dir='rtl'] .feat h2 {
  letter-spacing: 0;
  line-height: 1.4;
}
.feat-copy > p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 16.5px;
  max-width: 34em;
}

/* small interface panels that show each feature */
.vign {
  margin: 0;
  padding: 20px;
  font-size: 14px;
  border-radius: 20px;
}
.v-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v-head div {
  flex: 1;
  min-width: 0;
}
.v-head b,
.v-head small {
  display: block;
}
.v-head small,
.vign small {
  color: var(--muted);
  font-size: 12.5px;
}
.v-av {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #14111f;
}
.v-av.mint {
  background: #a7f3d0;
}
.v-av.pink {
  background: #fbcfe8;
}
.v-av.blue {
  background: #bfdbfe;
}
.v-pill {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.v-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 0;
}
.v-grid div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.v-grid dt {
  font-size: 11.5px;
  color: var(--muted);
}
.v-grid dd {
  margin: 2px 0 0;
  font-weight: 600;
}
.v-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.v-btn {
  padding: 8px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--grad);
}
.v-btn.ghost {
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.k-col {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  min-height: 190px;
}
.k-head {
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
}
.k-head b {
  font-size: 12.5px;
}
.k-card {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.k-card b {
  font-size: 13px;
}
.k-card.lifted {
  transform: rotate(-3deg) translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.55);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
.c-row,
.t-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}
.c-row:last-child,
.t-row:last-child {
  border-bottom: 0;
}
.grow {
  flex: 1;
  min-width: 0;
}
.grow b,
.grow small {
  display: block;
}
.c-dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--ok);
  flex: none;
}
.c-dot.miss {
  background: var(--muted);
}
.c-out {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 13%, transparent);
}
.c-out.miss {
  color: var(--muted);
  background: var(--panel-2);
}
.c-dur {
  width: 52px;
  text-align: end;
  font-weight: 600;
}
.c-time {
  width: 40px;
  text-align: end;
}
.t-group {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.t-box {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--line-2);
}
.t-row.done .t-box {
  border-color: transparent;
  background: var(--grad);
}
.t-row.done b {
  color: var(--muted);
  text-decoration: line-through;
}
.t-row.late small.num {
  color: var(--danger);
  font-weight: 600;
}
.tm-head,
.tm-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1.2fr 0.9fr;
  align-items: center;
  gap: 10px;
}
.tm-head {
  font-size: 11.5px;
  color: var(--muted);
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line);
}
.tm-row {
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}
.tm-row .who {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.tm-row .v-av {
  width: 30px;
  height: 30px;
  font-size: 11px;
  border-radius: 9px;
}
.tm-row span.num {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-bar {
  height: 6px;
  width: 54px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) var(--w), var(--panel-2) var(--w));
}
.v-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.p-title {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}
.p-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.p-line div {
  display: grid;
}
.p-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
}
.p-total b {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.bilang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bl {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.bl[dir='rtl'] {
  font-family: 'Readex Pro', var(--body);
  text-align: right;
}
.bl b {
  font-size: 16px;
  line-height: 1.35;
}
.bl span {
  color: var(--ink-2);
  font-size: 13px;
}
.sla {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
}
.sla div {
  display: grid;
}
.sla-ring {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 99px;
  background: conic-gradient(var(--orange) calc(var(--ring) * 360deg), color-mix(in srgb, var(--orange) 18%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 10px, #000 11px);
  mask: radial-gradient(circle, transparent 10px, #000 11px);
}
.role {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}
.role:last-child {
  border-bottom: 0;
}

/* --- mobile page ------------------------------------------------------------------------ */

.app-hero {
  position: relative;
  padding: 48px 0 24px;
}
.duo-phones {
  min-height: 560px;
}
.duo-phones .phone {
  width: min(270px, 62%);
}
.duo-phones .back {
  position: absolute;
  inset-inline-start: 6%;
  top: 0;
  rotate: -6deg;
  opacity: 0.9;
  width: 100%;
  display: grid;
  justify-items: start;
}
.duo-phones .front {
  position: relative;
  inset-inline-start: 14%;
  top: 40px;
  rotate: 3deg;
  width: 100%;
  display: grid;
  justify-items: center;
}
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  counter-reset: flow;
}
.flow li {
  counter-increment: flow;
}
.flow-phone {
  display: grid;
  place-items: center;
  padding: 26px 0 22px;
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--line);
}
.flow-phone .phone {
  width: min(250px, 78%);
}
.flow h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -0.02em;
}
.flow h3::before {
  content: counter(flow);
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 99px;
  background: var(--grad);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.flow > li > p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15px;
}
.facts {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
}
.facts h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  position: sticky;
  top: 110px;
}
.facts-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  margin: 0;
}
.facts-list dt {
  font-weight: 600;
  font-size: 16.5px;
}
.facts-list dd {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}

/* --- contact + pricing extras ----------------------------------------------------------- */

.contact-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: end;
}
.mail-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.mail-card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  transform: translateY(-2px);
}
.mail-ico {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
}
.mail-ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mail-text {
  flex: 1;
  display: grid;
  min-width: 0;
}
.mail-text small {
  color: var(--muted);
}
.mail-text b {
  font-size: 19px;
  overflow-wrap: anywhere;
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 48px;
  align-items: start;
}
.faq-layout h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  position: sticky;
  top: 110px;
}
.includes {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 48px;
  align-items: start;
}
.includes h2 {
  font-size: clamp(28px, 3.2vw, 40px);
}
.includes .ticks {
  margin-top: 6px;
}
ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
ol.steps .step {
  counter-increment: step;
}
ol.steps .step h3::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-inline-end: 10px;
  border-radius: 99px;
  background: var(--grad);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  vertical-align: 2px;
}
ol.steps .step h3 {
  margin-top: 0;
}

/* footer columns */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.7fr));
  gap: 32px 40px;
  align-items: start;
}
.footer-col {
  display: grid;
  gap: 10px;
}
.footer-col b {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.footer-col a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
}
.footer-col a:hover {
  color: var(--ink);
}
.footer-grid .footer-note {
  grid-column: 1 / -1;
}

/* phone mock: the "log call" screen */
.ph-q {
  font-weight: 600;
  font-size: 1.5em;
  margin-top: 0.4em;
}
.ph-q.sm {
  font-size: 1.25em;
  color: #4a4f5a;
}
.ph-chips.wide span {
  flex: 1;
  text-align: center;
}
.ph-field {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.2em;
  border-radius: 1.2em;
  background: #fff;
  font-size: 1.2em;
  line-height: 1.4;
  box-shadow: 0 0.3em 1em rgba(27, 35, 48, 0.06);
}
.ph-field.soft {
  background: #eaf6fb;
  color: #075e7d;
  font-weight: 600;
}
.ph-field .ic {
  width: 1.3em;
  height: 1.3em;
  background: currentColor;
}

@media (max-width: 1080px) {
  .feat-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .feat-index {
    position: sticky;
    top: 64px;
    z-index: 5;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 0;
    margin: 0 -24px 8px;
    padding-inline: 24px;
    border: 0;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    scrollbar-width: none;
  }
  .feat-index a {
    flex: none;
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid var(--line);
  }
  .feat-index a[aria-current]::before {
    display: none;
  }
  .feat-index a[aria-current] {
    background: var(--panel-2);
    border-color: var(--accent);
  }
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-grid .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .split,
  .feat,
  .facts,
  .contact-head,
  .faq-layout,
  .includes {
    grid-template-columns: 1fr;
  }
  .split {
    gap: 28px;
  }
  .flow {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .facts h2,
  .faq-layout h2 {
    position: static;
  }
  .inside-list {
    grid-template-columns: 1fr;
  }
  .inside-list .inside-row:nth-child(odd),
  .inside-list .inside-row:nth-child(even) {
    padding-inline: 4px;
    border-inline-end: 0;
  }
  .duo-phones {
    min-height: 480px;
  }
}
@media (max-width: 600px) {
  .feat-index {
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .ticks.cols,
  .facts-list,
  .bilang {
    grid-template-columns: 1fr;
  }
  .kanban {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    overflow-x: auto;
  }
  .tm-head,
  .tm-row {
    grid-template-columns: 1.3fr 0.6fr 1fr 0.8fr;
    font-size: 13px;
  }
  .tm-bar {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- motion: page transitions, entrances, scripted demos ----------------------------------
   One grammar everywhere: things rise a little, sharpen from a soft blur and settle with an
   exponential ease-out. Content is visible by default; motion.js only adds the starting
   states when the visitor allows motion. */

@property --w {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --ring {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  interpolate-size: allow-keywords;
}

/* moving between pages: the top bar stays put, the page cross-fades and lifts */
@view-transition {
  navigation: auto;
}
.nav {
  view-transition-name: site-nav;
}
::view-transition-old(root) {
  animation: vt-out 0.22s ease-in both;
}
::view-transition-new(root) {
  animation: vt-in 0.45s var(--ease-out) both;
}
@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
}

/* pointer light on cards (motion.js tags them .lit on devices with hover) */
.lit {
  --mx: 50%;
  --my: 0%;
}
.lit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.07), transparent 45%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
:root[data-theme='light'] .lit::after {
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(124, 92, 255, 0.08), transparent 45%);
}
.lit:hover::after {
  opacity: 1;
}
.vign,
.step,
.mail-card,
.faq details,
.flow-phone {
  position: relative;
}

/* buttons: a quick sheen on hover */
.btn-primary {
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn-primary:hover::before {
  transition: transform 0.7s var(--ease-out);
  transform: translateX(120%);
}

/* questions open and close smoothly where the browser supports it */
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
}
.faq details[open]::details-content {
  block-size: auto;
}

/* pricing: a price rolls in when monthly/yearly changes */
.amount.swap {
  animation: price-roll 0.45s var(--ease-out);
}
@keyframes price-roll {
  from {
    opacity: 0;
    transform: translateY(40%);
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* hero: the three headline lines arrive one after another */
  .hero .ln {
    animation: line-in 0.9s var(--ease-out) both;
  }
  .hero .ln:nth-of-type(2) {
    animation-delay: 0.12s;
  }
  .hero .ln:nth-of-type(3) {
    animation-delay: 0.24s;
  }
  .hero h1.rise {
    animation: none;
  }
  .hero-stores {
    animation-delay: 0.36s;
  }
  .stat-float {
    animation: float-in 1.1s var(--ease-out) 0.5s both;
  }
  @keyframes line-in {
    from {
      opacity: 0;
      transform: translateY(0.35em);
      filter: blur(10px);
    }
  }
  @keyframes float-in {
    from {
      opacity: 0;
      transform: translateY(30px) scale(0.96);
    }
  }

  /* entrances: opacity and position only (both run on the compositor); the blur is kept for
     the few large moments (headline lines, panels), not every list row */
  .motion .reveal {
    transition: opacity 0.8s var(--ease-out), translate 0.9s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
    will-change: opacity, translate;
  }
  .motion .reveal.in {
    will-change: auto;
  }

  /* features: each panel tilts up into place as its section scrolls in */
  .motion .vign.reveal {
    translate: 0 40px;
    rotate: 1.5deg;
    scale: 0.97;
    transition: opacity 0.9s var(--ease-out), translate 1s var(--ease-out), rotate 1s var(--ease-out), scale 1s var(--ease-out), filter 0.9s var(--ease-out);
  }
  [dir='rtl'] .motion .vign.reveal {
    rotate: -1.5deg;
  }
  .motion .vign.reveal.in {
    translate: none;
    rotate: none;
    scale: none;
  }
  .motion .vign .reveal {
    transition-delay: calc(0.25s + var(--i, 0) * 90ms);
  }
  /* pipeline: the lifted card is dragged one column on and dropped back */
  .motion .kanban.in .k-card.lifted {
    animation: drag 2.4s var(--ease-out) 0.7s both;
  }
  @keyframes drag {
    0% {
      transform: none;
      box-shadow: none;
    }
    25% {
      transform: rotate(-4deg) translate(6px, -6px);
      box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.6);
    }
    55% {
      transform: rotate(-4deg) translate(calc(100% + 18px), -6px);
    }
    75% {
      transform: rotate(-4deg) translate(calc(100% + 18px), -6px);
    }
    100% {
      transform: rotate(-3deg) translateY(-2px);
      box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.55);
    }
  }
  [dir='rtl'] .motion .kanban.in .k-card.lifted {
    animation-name: drag-rtl;
  }
  @keyframes drag-rtl {
    25% {
      transform: rotate(4deg) translate(-6px, -6px);
    }
    55%,
    75% {
      transform: rotate(4deg) translate(calc(-100% - 18px), -6px);
    }
    100% {
      transform: rotate(3deg) translateY(-2px);
    }
  }
  /* team: the answered-rate bars grow to their value */
  .motion .team:not(.in) .tm-bar {
    --w: 0% !important;
  }
  .motion .tm-bar {
    transition: --w 1.2s var(--ease-out) 0.4s;
  }
  /* response time: the ring fills */
  .motion .control:not(.in) .sla-ring {
    --ring: 0 !important;
  }
  .motion .sla-ring {
    transition: --ring 1.4s var(--ease-out) 0.3s;
  }
  /* tasks: the finished one ticks itself off */
  .motion .tasks.in .t-row.done .t-box {
    animation: tick 0.5s var(--ease-out) 1s both;
  }
  .motion .tasks.in .t-row.done b {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1.5px;
    text-decoration: none;
    animation: strike 0.5s var(--ease-out) 1.3s both;
  }
  [dir='rtl'] .motion .tasks.in .t-row.done b {
    background-position: 100% 55%;
  }
  @keyframes tick {
    from {
      background: transparent;
      border-color: var(--line-2);
      transform: scale(0.6);
    }
  }
  @keyframes strike {
    to {
      background-size: 100% 1.5px;
    }
  }
  /* the late task's time blinks once for attention */
  .motion .tasks.in .t-row.late small.num {
    animation: late 1.2s ease-in-out 1.6s 2;
  }
  @keyframes late {
    50% {
      opacity: 0.3;
    }
  }
  /* products: the total counts in after the lines */
  .motion .prods.in .p-total b {
    animation: line-in 0.8s var(--ease-out) 0.7s both;
  }

  /* the log-call screen acts out a call being logged: answer, length, note, follow-up, save */
  .motion .play-call:not(.in) .ph-chips span.on,
  .motion .play-call:not(.in) .ph-field,
  .motion .play-call:not(.in) .ph-call {
    animation-play-state: paused;
  }
  .motion .play-call .ph-chips.wide span.on {
    animation: chip-on 0.35s var(--ease-out) 0.7s both;
  }
  .motion .play-call .ph-chips:not(.wide) span.on {
    animation: chip-on 0.35s var(--ease-out) 1.4s both;
  }
  .motion .play-call .ph-field:not(.soft) {
    animation: type 1.4s steps(28, end) 2s both;
  }
  .motion .play-call .ph-field.soft {
    animation: line-in 0.6s var(--ease-out) 3.5s both;
  }
  .motion .play-call .ph-call {
    animation: press 0.5s var(--ease-out) 4.3s both;
  }
  @keyframes chip-on {
    from {
      background: #fff;
      color: #141416;
      transform: scale(0.94);
    }
  }
  @keyframes type {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  [dir='rtl'] .motion .play-call .ph-field:not(.soft) {
    animation-name: type-rtl;
  }
  @keyframes type-rtl {
    from {
      clip-path: inset(0 0 0 100%);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  @keyframes press {
    40% {
      transform: scale(0.94);
      filter: brightness(1.15);
    }
  }

  /* mobile page: the two hero phones part as the page scrolls */
  .motion .app-hero .duo-phones .back {
    translate: calc(var(--o) * -40px * var(--dir)) calc(var(--o) * 60px);
    rotate: calc(-6deg - var(--o) * 6deg);
  }
  .motion .app-hero .duo-phones .front {
    translate: calc(var(--o) * 30px * var(--dir)) calc(var(--o) * -50px);
    rotate: calc(3deg + var(--o) * 5deg);
  }
  .motion .app-hero .duo-phones .front {
    animation: float-in 1.1s var(--ease-out) 0.2s both;
  }
  .motion .app-hero .duo-phones .back {
    animation: float-in 1.1s var(--ease-out) 0.05s both;
  }

  /* home: the phone beside "built for the person on the phone" rises with the scroll */
  .motion .split-app .split-media .phone {
    animation: none;
  }

  /* features index: the active marker slides between items */
  .feat-index a {
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  }
  .feat-index a[aria-current]::before {
    animation: mark-in 0.35s var(--ease-out);
  }
  @keyframes mark-in {
    from {
      transform: scaleY(0);
    }
  }
}
.k-card.lifted {
  position: relative;
  z-index: 2;
  background: var(--panel-solid);
}
:root:not([data-theme='light']) .k-card.lifted {
  background: #1d1930;
}
.t-row.done b {
  width: fit-content;
}

/* --- features stage: one feature in focus, the rest waiting out of focus ------------------ */

.page-head.compact {
  padding-bottom: 0;
}
.page-head.compact h1 {
  font-size: clamp(36px, 4.4vw, 60px);
}
[dir='rtl'] .page-head.compact h1 {
  font-size: clamp(30px, 3.6vw, 48px);
}
.page-head.compact p {
  font-size: 16.5px;
}
.fstage {
  --tone-c: rgba(124, 92, 255, 0.5);
  position: relative;
  padding: 40px 0 24px;
  outline: none;
}
.fstage[data-tone='orange'] {
  --tone-c: rgba(255, 138, 61, 0.42);
}
.fstage[data-tone='blue'] {
  --tone-c: rgba(79, 124, 255, 0.48);
}
.fstage[data-tone='pink'] {
  --tone-c: rgba(217, 70, 239, 0.42);
}
.fs-glow {
  position: absolute;
  inset: -10% 0 0 30%;
  z-index: -1;
  pointer-events: none;
  background-color: var(--tone-c);
  -webkit-mask: radial-gradient(closest-side at 45% 50%, #000, transparent 75%);
  mask: radial-gradient(closest-side at 45% 50%, #000, transparent 75%);
  transition: background-color 1.2s ease;
}
[dir='rtl'] .fs-glow {
  inset: -10% 30% 0 0;
}
.fs-slides {
  display: grid;
}
.fs-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
  min-height: clamp(460px, 58vh, 600px);
  pointer-events: none;
}
.fs-copy {
  position: relative;
  z-index: 3;
  max-width: 440px;
}
.fs-title {
  font-family: var(--display);
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  outline: none;
}
[dir='rtl'] .fs-title {
  letter-spacing: 0;
  line-height: 1.3;
}
.fs-copy > p {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.65;
}
.fs-copy .ticks {
  margin-top: 20px;
  gap: 9px;
}
.fs-copy .ticks li {
  font-size: 15px;
}
.fs-more {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
[dir='rtl'] .fs-more {
  letter-spacing: 0;
  font-size: 14px;
}
.fs-more .arrow-ico {
  transition: transform 0.3s var(--ease-out);
}
.fs-more:hover .arrow-ico {
  transform: translate(2px, -2px);
}
.fs-obj {
  position: relative;
  z-index: calc(10 - var(--ad, 0));
  display: grid;
  justify-items: start;
  pointer-events: auto;
}
.fs-obj .vign {
  width: min(470px, 100%);
}
.fs-slide:not(.is-active) .fs-obj {
  cursor: pointer;
}

/* depth of field: the slide in focus sits in place, the next ones step back to the side */
.fstage.is-live .fs-copy {
  opacity: 0;
  translate: 0 18px;
  filter: blur(8px);
  transition: opacity 0.5s ease, translate 0.6s var(--ease-out), filter 0.5s ease;
}
.fstage.is-live .fs-slide.is-active .fs-copy {
  opacity: 1;
  translate: none;
  filter: none;
  transition-delay: 0.18s;
}
.fstage.is-live .fs-obj {
  translate: calc(var(--dd, 0) * 62% * var(--dir)) 0;
  scale: calc(1 - var(--ad, 0) * 0.16);
  filter: blur(calc(var(--ad, 0) * 6px));
  opacity: var(--op, 1);
  transform-origin: center;
  transition: translate 0.95s var(--ease-out), scale 0.95s var(--ease-out), filter 0.8s ease, opacity 0.7s ease;
}
.fstage.is-live .fs-slide:not(.is-active) .fs-obj:hover {
  filter: blur(calc(var(--ad, 0) * 4px));
}

.fs-controls {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.fs-arrow {
  width: 52px;
  height: 52px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.fs-arrow:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}
.fs-arrow:active {
  transform: scale(0.94);
}
.fs-arrow.next {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}
.fs-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir='rtl'] .fs-arrow svg {
  transform: scaleX(-1);
}
.fs-count {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 14px;
}
.fs-count b {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
}
.fs-tabs {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
/* a centred strip narrower than the stage; it scrolls sideways, and an arrow plus a fade
   appear on whichever side still has more tabs */
.fs-tabs-in {
  position: relative;
  min-width: 0;
  max-width: min(100%, 680px);
}
.fs-tabs-track {
  --fl: 0px;
  --fr: 0px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.fs-tabs-track::-webkit-scrollbar {
  display: none;
}
.fs-tabs-in.can-l .fs-tabs-track {
  --fl: 64px;
}
.fs-tabs-in.can-r .fs-tabs-track {
  --fr: 64px;
}
.fs-tabs-btn {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  translate: 0 -50%;
  transition: opacity 0.2s, border-color 0.2s;
}
.fs-tabs-btn:hover {
  border-color: var(--accent);
}
.fs-tabs-btn.l {
  left: 0;
}
.fs-tabs-btn.r {
  right: 0;
}
.fs-tabs-in.can-l .fs-tabs-btn.l,
.fs-tabs-in.can-r .fs-tabs-btn.r {
  opacity: 1;
  pointer-events: auto;
}
.fs-tabs a {
  flex: none;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.fs-tabs a:hover {
  color: var(--ink);
  border-color: var(--line-2);
}
.fs-tabs a[aria-current] {
  color: var(--ink);
  background: var(--panel-2);
  border-color: var(--accent);
}

/* without the script the features simply stack */
.fstage:not(.is-live) .fs-slides {
  gap: 64px;
}
.fstage:not(.is-live) .fs-slide {
  grid-area: auto;
  pointer-events: auto;
}
.fstage:not(.is-live) .fs-controls {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .fstage.is-live .fs-copy,
  .fstage.is-live .fs-obj,
  .fs-glow {
    transition: none;
  }
}

@media (max-width: 900px) {
  .fs-slide {
    grid-template-columns: 1fr;
    gap: 24px;
    align-content: start;
    min-height: 0;
  }
  .fs-obj {
    order: -1;
    justify-items: center;
  }
  .fs-copy {
    max-width: none;
  }
  .fstage.is-live .fs-obj {
    translate: calc(var(--dd, 0) * 78% * var(--dir)) 0;
  }
  .fs-glow {
    inset: 0 -20% 40% -20%;
  }
  .fs-tabs-in {
    max-width: calc(100% + 32px);
    margin-inline: -16px;
  }
  .fs-tabs-track {
    padding-inline: 16px;
  }
  .fs-tabs-btn.l {
    left: 6px;
  }
  .fs-tabs-btn.r {
    right: 6px;
  }
}
.brand-name {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .fstage.is-live .fs-slide:not(.is-active) .fs-obj {
    opacity: calc(var(--op, 1) * 0.45);
  }
}

/* slider controls: big targets, the next feature named, clickable progress */
.fs-controls {
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.fs-arrow {
  width: 64px;
  height: 64px;
}
.fs-arrow svg {
  width: 24px;
  height: 24px;
}
.fs-next {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 8px 8px 8px 24px;
  border: 0;
  border-radius: 99px;
  background: var(--grad);
  color: #fff;
  font: inherit;
  text-align: start;
  cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(192, 76, 245, 0.7);
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease, filter 0.2s;
}
[dir='rtl'] .fs-next {
  padding: 8px 24px 8px 8px;
}
.fs-next:hover {
  filter: saturate(1.15) brightness(1.05);
  box-shadow: 0 16px 40px -12px rgba(217, 70, 239, 0.8);
}
.fs-next:active {
  transform: scale(0.97);
}
.fs-next-text {
  display: grid;
  line-height: 1.2;
}
.fs-next-text small {
  font-size: 12px;
  opacity: 0.85;
}
.fs-next-text b {
  font-size: 16px;
  font-weight: 600;
  min-width: 9em;
}
.fs-next-ico {
  width: 48px;
  height: 48px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
  transition: transform 0.3s var(--ease-out);
}
.fs-next:hover .fs-next-ico {
  transform: translateX(3px);
}
[dir='rtl'] .fs-next:hover .fs-next-ico {
  transform: translateX(-3px);
}
.fs-next-ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir='rtl'] .fs-next-ico svg {
  transform: scaleX(-1);
}
.fs-progress {
  display: flex;
  gap: 6px;
  margin-inline-start: auto;
}
.fs-progress button {
  display: grid;
  align-items: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fs-progress i {
  display: block;
  height: 4px;
  border-radius: 99px;
  background: var(--line-2);
  transition: background 0.3s ease, height 0.3s ease;
}
.fs-progress button:hover i {
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.fs-progress button.done i {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.fs-progress button[aria-selected='true'] i {
  height: 6px;
  background: var(--grad);
}
.fs-count {
  margin-inline-start: 8px;
}
.fs-tabs a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
}
.fs-slides {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.fstage.is-dragging .fs-slides {
  cursor: grabbing;
}
.fs-slide:not(.is-active) .fs-obj::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
}
@media (max-width: 900px) {
  .fs-controls {
    gap: 10px;
  }
  .fs-arrow {
    width: 56px;
    height: 56px;
  }
  .fs-next {
    flex: 1;
    min-height: 56px;
    justify-content: space-between;
  }
  .fs-next-text b {
    min-width: 0;
  }
  .fs-progress {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
  }
  .fs-progress button {
    flex: 1;
    width: auto;
  }
  .fs-count {
    display: none;
  }
}
.fstage {
  overflow-x: clip;
}

/* features stage: screens that are fully faded out stop rendering once they have faded */
.fstage.is-live .fs-slide[data-far] .fs-obj {
  visibility: hidden;
  transition-property: translate, scale, filter, opacity, visibility;
  transition-delay: 0s, 0s, 0s, 0s, 0.9s;
}

/* --- terms and privacy: a quiet reading page -------------------------------------------- */

.legal {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 64px;
  margin-top: 32px;
}
.legal-index {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  gap: 2px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--line);
}
.legal-index a {
  padding: 6px 0;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}
.legal-index a:hover {
  color: var(--ink);
}
.legal-index .legal-other {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--accent);
  font-weight: 600;
}
.legal-body {
  max-width: 68ch;
}
.legal-body section {
  padding: 8px 0 28px;
  scroll-margin-top: 90px;
}
.legal-body h2 {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
[dir='rtl'] .legal-body h2 {
  letter-spacing: 0;
}
.legal-body p,
.legal-body li {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.75;
}
.legal-body p + p,
.legal-body ul + p,
.legal-body p + ul {
  margin-top: 12px;
}
.legal-body ul {
  margin: 0;
  padding-inline-start: 22px;
}
.legal-body li + li {
  margin-top: 6px;
}
.legal-body li::marker {
  color: var(--accent);
}
@media (max-width: 900px) {
  .legal {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .legal-index {
    position: static;
  }
}

/* billing, signed out: the sign-in card sits in the middle of the page */
body:has(#login:not([hidden])) .bill-head .wrap {
  text-align: center;
}
body:has(#login:not([hidden])) .bill-head p {
  margin-inline: auto;
}
#login {
  margin-inline: auto;
}
@media (max-width: 900px) {
  .works {
    margin-top: 40px;
  }
}

.alert.warn {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  color: var(--ink);
}
.consent {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}
.consent a {
  color: var(--ink-2);
}

/* hero: the store badges sit centred under the two main buttons */
.hero-actions {
  display: inline-grid;
  justify-items: center;
  max-width: 100%;
}
.hero-actions .stores {
  justify-content: center;
}
@media (max-width: 600px) {
  .hero-actions {
    display: grid;
    justify-items: start;
  }
  .hero-actions .stores {
    justify-content: flex-start;
  }
}

/* --- phone screens in dark mode: the app's own dark theme (mobile/brands/empower dark
   tokens), so the screenshots match the site; the light theme keeps the light screens --- */
:root:not([data-theme='light']) .ph {
  --ph-bg: #0b0a12;
  --ph-surface: #16131f;
  --ph-muted: #1f1b2c;
  --ph-border: #2a2638;
  --ph-text: #f5f3ff;
  --ph-text-2: #a6a1b8;
  background: var(--ph-bg);
  color: var(--ph-text);
}
:root:not([data-theme='light']) .ph-bat {
  border-color: var(--ph-text);
}
:root:not([data-theme='light']) .ph-bat::after,
:root:not([data-theme='light']) .ic {
  background: var(--ph-text);
}
:root:not([data-theme='light']) .ph-head,
:root:not([data-theme='light']) .ph-icons i,
:root:not([data-theme='light']) .ph-search,
:root:not([data-theme='light']) .ph-chips span,
:root:not([data-theme='light']) .ph-bubble,
:root:not([data-theme='light']) .ph-tabs,
:root:not([data-theme='light']) .ph-more,
:root:not([data-theme='light']) .ph-back,
:root:not([data-theme='light']) .ph-strip,
:root:not([data-theme='light']) .ph-card,
:root:not([data-theme='light']) .ph-deal,
:root:not([data-theme='light']) .ph-field {
  background-color: var(--ph-surface);
  box-shadow: none;
}
:root:not([data-theme='light']) .ph-search {
  background: radial-gradient(circle at 42% 42%, transparent 0.7em, var(--ph-text) 0.75em 0.95em, transparent 1em), var(--ph-surface);
}
:root:not([data-theme='light']) .ph-icons i:not(.ink) {
  background-color: var(--ph-muted);
}
:root:not([data-theme='light']) .ph-icons i.ink {
  background: #f5f3ff;
}
:root:not([data-theme='light']) .ph-logo {
  color: var(--ph-text);
}
:root:not([data-theme='light']) .ph-sub,
:root:not([data-theme='light']) .ph-axis,
:root:not([data-theme='light']) .ph-strip small,
:root:not([data-theme='light']) .ph-actions span,
:root:not([data-theme='light']) .ph-line small,
:root:not([data-theme='light']) .ph-stages small,
:root:not([data-theme='light']) .ph-deal small,
:root:not([data-theme='light']) .ph-q.sm {
  color: var(--ph-text-2);
}
:root:not([data-theme='light']) .ph-chips span.on,
:root:not([data-theme='light']) .ph-call,
:root:not([data-theme='light']) .ph-dial {
  background: #7c5cff;
  color: #fff;
}
:root:not([data-theme='light']) .ph-call .ic {
  background: #fff;
}
:root:not([data-theme='light']) .ph-insight {
  background: #221e30;
}
:root:not([data-theme='light']) .ph-tiles .blue {
  background: #231c45;
}
:root:not([data-theme='light']) .ph-tiles .pink {
  background: #3a1f31;
}
:root:not([data-theme='light']) .ph-tiles small,
:root:not([data-theme='light']) .ph-tiles b {
  color: var(--ph-text);
}
:root:not([data-theme='light']) .ph-tabs {
  border-top-color: var(--ph-border);
}
:root:not([data-theme='light']) .ph-tabs span.on {
  background: #231c45;
}
:root:not([data-theme='light']) .ph-tabs span.on .ic {
  background: #a28bff;
}
:root:not([data-theme='light']) .ph-av.mint {
  background: #15352a;
  color: #79e6bd;
}
:root:not([data-theme='light']) .ph-av.pink {
  background: #3a1f31;
  color: #f3a6d6;
}
:root:not([data-theme='light']) .ph-av.blue {
  background: #231c45;
  color: #c4b5fd;
}
:root:not([data-theme='light']) .ph-pill.amber {
  background: #35260b;
  color: #f59e0b;
}
:root:not([data-theme='light']) .ph-actions i,
:root:not([data-theme='light']) .ph-stages div {
  background: var(--ph-muted);
}
:root:not([data-theme='light']) .ph-stages div.on {
  background: var(--ph-surface);
  border-color: var(--ph-text);
}
:root:not([data-theme='light']) .ph-line {
  border-bottom-color: var(--ph-border);
}
:root:not([data-theme='light']) .ph-field.soft {
  background: #231c45;
  color: #c4b5fd;
}
/* the log-call demo's chip animation starts from the dark chip colour */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-theme='light']) .motion .play-call .ph-chips span.on {
    animation-name: chip-on-dark;
  }
  @keyframes chip-on-dark {
    from {
      background: #16131f;
      color: #f5f3ff;
      transform: scale(0.94);
    }
  }
}
/* small phones: brand, two icon buttons and "Get started" must fit one row */
@media (max-width: 420px) {
  .nav-row {
    gap: 10px;
  }
  .brand {
    gap: 8px;
  }
  .brand-mark {
    width: 26px;
    height: 26px;
  }
  .brand-name {
    font-size: 18px;
  }
  .nav-actions {
    gap: 6px;
  }
  .nav-actions .icon-btn {
    width: 36px;
    height: 36px;
  }
  .nav-actions .btn-sm {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
  }
}