/* Optiverwalten public site. Tokens mirror mobile/src/theme (colors.ts, tokens.ts):
   indigo primary, slate text, 4pt spacing grid, 48px minimum targets, one dark palette. */
:root {
  --bg: #F7F8FA; --surface: #FFFFFF; --surface-2: #F2F4F7;
  --border: #E4E7EC; --border-strong: #CFD4DC;
  --text: #101828; --text-2: #475467; --text-3: #98A2B3;
  --primary: #4F46E5; --primary-pressed: #4338CA; --primary-subtle: #EEF2FF; --on-primary: #FFFFFF;
  --warning: #B54708; --warning-subtle: #FEF0C7;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --target: 48px; --measure: 68ch;
  /* SiteSans: Inter for de, Vazirmatn for ir (chosen in build.ts). */
  --font: "SiteSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --accent: #22C55E; --accent-2: #06B6D4;
  --glow: 0 12px 32px -12px rgba(79, 70, 229, 0.55);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -16px rgba(16, 24, 40, 0.18);
}
@font-face {
  font-family: "SiteSans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/Vazirmatn-Variable.4e3fa217d3.woff2") format("woff2-variations"), url("/assets/fonts/Vazirmatn-Variable.4e3fa217d3.woff2") format("woff2");
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0F1A; --surface: #151B29; --surface-2: #1E2536;
    --border: #252D3D; --border-strong: #374050;
    --text: #F5F7FA; --text-2: #A3AEC2; --text-3: #6B7688;
    --primary: #818CF8; --primary-pressed: #A5B4FC; --primary-subtle: #1E2140; --on-primary: #0B0F1A;
    --warning: #FBBF24; --warning-subtle: #2A2113;
    --glow: 0 12px 32px -12px rgba(129, 140, 248, 0.45);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--text); background: var(--bg); font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-pressed); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 var(--s3); font-weight: 750; text-wrap: balance; }
