/* ---- assets/css/base.css ---- */
/* bitpay redesign: base. Tokens (light + dark), fonts, reset, type, layout primitives, reveal.
   Direction: a modern fintech homepage (Stripe / PayPal grade) in bitpay's own brand:
   blue (#0066ff family) as the one working accent, the logo's orange as a rare spark, cool blue-grey neutrals,
   crisp 1px lines, soft layered cards, live product UI instead of illustrations.
   Section styles live in css/sections/<section>.css, prefixed with the section name. */

@font-face {
  font-family: "YekanBakh";
  src: url(../fonts/yekanbakh-vf.woff2?v=4fc88cde46) format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(../fonts/jetbrains-mono-latin.woff2?v=e7277e7145) format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- tokens ----------
   Light is the default; dark follows the system or the header toggle ([data-theme] on <html> wins).
   .night pins the dark palette on one block whatever the theme (the developer band, the CTA band, the footer). */
:root {
  --canvas: #ffffff;
  --raised: #f5f7fb;        /* mist bands */
  --card: #ffffff;
  --elevated: #eef2f8;      /* chips, inner bars, input wells */
  --line: #e4e8f0;
  --line-strong: #cfd6e2;
  --fg: #0b1220;
  --fg-2: #3a4558;
  --fg-3: #5f6b7e;          /* 5.4:1 on white */

  --brand: #0066ff;         /* text + accents; 4.8:1 on white */
  --brand-fill: #0066ff;    /* primary button background (white text 4.8:1) */
  --brand-fill-hover: #0057db;
  --brand-soft: #e8f0ff;
  --brand-ink: #ffffff;
  --brand-glow: rgb(0 102 255 / 0.18);

  --spark: #ff6e26;         /* the logo's orange: decoration only (dots, a stripe, the mark) */
  --spark-text: #c2410c;    /* orange as text: 5.2:1 on white */
  --spark-soft: #fff1e8;

  --ok: #12b76a;            /* success dot / icon */
  --ok-text: #067647;
  --ok-soft: #e7f8ef;
  --warn: #f5a524;
  --danger: #e5484d;

  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 32px -18px rgb(15 23 42 / 0.16);
  --shadow-float: 0 2px 6px rgb(15 23 42 / 0.05), 0 32px 64px -30px rgb(15 23 42 / 0.30);
  --shadow-brand: 0 12px 28px -14px rgb(0 102 255 / 0.55);
  color-scheme: light;
}
:root[data-theme="dark"],
.night {
  --canvas: #070b14;
  --raised: #0b111d;
  --card: #0f1726;
  --elevated: #172133;
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.16);
  --fg: #eef3fb;
  --fg-2: #b4bfd0;
  --fg-3: #8592a8;          /* 6.3:1 on canvas */

  --brand: #5c9dff;         /* 7.2:1 on canvas */
  --brand-fill: #1463ff;    /* white text 4.9:1 */
  --brand-fill-hover: #1f6fff;
  --brand-soft: rgb(92 157 255 / 0.14);
  --brand-ink: #ffffff;
  --brand-glow: rgb(20 99 255 / 0.32);

  --spark: #ff6e26;
  --spark-text: #ff8a4c;
  --spark-soft: rgb(255 110 38 / 0.14);

  --ok: #3ccb7f;
  --ok-text: #3ccb7f;
  --ok-soft: rgb(60 203 127 / 0.14);

  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -18px rgb(0 0 0 / 0.6);
  --shadow-float: 0 2px 6px rgb(0 0 0 / 0.3), 0 32px 64px -30px rgb(0 0 0 / 0.8);
  --shadow-brand: 0 12px 28px -14px rgb(20 99 255 / 0.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #070b14;
    --raised: #0b111d;
    --card: #0f1726;
    --elevated: #172133;
    --line: rgb(255 255 255 / 0.08);
    --line-strong: rgb(255 255 255 / 0.16);
    --fg: #eef3fb;
    --fg-2: #b4bfd0;
    --fg-3: #8592a8;
    --brand: #5c9dff;
    --brand-fill: #1463ff;
    --brand-fill-hover: #1f6fff;
    --brand-soft: rgb(92 157 255 / 0.14);
    --brand-ink: #ffffff;
    --brand-glow: rgb(20 99 255 / 0.32);
    --spark: #ff6e26;
    --spark-text: #ff8a4c;
    --spark-soft: rgb(255 110 38 / 0.14);
    --ok: #3ccb7f;
    --ok-text: #3ccb7f;
    --ok-soft: rgb(60 203 127 / 0.14);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -18px rgb(0 0 0 / 0.6);
    --shadow-float: 0 2px 6px rgb(0 0 0 / 0.3), 0 32px 64px -30px rgb(0 0 0 / 0.8);
    --shadow-brand: 0 12px 28px -14px rgb(20 99 255 / 0.7);
    color-scheme: dark;
  }
}
/* .night blocks paint their own background and text, so they read as dark islands in the light theme. */
.night { background: var(--canvas); color: var(--fg); }
/* The theme switch is a hard cut: no color eases while the palette flips. */
:root.is-theming *,
:root.is-theming *::before,
:root.is-theming *::after { transition: none !important; }

:root {
  --sans: "YekanBakh", Tahoma, ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.35rem, 1.2rem + 4.4vw, 4.5rem);
  --fs-h2: clamp(1.8rem, 1.2rem + 2.1vw, 2.85rem);
  --fs-h3: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-lead: clamp(1.04rem, 0.96rem + 0.34vw, 1.2rem);
  --fs-s: 0.92rem;
  --fs-xs: 0.8rem;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-full: 9999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --header-h: 64px;
  --gutter: max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --sec-y: clamp(80px, 10vw, 136px);
}
@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.is-locked { overflow: hidden; }
body {
  min-height: 100dvh;
  background: var(--canvas);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.35; text-wrap: balance; }
p { text-wrap: pretty; }
address { font-style: normal; }
code, pre, kbd { font-family: var(--mono); }
[hidden] { display: none !important; }
::selection { background: var(--brand-fill); color: var(--brand-ink); }
/* The outline follows each element's own radius (pills stay pills). */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- helpers ---------- */
.container { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; word-spacing: 0.12em; }
.dim { color: var(--fg-2); }
.mute { color: var(--fg-3); }
.brand { color: var(--brand); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; inset-inline-start: 16px; top: 12px; z-index: 100;
  padding: 10px 18px; border-radius: var(--r-full);
  background: var(--fg); color: var(--canvas); font-weight: 600;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

/* ---------- sections ---------- */
.sec { padding-block: var(--sec-y); }
.sec--mist { background: var(--raised); border-block: 1px solid var(--line); }
/* A faint grid behind a block, fading out at the edges. Put it on an absolutely positioned layer. */
.gridbg {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}

/* Small label above a heading: a round brand dot with a soft halo. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.h-display { font-size: var(--fs-display); line-height: 1.22; font-weight: 800; }
.h2 { font-size: var(--fs-h2); line-height: 1.34; font-weight: 800; }
.h3 { font-size: var(--fs-h3); line-height: 1.55; font-weight: 700; }
.lead { font-size: var(--fs-lead); line-height: 1.95; color: var(--fg-2); }

/* Section head: eyebrow, title, a line of copy. --split puts an action on the far (left) side on wide screens. */
.sec-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .h2 { max-width: 18em; }
.sec-head p:not(.eyebrow) { max-width: 38em; color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.95; }
.sec-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px 48px;
  max-width: none;
}
.sec-head--split > :first-child { display: grid; gap: 14px; max-width: 46rem; }
.sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- buttons ----------
   Pills. Every pressable thing scales a little on press; hover only on real pointers. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease,
    border-color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { flex: none; width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: var(--fs-s); }
.btn--primary { background: var(--brand-fill); color: var(--brand-ink); box-shadow: var(--shadow-brand); }
.btn--ghost { background: var(--card); color: var(--fg); border-color: var(--line-strong); }
/* On dark bands: a solid white pill and a glass outline. */
.btn--white { background: #fff; color: #0b1220; }
.btn--glass {
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  border-color: rgb(255 255 255 / 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--brand-fill-hover); }
  .btn--ghost:hover { border-color: var(--fg-3); }
  .btn--white:hover { background: #eaf0fa; }
  .btn--glass:hover { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.5); }
  /* RTL: the arrow points left (forward) and nudges that way. */
  .btn:hover svg.arrow { transform: translateX(-3px); }
}

/* Round icon button (theme, menu, copy). */
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--fg);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { border-color: var(--fg-3); }
}

/* Text link with an arrow, for "see all" actions. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  color: var(--brand);
}
.link svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link:hover svg { transform: translateX(-3px); }
}

/* ---------- surfaces ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--elevated);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.chip--brand { background: var(--brand-soft); color: var(--brand); }
.chip--ok { background: var(--ok-soft); color: var(--ok-text); }
.chip--spark { background: var(--spark-soft); color: var(--spark-text); }
/* Square icon tile for feature cards (holds a 22px Lucide icon). */
.ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
}
.ico svg { width: 22px; height: 22px; }

/* ---------- reveal ----------
   [data-reveal] rises 16px and fades in once; [data-stagger] children get --i (70ms apart).
   data-reveal="media" scales up from 0.97. Only with JS, never under reduced motion. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
}
.js [data-reveal="media"] { transform: scale(0.97); transition-duration: 900ms; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* ---- assets/css/sections/00-chrome.css ---- */
/* chrome: header, mobile menu, footer, 404. Prefixes: .hdr__ .menu__ .ftr__ .e404__
   The header/menu behaviour (scroll states, inert, focus) lives in core.js; this file only paints the hooks. */

/* =========================================================================
   Header
   ========================================================================= */
.hdr {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  transition: transform 300ms var(--ease-out);
}
.hdr.is-hidden { transform: translateY(-100%); }
.hdr.is-instant,
.hdr.is-instant::before { transition: none; }

/* The frosted bar is a layer of its own so only its opacity animates (never the blur itself). */
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}
.hdr.is-solid::before { opacity: 1; }
/* Menu open: the bar turns opaque so the sheet below reads as part of it. */
.hdr.is-menu::before {
  opacity: 1;
  background: var(--canvas);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hdr__in {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hdr__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  border-radius: var(--r-sm);
  transition: transform 160ms var(--ease-out);
}
.hdr__logo:active { transform: scale(0.97); }
.hdr__logo img { height: 30px; width: auto; }

.hdr__nav { display: none; }
.hdr__actions { display: flex; align-items: center; gap: 8px; }
.hdr__signin { display: none; }

/* Theme icons: light shows the moon (switch to dark), dark shows the sun. [data-theme] wins over the system. */
.hdr__sun { display: none; }
:root[data-theme="dark"] .hdr__sun { display: block; }
:root[data-theme="dark"] .hdr__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hdr__sun { display: block; }
  :root:not([data-theme="light"]) .hdr__moon { display: none; }
}
.hdr .icon-btn { border-color: var(--line-strong); }

/* Hamburger -> X. Two bars slide to the middle and cross. */
.hdr__bar {
  transition: transform 240ms var(--ease-in-out);
}
.hdr__bar--a { transform-origin: 12px 9px; }
.hdr__bar--b { transform-origin: 12px 15px; }
.hdr__burger[aria-expanded="true"] .hdr__bar--a { transform: translateY(3px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] .hdr__bar--b { transform: translateY(-3px) rotate(-45deg); }
.hdr__burger svg { width: 20px; height: 20px; }

/* Phones: the sign-up pill drops into the menu on the narrowest screens. */
@media (max-width: 374px) {
  .hdr__cta { display: none; }
}
@media (max-width: 1023px) {
  .hdr__cta { min-height: 44px; padding-inline: 18px; }
}

@media (min-width: 1024px) {
  .hdr__in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; }
  .hdr__logo { justify-self: start; }
  .hdr__logo img { height: 34px; }
  .hdr__nav { display: flex; align-items: center; gap: 2px; justify-self: center; }
  .hdr__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 14px;
    border-radius: var(--r-full);
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--fg-2);
    transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
  }
  .hdr__nav a:active { transform: scale(0.97); }
  .hdr__nav a[aria-current="true"] { color: var(--brand); background: var(--brand-soft); }
  .hdr__actions { justify-self: end; gap: 6px; }
  .hdr__signin {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 14px;
    border-radius: var(--r-full);
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--fg-2);
    transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
  }
  .hdr__signin:active { transform: scale(0.97); }
  .hdr__cta { margin-inline-start: 4px; }
  .hdr__burger { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .hdr__nav a:not([aria-current="true"]):hover,
  .hdr__signin:hover { color: var(--fg); background: var(--elevated); }
}

/* A header without the nav (the 404 page). */
.hdr--simple .hdr__in { display: flex; }

/* =========================================================================
   Mobile menu: a sheet under the header with a dimmed backdrop
   ========================================================================= */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  transition: visibility 0s linear 200ms;
}
.menu.is-open { visibility: visible; transition-delay: 0s; }
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(4 8 18 / 0.55);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}
.menu.is-open::before { opacity: 1; }

.menu__panel {
  position: absolute;
  inset-inline: 0;
  top: var(--header-h);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  opacity: 0;
  transform: translateY(-10px);
  clip-path: inset(0 0 100% 0 round 0 0 26px 26px);
  /* close: quick */
  transition: opacity 140ms var(--ease-out), transform 180ms var(--ease-out), clip-path 180ms var(--ease-out);
}
.menu.is-open .menu__panel {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 0 0 26px 26px);
  /* open: the drawer curve, a little slower than the close */
  transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-drawer), clip-path 260ms var(--ease-drawer);
}
.menu.is-instant,
.menu.is-instant::before,
.menu.is-instant .menu__panel { transition: none !important; animation: none !important; }
.menu.is-instant .menu__panel > *,
.menu.is-instant .menu__nav a { animation: none !important; }

.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  border-bottom: 1px solid var(--line);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--fg);
  transition: color 200ms ease, background-color 120ms ease;
}
.menu__nav a svg { flex: none; width: 20px; height: 20px; color: var(--fg-3); transition: color 200ms ease; }
.menu__nav a:active { background: var(--raised); }
.menu__nav a[aria-current="true"] { color: var(--brand); }
.menu__nav a[aria-current="true"] svg { color: var(--brand); }

.menu__actions { display: grid; gap: 10px; margin-top: 20px; }
.menu__actions .btn { width: 100%; }
.menu__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--fg-3);
  text-align: center;
}
.menu__note svg { flex: none; width: 16px; height: 16px; color: var(--ok); }