/* Persian (IR): Vazirmatn reads better with open tracking and a taller line. */
html[dir="rtl"] body { font-feature-settings: normal; line-height: 1.75; font-size: 16.5px; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { letter-spacing: 0; line-height: 1.35; font-weight: 700; }
html[dir="rtl"] .lead { line-height: 1.8; }
html[dir="rtl"] .foot-h { letter-spacing: 0.02em; text-transform: none; }
h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); margin-top: var(--s8); }
h3 { font-size: 1.1rem; letter-spacing: -0.01em; font-weight: 650; }
p { text-wrap: pretty; }
p { margin: 0 0 var(--s4); }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--s4); }
/* Off-screen without widening the page (left:-999px causes horizontal scroll in RTL). */
.skip {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip:focus {
  position: fixed;
  inset-inline-start: var(--s2);
  top: var(--s2);
  width: auto; height: auto;
  margin: 0;
  padding: var(--s3) var(--s4);
  clip-path: none;
  overflow: visible;
  background: var(--surface);
  border-radius: var(--r-sm);
  z-index: 100;
}
.prelaunch { background: #FEF3C7; color: #78350F; text-align: center; font-size: .875rem; font-weight: 600; line-height: 1.4; padding: .5rem 1rem; }
@media (prefers-color-scheme: dark) { .prelaunch { background: #3A2A0A; color: #FCD34D; } }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.bar { display: flex; align-items: center; gap: var(--s4); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.1rem; min-height: var(--target); }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand-fa { gap: var(--s3); }
.brand-fa .brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 8px -3px rgba(13, 59, 67, 0.4);
}
.brand-fa .brand-name { font-size: 1.15rem; font-weight: 750; letter-spacing: 0; }
html[dir="rtl"] .bar { min-height: 64px; }
.nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s4); }
.nav ul { display: flex; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.nav li a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--s3); color: var(--text-2); text-decoration: none; border-radius: 999px; font-weight: 500; }
.nav li a:hover, .nav li a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.nav-actions { display: flex; gap: var(--s2); }
.nav-toggle, .nav-burger { display: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); padding-inline: var(--s6); border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; cursor: pointer; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-primary { background: linear-gradient(135deg, var(--primary), #6366F1); color: var(--on-primary); box-shadow: var(--glow); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-pressed), var(--primary)); color: var(--on-primary); transform: translateY(-1px); }
.btn-ghost { color: var(--text); border-color: var(--border-strong); background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: var(--surface); color: var(--text); transform: translateY(-1px); }
.btn-lg { min-height: 56px; padding: 0 var(--s6); font-size: 1.05rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 var(--s3); }

/* hero and page head */
.hero { padding: var(--s12) 0 var(--s8); background: linear-gradient(180deg, var(--primary-subtle), transparent 70%); }
.hero h1 { max-width: 20ch; }
.hero h1 em, .hl { font-style: normal; background: linear-gradient(90deg, var(--primary), #8B5CF6 60%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: 0.85rem; font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary-subtle) 80%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); padding: 6px 14px; border-radius: 999px; margin: 0 0 var(--s4); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.lead { font-size: 1.2rem; color: var(--text-2); max-width: var(--measure); }
.note { color: var(--text-3); font-size: 0.95rem; }
.page-head { padding-top: var(--s6); }
.dates { color: var(--text-3); font-size: 0.95rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0 0 var(--s4); font-size: 0.9rem; color: var(--text-3); }
.crumbs li + li::before { content: "›"; margin-inline-end: var(--s2); }
html[dir="rtl"] .crumbs li + li::before { content: "‹"; }
.crumbs a { color: var(--text-2); }

/* prose and blocks */
.prose { max-width: 100%; margin-bottom: var(--s6); }
.prose > p, .prose > ol, .prose > ul { max-width: var(--measure); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); margin: var(--s4) 0; }
.card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: var(--s6); box-shadow: var(--shadow-card); overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent-2)); opacity: 0; transition: opacity 0.2s ease; }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: var(--s2); }
.card p { margin: 0; color: var(--text-2); }
.card a { color: var(--text); text-decoration: none; }
.card a:hover { color: var(--primary); }
/* A card whose title is a link is the link: the whole face opens it, the arrow says so. */
.card:has(h3 > a) { cursor: pointer; }
.card h3 > a::after { content: ""; position: absolute; inset: 0; }
.card:has(h3 > a) h3 { padding-inline-end: var(--s6); }
.card:has(h3 > a)::after { content: "›"; position: absolute; inset-inline-end: var(--s5); top: var(--s5); font-size: 1.4rem; line-height: 1; color: var(--text-3); transition: transform 0.15s ease, color 0.15s ease; }
html[dir="rtl"] .card:has(h3 > a)::after { content: "‹"; }
.card:has(h3 > a):hover::after { transform: translateX(3px); color: var(--primary); }
html[dir="rtl"] .card:has(h3 > a):hover::after { transform: translateX(-3px); }
.card:has(h3 > a):hover h3 a { color: var(--primary); }
.card:has(h3 > a:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { position: relative; padding-inline-start: var(--s12); margin-bottom: var(--s3); min-height: var(--s8); }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: var(--s8); height: var(--s8); border-radius: 50%; background: var(--primary-subtle); color: var(--primary); font-weight: 700; display: grid; place-items: center; }
.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-inline-start: var(--s6); margin-bottom: var(--s2); }
.checks li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--primary); font-weight: 700; }
.callout { max-width: var(--measure); background: var(--primary-subtle); border-inline-start: 4px solid var(--primary); border-radius: var(--r-sm); padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.callout p { margin: 0; }
.callout.warning { background: var(--warning-subtle); border-inline-start-color: var(--warning); }
.faq details { max-width: var(--measure); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0 var(--s4); margin-bottom: var(--s2); }
.faq details[open] { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.faq summary { cursor: pointer; min-height: var(--target); display: flex; align-items: center; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-inline-start: auto; color: var(--text-3); font-size: 1.4rem; }
.faq details[open] summary::after { content: "–"; }
.faq summary h3 { margin: 0; font-size: 1.05rem; }
.faq details p { color: var(--text-2); padding-bottom: var(--s3); }
.table-wrap { overflow-x: auto; margin: var(--s4) 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
th, td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
th { color: var(--text-2); font-weight: 600; }
tbody th { color: var(--text); }
.num { text-align: end; white-space: nowrap; }
.cta { padding: var(--s8) var(--s4); }
.cta-box { position: relative; overflow: hidden; max-width: 1120px; margin: 0 auto; background: linear-gradient(120deg, #4338CA, var(--primary) 45%, #7C3AED); color: #fff; border-radius: 28px; padding: var(--s12) var(--s8); box-shadow: 0 30px 60px -30px rgba(79, 70, 229, 0.6); }
.cta-box::after { content: ""; position: absolute; width: 480px; height: 480px; right: -160px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 60%); pointer-events: none; }
.cta-box h2, .cta-box p { position: relative; }
.cta-box .actions { position: relative; }
.cta-box h2 { margin-top: 0; }
.cta-box .btn-primary { background: #fff; color: var(--primary); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35); }
.cta-box .btn-ghost { background: transparent; color: var(--on-primary); border-color: var(--on-primary); }
.cta-box .btn-ghost:hover { background: rgba(255,255,255,0.12); }
.related { border-top: 1px solid var(--border); padding-top: var(--s6); margin-bottom: var(--s8); }
.related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.related li a { display: inline-flex; align-items: center; min-height: var(--target); }

/* footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: var(--s8) 0 var(--s6); margin-top: var(--s8); color: var(--text-2); font-size: 0.95rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s6); }
.foot-h { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin: 0 0 var(--s2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-2); text-decoration: none; }
.site-footer li a:hover { color: var(--primary); }
.foot-bottom { border-top: 1px solid var(--border); margin-top: var(--s6); padding-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }
.foot-legal { display: flex; gap: var(--s4); }

/* phones */
@media (max-width: 860px) {
  .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: var(--target); height: var(--target); margin-inline-start: auto; cursor: pointer; border-radius: var(--r-sm); }
  .nav-burger span { display: block; height: 2px; width: 22px; margin: 0 auto; background: var(--text); }
  .nav { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--s2) var(--s4) var(--s4); z-index: 40; }
  .nav ul { flex-direction: column; }
  .nav li a { min-height: var(--target); }
  .nav-actions { flex-direction: column; margin-top: var(--s2); }
  .nav-toggle:checked ~ .nav { display: flex; }
  .hero { padding-top: var(--s8); }
  .foot-bottom, .foot-legal { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- screenshots in device frames ---------- */
.frame { position: relative; display: inline-block; max-width: 100%; }
.frame img { display: block; width: 100%; height: auto; }
.frame-phone { width: 300px; padding: 9px; border-radius: 44px; background: linear-gradient(160deg, #2A3142, #0B0F1A 40%); box-shadow: 0 40px 80px -30px rgba(16, 24, 40, 0.55), 0 0 0 1px rgba(255,255,255,0.06) inset; }
.frame-phone img { border-radius: 35px; }
.frame-desktop { width: 100%; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 60px -28px rgba(16, 24, 40, 0.45); overflow: hidden; }
.frame-desktop::before { content: ""; display: block; height: 28px; background: var(--surface-2); border-bottom: 1px solid var(--border); background-image: radial-gradient(circle, #FF5F57 5px, transparent 6px), radial-gradient(circle, #FEBC2E 5px, transparent 6px), radial-gradient(circle, #28C840 5px, transparent 6px); background-size: 16px 16px; background-repeat: no-repeat; background-position: 12px 6px, 30px 6px, 48px 6px; }

/* ---------- hero with the product in it ---------- */
.hero-shots { position: relative; overflow: hidden; padding: var(--s12) 0; background:
    radial-gradient(50% 60% at 85% 10%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 60%),
    radial-gradient(40% 50% at 10% 90%, color-mix(in srgb, var(--accent-2) 16%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--primary-subtle), transparent 75%);
  background-color: var(--bg); }
.hero-shots .wrap { position: relative; }
.hero-shots::after { background: var(--accent-2); }
.hero-grid::before { content: ""; position: absolute; inset: -80px 0 auto 0; height: 600px; background-image: linear-gradient(color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent 75%); pointer-events: none; z-index: -1; }
.hero-shots::before, .hero-shots::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; }
.hero-shots::before { width: 420px; height: 420px; right: -120px; top: -80px; background: var(--primary); opacity: 0.18; }
.hero-shots::after { width: 320px; height: 320px; left: 40%; bottom: -160px; background: #22C55E; opacity: 0.10; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s8); align-items: center; position: relative; }
.hero-art { position: relative; min-height: 470px; }
.hero-art .frame-desktop { position: absolute; inset-inline-end: 0; top: 0; width: 84%; }
.hero-art .frame-phone { position: absolute; inset-inline-start: 0; bottom: 0; width: 176px; padding: 7px; border-radius: 32px; animation: float 6s ease-in-out infinite; }
.hero-art .frame-phone img { border-radius: 26px; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }

/* ---------- showcase rows ---------- */
.showcase { margin: var(--s12) 0; }
.showcase > .lead { margin-bottom: var(--s6); }
.show-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; padding: var(--s6) 0; }
.show-row.flip .show-copy { order: 2; }
.show-copy h3 { font-size: 1.5rem; margin: var(--s2) 0 var(--s3); }
.show-copy h3 a { color: inherit; text-decoration: none; }
.show-copy h3 a:hover { color: var(--primary); }
.show-copy p { color: var(--text-2); max-width: 46ch; }
.show-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), #8B5CF6); color: #fff; font-weight: 700; box-shadow: var(--glow); }
.show-art { display: flex; justify-content: center; }
.show-art .frame-phone { width: 260px; }

/* ---------- figures, stats, reel ---------- */
figure.shot { margin: var(--s8) 0; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
figure.shot figcaption { font-size: 0.95rem; color: var(--text-2); text-align: center; max-width: var(--measure); }
.stats { margin: var(--s10, 40px) 0; }
.stats ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); }
.stats li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); }
.stats li { border-radius: 24px; box-shadow: var(--shadow-card); }
.stats strong { display: block; font-size: 2.2rem; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; background: linear-gradient(90deg, var(--primary), #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { color: var(--text-2); font-size: 0.95rem; }
.reel { margin: var(--s12) calc(-1 * var(--s4)); padding: var(--s10, 40px) var(--s4) var(--s6); border-radius: 28px; background: radial-gradient(80% 60% at 20% 0%, rgba(99, 102, 241, 0.35), transparent 60%), #0B0F1A; color: #F5F7FA; }
.reel h2 { color: #fff; margin-top: 0; }
.reel > p { color: #A3AEC2; max-width: var(--measure); }
.reel .frame-desktop { border-color: #252D3D; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8); }
.reel-track p { color: #A3AEC2; }
.reel-track { list-style: none; padding: var(--s2) 0 var(--s4); margin: 0; display: flex; gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: var(--s4); -webkit-overflow-scrolling: touch; }
.reel-track::before, .reel-track::after { content: ""; flex: 0 0 var(--s2); }
.reel-track li { flex: 0 0 auto; scroll-snap-align: start; width: min(560px, 82vw); }
.reel-track .frame-phone { width: 240px; }
.reel-track p { font-size: 0.95rem; color: var(--text-2); margin-top: var(--s3); }

/* ---------- motion: cards and rows arrive as they scroll in; off when asked ---------- */
@supports (animation-timeline: view()) {
  .show-row, .stats li, .cards .card, figure.shot { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.cards .card { transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.cards .card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 16px 32px -20px rgba(79, 70, 229, 0.45); }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { min-height: 0; margin-top: var(--s4); }
  .hero-art .frame-desktop { position: static; width: 100%; }
  .hero-art .frame-phone { position: absolute; inset-inline-end: -6px; inset-inline-start: auto; bottom: -28px; width: 120px; padding: 5px; border-radius: 22px; }
  .hero-art .frame-phone img { border-radius: 18px; }
  .hero-shots { padding-bottom: var(--s16); }
  .show-row { grid-template-columns: 1fr; gap: var(--s5); }
  .show-row.flip .show-copy { order: 0; }
  .frame-phone { width: 240px; }
}
@media (prefers-color-scheme: dark) {
  .frame-phone { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), inset 0 0 0 2px #374050; }
  .hero-shots::before { opacity: 0.28; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art .frame-phone { animation: none; }
  .show-row, .stats li, .cards .card, figure.shot { animation: none; }
  .cards .card { transition: none; }
}

/* 404: the job sheet the fitter fills in about the missing page */
.nf-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s8); align-items: center; padding: var(--s12) 0 var(--s8); }
.nf-eyebrow { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); background: var(--primary-subtle); padding: var(--s1) var(--s3); border-radius: 999px; margin: 0 0 var(--s3); }
.nf-hero h1 { max-width: 16ch; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); }
.nf-sheet { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s6); box-shadow: 0 24px 60px -30px rgba(16, 24, 40, 0.35); transform: rotate(-1.2deg); overflow: hidden; }
.nf-sheet::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--primary), var(--primary-pressed)); }
.nf-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.nf-ref { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.nf-ref span { color: var(--text); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.nf-title { margin: var(--s1) 0 0; font-weight: 700; font-size: 1.25rem; }
.nf-badge { flex: none; font-size: 0.8rem; font-weight: 700; color: var(--warning); background: var(--warning-subtle); padding: var(--s1) var(--s3); border-radius: 999px; white-space: nowrap; }
.nf-tool { position: absolute; right: var(--s4); bottom: var(--s16); color: var(--primary); opacity: 0.9; }
.nf-hammer { transform-origin: 34px 84px; animation: nf-swing 2.6s ease-in-out infinite; }
.nf-spark { opacity: 0; transform-origin: 100px 26px; animation: nf-spark 2.6s ease-in-out infinite; }
@keyframes nf-swing { 0%, 100% { transform: rotate(-18deg); } 45% { transform: rotate(-18deg); } 58% { transform: rotate(22deg); } 70% { transform: rotate(12deg); } 82% { transform: rotate(-14deg); } }
@keyframes nf-spark { 0%, 55% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.3); } }
.nf-facts { display: grid; gap: var(--s2); margin: var(--s5) 0; padding: 0; max-width: 60%; }
.nf-facts div { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--s2); border-top: 1px dashed var(--border); padding-top: var(--s2); }
.nf-facts dt { color: var(--text-3); font-size: 0.9rem; }
.nf-facts dd { margin: 0; font-size: 0.95rem; }
.nf-check-h { margin: var(--s4) 0 var(--s2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.nf-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.nf-checks li { display: flex; align-items: center; gap: var(--s3); font-size: 0.95rem; }
.nf-checks span { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong); display: inline-grid; place-items: center; flex: none; }
.nf-checks .is-done span { background: var(--primary); border-color: var(--primary); }
.nf-checks .is-done span::after { content: ""; width: 6px; height: 11px; border: solid var(--on-primary); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.nf-checks .is-open { color: var(--text-2); }
.nf-checks .is-open span { border-style: dashed; animation: nf-blink 1.6s steps(2, start) infinite; }
@keyframes nf-blink { to { border-color: var(--primary); } }
.nf-checks li:nth-child(1) { animation: nf-in 0.4s 0.1s both; } .nf-checks li:nth-child(2) { animation: nf-in 0.4s 0.3s both; }
.nf-checks li:nth-child(3) { animation: nf-in 0.4s 0.5s both; } .nf-checks li:nth-child(4) { animation: nf-in 0.4s 0.7s both; }
@keyframes nf-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.nf-note { margin: var(--s5) 0 0; padding-top: var(--s3); border-top: 1px dashed var(--border); font-size: 0.9rem; color: var(--text-2); }
.nf-links { margin: var(--s6) 0 var(--s8); }
.nf-links h2 { margin-top: 0; }
.nf-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.nf-cards a { display: flex; flex-direction: column; gap: var(--s1); min-height: var(--target); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease; }
.nf-cards a:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--text); }
.nf-cards strong { color: var(--primary); }
.nf-cards span { font-size: 0.95rem; color: var(--text-2); }
@media (max-width: 860px) {
  .nf-grid { grid-template-columns: 1fr; gap: var(--s6); padding-top: var(--s8); }
  .nf-sheet { transform: none; }
  .nf-tool { bottom: auto; top: var(--s12); right: var(--s3); }
  .nf-tool svg { width: 84px; height: 84px; }
  .nf-facts { max-width: 100%; padding-right: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-hammer, .nf-spark, .nf-checks li, .nf-checks .is-open span { animation: none; }
  .nf-spark { opacity: 0; }
  .nf-cards a { transition: none; }
}


/* ---------- animated diagrams (diagrams.ts): one loop per diagram, steps on the same clock ---------- */
.anim { margin: var(--s12) 0; }
.anim-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr); gap: var(--s6); align-items: center; }
.anim-stage { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: var(--s4); box-shadow: var(--shadow-card); }
.d { width: 100%; height: auto; display: block; font-family: var(--font); }
.anim-steps { list-style: none; counter-reset: beat; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.anim-steps li { position: relative; display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-lg); border: 1px solid transparent; color: var(--text-2); font-size: 0.95rem; }
.anim-steps li::before { counter-increment: beat; content: counter(beat); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; background: var(--surface-2); color: var(--text-3); }

/* shared shapes */
.d text { fill: var(--text); font-size: 13px; }
.d .d-s { font-size: 11px; fill: var(--text-2); }
.d .d-t { font-weight: 650; }
.d .d-label { font-size: 13px; font-weight: 600; fill: var(--text-2); }
.d .d-device { fill: #0B0F1A; }
.d .d-screen { fill: var(--surface); stroke: var(--border); }
.d .d-dot-r { fill: #FF5F57; } .d .d-dot-y { fill: #FEBC2E; } .d .d-dot-g { fill: #28C840; }
.d .d-card rect { fill: var(--surface); stroke: var(--border); }
.d .d-card { opacity: 0; }
.d .d-field { fill: var(--surface-2); }
.d .d-btn { fill: var(--primary); } .d .d-btn-t { fill: #fff; font-size: 12px; font-weight: 600; }
.d .d-ok { fill: #16A34A; } .d .d-check { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.d .d-r { fill: var(--surface-2); }
.d .d-ring { fill: none; stroke: var(--border); stroke-width: 2; }
.d .d-core { fill: var(--surface-2); }

/* 1 · the chain: 15 s, five beats of 3 s */
.d-chain .d-line { fill: none; stroke: var(--border); stroke-width: 4; }
.d-chain .d-line-on { stroke: var(--primary); stroke-dasharray: 640; stroke-dashoffset: 640; animation: chain-line 15s linear infinite; }
@keyframes chain-line { 0%, 6% { stroke-dashoffset: 640; } 80%, 100% { stroke-dashoffset: 0; } }
.d-chain .d-dot { fill: var(--primary); animation: chain-dot 15s ease-in-out infinite; }
@keyframes chain-dot { 0%, 14% { transform: translateX(80px); } 20%, 34% { transform: translateX(240px); } 40%, 54% { transform: translateX(400px); } 60%, 74% { transform: translateX(560px); } 80%, 100% { transform: translateX(720px); } }
.d-chain .d-c1 { animation: chain-c1 15s ease-out infinite; } .d-chain .d-c2 { animation: chain-c2 15s ease-out infinite; } .d-chain .d-c3 { animation: chain-c3 15s ease-out infinite; } .d-chain .d-c4 { animation: chain-c4 15s ease-out infinite; } .d-chain .d-c5 { animation: chain-c5 15s ease-out infinite; }
@keyframes chain-c1 { 0% { opacity: 0; transform: translate(10px, 158px); } 4%, 97% { opacity: 1; transform: translate(10px, 150px); } 100% { opacity: 0; } }
@keyframes chain-c2 { 0%, 20% { opacity: 0; transform: translate(170px, 158px); } 24%, 97% { opacity: 1; transform: translate(170px, 150px); } 100% { opacity: 0; } }
@keyframes chain-c3 { 0%, 40% { opacity: 0; transform: translate(330px, 158px); } 44%, 97% { opacity: 1; transform: translate(330px, 150px); } 100% { opacity: 0; } }
@keyframes chain-c4 { 0%, 60% { opacity: 0; transform: translate(490px, 158px); } 64%, 97% { opacity: 1; transform: translate(490px, 150px); } 100% { opacity: 0; } }
@keyframes chain-c5 { 0%, 80% { opacity: 0; transform: translate(650px, 158px); } 84%, 97% { opacity: 1; transform: translate(650px, 150px); } 100% { opacity: 0; } }
/* nodes: the core turns indigo when the dot has reached it */
.d-chain .d-n1 .d-core { animation: chain-on1 15s infinite; } .d-chain .d-n2 .d-core { animation: chain-on2 15s infinite; } .d-chain .d-n3 .d-core { animation: chain-on3 15s infinite; } .d-chain .d-n4 .d-core { animation: chain-on4 15s infinite; } .d-chain .d-n5 .d-core { animation: chain-on5 15s infinite; }
@keyframes chain-on1 { 0% { fill: var(--surface-2); } 2%, 97% { fill: var(--primary); } 100% { fill: var(--surface-2); } }
@keyframes chain-on2 { 0%, 20% { fill: var(--surface-2); } 22%, 97% { fill: var(--primary); } 100% { fill: var(--surface-2); } }
@keyframes chain-on3 { 0%, 40% { fill: var(--surface-2); } 42%, 97% { fill: var(--primary); } 100% { fill: var(--surface-2); } }
@keyframes chain-on4 { 0%, 60% { fill: var(--surface-2); } 62%, 97% { fill: var(--primary); } 100% { fill: var(--surface-2); } }
@keyframes chain-on5 { 0%, 80% { fill: var(--surface-2); } 82%, 97% { fill: var(--primary); } 100% { fill: var(--surface-2); } }
/* a step is lit for one fifth of the loop; a negative delay says which fifth, and keeps every loop in phase. */
.anim-chain .anim-steps li:nth-child(1) { animation: step-on 15s linear infinite; }
.anim-chain .anim-steps li:nth-child(2) { animation: step-on 15s linear infinite; animation-delay: -12s; }
.anim-chain .anim-steps li:nth-child(3) { animation: step-on 15s linear infinite; animation-delay: -9s; }
.anim-chain .anim-steps li:nth-child(4) { animation: step-on 15s linear infinite; animation-delay: -6s; }
.anim-chain .anim-steps li:nth-child(5) { animation: step-on 15s linear infinite; animation-delay: -3s; }
@keyframes step-on { 0%, 1% { background: transparent; border-color: transparent; color: var(--text-2); } 2%, 19% { background: var(--primary-subtle); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--text); } 21%, 100% { background: transparent; border-color: transparent; color: var(--text-2); } }
.anim-steps li { animation-timing-function: linear; }

/* 2 · offline and sync: 12 s, four beats of 3 s */
.d-sync .d-q { fill: var(--primary-subtle); stroke: var(--primary); opacity: 0; }
.d-sync .d-q1 { animation: sync-q1 12s infinite; } .d-sync .d-q2 { animation: sync-q2 12s infinite; } .d-sync .d-q3 { animation: sync-q3 12s infinite; }
@keyframes sync-q1 { 0%, 27% { opacity: 0; } 30%, 55% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes sync-q2 { 0%, 35% { opacity: 0; } 38%, 60% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes sync-q3 { 0%, 43% { opacity: 0; } 46%, 65% { opacity: 1; } 68%, 100% { opacity: 0; } }
.d-sync .d-badge rect { fill: #FEF3F2; stroke: #FCA5A5; } .d-sync .d-badge text { font-size: 11px; font-weight: 700; fill: #B42318; }
.d-sync .d-on rect { fill: #ECFDF3; stroke: #86EFAC; } .d-sync .d-on text { fill: #067647; }
.d-sync .d-badge { opacity: 0; }
.d-sync .d-off { animation: sync-off 12s infinite; } .d-sync .d-on { animation: sync-on 12s infinite; }
@keyframes sync-off { 0%, 24% { opacity: 0; } 26%, 49% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes sync-on { 0%, 49% { opacity: 0; } 51%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } }
.d-sync .d-cloud-shape { fill: var(--primary-subtle); stroke: var(--primary); stroke-width: 2; }
.d-sync .d-pk { fill: var(--primary); opacity: 0; }
.d-sync .d-pk1 { animation: sync-pk 12s infinite; animation-delay: 0s; } .d-sync .d-pk2 { animation: sync-pk 12s infinite; animation-delay: 0.6s; } .d-sync .d-pk3 { animation: sync-pk 12s infinite; animation-delay: 1.2s; }
@keyframes sync-pk { 0%, 52% { opacity: 0; transform: translate(120px, 140px); } 54% { opacity: 1; } 64% { transform: translate(380px, 120px); } 74% { opacity: 1; transform: translate(560px, 120px); } 76%, 100% { opacity: 0; transform: translate(560px, 120px); } }
.d-sync .d-r { opacity: 0; }
.d-sync .d-r1 { animation: sync-r 12s infinite; animation-delay: 0s; } .d-sync .d-r2 { animation: sync-r 12s infinite; animation-delay: 0.6s; } .d-sync .d-r3 { animation: sync-r 12s infinite; animation-delay: 1.2s; }
@keyframes sync-r { 0%, 74% { opacity: 0; } 76%, 97% { opacity: 1; fill: var(--primary-subtle); } 100% { opacity: 0; } }
.anim-sync .anim-steps li:nth-child(1) { animation: step-on4 12s linear infinite; animation-delay: 0s; }
.anim-sync .anim-steps li:nth-child(2) { animation: step-on4 12s linear infinite; animation-delay: -9s; }
.anim-sync .anim-steps li:nth-child(3) { animation: step-on4 12s linear infinite; animation-delay: -6s; }
.anim-sync .anim-steps li:nth-child(4) { animation: step-on4 12s linear infinite; animation-delay: -3s; }
@keyframes step-on4 { 0%, 1% { background: transparent; border-color: transparent; color: var(--text-2); } 2%, 24% { background: var(--primary-subtle); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--text); } 26%, 100% { background: transparent; border-color: transparent; color: var(--text-2); } }

/* 3 · the customer's account: 14 s, four beats of 3.5 s */
.d-portal .d-env { fill: var(--surface); stroke: var(--primary); stroke-width: 2; } .d-portal .d-env-l { fill: none; stroke: var(--primary); stroke-width: 2; }
.d-portal .d-mail { opacity: 0; animation: portal-mail 14s ease-in-out infinite; }
@keyframes portal-mail { 0%, 4% { opacity: 0; transform: translate(250px, 100px); } 6% { opacity: 1; } 22% { opacity: 1; transform: translate(580px, 100px); } 25%, 100% { opacity: 0; transform: translate(580px, 100px); } }
.d-portal .d-p-send { animation: portal-send 14s infinite; } .d-portal .d-p-answer { opacity: 0; animation: portal-answer 14s infinite; }
@keyframes portal-send { 0%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes portal-answer { 0%, 75% { opacity: 0; } 78%, 97% { opacity: 1; } 100% { opacity: 0; } }
.d-portal .d-lockbody { fill: var(--primary); } .d-portal .d-lockarc { fill: none; stroke: var(--primary); stroke-width: 6; }
.d-portal .d-p-lock { animation: portal-lock 14s infinite; } .d-portal .d-p-quote { opacity: 0; animation: portal-quote 14s infinite; } .d-portal .d-p-done { opacity: 0; animation: portal-done 14s infinite; }
@keyframes portal-lock { 0%, 22% { opacity: 0.35; } 25%, 48% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes portal-quote { 0%, 50% { opacity: 0; } 53%, 68% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes portal-done { 0%, 70% { opacity: 0; transform: scale(0.6); transform-origin: 60px 100px; } 74%, 97% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.d-portal .d-back { fill: none; stroke: #16A34A; stroke-width: 3; stroke-dasharray: 6 8; stroke-dashoffset: 0; opacity: 0; animation: portal-back 14s linear infinite; }
@keyframes portal-back { 0%, 72% { opacity: 0; stroke-dashoffset: 0; } 74% { opacity: 1; } 97% { opacity: 1; stroke-dashoffset: -140; } 100% { opacity: 0; } }
.anim-portal .anim-steps li:nth-child(1) { animation: step-on4 14s linear infinite; animation-delay: 0s; }
.anim-portal .anim-steps li:nth-child(2) { animation: step-on4 14s linear infinite; animation-delay: -10.5s; }
.anim-portal .anim-steps li:nth-child(3) { animation: step-on4 14s linear infinite; animation-delay: -7s; }
.anim-portal .anim-steps li:nth-child(4) { animation: step-on4 14s linear infinite; animation-delay: -3.5s; }

/* 4 · hours to money: 12 s, four beats of 3 s */
.d-hours .d-h-form { animation: hours-form 12s infinite; }
@keyframes hours-form { 0%, 22% { opacity: 1; } 25%, 100% { opacity: 0.35; } }
.d-hours .d-h-pending { animation: hours-pending 12s infinite; }
@keyframes hours-pending { 0%, 20% { opacity: 0; transform: translate(230px, 104px); } 24%, 97% { opacity: 1; transform: translate(230px, 96px); } 100% { opacity: 0; } }
.d-hours .d-h-tick { opacity: 0; animation: hours-tick 12s infinite; transform-origin: 0 0; }
@keyframes hours-tick { 0%, 30% { opacity: 0; transform: scale(0.5); } 34%, 97% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.d-hours .d-split { fill: none; stroke: var(--primary); stroke-width: 3; stroke-dasharray: 200; stroke-dashoffset: 200; }
.d-hours .d-split-a { animation: hours-split 12s linear infinite; } .d-hours .d-split-b { animation: hours-split 12s linear infinite; animation-delay: 0.4s; }
@keyframes hours-split { 0%, 45% { stroke-dashoffset: 200; } 58%, 97% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 200; } }
.d-hours .d-h-inv { animation: hours-inv 12s infinite; } .d-hours .d-h-pay { animation: hours-pay 12s infinite; }
@keyframes hours-inv { 0%, 55% { opacity: 0; transform: translate(560px, 40px); } 60%, 97% { opacity: 1; transform: translate(560px, 32px); } 100% { opacity: 0; } }
@keyframes hours-pay { 0%, 72% { opacity: 0; transform: translate(560px, 150px); } 77%, 97% { opacity: 1; transform: translate(560px, 142px); } 100% { opacity: 0; } }
.anim-hours .anim-steps li:nth-child(1) { animation: step-on4 12s linear infinite; animation-delay: 0s; }
.anim-hours .anim-steps li:nth-child(2) { animation: step-on4 12s linear infinite; animation-delay: -9s; }
.anim-hours .anim-steps li:nth-child(3) { animation: step-on4 12s linear infinite; animation-delay: -6s; }
.anim-hours .anim-steps li:nth-child(4) { animation: step-on4 12s linear infinite; animation-delay: -3s; }

@media (max-width: 860px) { .anim-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .d *, .anim-steps li { animation: none !important; }
  .d .d-card, .d .d-r, .d .d-q, .d .d-p-done, .d .d-p-answer, .d .d-h-tick, .d .d-on { opacity: 1 !important; }
  .d .d-line-on, .d .d-split { stroke-dashoffset: 0 !important; }
  .d .d-core { fill: var(--primary) !important; }
  .d .d-mail, .d .d-pk, .d .d-off, .d .d-p-lock, .d .d-p-quote, .d .d-p-send { opacity: 0 !important; }
  .anim-steps li { color: var(--text); }
}

/* ---------- walkthrough videos ---------- */
.vid { margin: var(--s12) 0; }
.vid-figure { margin: var(--s4) 0 0; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.vid-figure video { display: block; width: 100%; height: auto; background: #000; }
.vid-figure .frame-desktop { max-width: 960px; }
.vid-figure .frame-desktop video { border-radius: 0 0 11px 11px; }
.vid-portrait .vid-figure .frame-phone { width: 320px; }
.vid-figure .frame-phone video { border-radius: 35px; }
.vid-figure figcaption { text-align: center; color: var(--text-2); font-size: 0.95rem; }
.vid-figure figcaption strong { color: var(--text); display: block; }
.vid-len { font-size: 0.85rem; color: var(--text-3); }

/* ---------- bento: what sets the product apart, in bold ---------- */
.cards-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.cards-bento .card { padding: var(--s6); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--primary-subtle))); }
.cards-bento .card:nth-child(1), .cards-bento .card:nth-child(2), .cards-bento .card:nth-child(7), .cards-bento .card:nth-child(8) { grid-column: span 2; }
.cards-bento .card h3 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: var(--s2); }
.cards-bento .card:nth-child(1) h3, .cards-bento .card:nth-child(2) h3 { font-size: 2rem; }
.cards-bento .card:nth-child(1) h3 a, .cards-bento .card:nth-child(2) h3 a { background: linear-gradient(90deg, var(--primary), #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cards-bento .card p { font-size: 1rem; }
.cards-bento .card::before { opacity: 1; }
@media (max-width: 1000px) { .cards-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards-bento { grid-template-columns: 1fr; } .cards-bento .card:nth-child(1), .cards-bento .card:nth-child(2), .cards-bento .card:nth-child(7), .cards-bento .card:nth-child(8) { grid-column: auto; } .cards-bento .card:nth-child(1) h3, .cards-bento .card:nth-child(2) h3 { font-size: 1.7rem; } }

/* ---------- the video index: thumbnails in groups ---------- */
.vgrid h2 { margin-top: var(--s8); }
.vgrid-list { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
.vgrid-list a { display: flex; flex-direction: column; gap: var(--s2); text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); box-shadow: var(--shadow-card); transition: transform 0.15s ease, border-color 0.15s ease; min-height: var(--target); }
.vgrid-list a:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--text); }
.vgrid-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); background: #0B0F1A; }
.vgrid-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vgrid-tall img { object-fit: contain; }
.vgrid-len { position: absolute; right: var(--s2); bottom: var(--s2); font-size: 0.75rem; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.65); padding: 2px 8px; border-radius: 999px; }
.vgrid-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 0.9rem; padding-left: 3px; box-shadow: var(--glow); opacity: 0.92; }
.vgrid-list a:hover .vgrid-play { transform: scale(1.08); }
.vgrid-list strong { font-size: 1rem; line-height: 1.3; }
.vgrid-intro { font-size: 0.9rem; color: var(--text-2); }
.vid-transcript ol { padding-left: var(--s5); max-width: var(--measure); color: var(--text-2); }
.vid-transcript li { margin-bottom: var(--s2); }

.vgrid-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s4); }
.vgrid-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.vgrid-nav a:hover { border-color: var(--primary); color: var(--primary); }
.vgrid h2 { scroll-margin-top: 80px; }

/* ========== Pricing plans (SaaS cards + billing toggle) ========== */
.plans { margin: var(--s6) 0 var(--s8); width: 100%; }
.plans > h2 { margin-top: 0; }
.plans-intro { color: var(--text-2); max-width: 52rem; margin-bottom: var(--s5); }
.billing-toggle { position: relative; width: 100%; }
.billing-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.billing-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  margin: 0 0 var(--s6);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.billing-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--s4);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.billing-hint {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-subtle) 90%, var(--surface));
  padding: 2px 8px;
  border-radius: 999px;
}
#billing-m:checked ~ .billing-switch label[for="billing-m"],
#billing-y:checked ~ .billing-switch label[for="billing-y"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card);
}
.plan-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  align-items: stretch;
}
.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s6);
  box-shadow: var(--shadow-card);
  min-height: 100%;
}
.plan-card-featured {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 40px -24px color-mix(in srgb, var(--primary) 55%, transparent);
  position: relative;
}
.plan-badge {
  align-self: flex-start;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-subtle);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}
.plan-name { margin: 0; font-size: 1.35rem; font-weight: 750; }
.plan-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.plan-amount { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.plan-period { color: var(--text-3); font-size: 0.95rem; font-weight: 500; }
.plan-year-total { flex-basis: 100%; color: var(--text-3); font-size: 0.9rem; }
.plan-price-year { display: none; }
#billing-y:checked ~ .plan-grid .plan-price-month { display: none; }
#billing-y:checked ~ .plan-grid .plan-price-year { display: flex; }
.plan-blurb { margin: 0; color: var(--text-2); font-size: 0.95rem; min-height: 2.8em; }
.plan-features {
  list-style: none;
  padding: 0;
  margin: var(--s2) 0 0;
  display: grid;
  gap: var(--s2);
  flex: 1;
}
.plan-features li {
  position: relative;
  padding-inline-start: var(--s5);
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--primary);
  font-weight: 700;
}
.plan-cta { margin: var(--s4) 0 0; }
.plan-cta .btn { width: 100%; }
@media (max-width: 1000px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .plan-card-featured { order: -1; }
  .plan-blurb { min-height: 0; }
}

/* ========== Radpishe (IR / RTL) design system ========== */
html[dir="rtl"] {
  --bg: #F4F7F7;
  --surface: #FFFFFF;
  --surface-2: #EAF1F1;
  --border: #D5E0E0;
  --border-strong: #B7C7C7;
  --text: #0C1F24;
  --text-2: #3D555B;
  --text-3: #6B8288;
  --primary: #0F766E;
  --primary-pressed: #0D5F59;
  --primary-subtle: #E6F5F3;
  --on-primary: #FFFFFF;
  --accent: #0D9488;
  --accent-2: #0891B2;
  --glow: 0 12px 28px -14px rgba(15, 118, 110, 0.45);
  --shadow-card: 0 1px 2px rgba(12, 31, 36, 0.04), 0 10px 28px -18px rgba(12, 31, 36, 0.18);
  --measure: 68ch;
  --wrap-max: 1320px;
}
@media (prefers-color-scheme: dark) {
  html[dir="rtl"] {
    --bg: #0A1214;
    --surface: #122024;
    --surface-2: #1A2C31;
    --border: #24383E;
    --border-strong: #345159;
    --text: #F2F7F7;
    --text-2: #A8BDC2;
    --text-3: #6F868C;
    --primary: #2DD4BF;
    --primary-pressed: #5EEAD4;
    --primary-subtle: #123532;
    --on-primary: #06201D;
    --glow: 0 12px 28px -14px rgba(45, 212, 191, 0.35);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -18px rgba(0, 0, 0, 0.55);
  }
}