/* Items settle in one after another (opening only; on close they stay put while the sheet retracts). */
@keyframes menu-item {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.menu.is-open .menu__nav a,
.menu.is-open .menu__actions,
.menu.is-open .menu__note {
  animation: menu-item 220ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 20ms + 30ms);
}
.menu__nav a:nth-child(2) { --i: 1; }
.menu__nav a:nth-child(3) { --i: 2; }
.menu__nav a:nth-child(4) { --i: 3; }
.menu__nav a:nth-child(5) { --i: 4; }
.menu__actions { --i: 5; }
.menu__note { --i: 6; }

@media (min-width: 1024px) {
  .menu { display: none; }
}

/* =========================================================================
   Footer (.night: always dark)
   ========================================================================= */
.ftr {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}
.ftr__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}
.ftr__brand,
.ftr__contact { grid-column: 1 / -1; }

.ftr__logo { display: inline-flex; min-height: 44px; align-items: center; }
.ftr__logo img { height: 40px; width: auto; }
.ftr__about {
  margin-top: 16px;
  max-width: 24rem;
  font-size: var(--fs-s);
  line-height: 1.95;
  color: var(--fg-2);
}
.ftr__cta { margin-top: 24px; }

.ftr__trust { margin-top: 32px; }
.ftr__badges { display: flex; flex-wrap: wrap; gap: 12px; }
.ftr__badge {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 10px 24px -14px rgb(0 0 0 / 0.7);
  transition: transform 160ms var(--ease-out), translate 220ms var(--ease-out);
}
.ftr__badge img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ftr__badge:active { transform: scale(0.97); }
.ftr__trust-note { margin-top: 12px; max-width: 22rem; font-size: var(--fs-xs); line-height: 1.8; color: var(--fg-3); }

.ftr__col h3 {
  margin-bottom: 8px;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--fg);
}
.ftr__col a,
.ftr__ci {
  transition: color 200ms ease, transform 160ms var(--ease-out);
}
.ftr__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--fg-2);
}
.ftr__col a:active { transform: scale(0.97); }
/* Phones: three columns in two; the last one spans both and lists its links in two columns. */
.ftr__col--wide { grid-column: 1 / -1; }
.ftr__col--wide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }

.ftr__contact h3 { margin-bottom: 8px; font-size: 0.96rem; font-weight: 800; line-height: 1.5; color: var(--fg); }
.ftr__clist { display: grid; gap: 4px 24px; }
.ftr__ci {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding-block: 6px;
  color: var(--fg);
}
a.ftr__ci:active { transform: scale(0.98); }
.ftr__cico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--elevated);
  color: var(--brand);
}
.ftr__cico svg { width: 18px; height: 18px; }
.ftr__ct { display: grid; gap: 0; min-width: 0; line-height: 1.6; }
.ftr__ct small { font-size: var(--fs-xs); color: var(--fg-3); }
.ftr__ct b { font-size: 0.98rem; font-weight: 700; overflow-wrap: anywhere; }
.ftr__ct b.ltr { justify-self: start; }
.ftr__phone { font-variant-numeric: proportional-nums; letter-spacing: 0; }
.ftr__addr { align-items: start; }
.ftr__addr .ftr__cico { margin-top: 2px; }
.ftr__addr .ftr__ct span { font-size: var(--fs-s); font-weight: 500; color: var(--fg-2); line-height: 1.9; }

.ftr__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-block: 12px 28px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--fg-3);
}
.ftr__bar p { line-height: 1.9; }
.ftr__bar a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-2); font-weight: 600; transition: color 200ms ease; }

@media (hover: hover) and (pointer: fine) {
  .ftr__col a:hover,
  a.ftr__ci:hover,
  .ftr__bar a:hover { color: #fff; }
  .ftr__badge:hover { translate: 0 -3px; }
}

@media (min-width: 768px) {
  .ftr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
  .ftr__col--wide { grid-column: auto; }
  .ftr__col--wide ul { display: block; }
  /* Tablet: the seals sit beside the intro instead of under it. */
  .ftr__brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: start; }
  .ftr__brand > * { grid-column: 1; justify-self: start; }
  .ftr__trust { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; justify-self: end; }
  .ftr__trust-note { max-width: 12.5rem; }
  .ftr__clist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__col a { min-height: 40px; }
}
@media (min-width: 1100px) {
  .ftr__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.9fr)) minmax(0, 1.5fr); gap: 48px 40px; }
  .ftr__brand,
  .ftr__contact { grid-column: auto; }
  .ftr__brand { display: block; }
  .ftr__trust { margin-top: 32px; }
  .ftr__trust-note { max-width: 22rem; }
  .ftr__clist { grid-template-columns: 1fr; }
  .ftr__col a { min-height: 36px; }
}

/* =========================================================================
   404 (standalone page)
   ========================================================================= */
.e404 {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 16px) var(--gutter) 72px;
  text-align: center;
}
.e404__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
}
.e404__in { display: grid; justify-items: center; max-width: 34rem; }
/* The number is a big outline that fades into the headline below it. */
.e404__num {
  font-size: clamp(8.5rem, 34vw, 17rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  user-select: none;
  margin-bottom: clamp(-3.5rem, -9vw, -1.5rem);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
}
.e404__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.3; }
.e404__text { margin-top: 14px; max-width: 28rem; text-wrap: balance; color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.95; }
.e404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }


/* ---- assets/css/sections/01-hero.css ---- */
/* 01 hero: the copy on the right, "a payment going through" on the left (below the copy on narrow screens).
   The scene is product UI built in HTML/CSS. Every size inside it is a multiple of --u, which follows the
   width of the scene (a container), so the whole mockup scales as one piece and never reflows.
   Motion: transform, opacity and clip-path only; js/sections/01-hero.js drives one timeline of beats. */

.hero {
  --hero-field: color-mix(in srgb, var(--canvas) 55%, var(--card));   /* input wells: white in light, inset in dark */
  --hero-well: color-mix(in srgb, var(--elevated) 50%, var(--card));  /* bars and tracks */
  --hero-cyan: rgb(34 211 238 / 0.09);
  --hero-spark: rgb(255 110 38 / 0.10);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(32px, 6.5vh, 84px));
  padding-bottom: clamp(56px, 8vh, 104px);
}
@media (min-width: 1000px) and (min-height: 760px) {
  .hero { min-height: min(92svh, 1000px); }
}

/* ---------- background: a soft brand glow and a grid that fades out ---------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__glow,
.hero__grid {
  position: absolute;
  inset-block: 0;
  inset-inline: max(0px, (100% - 78rem) / 2);
}
.hero__glow {
  background:
    radial-gradient(36rem 28rem at 27% 48%, var(--brand-glow), transparent 70%),
    radial-gradient(26rem 15rem at 20% 82%, var(--hero-cyan), transparent 70%);
}
.hero__grid {
  -webkit-mask-image: radial-gradient(ellipse 44% 62% at 28% 46%, #000 12%, transparent 74%);
  mask-image: radial-gradient(ellipse 44% 62% at 28% 46%, #000 12%, transparent 74%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  background: linear-gradient(to bottom, transparent, var(--canvas));
}

/* ---------- layout ---------- */
.hero__in {
  display: grid;
  gap: clamp(48px, 9vw, 72px);
  align-items: center;
}
@media (min-width: 1000px) {
  /* beside the copy, the scene also fits the viewport's height (short laptop screens) */
  .hero__in .hero__stage { --u: min(17px, 100cqi / 37.5, (100svh - var(--header-h) - 150px) / 38); }
  .hero__in {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    column-gap: clamp(32px, 3.6vw, 64px);
  }
}

/* ---------- copy ---------- */
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 38rem;
}
.hero__eyebrow {
  min-height: 36px;
  padding-inline: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero__title {
  margin-top: 24px;
  max-width: 11.5em;
  font-size: clamp(2.3rem, 1.1rem + 3vw, 3.6rem);
  line-height: 1.24;
}
.hero__ln { white-space: nowrap; }
@media (max-width: 359.98px) {
  .hero__ln { white-space: normal; }
}
.hero__lead {
  margin-top: 20px;
  max-width: 34em;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* A quiet trust row: the two seals on light tiles, and what they mean. */
.hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}
.hero__seals {
  display: flex;
  gap: 8px;
}
.hero__seal {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, #fff 93%, var(--canvas));
  box-shadow: var(--shadow-card);
  transition: transform 160ms var(--ease-out), translate 200ms var(--ease-out);
}
.hero__seal:active { transform: scale(0.96); }
.hero__seal img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .hero__seal:hover { translate: 0 -2px; }
}
.hero__trust-text {
  display: grid;
  gap: 1px;
  line-height: 1.6;
}
.hero__trust-main {
  font-size: var(--fs-s);
  font-weight: 700;
  color: var(--fg);
}
.hero__trust-sub {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.1em;
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--fg-3);
}
.hero__trust-sub > span {
  position: relative;
  white-space: nowrap;
}
.hero__trust-sub > span + span::before {
  content: "·";
  position: absolute;
  inset-inline-start: -0.75em;
}

/* ---------- the scene ---------- */
.hero__visual { --d: 140ms; position: relative; min-width: 0; }
.hero__scene { container: hero-scene / inline-size; }
.hero__stage {
  --u: min(17px, 100cqi / 37.5);
  position: relative;
  width: calc(var(--u) * 37.5);
  height: calc(var(--u) * 38);
  margin-inline: auto;
  font-size: var(--u);
  line-height: 1.45;
  color: var(--fg);
  -webkit-user-select: none;
  user-select: none;
}
/* a halo under the payment page */
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 14% -2% -4% 30%;
  background: radial-gradient(closest-side, var(--brand-glow), transparent);
  pointer-events: none;
}
/* the one speck of the logo's orange: a warm glow tucked behind the dashboard's corner */
.hero__stage::after {
  content: "";
  position: absolute;
  top: -2.25em;
  inset-inline-end: -2.25em;
  width: 7em;
  height: 6em;
  background: radial-gradient(closest-side, var(--hero-spark), transparent);
  pointer-events: none;
}
.hero__stage.is-instant,
.hero__stage.is-instant *,
.hero__stage.is-instant *::before,
.hero__stage.is-instant *::after { transition: none !important; }
.hero__stage.is-paused *,
.hero__stage.is-paused *::before,
.hero__stage.is-paused *::after { animation-play-state: paused !important; }

/* ---------- (a) the payment page ---------- */
.hero__pay {
  position: absolute;
  z-index: 2;
  top: 6em;
  inset-inline-start: 0.75em;
  width: 22.5em;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.25em;
  box-shadow: var(--shadow-float), inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.375em;
  padding-inline: 1.25em;
  background: var(--hero-well);
  border-bottom: 1px solid var(--line);
}
.hero__bar > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: calc(var(--u) * 0.7);
  font-weight: 600;
  line-height: 1;
  color: var(--fg-2);
}
.hero__bar svg { width: 1.2em; height: 1.2em; }
.hero__bar-secure svg { color: var(--ok); }
.hero__bar > .hero__bar-time { color: var(--fg-3); }

.hero__merchant {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 1.125em 1.5em 0;
}
.hero__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 0.75em;
  background: var(--brand-soft);
  color: var(--brand);
}
.hero__logo svg { width: 1.2em; height: 1.2em; }
.hero__merchant-text { display: grid; }
.hero__merchant-name {
  font-size: calc(var(--u) * 0.9);
  font-weight: 700;
  line-height: 1.45;
}
.hero__merchant-domain {
  font-family: var(--mono);
  font-size: calc(var(--u) * 0.64);
  line-height: 1.5;
  color: var(--fg-3);
  justify-self: start;
}

.hero__body {
  display: grid;
  padding: 1.125em 1.5em 1.5em;
}
.hero__form,
.hero__receipt {
  grid-area: 1 / 1;
  min-width: 0;
}

/* the form */
.hero__form {
  display: grid;
  gap: 0.875em;
  transition: opacity 360ms var(--ease-out) 160ms, transform 480ms var(--ease-out) 160ms;
}
.hero__pay[data-state="done"] .hero__form {
  opacity: 0;
  transform: scale(0.98);
  transition-duration: 220ms, 300ms;
  transition-delay: 0ms;
}
.hero__amount {
  display: grid;
  padding-bottom: 0.875em;
  margin-bottom: 0.125em;
  border-bottom: 1px dashed var(--line-strong);
}
.hero__label {
  font-size: calc(var(--u) * 0.68);
  font-weight: 600;
  line-height: 1.5;
  color: var(--fg-3);
}
.hero__amount-val {
  font-size: calc(var(--u) * 1.7);
  font-weight: 800;
  line-height: 1.3;
}
.hero__amount-val small,
.hero__receipt-amount small {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--fg-2);
}

.hero__field { display: grid; gap: 0.375em; min-width: 0; }
.hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 0.75em;
}
.hero__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 2.75em;
  padding-inline: 0.875em;
  background: var(--hero-field);
  border: 1px solid var(--line-strong);
  border-radius: 0.7em;
}
/* focus ring: its own layer, so it can fade with opacity */
.hero__box::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--brand);
  border-radius: inherit;
  box-shadow: 0 0 0 0.22em var(--brand-soft);
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
  pointer-events: none;
}
.hero__box.is-focus::after { opacity: 1; }
.hero__box--card { direction: ltr; }
.hero__box-ico {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  margin-inline-start: auto;
  color: var(--fg-3);
}
.hero__pair {
  display: flex;
  align-items: center;
  gap: 0.375em;
}
.hero__box--mini {
  flex: 1;
  justify-content: center;
  padding-inline: 0.25em;
}
.hero__slash {
  font-size: calc(var(--u) * 0.8);
  color: var(--fg-3);
}
.hero__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 0.72);
  color: var(--fg-3);
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
.hero__stage.is-live .hero__box:not(.has-val) .hero__ph { opacity: 1; }

/* typed values: one slot per character, so the text never reflows while it "types" */
.hero__val {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: calc(var(--u) * 0.94);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.hero__d {
  position: relative;
  display: grid;
  place-items: center;
  width: 0.64em;
  height: 1.2em;
}
.hero__d::after {
  content: attr(data-c);
  transition: opacity 120ms var(--ease-out), transform 200ms var(--ease-out);
}
.hero__d--m { width: 0.8em; }
.hero__d--m::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: currentColor;
}
.hero__sp { width: 0.6em; }
.hero__stage.is-live .hero__d:not(.is-on)::after {
  opacity: 0;
  transform: translateY(0.3em);
}
/* the empty card number shows faint zeros (a dot in Persian) where the digits will land */
.hero__val--card .hero__d::before {
  content: "۰";
  position: absolute;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.hero__stage.is-live .hero__val--card .hero__d:not(.is-on)::before { opacity: 0.55; }

.hero__caret {
  position: relative;
  display: block;
  flex: none;
  width: 0;
  height: 1.15em;
}
.hero__caret::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -0.75px;
  width: 1.5px;
  border-radius: 1px;
  background: var(--brand);
  animation: hero-blink 1s steps(1) infinite;
}
@keyframes hero-blink { 50% { opacity: 0; } }

/* the one-time password request */
.hero__box--otp { padding-inline-end: 0.375em; }
.hero__otp-btn {
  display: grid;
  place-items: center;
  height: calc(var(--u) * 1.875);
  margin-inline-start: auto;
  padding-inline: calc(var(--u) * 0.7);
  border-radius: calc(var(--u) * 0.5);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: calc(var(--u) * 0.66);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: transform 140ms var(--ease-out);
}
.hero__otp-btn.is-press { transform: scale(0.95); }
.hero__otp-ask,
.hero__otp-sent {
  grid-area: 1 / 1;
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}
.hero__otp-sent {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--fg-2);
  opacity: 0;
  transform: translateY(0.5em);
}
.hero__otp-sent svg { width: 1.2em; height: 1.2em; color: var(--ok); }
.hero__otp-btn.is-sent .hero__otp-ask { opacity: 0; transform: translateY(-0.5em); }
.hero__otp-btn.is-sent .hero__otp-sent { opacity: 1; transform: none; }

/* the pay button: press, then a short spinner */
.hero__btn {
  display: grid;
  place-items: center;
  height: 3em;
  margin-top: 0.375em;
  border-radius: 0.75em;
  background: var(--brand-fill);
  color: var(--brand-ink);
  box-shadow: var(--shadow-brand);
  transition: transform 140ms var(--ease-out);
}
.hero__btn.is-press { transform: scale(0.97); }
.hero__btn-label,
.hero__spin { grid-area: 1 / 1; }
.hero__btn-label {
  font-size: calc(var(--u) * 0.86);
  font-weight: 700;
  line-height: 1;
  transition: opacity 180ms var(--ease-out), filter 180ms var(--ease-out), transform 220ms var(--ease-out);
}
.hero__spin {
  width: 1.375em;
  height: 1.375em;
  opacity: 0;
  animation: hero-spin 700ms linear infinite paused;
  transition: opacity 180ms var(--ease-out);
}
.hero__btn.is-busy .hero__btn-label { opacity: 0; filter: blur(2px); transform: scale(0.96); }
.hero__btn.is-busy .hero__spin { opacity: 1; animation-play-state: running; }
@keyframes hero-spin { to { transform: rotate(360deg); } }

/* the receipt */
.hero__receipt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 1.75em;
  text-align: center;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.hero__pay[data-state="done"] .hero__receipt { opacity: 1; transition-duration: 300ms; }
.hero__receipt > * {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.hero__pay[data-state="done"] .hero__receipt > * {
  opacity: 1;
  transform: none;
  transition-duration: 500ms, 650ms;
  transition-delay: calc(var(--k, 0) * 70ms + 100ms);
}
.hero__check {
  display: grid;
  place-items: center;
  width: 3.75em;
  height: 3.75em;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  box-shadow: 0 0 0 0.5em color-mix(in srgb, var(--ok-soft) 45%, transparent);
}
.hero__receipt > .hero__check { transform: scale(0.82); }
.hero__check svg {
  width: 1.85em;
  height: 1.85em;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 160ms var(--ease-out);
}
.hero__pay[data-state="done"] .hero__check svg {
  clip-path: inset(0 0 0 0);
  transition: clip-path 460ms var(--ease-out) 320ms;
}
.hero__receipt-title {
  margin-top: 0.9em;
  font-size: calc(var(--u) * 1.1);
  font-weight: 800;
  line-height: 1.5;
}
.hero__receipt-amount {
  font-size: calc(var(--u) * 1.6);
  font-weight: 800;
  line-height: 1.35;
}
.hero__receipt-rows {
  align-self: stretch;
  display: grid;
  gap: 0.7em;
  margin-top: 1.4em;
  padding-top: 1.25em;
  border-top: 1px dashed var(--line-strong);
}
.hero__receipt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  font-size: calc(var(--u) * 0.72);
  line-height: 1.5;
  color: var(--fg-3);
}
.hero__receipt-row b { font-weight: 600; color: var(--fg); }
.hero__return {
  align-self: stretch;
  display: grid;
  gap: 0.6em;
  margin-top: 1.5em;
  font-size: calc(var(--u) * 0.66);
  line-height: 1.5;
  color: var(--fg-3);
}
.hero__return-bar {
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--hero-well);
}
.hero__return-bar > span {
  display: block;
  height: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0s 400ms;
}
.hero__pay[data-state="done"] .hero__return-bar > span {
  transform: scaleX(1);
  transition: transform 3000ms linear 700ms;
}

/* ---------- (d) the merchant's dashboard, behind ---------- */
.hero__dash {
  position: absolute;
  z-index: 1;
  top: 0.5em;
  inset-inline-end: 0;
  width: 17.75em;
  padding: 1.125em 1.25em 1em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.125em;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.hero__dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero__dash-title {
  font-size: calc(var(--u) * 0.72);
  font-weight: 600;
  color: var(--fg-2);
}
.hero__tag {
  padding: 0.3em 0.7em;
  border-radius: var(--r-full);
  background: var(--elevated);
  font-size: calc(var(--u) * 0.58);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg-3);
}
.hero__dash-total {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  margin-top: 0.3em;
}
.hero__dash-num {
  font-size: calc(var(--u) * 1.38);
  font-weight: 800;
  line-height: 1.35;
}
.hero__dash-unit {
  font-size: calc(var(--u) * 0.66);
  font-weight: 600;
  color: var(--fg-3);
}
.hero__dash-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  font-size: calc(var(--u) * 0.66);
  line-height: 1.6;
  color: var(--fg-3);
}
.hero__delta {
  padding: 0.15em 0.6em;
  border-radius: var(--r-full);
  background: var(--ok-soft);
  color: var(--ok-text);
  font-weight: 700;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.hero__dash.is-up .hero__delta {
  opacity: 1;
  transform: none;
  transition-duration: 400ms, 520ms;
}
.hero__spark {
  position: relative;
  height: 4.25em;
  margin-top: 0.75em;
  color: var(--brand);
}
.hero__spark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero__dot {
  position: absolute;
  left: 6.667%;
  top: 22.22%;
  width: 0.5em;
  height: 0.5em;
  margin: -0.25em;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0.18em var(--card);
}
.hero__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0;
}
.hero__dash-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4em;
  font-size: calc(var(--u) * 0.58);
  line-height: 1.5;
  color: var(--fg-3);
}

/* ---------- (c) notifications ---------- */
.hero__toast {
  position: absolute;
  z-index: 3;
  inset-inline-end: 0;
  width: 16.75em;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 0.875em;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--line-strong);
  border-radius: 1em;
  box-shadow: var(--shadow-float), inset 0 1px 0 rgb(255 255 255 / 0.06);
  opacity: 0;
  transform: translateY(0.75em) scale(0.97);
  transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out);
}
.hero__toast.is-in {
  opacity: 1;
  transform: none;
  transition-duration: 420ms, 620ms;
}
.hero__toast--a { top: 17.25em; }
.hero__toast--b { top: 22em; }
.hero__toast-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25em;
  height: 2.25em;
  border-radius: 0.7em;
  background: var(--brand-soft);
  color: var(--brand);
}
.hero__toast-ico--ok { background: var(--ok-soft); color: var(--ok); }
.hero__toast-ico svg { width: 1.1em; height: 1.1em; }
.hero__toast-text { display: grid; flex: 1; min-width: 0; }
.hero__toast-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  font-size: calc(var(--u) * 0.76);
  line-height: 1.5;
}
.hero__toast-top b { font-weight: 700; }
.hero__toast-top span { font-size: 0.8em; color: var(--fg-3); white-space: nowrap; }
.hero__toast-sub {
  overflow: hidden;
  font-size: calc(var(--u) * 0.66);
  line-height: 1.5;
  color: var(--fg-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- a narrow scene (phones): the payment page and one notification ---------- */
@container hero-scene (max-width: 440px) {
  .hero__in .hero__stage {
    --u: min(16.5px, 100cqi / 22.5);
    width: calc(var(--u) * 22.5);
    height: calc(var(--u) * 34);
  }
  .hero__stage::before { inset: 4% -6% 0; }
  .hero__stage::after { display: none; }
  .hero__dash,
  .hero__toast--b { display: none; }
  .hero__pay { top: 0; inset-inline-start: 0; }
  .hero__toast--a {
    top: auto;
    bottom: 0;
    inset-inline: 1.25em;
    width: auto;
  }
}

/* ---------- stacked (below 1000px): the scene sits under the copy ---------- */
@media (max-width: 999.98px) {
  .hero__glow {
    background:
      radial-gradient(32rem 26rem at 50% 72%, var(--brand-glow), transparent 70%),
      radial-gradient(20rem 14rem at 18% 88%, var(--hero-cyan), transparent 70%);
  }
  .hero__grid {
    -webkit-mask-image: radial-gradient(ellipse 70% 40% at 50% 70%, #000 12%, transparent 74%);
    mask-image: radial-gradient(ellipse 70% 40% at 50% 70%, #000 12%, transparent 74%);
  }
}
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { padding-inline: 20px; font-size: 0.95rem; }
}
@media (max-width: 560px) {
  .hero__ctas { display: grid; width: 100%; }
  .hero__trust { margin-top: 32px; }
}


/* ---- assets/css/sections/02-platforms.css ---- */
/* 02 platforms: a slim strip under the hero. A label + link, and a marquee of the 16 platforms with a ready plugin.
   RTL: the track starts on the right and its copy overflows to the left, so it drifts left to right
   (new names enter from the end side, like an LTR marquee does the other way round). */
.plat {
  background: var(--canvas);
  border-block: 1px solid var(--line);
  --plat-gap: 22px;
  --plat-speed: 56s;
}
.plat__in {
  display: grid;
  gap: 2px;
  padding-block: 18px 20px;
}
.plat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
}
.plat__title {
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.7;
  color: var(--fg-3);
  text-wrap: balance;
}
.plat__more { min-height: 44px; font-size: var(--fs-s); }

.plat__marquee {
  position: relative;
  overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.plat__track {
  display: flex;
  width: max-content;
  animation: plat-drift var(--plat-speed) linear infinite;
  will-change: transform;
}
.plat__list {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--plat-gap);
  padding-inline-end: var(--plat-gap);
}
.plat__item {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--plat-gap);
  min-height: 44px;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--fg-3);
  transition: color 200ms ease;
}
/* The separator: a small neutral diamond between names. */
.plat__item::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--line-strong);
  transform: rotate(45deg);
}
.plat__item .ltr { letter-spacing: -0.005em; }

/* One full list is exactly half the track, so shifting by 50% loops without a seam. */
@keyframes plat-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(50%, 0, 0); }
}
/* Off-screen or hidden tab (set by 02-platforms.js). */
.plat.is-paused .plat__track { animation-play-state: paused; }

@media (hover: hover) and (pointer: fine) {
  .plat__marquee:hover .plat__track { animation-play-state: paused; }
  .plat__item:hover { color: var(--fg); }
}

@media (min-width: 1024px) {
  .plat { --plat-gap: 28px; }
  .plat__in {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px 40px;
    padding-block: 22px;
  }
  .plat__head { display: grid; gap: 0; justify-items: start; flex: none; min-width: 15rem; }
  .plat__title { font-size: 0.96rem; }
  .plat__marquee {
    margin-inline: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
}

/* Reduced motion: no drift. A static, centered, wrapped list (no copy, no fade). */
@media (prefers-reduced-motion: reduce) {
  .plat__in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 4px; }
  .plat__head { display: grid; justify-items: center; gap: 0; }
  .plat__marquee { margin-inline: 0; overflow: visible; max-width: 100%; -webkit-mask-image: none; mask-image: none; }
  .plat__track { width: auto; max-width: 100%; animation: none !important; will-change: auto; justify-content: center; }
  .plat__list { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; padding-inline-end: 0; gap: 10px 12px; padding-block: 8px 4px; }
  .plat__list--copy { display: none; }
  .plat__item {
    min-height: 38px;
    padding-inline: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    font-size: var(--fs-s);
  }
  .plat__item::after { display: none; }
}


/* ---- assets/css/sections/03-products.css ---- */
/* 03 products: the six gateway types and tools as a bento, each card holding a small live piece of product UI,
   then a slim row of four platform features.

   Grid at 1440: 6 tracks. Row 1 dedicated (4) + split (2), row 2 direct (2) + smart (4), row 3 link (3) + form (3).
   2 tracks below 1024 (the wide cards take a full row), 1 track below 720.

   Each card = copy on top + a recessed "stage" well (radius = card radius - card padding). Inside the stage sits a
   vignette built from a small kit (.prod__win, __lbl, __amt, __btn, __logo, __sk, __tick, __morph, __wire,
   __trail, __mover) that 04-steps reuses, so every mockup on the page is one family.

   Motion: 03-products.js cycles data-at on each stage through named beats ("send hub route done"), only while the
   stage is on screen and the tab is visible. CSS draws every beat with [data-at~="beat"]. data-reset drops all
   transitions for one beat so a loop rewinds invisibly. The HTML ships the most informative frame, which is also
   what reduced motion shows. Only transform, opacity, clip-path (and a 2-3px blur on swaps) animate. */

.prod { background: var(--canvas); }

/* Local tokens for the mockups (04-steps uses them too). Dark lifts windows a touch off the well and keeps the
   lighter split shares visible. */
.prod,
.steps {
  --prod-win: var(--card);
  --prod-seg2: color-mix(in oklab, var(--brand) 58%, var(--card));
  --prod-seg3: color-mix(in oklab, var(--brand) 30%, var(--card));
}
:root[data-theme="dark"] :is(.prod, .steps) {
  --prod-win: color-mix(in oklab, var(--card), #fff 3%);
  --prod-seg2: color-mix(in oklab, var(--brand) 66%, var(--card));
  --prod-seg3: color-mix(in oklab, var(--brand) 42%, var(--card));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.prod, .steps) {
    --prod-win: color-mix(in oklab, var(--card), #fff 3%);
    --prod-seg2: color-mix(in oklab, var(--brand) 66%, var(--card));
    --prod-seg3: color-mix(in oklab, var(--brand) 42%, var(--card));
  }
}

/* ---------- bento ---------- */
.prod__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
/* Each cell spans two rows (copy, stage) on a subgrid, so the stages in one row start at the same height
   whatever the length of the copy above them. */
.prod__cell {
  display: grid;
  grid-column: span 2;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
}
.prod__cell--wide { grid-column: span 4; }
.prod__cell--half { grid-column: span 3; }

.prod__card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: translate 320ms var(--ease-out), border-color 200ms ease;
}
.prod__copy { padding: 18px 20px 20px; }
.prod__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.prod__text { margin-top: 6px; max-width: 36em; font-size: var(--fs-s); line-height: 1.85; color: var(--fg-2); }
.prod__tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.prod__stage {
  --win-r: 14px;
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 304px;
  padding: 28px 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: calc(var(--r-xl) - 6px);
  background: var(--raised);
  container-type: inline-size;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  user-select: none;
  -webkit-user-select: none;
}
/* a faint dot grid that fades out toward the edges */
.prod__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 15%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 15%, transparent 80%);
  opacity: 0.55;
}
/* hover light (fine pointers only, see below) */
.prod__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, var(--brand-glow), transparent 72%);
  opacity: 0;
  transition: opacity 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .prod__card:hover { translate: 0 -3px; border-color: var(--line-strong); }
  .prod__card:hover .prod__stage::after { opacity: 0.65; }
}
/* rewind: one beat with no transitions */
.prod__stage[data-reset] *,
.prod__stage[data-reset] *::before,
.prod__stage[data-reset] *::after { transition: none !important; animation: none !important; }