html[dir="rtl"] .wrap { max-width: var(--wrap-max); padding-inline: clamp(var(--s4), 2.5vw, var(--s8)); width: 100%; }
html[dir="rtl"] .page-head {
  padding-block: var(--s8) var(--s5);
  max-width: none;
}
html[dir="rtl"] .page-head h1 { max-width: min(36rem, 100%); }
html[dir="rtl"] .page-head .lead {
  max-width: min(54rem, 100%);
  font-size: 1.12rem;
  color: var(--text-2);
}
html[dir="rtl"] main > .wrap,
html[dir="rtl"] .page-head { width: 100%; }
html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero-shots h1 { max-width: 22em; }
html[dir="rtl"] .hero h1 em,
html[dir="rtl"] .hl {
  background: linear-gradient(90deg, var(--primary), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[dir="rtl"] .btn-primary {
  background: var(--primary);
  box-shadow: var(--glow);
}
html[dir="rtl"] .btn-primary:hover {
  background: var(--primary-pressed);
  color: var(--on-primary);
}
html[dir="rtl"] .cta-box {
  background: linear-gradient(125deg, #0D5F59, var(--primary) 50%, #0E7490);
  box-shadow: 0 28px 56px -30px rgba(15, 118, 110, 0.55);
  border-radius: 24px;
  max-width: var(--wrap-max);
  padding: var(--s10, 40px) var(--s8);
}
html[dir="rtl"] .cta-box .btn-primary { background: #fff; color: #0F766E; }
html[dir="rtl"] .prose > p,
html[dir="rtl"] .prose > ol,
html[dir="rtl"] .prose > ul { max-width: 52rem; }
html[dir="rtl"] .faq { display: grid; gap: var(--s2); }
html[dir="rtl"] .faq details { max-width: none; }
@media (min-width: 900px) {
  html[dir="rtl"] .faq {
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
  }
  html[dir="rtl"] .faq > h2 { grid-column: 1 / -1; }
}
html[dir="rtl"] .checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s2) var(--s5);
}
html[dir="rtl"] .checks li { margin-bottom: 0; }
html[dir="rtl"] .cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[dir="rtl"] .cards-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[dir="rtl"] .card {
  border-radius: var(--r-xl);
}
html[dir="rtl"] .card::before {
  background: linear-gradient(90deg, var(--primary), var(--accent-2));
}
html[dir="rtl"] .show-n {
  background: linear-gradient(135deg, var(--primary), var(--accent-2));
}
html[dir="rtl"] .stats strong {
  background: linear-gradient(90deg, var(--primary), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[dir="rtl"] .cards .card:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  box-shadow: 0 14px 30px -20px rgba(15, 118, 110, 0.4);
}
html[dir="rtl"] .site-header {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
}
html[dir="rtl"] .hero-shots {
  background:
    radial-gradient(50% 60% at 15% 10%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 60%),
    radial-gradient(40% 50% at 90% 90%, color-mix(in srgb, var(--accent-2) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--primary-subtle), transparent 75%);
  background-color: var(--bg);
}
html[dir="rtl"] .table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
html[dir="rtl"] table { border: 0; border-radius: 0; }
html[dir="rtl"] .related { margin-top: var(--s6); }
html[dir="rtl"] .site-footer { margin-top: var(--s12); }
html[dir="rtl"] .foot-h { letter-spacing: 0.02em; text-transform: none; }
html[dir="rtl"] .vgrid-play { padding-inline-start: 3px; padding-left: 0; }
html[dir="rtl"] .show-copy p { max-width: 42em; }

@media (max-width: 1000px) {
  html[dir="rtl"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  html[dir="rtl"] .cards,
  html[dir="rtl"] .cards-bento { grid-template-columns: 1fr; }
  html[dir="rtl"] .faq { grid-template-columns: 1fr; }
  html[dir="rtl"] .checks { grid-template-columns: 1fr; }
  html[dir="rtl"] .cta-box { padding: var(--s8) var(--s5); border-radius: 20px; }
  html[dir="rtl"] .brand-fa .brand-name { font-size: 1.05rem; }
}