/* ---------- vignette kit (also used by 04-steps) ---------- */
.prod__win {
  position: relative;
  background: var(--prod-win, var(--card));
  border: 1px solid var(--line);
  border-radius: var(--win-r, 14px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), var(--shadow-float);
}
.prod__lbl { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--fg-3); white-space: nowrap; }
.prod__amt { font-size: 17px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.prod__amt small { font-size: 12px; font-weight: 600; color: var(--fg-3); }
.prod__amt--sm { font-size: 14px; }
.prod__btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  height: 38px;
  padding-inline: 14px;
  border-radius: 10px;
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out);
}
.prod__btn--sm { height: 30px; padding-inline: 10px; border-radius: 8px; font-size: 12px; }
.prod__logo {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--fg);
  color: var(--canvas);
}
.prod__logo svg { width: 19px; height: 19px; }
.prod__logo--sm { width: 32px; height: 32px; border-radius: 9px; }
.prod__logo--sm svg { width: 16px; height: 16px; }
.prod__sk { display: block; height: 8px; border-radius: var(--r-full); background: var(--elevated); }
.prod__tick {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
}
.prod__tick svg { width: 12px; height: 12px; }

/* a label that swaps for another in the same box (no layout shift) */
.prod__morph { display: grid; }
.prod__morph > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out), filter 240ms var(--ease-out);
}
.prod__morph svg { width: 13px; height: 13px; flex: none; }
.prod__morph-b { opacity: 0; transform: translateY(8px); filter: blur(2px); }
.prod__morph--ok::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--ok) 18%, var(--card));
  opacity: 0;
  transition: opacity 240ms ease;
}
.prod__morph--ok .prod__morph-b { color: var(--ok-text); }
/* the "b" side shows: */
.prod__morph.is-b > .prod__morph-a { opacity: 0; transform: translateY(-8px); filter: blur(2px); }
.prod__morph.is-b > .prod__morph-b { opacity: 1; transform: none; filter: none; }
.prod__morph--ok.is-b::before { opacity: 1; }

/* window chrome: a URL pill in the middle, three dots at the far (left) end */
.prod__chrome {
  display: grid;
  grid-template-columns: 1fr minmax(0, 150px) 1fr;
  align-items: center;
  height: 34px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--line);
}
.prod__url {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--elevated);
  color: var(--fg-3);
}
.prod__url svg { width: 10px; height: 10px; }
.prod__url i { width: 58px; height: 5px; border-radius: var(--r-full); background: var(--line-strong); }
.prod__lights { grid-column: 3; justify-self: end; display: flex; gap: 5px; }
.prod__lights i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.prod__chrome--mini { display: flex; justify-content: flex-end; height: 24px; padding-inline: 9px; }
.prod__chrome--mini .prod__lights i { width: 5px; height: 5px; }

/* a wire with a trail that draws forward (RTL: right to left) and a dot that travels it */
.prod__wire {
  position: relative;
  flex: 1 1 0;
  min-width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}
.prod__trail {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 600ms var(--ease-in-out), opacity 300ms ease;
}
.prod__mover {
  position: absolute;
  inset: -6px 0;
  opacity: 0;
  transition: transform 600ms var(--ease-in-out), opacity 140ms ease;
}
.prod__mover::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-inline-start: -5px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft), 0 0 12px 2px var(--brand-glow);
}

@keyframes prod-ping {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 0; transform: scale(1.5); }
}
@keyframes prod-ping-sm {
  from { opacity: 0.6; transform: scale(1); }
  to { opacity: 0; transform: scale(1.12); }
}

/* =========================================================
   درگاه اختصاصی: name, domain and logo settle into the payment page
   ========================================================= */
.prod__brand { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; }
.prod__page { flex: none; width: 340px; }
.prod__set {
  flex: none;
  width: 236px;
  padding: 14px 14px 4px;
  transform: translateY(26px);
}
.prod__page-body { display: grid; gap: 14px; padding: 16px 18px 18px; }
.prod__merchant {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.prod__mlogo {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 11px;
}
.prod__mlogo .prod__logo {
  position: absolute;
  inset: -1.5px;
  width: auto;
  height: auto;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out);
}
.prod__mtext { display: grid; gap: 4px; min-width: 0; }
.prod__swap { display: grid; align-items: center; justify-items: start; min-height: 22px; }
.prod__swap--domain { min-height: 18px; }
.prod__swap > * {
  grid-area: 1 / 1;
  transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out), filter 360ms var(--ease-out);
}
.prod__swap b { font-size: 15px; font-weight: 800; line-height: 1.45; }
.prod__swap .ltr { font-size: 12px; font-weight: 500; color: var(--fg-3); }
.prod__swap .prod__sk { width: 96px; height: 9px; }
.prod__swap--domain .prod__sk { width: 66px; height: 7px; }
.prod__swap > :not(.prod__sk) { opacity: 0; transform: translateY(5px); filter: blur(3px); }
.prod__due { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.prod__set-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
}
.prod__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  font-size: 13px;
  font-weight: 600;
}
.prod__opt + .prod__opt { border-top: 1px solid var(--line); }
.prod__opt-key { flex: 1; white-space: nowrap; }
.prod__opt-key em { margin-inline-start: 4px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.prod__opt-val { font-size: 12px; font-weight: 500; color: var(--fg-3); white-space: nowrap; }
.prod__check {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}
.prod__check::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--ok);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 240ms var(--ease-out), transform 360ms var(--ease-out);
}
.prod__check svg {
  position: relative;
  width: 10px;
  height: 10px;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 240ms var(--ease-out) 60ms, transform 360ms var(--ease-out) 60ms;
}
.prod__toggle {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--line-strong);
}
.prod__toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-fill);
  opacity: 0;
  transition: opacity 260ms ease;
}
/* RTL switch: off = knob on the right, on = knob slides left */
.prod__toggle i {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 320ms var(--ease-in-out);
}

/* beats */
.prod__stage[data-at~="name"] .prod__swap--name > :not(.prod__sk),
.prod__stage[data-at~="domain"] .prod__swap--domain > :not(.prod__sk) { opacity: 1; transform: none; filter: none; }
.prod__stage[data-at~="name"] .prod__swap--name .prod__sk,
.prod__stage[data-at~="domain"] .prod__swap--domain .prod__sk { opacity: 0; transform: scaleX(0.9); }
.prod__stage[data-at~="name"] .prod__opt--name .prod__check::before,
.prod__stage[data-at~="name"] .prod__opt--name .prod__check svg,
.prod__stage[data-at~="domain"] .prod__opt--domain .prod__check::before,
.prod__stage[data-at~="domain"] .prod__opt--domain .prod__check svg,
.prod__stage[data-at~="logo"] .prod__opt--logo .prod__check::before,
.prod__stage[data-at~="logo"] .prod__opt--logo .prod__check svg { opacity: 1; transform: none; }
.prod__stage[data-at~="logo"] .prod__toggle::before { opacity: 1; }
.prod__stage[data-at~="logo"] .prod__toggle i { transform: translateX(-12px); }
.prod__stage[data-at~="logo"] .prod__mlogo .prod__logo { opacity: 1; transform: none; transition-delay: 120ms; }

/* =========================================================
   درگاه تسهیمی: one payment divides between accounts
   ========================================================= */
.prod__split { width: min(100%, 300px); padding: 16px 16px 4px; }
.prod__split-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.prod__bar {
  position: relative;
  display: flex;
  height: 12px;
  margin-block: 14px 10px;
  border-radius: var(--r-full);
  overflow: hidden;
}
.prod__seg { height: 100%; }
.prod__seg:nth-child(1) { flex: 60; background: var(--brand-fill); }
.prod__seg:nth-child(2) { flex: 25; background: var(--prod-seg2); }
.prod__seg:nth-child(3) { flex: 15; background: var(--prod-seg3); }
.prod__whole {
  position: absolute;
  inset: 0;
  background: var(--brand-fill);
  transition: opacity 520ms var(--ease-out);
}
.prod__seam {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 3px;
  margin-inline-start: -1.5px;
  background: var(--prod-win, var(--card));
  transform: scaleY(0);
  transition: transform 380ms var(--ease-out);
}
.prod__seam--a { inset-inline-start: 60%; }
.prod__seam--b { inset-inline-start: 85%; transition-delay: 90ms; }
.prod__acct {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-top: 1px solid var(--line);
}
/* the accounts are always listed; their shares arrive once the payment has split */
.prod__acct em,
.prod__acct b {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 320ms var(--ease-out), transform 440ms var(--ease-out);
}
.prod__acct:nth-child(2) :is(em, b) { transition-delay: 80ms; }
.prod__acct:nth-child(3) :is(em, b) { transition-delay: 160ms; }
.prod__sw { flex: none; width: 8px; height: 8px; border-radius: 3px; }
.prod__acct:nth-child(1) .prod__sw { background: var(--brand-fill); }
.prod__acct:nth-child(2) .prod__sw { background: var(--prod-seg2); }
.prod__acct:nth-child(3) .prod__sw { background: var(--prod-seg3); }
.prod__acct-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.prod__acct em {
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.prod__acct b { min-width: 64px; text-align: end; font-weight: 800; }
.prod__split-head .prod__amt { transition: opacity 260ms ease; }

.prod__stage[data-at~="cut"] .prod__seam { transform: none; }
.prod__stage[data-at~="tint"] .prod__whole { opacity: 0; }
.prod__stage[data-at~="rows"] .prod__acct :is(em, b) { opacity: 1; transform: none; }
.prod__stage[data-at~="swap"] .prod__split-head .prod__amt { opacity: 0; }

/* =========================================================
   درگاه مستقیم: your site → the gateway → back, verified
   ========================================================= */
.prod__direct { display: grid; justify-items: center; gap: 22px; width: 100%; }
.prod__pair { display: flex; align-items: stretch; width: min(100%, 316px); }
.prod__pair > .prod__wire { align-self: center; margin-inline: -1px; }
.prod__site { flex: none; width: 128px; }
.prod__site-body { display: grid; justify-items: start; padding: 10px 12px 12px; }
.prod__site-dom { margin-top: -2px; font-size: 12px; font-weight: 700; }
.prod__site .prod__btn { justify-self: stretch; margin-top: 10px; }
.prod__gate {
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 112px;
}
.prod__gate img { width: 62px; height: auto; }
.prod__gate::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--brand);
  border-radius: inherit;
  opacity: 0;
}
.prod__trail--back { background: var(--ok); transform-origin: left; }
.prod__mover--back::after {
  inset-inline-start: auto;
  inset-inline-end: 0;
  margin-inline-start: 0;
  margin-inline-end: -5px;
  background: var(--ok);
  box-shadow: 0 0 0 4px var(--ok-soft);
}
.prod__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--card);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
}
.prod__live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.prod__live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--ok);
  opacity: 0;
}

.prod__stage[data-at~="press"] .prod__site .prod__btn { transform: scale(0.94); }
.prod__stage[data-at~="go"] .prod__site .prod__btn { transform: none; }
.prod__stage[data-at~="go"] .prod__trail--go { transform: scaleX(1); }
.prod__stage[data-at~="go"] .prod__mover--go { opacity: 1; transform: translateX(-100%); }
.prod__stage[data-at~="gate"] .prod__mover--go { opacity: 0; }
.prod__stage[data-at~="gate"] .prod__gate::after { animation: prod-ping-sm 760ms var(--ease-out); }
.prod__stage[data-at~="gate"] .prod__live::after { animation: prod-ping 900ms var(--ease-out); }
.prod__stage[data-at~="back"] .prod__trail--back { transform: scaleX(1); }
.prod__stage[data-at~="back"] .prod__mover--back { opacity: 1; transform: translateX(100%); }
.prod__stage[data-at~="ok"] .prod__mover--back { opacity: 0; }
.prod__stage[data-at~="ok"] .prod__site .prod__morph > .prod__morph-a,
.prod__stage[data-at~="paid"] .prod__preview .prod__morph > .prod__morph-a,
.prod__stage[data-at~="go"] .prod__form-btn > .prod__morph-a { opacity: 0; transform: translateY(-8px); filter: blur(2px); }
.prod__stage[data-at~="ok"] .prod__site .prod__morph > .prod__morph-b,
.prod__stage[data-at~="paid"] .prod__preview .prod__morph > .prod__morph-b,
.prod__stage[data-at~="go"] .prod__form-btn > .prod__morph-b { opacity: 1; transform: none; filter: none; }
.prod__stage[data-at~="ok"] .prod__site .prod__morph--ok::before,
.prod__stage[data-at~="paid"] .prod__preview .prod__morph--ok::before { opacity: 1; }
.prod__stage[data-at~="out"] .prod__trail,
.prod__stage[data-at~="out"] .prod__mover,
.prod__stage[data-at~="out"] .prod__field::after { opacity: 0; }

/* =========================================================
   درگاه هوشمند: a transaction is routed around a busy PSP
   ========================================================= */
.prod__route { display: flex; align-items: center; width: min(100%, 660px); padding-bottom: 8px; }
.prod__src {
  flex: none;
  display: grid;
  justify-items: start;
  width: 124px;
  padding: 12px 14px 13px;
}
.prod__src::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--brand);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 300ms ease;
}
.prod__src-ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
}
.prod__src-ico svg { width: 16px; height: 16px; }
.prod__src-amt { font-size: 15px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.prod__src-amt small { font-size: 12px; font-weight: 600; color: var(--fg-3); }
.prod__wire--in { min-width: 18px; }
.prod__hub { position: relative; flex: none; display: grid; justify-items: center; }
.prod__hub-box {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--brand-fill);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.prod__hub-box svg { width: 24px; height: 24px; transform: rotate(-90deg); }
.prod__hub-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--brand);
  border-radius: inherit;
  opacity: 0;
}
.prod__hub-lbl {
  position: absolute;
  top: calc(100% + 10px);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  white-space: nowrap;
}
.prod__fan { position: relative; flex: none; width: 44px; height: 184px; }
.prod__fan--v { display: none; }
.prod__fan svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prod__fan path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.prod__fan-base path { stroke: var(--line-strong); }
.prod__fan-lit { opacity: 0; clip-path: inset(-4px -4px -4px 100%); transition: clip-path 260ms var(--ease-in-out), opacity 300ms ease; }
.prod__fan-lit path { stroke: var(--brand); }
.prod__fan-lit.is-route { opacity: 1; }
.prod__lanes { flex: 1.5 1 0; display: grid; gap: 14px; min-width: 0; }
.prod__lane { display: flex; align-items: center; height: 52px; }
.prod__lane .prod__wire { min-width: 14px; }
.prod__lane .prod__trail,
.prod__lane .prod__mover { transition-duration: 540ms, 140ms; }
.prod__lane.is-busy .prod__wire {
  background: repeating-linear-gradient(to left, color-mix(in oklab, var(--warn) 75%, transparent) 0 5px, transparent 5px 9px);
}
.prod__psp {
  flex: none;
  display: grid;
  align-content: center;
  width: 112px;
  height: 52px;
  padding-inline: 12px;
  --win-r: 12px;
}
.prod__psp::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--ok);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 300ms ease;
}
.prod__psp-name { font-size: 13px; font-weight: 700; line-height: 1.4; }
.prod__psp-state { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--fg-3); }
.prod__psp-state i { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.prod__psp-state i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--warn);
  opacity: 0;
}
.prod__busy-t { display: none; }
.prod__lane.is-busy .prod__busy-t { display: inline; }
.prod__lane.is-busy .prod__ok-t { display: none; }
.prod__lane.is-busy .prod__psp-state i { background: var(--warn); }
.prod__psp .prod__tick {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  box-shadow: 0 0 0 3px var(--raised);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 240ms var(--ease-out), transform 420ms var(--ease-out);
}

.prod__stage[data-at~="send"] .prod__src::after { opacity: 1; }
.prod__stage[data-at~="send"] .prod__wire--in .prod__trail { transform: scaleX(1); }
.prod__stage[data-at~="send"] .prod__wire--in .prod__mover { opacity: 1; transform: translateX(-100%); }
.prod__stage[data-at~="hub"] .prod__wire--in .prod__mover { opacity: 0; }
.prod__stage[data-at~="hub"] .prod__hub-box::after { animation: prod-ping 760ms var(--ease-out); }
.prod__stage[data-at~="hub"] .is-busy .prod__psp-state i::after { animation: prod-ping 760ms var(--ease-out) 120ms; }
.prod__stage[data-at~="route"] .prod__fan-lit.is-route { clip-path: inset(-4px); }
.prod__stage[data-at~="route"] .is-route .prod__trail { transform: scaleX(1); transition-delay: 200ms; }
.prod__stage[data-at~="route"] .is-route .prod__mover { opacity: 1; transform: translateX(-100%); transition-delay: 200ms; }
.prod__stage[data-at~="done"] .is-route .prod__mover { opacity: 0; transition-delay: 0ms; }
.prod__stage[data-at~="done"] .is-route .prod__psp::after { opacity: 1; }
.prod__stage[data-at~="done"] .is-route .prod__tick { opacity: 1; transform: none; }
.prod__stage[data-at~="out"] .prod__fan-lit,
.prod__stage[data-at~="out"] .prod__src::after,
.prod__stage[data-at~="out"] .prod__psp::after,
.prod__stage[data-at~="out"] .prod__tick { opacity: 0; }

/* =========================================================
   لینک پرداخت: a payment link sent in a chat
   ========================================================= */
.prod__chat { display: grid; gap: 12px; width: min(100%, 320px); }
.prod__msg { font-size: 13px; line-height: 1.65; }
.prod__msg--in {
  justify-self: start;
  max-width: 82%;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  border-end-start-radius: 5px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.prod__msg--out { position: relative; justify-self: end; width: min(100%, 256px); }
.prod__bubble {
  padding: 6px;
  border-radius: 16px;
  border-end-end-radius: 5px;
  background: var(--brand-soft);
}
.prod__preview {
  display: grid;
  gap: 10px;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--prod-win, var(--card));
}
.prod__preview-head { display: flex; align-items: center; gap: 10px; }
.prod__preview-t { display: grid; min-width: 0; line-height: 1.45; }
.prod__preview-t b { font-size: 13px; font-weight: 800; white-space: nowrap; }
.prod__preview-t .ltr { justify-self: start; font-size: 12px; color: var(--fg-3); }
.prod__preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.prod__preview .prod__btn { min-width: 92px; }
.prod__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 6px 1px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
}
.prod__meta svg { width: 13px; height: 13px; flex: none; }
.prod__meta time { margin-inline-start: auto; font-weight: 500; color: var(--fg-3); }
.prod__typing {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  display: flex;
  gap: 4px;
  padding: 13px 15px;
  border-radius: 16px;
  border-end-end-radius: 5px;
  background: var(--brand-soft);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-out);
}
.prod__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0.55; }
@keyframes prod-bob {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateY(-3px); }
}
.prod__msg--in,
.prod__bubble {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.prod__msg--in { transform-origin: 100% 100%; }
.prod__bubble { transform-origin: 0 100%; }

.prod__stage[data-at~="ask"] .prod__msg--in { opacity: 1; transform: none; }
.prod__stage[data-at~="typing"] .prod__typing { opacity: 1; transform: none; }
.prod__stage[data-at~="typing"] .prod__typing i { animation: prod-bob 900ms var(--ease-in-out) infinite; }
.prod__stage[data-at~="typing"] .prod__typing i:nth-child(2) { animation-delay: 120ms; }
.prod__stage[data-at~="typing"] .prod__typing i:nth-child(3) { animation-delay: 240ms; }
.prod__stage[data-at~="link"] .prod__bubble { opacity: 1; transform: none; }
.prod__stage[data-at~="out"] .prod__msg--in,
.prod__stage[data-at~="out"] .prod__bubble { opacity: 0; transform: none; }

/* =========================================================
   فرم پرداخت: the buyer fills the form and is sent to the gateway
   ========================================================= */
.prod__form { display: grid; gap: 12px; width: min(100%, 300px); padding: 16px; }
.prod__form-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.prod__form-t { display: grid; line-height: 1.45; }
.prod__form-t b { font-size: 13px; font-weight: 800; }
.prod__fld { display: grid; gap: 5px; }
.prod__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-inline: 12px;
  border-radius: 9px;
  background: var(--elevated);
  font-size: 13px;
  font-weight: 600;
}
.prod__field::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--brand);
  border-radius: inherit;
  box-shadow: 0 0 0 3px var(--brand-soft);
  opacity: 0;
  transition: opacity 200ms ease;
}
/* typing: the text is uncovered in steps, from where a reader starts (right for Persian, left for digits) */
.prod__type { display: inline-block; white-space: nowrap; clip-path: inset(-2px -2px -2px 100%); transition: clip-path 800ms steps(10, end), opacity 300ms ease; }
.prod__type.num { clip-path: inset(-2px 100% -2px -2px); transition-duration: 520ms, 300ms; transition-timing-function: steps(6, end), ease; }
.prod__unit { margin-inline-start: auto; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.prod__form-btn { margin-top: 2px; }
.prod__progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: rgb(255 255 255 / 0.55);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 2200ms var(--ease-in-out), opacity 300ms ease;
}

.prod__stage[data-at~="f1"] .prod__fld--1 .prod__field::after { opacity: 1; }
.prod__stage[data-at~="f2"] .prod__fld--1 .prod__field::after { opacity: 0; }
.prod__stage[data-at~="f2"] .prod__fld--2 .prod__field::after { opacity: 1; }
.prod__stage[data-at~="press"] .prod__fld--2 .prod__field::after { opacity: 0; }
.prod__stage[data-at~="f1"] .prod__fld--1 .prod__type,
.prod__stage[data-at~="f2"] .prod__fld--2 .prod__type { clip-path: inset(-2px); }
.prod__stage[data-at~="press"] .prod__form-btn { transform: scale(0.97); }
.prod__stage[data-at~="go"] .prod__form-btn { transform: none; }
.prod__stage[data-at~="go"] .prod__progress { transform: scaleX(0.8); }
.prod__stage[data-at~="out"] .prod__type,
.prod__stage[data-at~="out"] .prod__progress { opacity: 0; }

/* ---------- platform features ---------- */
.prod__feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--line);
}
.prod__feat { display: flex; align-items: flex-start; gap: 14px; }
.prod__feat-t { display: grid; gap: 2px; padding-top: 2px; }
.prod__feat h3 { font-size: 1rem; font-weight: 700; line-height: 1.6; }
.prod__feat p { font-size: var(--fs-s); line-height: 1.75; color: var(--fg-3); }

/* ---------- responsive ---------- */
@media (max-width: 1099.98px) {
  .prod__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod__cell, .prod__cell--half { grid-column: span 1; }
  .prod__cell--wide { grid-column: 1 / -1; }
  .prod__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719.98px) {
  .prod__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .prod__cell, .prod__cell--half, .prod__cell--wide { grid-column: auto; }
  .prod__copy { padding: 16px 16px 18px; }
  .prod__stage { min-height: 280px; padding: 24px 14px; }
}
@media (max-width: 559.98px) {
  .prod__feats { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* the vignettes simplify by the width of their own stage */
@container (max-width: 560px) {
  .prod__set { display: none; }
  .prod__page { width: min(100%, 330px); }
}
/* Phones: the routing diagram turns to run top to bottom (transaction, switch, then a fan into three PSPs in a
   row). The vertical fan's ends sit at 1/6, 1/2 and 5/6 of its width, the centres of the three equal lanes. */
@container (max-width: 470px) {
  .prod__route { flex-direction: column; align-items: center; width: 100%; padding-bottom: 0; }
  .prod__src { display: flex; align-items: center; gap: 8px; width: auto; padding: 8px 14px 8px 10px; }
  .prod__src-ico { width: 26px; height: 26px; margin: 0; }
  .prod__route .prod__wire { flex: none; width: 2px; min-width: 0; height: 24px; }
  .prod__route .prod__trail { transform: scaleY(0); transform-origin: top; }
  .prod__route .prod__mover { inset: 0 -6px; }
  .prod__route .prod__mover::after { top: 0; inset-inline-start: 50%; }
  .prod__hub-box { width: 46px; height: 46px; border-radius: 13px; }
  .prod__hub-box svg { width: 21px; height: 21px; transform: rotate(180deg); }
  .prod__hub-lbl { top: 50%; inset-inline-start: calc(100% + 12px); transform: translateY(-50%); }
  .prod__fan { display: none; }
  .prod__fan--v { display: block; width: 100%; height: 34px; }
  .prod__fan--v .prod__fan-lit { clip-path: inset(-4px -4px 100% -4px); }
  .prod__lanes { flex: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; }
  .prod__lane { flex-direction: column; height: auto; }
  .prod__lane .prod__wire { height: 14px; }
  .prod__lane.is-busy .prod__wire {
    background: repeating-linear-gradient(to bottom, color-mix(in oklab, var(--warn) 75%, transparent) 0 4px, transparent 4px 7px);
  }
  .prod__psp { width: calc(100% - 8px); padding-inline: 10px; }
  .prod__stage[data-at~="send"] .prod__wire--in .prod__trail,
  .prod__stage[data-at~="route"] .is-route .prod__trail { transform: scaleY(1); }
  .prod__stage[data-at~="send"] .prod__wire--in .prod__mover,
  .prod__stage[data-at~="route"] .is-route .prod__mover { transform: translateY(100%); }
}


/* ---- assets/css/sections/04-steps.css ---- */
/* 04 steps: from sign-up to the first payment in three steps.
   Three numbered cards joined by a rail. Each step owns the rail segment to the next node (.steps__seg), so the same
   markup draws a horizontal rail on wide screens and a vertical one below 1100px. The segment fills from the
   start side (right in RTL, top when vertical) when the next step begins.
   The vignettes reuse the 03-products kit (.prod__stage, __win, __fld, __field, __type, __btn, __morph, __status)
   and its beat rules (f1, f2, press). 04-steps.js plays each step once, in order, as its card comes into view.
   The HTML ships the finished state, which is what reduced motion shows. */

.steps__head { margin-inline: auto; }

.steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: 20px;
  row-gap: 0;
}
/* node / copy / stage rows on a subgrid, so the three stages start at the same height */
.steps__item {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
}

/* ---------- the rail ---------- */
.steps__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-inline-start: 26px;
  margin-bottom: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--fg-3);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  transition: color 240ms ease;
}
.steps__node::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--brand-fill);
  box-shadow: 0 0 0 5px var(--brand-soft);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 300ms var(--ease-out), transform 460ms var(--ease-out);
}
.steps__node span { position: relative; }
.steps__item.is-on .steps__node { color: #fff; }
.steps__item.is-on .steps__node::before { opacity: 1; transform: none; }

/* from this node's centre to the next one's (column width + gap) */
.steps__seg {
  position: absolute;
  top: 19px;
  inset-inline-start: 46px;
  width: calc(100% + 20px);
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}
.steps__seg i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 640ms var(--ease-in-out);
}
.steps__item.is-linked .steps__seg i { transform: none; }

/* ---------- cards ---------- */
.steps__card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: translate 320ms var(--ease-out), border-color 200ms ease;
}
.steps__copy { padding: 16px 20px 20px; }
.steps__copy p { margin-top: 6px; max-width: 34em; font-size: var(--fs-s); line-height: 1.85; color: var(--fg-2); }
.steps__stage { min-height: 268px; padding: 24px 18px; }
@media (hover: hover) and (pointer: fine) {
  .steps__card:hover { translate: 0 -3px; border-color: var(--line-strong); }
  .steps__card:hover .prod__stage::after { opacity: 0.65; }
}

.steps__vig { display: grid; justify-items: center; gap: 14px; width: 100%; }
.steps__stage .prod__status svg { width: 14px; height: 14px; color: var(--fg-3); }
.steps__status,
.steps__window {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.steps__stage[data-at~="done"] .steps__status,
.steps__stage[data-at~="done"] .steps__window { opacity: 1; transform: none; }
.steps__stage[data-at~="done"] .prod__live::after { animation: prod-ping 900ms var(--ease-out); }

/* ---------- 1: sign up ---------- */
.steps__signup { display: grid; gap: 10px; width: min(100%, 280px); padding: 14px; }
.steps__signup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.steps__signup-head img { width: 50px; height: auto; }
.steps__free {
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--ok-soft);
  color: var(--ok-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
.steps__ltr { direction: ltr; }
/* Latin text types from the left */
.steps__type-ltr {
  clip-path: inset(-2px 100% -2px -2px);
  transition: clip-path 900ms steps(16, end), opacity 300ms ease;
}
.steps__dots { letter-spacing: 2px; transition-duration: 560ms, 300ms; transition-timing-function: steps(10, end), ease; }
.steps__stage[data-at~="done"] .steps__signup-btn { transform: none; }
.steps__stage[data-at~="done"] .steps__signup-btn > .prod__morph-a { opacity: 0; transform: translateY(-8px); filter: blur(2px); }
.steps__stage[data-at~="done"] .steps__signup-btn > .prod__morph-b { opacity: 1; transform: none; filter: none; }
.steps__stage[data-at~="done"] .steps__signup-btn::before { opacity: 1; }

/* ---------- 2: connect ---------- */
/* the window itself arrives with its first row, so a waiting step shows an empty well, not an empty card */
.steps__connect {
  width: min(100%, 300px);
  padding: 3px 14px;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 320ms var(--ease-out), transform 460ms var(--ease-out);
}
.steps__stage[data-at~="a"] .steps__connect { opacity: 1; transform: none; }
.steps__way {
  display: grid;
  gap: 6px;
  padding-block: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms var(--ease-out), transform 440ms var(--ease-out);
}
.steps__way + .steps__way { border-top: 1px solid var(--line); }
.steps__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.steps__chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--elevated);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.steps__chip--more { background: var(--brand-soft); color: var(--brand); }
.steps__code {
  display: block;
  overflow: hidden;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--elevated);
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.steps__code b { font-weight: 700; color: var(--brand); }
.steps__stage[data-at~="a"] .steps__way--a,
.steps__stage[data-at~="b"] .steps__way--b,
.steps__stage[data-at~="c"] .steps__way--c { opacity: 1; transform: none; }

/* ---------- 3: get paid ----------
   A settlements list. Today's row slides in at the top and pushes the older days down; the oldest falls out of
   the clipped list. Every row moves with transform only. */
.steps__ledger { width: min(100%, 300px); padding: 0 14px; }
.steps__ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; }
.steps__ledger-head b { font-size: 13px; font-weight: 800; }
.steps__rows {
  --row: 44px;
  height: calc(var(--row) * 3);
  margin-inline: -14px;
  padding-inline: 14px;
  overflow: hidden;
}
.steps__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--row);
  border-top: 1px solid var(--line);
  font-size: 13px;
  transform: translateY(calc(var(--row) * -1));
  transition: transform 680ms var(--ease-out), opacity 420ms var(--ease-out);
}
.steps__row::before {
  content: "";
  position: absolute;
  inset: 0 -14px;
  z-index: -1;
  background: color-mix(in oklab, var(--ok) 9%, transparent);
  opacity: 0;
  transition: opacity 500ms ease 200ms;
}
.steps__row-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok-text);
}
.steps__row-ico svg { width: 11px; height: 11px; }
.steps__row-day { flex: 1; min-width: 0; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.steps__row b { font-weight: 800; white-space: nowrap; }
.steps__row small { font-size: 12px; font-weight: 600; color: var(--fg-3); }
.steps__row--new { isolation: isolate; opacity: 0; }
.steps__row--new .steps__row-ico { background: var(--ok); color: #fff; }
.steps__row--new .steps__row-day { color: var(--fg); }
.steps__stage[data-at~="new"] .steps__row { transform: none; }
.steps__stage[data-at~="new"] .steps__row--new { opacity: 1; }
.steps__stage[data-at~="new"] .steps__row--new::before { opacity: 1; }

/* ---------- actions ---------- */
.steps__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin-top: clamp(40px, 5vw, 56px);
}

/* ---------- below 1100: a vertical rail, each card with copy beside its vignette ---------- */
@media (max-width: 1099.98px) {
  .steps__list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 16px;
    max-width: 800px;
    margin-inline: auto;
  }
  .steps__item {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .steps__node { grid-column: 1; grid-row: 1; margin: 0; }
  .steps__card {
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
  }
  .steps__copy { padding: 20px 20px 22px; }
  .steps__stage { min-height: 248px; }
  .steps__seg { top: 20px; inset-inline-start: 19px; width: 2px; height: calc(100% + 16px); }
  .steps__seg i { transform: scaleY(0); transform-origin: top; }
}
@media (max-width: 719.98px) {
  .steps__item { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
  .steps__node { width: 32px; height: 32px; font-size: 13px; }
  .steps__node::before { box-shadow: 0 0 0 4px var(--brand-soft); }
  .steps__seg { top: 16px; inset-inline-start: 15px; }
  .steps__card { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .steps__copy { padding: 16px 16px 18px; }
  .steps__stage { min-height: 236px; padding: 22px 12px; }
  .steps__connect { padding-inline: 12px; }
  .steps__code { padding-inline: 8px; }
}


/* ---- assets/css/sections/05-dev.css ---- */
/* 05 developers: an always-dark band (.night). Copy and the 3-step API flow on the start (right) side,
   a code window on the end (left) side. The code itself is always LTR. */

.dev {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-bottom: 1px solid var(--line); /* closes the band where the dark theme's canvas continues below */
  /* the code window's own palette (fixed: this band is dark in both themes) */
  --c-bg: #0a111e;
  --c-bar: #0d1626;
  --c-sub: #0b1322;
  --c-edge: rgb(255 255 255 / 0.07);
  --c-text: #d5ddea;
  --c-gutter: #44526b;
  --c-mark: #132036;          /* brand at ~11% over --c-bg, opaque so the sticky gutter can match it */
  --c-kw: #7aa8ff;
  --c-type: #5fcbe0;
  --c-fn: #9fe0f0;
  --c-str: #f2bd8a;
  --c-num: #ff9a66;
  --c-var: #b8bfff;
  --c-com: #71819c;
  --c-p: #8693ab;
}

/* Background: deep navy, a faint grid and one soft brand glow behind the code. */
.dev__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 36rem at 24% 46%, rgb(20 99 255 / 0.2), transparent 70%),
    linear-gradient(180deg, #08101f 0%, var(--canvas) 72%);
}
.dev__bg::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(92 157 255 / 0.4) 50%, transparent);
}
.dev__grid {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 46% 60% at 26% 46%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 46% 60% at 26% 46%, #000 20%, transparent 75%);
}

.dev__wrap {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .dev__wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(48px, 5.5vw, 88px);
  }
}

/* ---------- copy column ---------- */
.dev__copy {
  display: grid;
  gap: 16px;
  align-content: start;
  max-width: 38rem;
}
.dev__copy .h2 { max-width: 13em; }
.dev__lead { max-width: 32em; }

/* The 3-step flow: numbered nodes on a thin rail. */
.dev__steps { margin-top: 18px; }
.dev__step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 22px;
}
.dev__step:last-child { padding-bottom: 0; }
.dev__step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 15.5px;
  top: 40px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--line-strong), var(--line));
}
.dev__step-n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--fg-2);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1;
}
.dev__step.is-on .dev__step-n {
  border-color: transparent;
  background: var(--brand-fill);
  color: var(--brand-ink);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.dev__step-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-height: 32px;
}
.dev__step-t { font-size: 1.06rem; font-weight: 700; line-height: 1.5; }
.dev__step-d {
  margin-top: 4px;
  color: var(--fg-2);
  font-size: var(--fs-s);
  line-height: 1.95;
}
.dev__step-d code {
  unicode-bidi: isolate;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.06);
  color: var(--fg);
  font-size: 0.84em;
}

/* Endpoint pill: a real button that marks its lines in the code window. */
.dev__ep {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 0.03);
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  font-variant-ligatures: none;
  transition: transform 160ms var(--ease-out), border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
.dev__ep::after { content: ""; position: absolute; inset: -8px -4px; } /* 44px tap target */
.dev__ep i { font-style: normal; color: var(--c-num); }
.dev__ep:active { transform: scale(0.97); }
.dev__ep[aria-pressed="true"] {
  border-color: rgb(92 157 255 / 0.55);
  background: var(--brand-soft);
  color: #d6e5ff;
}
@media (hover: hover) and (pointer: fine) {
  .dev__ep:hover { border-color: rgb(92 157 255 / 0.55); color: var(--fg); }
}

/* Resources: a quiet link list on hairlines. */
.dev__res {
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.dev__res-a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.5;
  transition: color 200ms ease;
}
.dev__res-i {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  transition: transform 160ms var(--ease-out);
}
.dev__res-i svg { width: 17px; height: 17px; }
.dev__res-a .arrow {
  flex: none;
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  color: var(--fg-3);
  transition: transform 200ms var(--ease-out), color 200ms ease;
}
.dev__res-a:active .dev__res-i { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .dev__res-a:hover { color: var(--brand); }
  .dev__res-a:hover .arrow { color: var(--brand); transform: translateX(-3px); }
}

/* ---------- code window ---------- */
.dev__stage { position: relative; min-width: 0; }
.dev__stage::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(20 99 255 / 0.22), transparent);
  pointer-events: none;
}
.dev__win {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--r-xl);
  background: var(--c-bg);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 0 0 1px rgb(0 0 0 / 0.35),
    0 2px 6px rgb(0 0 0 / 0.3),
    0 40px 80px -32px rgb(0 0 0 / 0.85),
    0 24px 64px -36px rgb(20 99 255 / 0.45);
}
.dev__win :focus-visible { outline-offset: -2px; }
/* base :focus-visible squares corners; pills keep theirs */
.dev__ep:focus-visible,
.dev__seg-b:focus-visible,
.dev__copy-btn:focus-visible { border-radius: var(--r-full); }

/* Top bar: language tabs (start) and copy (end). */
.dev__bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  padding-inline: 6px 10px;
  border-bottom: 1px solid var(--c-edge);
  background: var(--c-bar);
}
.dev__langs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.dev__langs::-webkit-scrollbar { display: none; }
.dev__lang {
  position: relative;
  flex: none;
  min-height: 50px;
  padding: 0 14px;
  color: var(--fg-3);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: color 200ms ease;
}
.dev__lang::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
  opacity: 0;
}
.dev__lang[aria-selected="true"] { color: var(--fg); }
.dev__lang[aria-selected="true"]::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .dev__lang:hover { color: var(--fg-2); }
  .dev__lang[aria-selected="true"]:hover { color: var(--fg); }
}

.dev__copy-btn {
  position: relative;
  display: inline-grid;
  align-self: center;
  flex: none;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 0.04);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.dev__copy-btn::after { content: ""; position: absolute; inset: -5px -2px; } /* 44px tap target */
.dev__copy-btn:active { transform: scale(0.97); }
.dev__copy-state {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), filter 150ms var(--ease-out);
}
.dev__copy-state svg { width: 15px; height: 15px; }
.dev__copy-state[data-state="done"] { color: var(--ok); opacity: 0; transform: scale(0.9); filter: blur(2px); }
.dev__copy-btn.is-done [data-state="idle"] { opacity: 0; transform: scale(0.9); filter: blur(2px); }
.dev__copy-btn.is-done [data-state="done"] { opacity: 1; transform: none; filter: none; }
.dev__copy-btn.is-fail [data-state="done"] { color: var(--fg-2); }
.dev__copy-btn.is-fail [data-state="done"] svg { display: none; }
@media (hover: hover) and (pointer: fine) {
  .dev__copy-btn:hover { border-color: rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.07); }
}

/* Sub bar: request / verify, and the endpoint being called. */
.dev__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-edge);
  background: var(--c-sub);
}
.dev__seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 0.04);
}
.dev__seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  inset-inline-start: 3px;
  width: calc((100% - 6px) / 2);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 0.1);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.08);
  transition: transform 240ms var(--ease-in-out);
}
.dev__seg[data-i="1"] .dev__seg-thumb { transform: translateX(-100%); }
.dev__seg.is-key .dev__seg-thumb { transition: none; }
.dev__seg-b {
  position: relative;
  z-index: 1;
  min-height: 34px;
  padding: 0 16px;
  border-radius: var(--r-full);
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color 200ms ease, transform 160ms var(--ease-out);
}
.dev__seg-b::after { content: ""; position: absolute; inset: -5px 0; } /* 44px tap target */
.dev__seg-b:active { transform: scale(0.97); }
.dev__seg-b[aria-selected="true"] { color: var(--fg); }
@media (hover: hover) and (pointer: fine) {
  .dev__seg-b:hover { color: var(--fg-2); }
  .dev__seg-b[aria-selected="true"]:hover { color: var(--fg); }
}
.dev__route {
  min-width: 0;
  overflow: hidden;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dev__route b { margin-right: 6px; color: var(--ok); font-weight: 600; }

/* The code. Lines are flex rows: a sticky line number (a CSS counter, so it is never selected or copied)
   and the highlighted text. Long lines scroll inside; the page never does. */
.dev__panel { position: relative; background: var(--c-bg); }
.dev__panel::before,
.dev__panel::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 2;
  height: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.dev__panel::before { top: 0; background: linear-gradient(var(--c-bg), transparent); }
.dev__panel::after { bottom: 0; background: linear-gradient(transparent, var(--c-bg)); }
.dev__panel.is-up::before,
.dev__panel.is-down::after,
.dev__panel.is-side .dev__fade-x { opacity: 1; }
.dev__fade-x {
  position: absolute;
  inset-block: 0;
  right: 0;
  z-index: 2;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--c-bg));
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.dev__pre {
  --lh: 24px;
  --rows: 24;
  position: relative;
  height: calc(var(--lh) * var(--rows) + 28px);
  margin: 0;
  padding-block: 14px;
  overflow: auto;
  overscroll-behavior-x: contain;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: var(--lh);
  font-variant-ligatures: none;
  tab-size: 4;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.16) transparent;
}
.dev__pre::-webkit-scrollbar { width: 10px; height: 10px; }
.dev__pre::-webkit-scrollbar-thumb { border: 3px solid var(--c-bg); border-radius: 10px; background: rgb(255 255 255 / 0.16); }
.dev__pre::-webkit-scrollbar-corner { background: transparent; }
.dev__pre code {
  display: grid;
  width: max-content;
  min-width: 100%;
  font: inherit;
  counter-reset: ln;
}
.dev__ln {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: var(--lh);
  padding-right: 28px;
}
.dev__ln::before {
  content: counter(ln);
  counter-increment: ln;
  position: sticky;
  left: 0;
  z-index: 1;
  flex: none;
  width: 3.6em;
  padding-right: 1.4em;
  background: var(--c-bg);
  color: var(--c-gutter);
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
}
.dev__ln::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-mark);
  opacity: 0;
}
.dev__lc { white-space: pre; }
.dev__ln.is-mark::after { opacity: 1; }
.dev__ln.is-mark::before {
  background: var(--c-mark);
  color: var(--brand);
  box-shadow: inset 2px 0 0 var(--brand);
}

.t-kw { color: var(--c-kw); }
.t-type,
.t-attr { color: var(--c-type); }
.t-fn,
.t-bi { color: var(--c-fn); }
.t-str { color: var(--c-str); }
.t-str .t-var { color: #ffd7b3; }
.t-num { color: var(--c-num); }
.t-var { color: var(--c-var); }
.t-com { color: var(--c-com); }
.t-p { color: var(--c-p); }

/* Sample response strip. */
.dev__resp {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 16px;
  border-top: 1px solid var(--c-edge);
  background: var(--c-bar);
}
.dev__resp-l {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}
.dev__resp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgb(60 203 127 / 0.16);
}
.dev__resp-v {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--c-text);
  font-size: 12.5px;
  line-height: 1.6;
  font-variant-ligatures: none;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev__resp-c { color: var(--c-com); }

/* ---------- smaller screens ---------- */
@media (max-width: 1023px) {
  .dev__copy { max-width: none; }
  .dev__lead { max-width: 40em; }
  .dev__pre { --rows: 20; }
  .dev__bg {
    background:
      radial-gradient(40rem 30rem at 50% 78%, rgb(20 99 255 / 0.18), transparent 70%),
      linear-gradient(180deg, #08101f 0%, var(--canvas) 60%);
  }
  .dev__grid {
    mask-image: radial-gradient(ellipse 70% 40% at 50% 76%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 40% at 50% 76%, #000 20%, transparent 75%);
  }
}
@media (max-width: 639px) {
  .dev__wrap { gap: 44px; }
  .dev__win { border-radius: var(--r-lg); }
  .dev__bar { padding-inline: 2px 8px; }
  .dev__lang { min-height: 46px; padding: 0 10px; font-size: 13.5px; }
  .dev__lang::after { inset-inline: 8px; }
  .dev__sub { padding: 8px; }
  .dev__seg { flex: 1; }
  .dev__seg-b { padding: 0 8px; }
  .dev__route { display: none; }
  .dev__pre { --lh: 21px; --rows: 18; font-size: 12.5px; padding-block: 10px; }
  .dev__ln { padding-right: 18px; }
  .dev__ln::before { width: 3.2em; padding-right: 1.1em; }
  .dev__resp { gap: 10px; padding: 0 12px; }
  .dev__resp-c { display: none; }
}


/* ---- assets/css/sections/06-fees.css ---- */
/* 06 fees: two price cards and a "who pays the fee" receipt. Canvas band, both themes. */

.fees { --fees-thumb: var(--card); }
:root[data-theme="dark"] .fees { --fees-thumb: rgb(255 255 255 / 0.1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fees { --fees-thumb: rgb(255 255 255 / 0.1); }
}

/* ---------- grid: stacked on phones; from 720px the two price cards side by side over a full-width panel ---------- */
.fees__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 720px) {
  .fees__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 24px); }
  .fees__calc { grid-column: 1 / -1; }
}

/* ---------- price cards ---------- */
.fees__plan {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.2vw, 32px);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(110% 60% at 100% 0%, var(--brand-soft), transparent 72%),
    var(--card);
}
.fees__plan-top { display: flex; align-items: center; gap: 14px; }
.fees__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.4;
}
.fees__latin {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: var(--fg-3);
}

.fees__price {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-block: 30px 30px;
}
.fees__pct {
  display: flex;
  align-items: baseline;
  font-size: clamp(3.6rem, 2.9rem + 2vw, 4.6rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--fg);
}
.fees__pct span { font-size: 0.62em; font-weight: 700; color: var(--brand); margin-inline-start: 2px; }
.fees__per {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding-bottom: 2px;
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--fg-2);
}

.fees__incl {
  display: grid;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.fees__incl li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-s);
  line-height: 1.75;
  color: var(--fg-2);
}
.fees__tick {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok-text);
}
.fees__tick svg { width: 13px; height: 13px; }

/* ---------- who-pays panel ---------- */
.fees__calc {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(20px, 2.2vw, 32px);
  border-radius: var(--r-2xl);
}
.fees__calc-head { display: grid; gap: 6px; }
.fees__calc-head p { font-size: var(--fs-s); line-height: 1.85; color: var(--fg-2); }
@media (min-width: 900px) {
  .fees__calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head receipt" "seg receipt" "note receipt";
    gap: 20px clamp(24px, 4vw, 48px);
  }
  .fees__calc-head { grid-area: head; }
  .fees__seg { grid-area: seg; }
  .fees__receipt { grid-area: receipt; }
  .fees__note { grid-area: note; align-self: end; }
}

/* Segmented toggle (matches the one in 05-dev): a sliding thumb under the selected button. */
.fees__seg {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--elevated);
}
.fees__seg-thumb {
  position: absolute;
  z-index: -1;
  inset-block: 4px;
  inset-inline-start: 4px;
  width: calc((100% - 8px) / 2);
  border-radius: var(--r-full);
  background: var(--fees-thumb);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--line);
  /* RTL: the second option sits to the left, so the thumb moves by a negative X. */
  transform: translateX(calc(var(--fees-i, 0) * -100%));
  transition: transform 240ms var(--ease-in-out);
}
.fees__seg.is-instant .fees__seg-thumb { transition: none; }
.fees__seg [role="tab"] {
  min-width: 0;
  min-height: 44px;
  padding-inline: 14px;
  border-radius: var(--r-full);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg-3);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), color 200ms ease;
}
.fees__seg [role="tab"][aria-selected="true"] { color: var(--fg); }
.fees__seg [role="tab"]:active { transform: scale(0.97); }
.fees__seg [role="tab"]:focus-visible { outline-offset: 1px; border-radius: var(--r-full); }
@media (hover: hover) and (pointer: fine) {
  .fees__seg [role="tab"][aria-selected="false"]:hover { color: var(--fg-2); }
}
/* On narrow screens the heading above carries «کارمزد را», so the first option drops it. */
@media (max-width: 439.98px) {
  .fees__seg-x { display: none; }
}

/* The receipt: an inset slip with a dashed tear line and two notches before the total. */
.fees__receipt {
  --fees-rp: clamp(16px, 2vw, 22px);
  position: relative;
  overflow: hidden;
  padding: 16px var(--fees-rp) 18px;
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fees__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  color: var(--fg-3);
}
.fees__rate .num { color: var(--fg-2); }
.fees__rows { display: grid; }
.fees__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-size: var(--fs-s);
  line-height: 1.5;
}
.fees__row dt { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg-2); }
.fees__row dd {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
}
.fees__unit { font-size: var(--fs-xs); font-weight: 500; color: var(--fg-3); }
.fees__who { min-height: 24px; padding: 0 9px; font-size: 0.74rem; }
.fees__receipt .num[data-v] { display: inline-block; }

.fees__row--total {
  position: relative;
  margin: 8px calc(-1 * var(--fees-rp)) 0;
  padding: 14px var(--fees-rp) 0;
  border-top: 1px dashed var(--line-strong);
}
/* Notches: two half-circles of the panel color at the tear line. */
.fees__row--total::before,
.fees__row--total::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fees__row--total::before { inset-inline-start: -8px; }
.fees__row--total::after { inset-inline-end: -8px; }
.fees__row--total dt { font-weight: 700; color: var(--fg); }
.fees__row--total dt::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px var(--ok-soft);
}
.fees__row--total dd .num {
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: proportional-nums;
  word-spacing: 0;
}

.fees__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--fg-3);
}
.fees__note svg { flex: none; width: 16px; height: 16px; margin-top: 4px; }

/* ---------- foot: what is free, and the link to the full fee page ---------- */
.fees__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(24px, 3vw, 36px);
}
.fees__free { display: flex; flex-wrap: wrap; gap: 8px 28px; }
@media (max-width: 519.98px) {
  /* phones: the checklist, then the link on its own line, so the section ends on the action */
  .fees__foot { display: grid; justify-items: start; gap: 14px; }
  .fees__free { display: grid; gap: 6px; }
}
.fees__free li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.6;
  color: var(--fg-2);
}
.fees__free svg { flex: none; width: 16px; height: 16px; color: var(--ok); }


/* ---- assets/css/sections/07-trust.css ---- */
/* 07 trust: licenses, check lists for sellers and buyers, a stats row. Mist band.
   Hover lifts use `translate` on the inner .card; the [data-reveal] wrapper owns opacity/transform. */

.trust__top {
  display: grid;
  gap: clamp(28px, 5vw, 44px);
  margin-bottom: clamp(16px, 2.4vw, 24px);
}
.trust__top .sec-head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .trust__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 29rem);
    align-items: center;
    gap: clamp(48px, 6vw, 88px);
    margin-bottom: 32px;
  }
}

/* ---------- the two license cards ---------- */
.trust__lics { display: grid; gap: 14px; }
.trust__lic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 18px 22px 18px 18px;
  transition: translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 200ms ease,
    transform 160ms var(--ease-out);
}
.trust__lic:active { transform: scale(0.985); }
/* The badges ship on white; keep the tile white in both themes. */
.trust__badge {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 10px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.06);
}
.trust__badge img { width: 76px; height: auto; max-height: 100%; object-fit: contain; }
.trust__badge .trust__badge-tall { width: auto; height: 76px; }
.trust__lic-body { display: grid; gap: 4px; min-width: 0; }
.trust__lic-title { font-size: 1.04rem; line-height: 1.6; font-weight: 700; }
.trust__lic-text { color: var(--fg-2); font-size: var(--fs-s); line-height: 1.8; }
.trust__lic-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--brand);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.5;
}
.trust__lic-link svg { width: 15px; height: 15px; transition: translate 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .trust__lic:hover { translate: 0 -3px; box-shadow: var(--shadow-float); border-color: var(--line-strong); }
  .trust__lic:hover .trust__lic-link svg { translate: -2px -2px; }
}
@media (max-width: 479px) {
  .trust__lic { gap: 14px; padding: 16px 16px 16px 14px; }
  .trust__badge { width: 76px; height: 76px; padding: 8px; border-radius: var(--r-md); }
  .trust__badge img { width: 60px; }
  .trust__badge .trust__badge-tall { width: auto; height: 60px; }
}

/* ---------- check lists ---------- */
.trust__lists { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 1200px) {
  .trust__lists { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.trust__list { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 32px); }
.trust__list-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.trust__list-head .h3 { line-height: 1.4; }
.trust__list-sub { margin-top: 2px; color: var(--fg-3); font-size: var(--fs-s); line-height: 1.6; }
.trust__checks { display: grid; flex: 1; }
@media (min-width: 1200px) {
  .trust__checks { grid-auto-rows: 1fr; }
}
.trust__checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
  color: var(--fg);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.75;
}
.trust__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}
.trust__tick svg { width: 12px; height: 12px; stroke-width: 2.6; }
@media (min-width: 640px) {
  .trust__checks--two { grid-template-columns: 1fr 1fr; column-gap: 36px; }
}
/* Buyers: the three sentences sit side by side while the cards are stacked full width. */
@media (min-width: 900px) and (max-width: 1199px) {
  .trust__checks--three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
}

/* ---------- stats row: hairlines between cells via a 1px grid gap ---------- */
.trust__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
}
@media (min-width: 880px) {
  .trust__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.trust__stat {
  display: grid;
  align-content: end;
  gap: 6px;
  padding: clamp(22px, 3.4vw, 40px) clamp(18px, 3vw, 36px);
  background: var(--card);
}
.trust__n {
  display: inline-grid;
  justify-self: start;
  grid-auto-flow: column;
  align-items: baseline;
  font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--fg);
}
/* The ghost holds the final width so counting up never shifts the cell. */
.trust__n-ghost { grid-area: 1 / 1; visibility: hidden; pointer-events: none; }
.trust__n-live { grid-area: 1 / 1; justify-self: start; }
.trust__plus { grid-area: 1 / 2; margin-inline-start: 4px; color: var(--brand); font-size: 0.7em; font-weight: 700; }
.trust__stat-label { color: var(--fg-2); font-size: var(--fs-s); font-weight: 500; line-height: 1.7; }


/* ---- assets/css/sections/08-partners.css ---- */
/* 08 partners: the affiliate program. Copy on the start side, a «پنل همکاری» UI mockup on the end side.
   The panel is illustrative (aria-hidden, labelled «نمونه‌ی نمایشی»); its numbers are never real stats. */

.part__grid {
  display: grid;
  gap: clamp(48px, 7vw, 72px);
  align-items: center;
}
@media (min-width: 1024px) {
  .part__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 56px; }
}
@media (min-width: 1280px) {
  .part__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: clamp(72px, 7vw, 104px); }
}
.part__copy { display: grid; justify-items: start; min-width: 0; }
.part__copy .sec-head { margin-bottom: 28px; }

/* who it's for */
.part__who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: clamp(28px, 3.4vw, 40px); }
.part__who-label { color: var(--fg-3); font-size: var(--fs-s); font-weight: 600; }
.part__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.part__chips .chip {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--fg);
  font-size: var(--fs-s);
  font-weight: 600;
}

/* the four terms */
.part__perks { display: grid; gap: 22px 28px; width: 100%; margin-bottom: clamp(30px, 3.6vw, 40px); }
/* two columns when the copy column is wide: stacked layout (640-1023) and a wide desktop (1280+) */
@media (min-width: 640px) and (max-width: 1023px), (min-width: 1280px) {
  .part__perks { grid-template-columns: 1fr 1fr; }
}
.part__perk { display: flex; align-items: flex-start; gap: 14px; }
.part__perk .ico { width: 44px; height: 44px; }
.part__perk .ico svg { width: 20px; height: 20px; }
.part__perk-title { font-size: 1.02rem; line-height: 1.6; font-weight: 700; }
.part__perk p { margin-top: 2px; color: var(--fg-2); font-size: var(--fs-s); line-height: 1.8; }

/* CTA + the true fact */
.part__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.part__stat { display: flex; align-items: center; gap: 12px; padding-inline-start: 28px; border-inline-start: 1px solid var(--line-strong); }
.part__stat strong { display: inline-flex; align-items: baseline; font-size: clamp(2rem, 1.7rem + 1.2vw, 2.6rem); font-weight: 800; line-height: 1.2; }
.part__stat-plus { margin-inline-start: 3px; color: var(--brand); font-size: 0.7em; font-weight: 700; }
.part__stat-l { color: var(--fg-2); font-size: var(--fs-s); font-weight: 600; line-height: 1.5; }
@media (max-width: 479px) {
  .part__foot .btn { width: 100%; }
  .part__stat { padding-inline-start: 0; border-inline-start: 0; }
}
.part__note { margin-top: 14px; color: var(--fg-3); font-size: var(--fs-s); line-height: 1.8; }
.part__note a { color: var(--brand); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-soft); text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) {
  .part__note a:hover { text-decoration-color: var(--brand); }
}

/* ---------- the mock panel ---------- */
.part__viz { --off: 10px; min-width: 0; }
@media (min-width: 960px) { .part__viz { --off: 22px; } }
.part__fig { max-width: 32rem; margin-inline: auto; }
@media (min-width: 1024px) { .part__fig { max-width: none; } }
.part__stack { position: relative; isolation: isolate; }
/* a second plate peeking out behind the panel (the panel and the notification share .part__stack) */
.part__stack::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: var(--off) calc(var(--off) * -1);
  inset-inline: var(--off) calc(var(--off) * -1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--raised);
}
.part__panel {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  font-size: 0.88rem;
  line-height: 1.6;
}
.part__panel b { font-weight: 700; }
.part__panel small { font-size: var(--fs-xs); }

.part__top { display: flex; align-items: center; gap: 10px; }
.part__mark {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand-fill);
}
.part__mark::after {
  content: "";
  position: absolute;
  inset-block-end: 6px;
  inset-inline-end: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spark);
}
.part__ptitle { font-size: 1rem; font-weight: 800; }
.part__demo {
  margin-inline-start: auto;
  padding: 3px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-full);
  color: var(--fg-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.part__kpis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.part__kpi { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--elevated); }
.part__kl { color: var(--fg-3); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.part__kv { font-size: 1.28rem; font-weight: 800; line-height: 1.5; }
.part__kv small { margin-inline-start: 4px; color: var(--fg-3); font-weight: 600; }

/* bars: grow from the baseline once the panel is seen, 70ms apart */
.part__chart { display: grid; gap: 8px; }
.part__plot {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 2.6vw, 14px);
  height: 132px;
  padding-inline: 4px;
  background: repeating-linear-gradient(to bottom, transparent 0 32px, var(--line) 32px 33px);
  border-bottom: 1px solid var(--line-strong);
}
.part__bar {
  height: var(--h);
  border-radius: 8px 8px 3px 3px;
  background: var(--brand-soft);
  background: color-mix(in srgb, var(--brand) 24%, var(--card));
  transform-origin: 50% 100%;
}
.part__bar.is-now { background: var(--brand-fill); box-shadow: var(--shadow-brand); }
.js .part__bar {
  transform: scaleY(0);
  transition: transform 800ms var(--ease-out);
  transition-delay: calc(var(--k) * 70ms + 300ms);
}
.js .part__viz.is-in .part__bar { transform: none; }
.part__xs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 2.6vw, 14px); padding-inline: 4px; }
.part__xs span { color: var(--fg-3); font-size: 0.7rem; font-weight: 600; text-align: center; line-height: 1.5; white-space: nowrap; }
.part__xs .is-now { color: var(--brand); }

.part__rows { display: grid; }
.part__row { display: flex; align-items: center; gap: 12px; padding-block: 10px; border-top: 1px solid var(--line); }
.part__av {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 800;
}
.part__av--a { background: var(--brand-soft); color: var(--brand); }
.part__av--b { background: var(--ok-soft); color: var(--ok-text); }
.part__av--c { background: var(--elevated); color: var(--fg-2); }
.part__mn { display: grid; flex: 1; min-width: 0; line-height: 1.5; }
.part__mn small { color: var(--fg-3); font-weight: 500; }
.part__amt { color: var(--ok-text); font-size: 0.86rem; font-weight: 700; white-space: nowrap; }

.part__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--elevated);
}
.part__pay-acc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.part__bank { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--card); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
.part__bank svg { width: 16px; height: 16px; }
.part__pay-t { display: grid; line-height: 1.5; min-width: 0; }
.part__pay-t small { color: var(--fg-3); font-weight: 600; }
.part__pay-t b { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: var(--fg-2); white-space: nowrap; }
.part__seg { display: inline-flex; padding: 3px; border-radius: var(--r-full); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.part__seg span { padding: 3px 11px; border-radius: var(--r-full); color: var(--fg-3); font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; }
.part__seg .is-on { background: var(--brand-fill); color: var(--brand-ink); }

/* a payout notification, floating off the panel's end edge */
.part__float {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: -24px 16px 0 auto;
  padding: 10px 16px 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-float);
  line-height: 1.5;
}
@media (min-width: 1200px) {
  .part__float { position: absolute; inset-inline-end: -30px; bottom: -34px; margin: 0; }
}
.part__float-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-text); }
.part__float-ok svg { width: 15px; height: 15px; stroke-width: 2.4; }
.part__float-t { display: grid; }
.part__float-t b { font-size: 0.84rem; font-weight: 700; }
.part__float-t small { color: var(--fg-3); font-size: var(--fs-xs); }
.js .part__float {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 600ms var(--ease-out) 1100ms, transform 600ms var(--ease-out) 1100ms;
}
.js .part__viz.is-in .part__float { opacity: 1; transform: none; }

@media (max-width: 479px) {
  .part__panel { padding: 16px; gap: 16px; }
  .part__plot { height: 112px; }
  .part__row:nth-child(3) { display: none; }
  .part__kv { font-size: 1.1rem; }
  .part__kpi { padding: 10px 12px; }
  .part__demo { padding-inline: 8px; }
}


/* ---- assets/css/sections/09-support.css ---- */
/* 09 support: a phone card with a live "open now" chip, four channel cards, the office address.
   Hover lifts use `translate` on the inner card; the [data-reveal] wrapper (.sup__cell) owns opacity/transform. */

.sup .sec-head { margin-bottom: clamp(32px, 4.4vw, 52px); }
.sup__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.sup__cell { display: grid; min-width: 0; }
.sup__cell > .card { height: 100%; }
@media (min-width: 680px) {
  .sup__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sup__cell--phone, .sup__cell--addr { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .sup__grid { grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(0, 1fr)); }
  .sup__cell--phone { grid-column: auto; grid-row: span 2; }
  .sup__cell--addr { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
.sup__phone {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 32px);
  background:
    radial-gradient(120% 70% at 100% 0%, var(--brand-soft), transparent 62%),
    var(--card);
}
.sup__phone-top { display: flex; align-items: center; gap: 14px; }
.sup__phone-top .h3 { line-height: 1.4; }
.sup__sub { margin-top: 2px; color: var(--fg-3); font-size: var(--fs-s); line-height: 1.6; }
.sup__num {
  display: block;
  width: fit-content;
  margin-block: 4px 2px;
  font-size: clamp(1.85rem, 1.4rem + 1.7vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  word-spacing: 0.12em;
  transition: color 200ms ease, transform 160ms var(--ease-out);
}
.sup__num:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .sup__num:hover { color: var(--brand); }
}

/* Sat..Wed filled, Thu and Fri dashed; today (Iran time) gets a ring. */
.sup__week { display: flex; gap: 6px; max-width: 22rem; }
.sup__week span {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.92rem;
  font-weight: 700;
}
.sup__week .is-off { background: none; border: 1px dashed var(--line-strong); color: var(--fg-3); }
.sup__week .is-today { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand); }
.sup__hours { color: var(--fg-2); font-size: var(--fs-s); font-weight: 600; line-height: 1.7; }
.sup__tz { color: var(--fg-3); font-weight: 400; }

/* The chip's slot is always reserved, so nothing shifts when JS fills it in. */
.sup__live { display: grid; gap: 6px; align-content: start; justify-items: start; min-height: 72px; }
.sup__chip { min-height: 32px; padding: 0 14px 0 12px; font-size: var(--fs-s); font-weight: 700; }
.sup__chip[hidden], .sup__next[hidden] { display: none; }
.sup__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); }
.sup__chip.is-open { background: var(--ok-soft); color: var(--ok-text); }
.sup__chip.is-open .sup__dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.sup__next { color: var(--fg-3); font-size: var(--fs-s); line-height: 1.6; }

.sup__call { align-self: flex-start; margin-top: auto; }
/* Tablet: the phone card is full width, so it lays out in two columns. */
@media (min-width: 680px) and (max-width: 959px) {
  .sup__phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; row-gap: 18px; align-content: start; }
  .sup__phone-top, .sup__num { grid-column: 1; }
  .sup__week, .sup__hours, .sup__live { grid-column: 2; }
  .sup__phone-top { grid-row: 1; }
  .sup__num { grid-row: 2; align-self: start; }
  .sup__week { grid-row: 1; align-self: center; }
  .sup__hours { grid-row: 2; align-self: start; }
  .sup__live { grid-row: 3; }
  .sup__call { grid-column: 1; grid-row: 3; align-self: end; justify-self: start; }
}
@media (max-width: 479px) {
  .sup__call { align-self: stretch; }
}

/* ---------- channel cards ---------- */
.sup__ch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 20px;
  transition: translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 200ms ease,
    transform 160ms var(--ease-out);
}
.sup__ch:active { transform: scale(0.985); }
.sup__ch-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sup__go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--fg-2);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.sup__go svg { width: 16px; height: 16px; transition: translate 200ms var(--ease-out); }
.sup__ch-title { font-size: var(--fs-h3); line-height: 1.5; font-weight: 700; }
.sup__ch-text { color: var(--fg-2); font-size: var(--fs-s); line-height: 1.85; }
.sup__ch-val {
  margin-top: auto;
  padding-top: 10px;
  color: var(--brand);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
  .sup__ch:hover { translate: 0 -3px; box-shadow: var(--shadow-float); border-color: var(--line-strong); }
  .sup__ch:hover .sup__go { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-ink); }
  .sup__ch:hover .sup__go svg { translate: -2px 0; }
}

/* Phones: a channel card becomes a compact row (icon, text, arrow). */
@media (max-width: 679px) {
  .sup__ch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 2px;
    align-items: start;
    padding: 18px 18px 18px 16px;
  }
  .sup__ch-top { display: contents; }
  .sup__ch-top .ico { grid-column: 1; grid-row: 1 / span 3; }
  .sup__go { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .sup__ch-title, .sup__ch-text, .sup__ch-val { grid-column: 2; }
  .sup__ch-val { margin-top: 0; padding-top: 6px; }
}

/* ---------- address ---------- */
.sup__addr {
  display: grid;
  gap: 0;
  align-items: center;
  padding: clamp(22px, 3vw, 30px);
}
.sup__addr-main { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 20px; }
.sup__addr-main .h3 { line-height: 1.5; }
.sup__addr-text { max-width: 44em; margin-top: 4px; color: var(--fg-2); font-size: var(--fs-s); line-height: 1.95; text-wrap: pretty; }
.sup__facts { display: contents; }
.sup__fact { display: grid; gap: 2px; align-content: center; padding-block: 16px; border-top: 1px solid var(--line); }
@media (min-width: 820px) {
  .sup__addr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .sup__addr-main { padding-bottom: 0; padding-inline-end: 40px; }
  .sup__fact { align-self: stretch; padding-block: 4px; padding-inline: 40px 0; border-top: 0; border-inline-start: 1px solid var(--line); }
  .sup__fact:last-child { padding-inline-end: 8px; }
}
.sup__fact dt { color: var(--fg-3); font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; }
.sup__fact dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.sup__fact-v { font-size: 1.12rem; font-weight: 700; line-height: 1.6; word-spacing: 0.12em; }
.sup__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.sup__copy:active { transform: scale(0.97); }
.sup__copy svg { width: 15px; height: 15px; }
.sup__copy.is-done { border-color: transparent; background: var(--ok-soft); color: var(--ok-text); }
@media (hover: hover) and (pointer: fine) {
  .sup__copy:hover { border-color: var(--fg-3); color: var(--fg); }
  .sup__copy.is-done:hover { border-color: transparent; color: var(--ok-text); }
}


/* ---- assets/css/sections/10-cta.css ---- */
/* 10 cta: the closing call to action, a big rounded night card on the canvas, right above the dark footer.
   A brand glow from the top edge, a faint grid, one headline, two buttons. */

.cta {
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 96px);
}
.cta__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 8vw, 104px) clamp(24px, 6vw, 80px);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--r-2xl);
  background: linear-gradient(180deg, #0d1627 0%, #080d18 62%, #070b14 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), var(--shadow-float);
  text-align: center;
}
.cta__glow,
.cta__grid { position: absolute; z-index: -1; pointer-events: none; }
.cta__glow {
  inset: 0;
  background:
    radial-gradient(ellipse 56% 62% at 50% -6%, rgb(20 99 255 / 0.42), transparent 72%),
    radial-gradient(ellipse 38% 44% at 50% 118%, rgb(20 99 255 / 0.2), transparent 70%);
}
.cta__grid {
  inset: 0;
  opacity: 0.75;
  background-size: 44px 44px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 72% 90% at 50% 0%, #000 8%, transparent 74%);
  mask-image: radial-gradient(ellipse 72% 90% at 50% 0%, #000 8%, transparent 74%);
}

.cta__body { display: grid; justify-items: center; gap: 0; max-width: 46rem; margin-inline: auto; }
/* The one orange dot on the page's last screen. */
.cta__eyebrow::before { background: var(--spark); box-shadow: 0 0 0 4px rgb(255 110 38 / 0.16); }
.cta__title {
  max-width: 15em;
  margin-top: 16px;
  font-size: clamp(2.05rem, 1.15rem + 3.6vw, 3.7rem);
  line-height: 1.32;
}
.cta__lead {
  max-width: 32em;
  margin-top: 18px;
  color: var(--fg-2);
  font-size: var(--fs-lead);
  line-height: 1.95;
  text-wrap: balance;
}
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 4vw, 40px); }
.cta__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-top: clamp(26px, 3.4vw, 34px);
  color: var(--fg-2);
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.7;
}
.cta__points li { display: inline-flex; align-items: center; gap: 8px; }
.cta__points svg { flex: none; width: 16px; height: 16px; color: var(--brand); stroke-width: 2.2; }
.cta__phone { margin-top: 22px; color: var(--fg-3); font-size: var(--fs-s); line-height: 1.8; }
.cta__phone a {
  display: inline-block;
  min-height: 44px;
  margin-inline-start: 4px;
  color: var(--fg);
  font-weight: 700;
  line-height: 44px;
  word-spacing: 0.12em;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .cta__phone a:hover { color: var(--brand); }
}

/* Phones: the card runs nearly edge to edge with smaller corners. */
@media (max-width: 639px) {
  .cta .container { padding-inline: 12px; }
  .cta__card { border-radius: var(--r-xl); padding: 52px 22px 36px; }
  .cta__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .cta__actions .btn { width: 100%; }
  .cta__points { flex-direction: column; align-items: center; gap: 8px; }
  .cta__phone { margin-top: 12px; }
}