/*
 * Central marketing landing (v2)
 * Industrial, spec-sheet world: warm paper, deep petroleum green ink, hairline rules.
 * One accent (signal amber) reserved for live status. No glass, no glows, no gradient text.
 */

/* ------------------------------------------------------------ tokens */
:root {
    /* colour */
    --ink: #0f1b17;
    --ink-2: #3b4843;
    --ink-3: #5e6b65;
    --paper: #f6f5f0;
    --paper-2: #eeece4;
    --surface: #ffffff;
    --rule: #dcd9cf;
    --rule-strong: #c4c0b3;
    --brand: #0b3d2e;
    --brand-hover: #082e23;
    --brand-soft: #e3ebe6;
    --brand-line: #2f9e6c;
    --on-brand: #f6f5f0;
    --on-brand-2: #b4c9bf;
    --on-brand-rule: rgba(246, 245, 240, 0.16);
    --signal: #c98a0b;
    --signal-soft: #fbf1dc;
    --ok: #1f7a4f;
    --band: #0b3d2e;
    --code-bg: #0f1b17;
    --head-bg: rgba(246, 245, 240, 0.97);
    --head-bg-scrolled: #ffffff;
    --error-bg: #fbeaea;
    --error-fg: #9b1c1c;

    /* type */
    --font-latin: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-arabic: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --font: var(--font-latin);
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-md: 1.0625rem;
    --text-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.3125rem);
    --text-h3: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
    --text-h2: clamp(1.625rem, 1.4vw + 1.1rem, 2.375rem);
    --text-display: clamp(2.375rem, 4.2vw + 1rem, 4.5rem);
    --lh-body: 1.7;
    --lh-tight: 1.12;
    --lh-head: 1.25;
    --track-display: -0.025em;
    --track-head: -0.015em;

    /* space (4pt) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;
    --s-10: 128px;
    --section: clamp(56px, 6.5vw, 96px);
    --gutter: clamp(20px, 4vw, 48px);
    --shell: 1240px;

    /* shape and depth */
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 14px;
    --shadow-1: 0 1px 2px rgba(15, 27, 23, 0.06), 0 8px 24px -12px rgba(15, 27, 23, 0.18);
    --shadow-2: 0 2px 4px rgba(15, 27, 23, 0.05), 0 28px 56px -28px rgba(15, 27, 23, 0.35);

    /* motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-1: 160ms;
    --dur-2: 320ms;

    --head-h: 72px;
    color-scheme: light;
}

/* Dark theme: same structure, re-tuned for low ambient light (night shifts, control rooms). */
html[data-theme="dark"] {
    --ink: #ecebe4;
    --ink-2: #bcc2bb;
    --ink-3: #939b95;
    --paper: #0d1412;
    --paper-2: #121b18;
    --surface: #16201d;
    --rule: #25312d;
    --rule-strong: #3a4843;
    --brand: #1f7352;
    --brand-hover: #258560;
    --brand-soft: #15302a;
    --brand-line: #4cc28c;
    --on-brand: #f6f5f0;
    --on-brand-2: #b4c9bf;
    --signal: #e5a83a;
    --ok: #4cc28c;
    --band: #0f2a22;
    --code-bg: #080d0b;
    --head-bg: rgba(13, 20, 18, 0.96);
    --head-bg-scrolled: #111a17;
    --error-bg: #3a1717;
    --error-fg: #f3b4b4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 28px 56px -28px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
}

/* MARKETING_FONT=archivo (or ?font=archivo): Latin glyphs in Archivo, Arabic glyphs in Readex Pro. */
html[data-font="archivo"] {
    --font-latin: "Archivo", "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-arabic: "Archivo", "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[dir="rtl"] {
    --font: var(--font-arabic);
    --lh-body: 1.85;
    --lh-tight: 1.35;
    --lh-head: 1.45;
    --track-display: 0;
    --track-head: 0;
}

/* ------------------------------------------------------------ base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--head-h) + 16px);
    scrollbar-color: var(--rule-strong) var(--paper);
}

body {
    margin: 0;
    transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--text-md);
    line-height: var(--lh-body);
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    caret-color: var(--brand);
}

::selection {
    background: var(--brand);
    color: var(--on-brand);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--brand-line);
    outline-offset: 3px;
    border-radius: var(--r-1);
}

h1,
h2,
h3 {
    text-wrap: balance;
    font-weight: 700;
}

p {
    text-wrap: pretty;
}

.num,
.sites td,
.panel__log {
    font-variant-numeric: tabular-nums;
}

.num {
    font-family: var(--font-mono);
    font-weight: 500;
    direction: ltr;
    unicode-bidi: isolate;
}

.shell {
    width: 100%;
    max-width: calc(var(--shell) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.display {
    font-size: var(--text-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-display);
    font-weight: 800;
}

.lead {
    font-size: var(--text-lg);
    line-height: 1.75;
    color: var(--ink-2);
    max-width: 58ch;
}

html[dir="rtl"] .lead {
    line-height: 1.85;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

/* ------------------------------------------------------------ buttons */
.btn {
    font-family: var(--font);
    --btn-bg: var(--brand);
    --btn-fg: var(--on-brand);
    --btn-bd: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    min-height: 48px;
    padding: 0 var(--s-5);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-1);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform var(--dur-2) var(--ease-out);
}

html[dir="rtl"] .btn svg {
    transform: scaleX(-1);
}

.btn:hover svg {
    transform: translateX(3px);
}

html[dir="rtl"] .btn:hover svg {
    transform: scaleX(-1) translateX(3px);
}

.btn--primary:hover {
    --btn-bg: var(--brand-hover);
    --btn-bd: var(--brand-hover);
}

.btn--ghost,
.btn--secondary {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--rule-strong);
}

.btn--ghost:hover,
.btn--secondary:hover {
    --btn-bd: var(--ink);
}

.btn--light {
    --btn-bg: var(--on-brand);
    --btn-fg: var(--brand);
    --btn-bd: var(--on-brand);
}

.btn--light:hover {
    --btn-bg: #ffffff;
}

.btn--outline-light {
    --btn-bg: transparent;
    --btn-fg: var(--on-brand);
    --btn-bd: var(--on-brand-rule);
}

.btn--outline-light:hover {
    --btn-bd: var(--on-brand);
}

.btn[data-size="sm"] {
    min-height: 40px;
    padding: 0 var(--s-4);
}

.btn[data-size="sm"] svg {
    display: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* ------------------------------------------------------------ header */
.site-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--head-bg);
    border-bottom: 1px solid var(--rule);
    transition: box-shadow var(--dur-2) ease, background-color var(--dur-2) ease;
}

.site-head.is-scrolled {
    background: var(--head-bg-scrolled);
    box-shadow: 0 1px 0 var(--rule), 0 10px 28px -18px rgba(15, 27, 23, 0.35);
}

.site-head__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-5);
    height: var(--head-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-weight: 800;
    font-size: 1.1875rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    justify-self: start;
}

html[dir="rtl"] .brand {
    letter-spacing: 0;
}

.brand__mark {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 7px;
}

.brand__accent {
    color: var(--brand-line);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav a {
    position: relative;
    padding: 8px 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
    transition: color var(--dur-1) ease;
}

.site-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-line);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-2) var(--ease-out);
}

.site-nav a:hover {
    color: var(--ink);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.site-nav a[aria-current="page"] {
    color: var(--ink);
}

.site-head__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-2);
}

.lang-switch,
.theme-toggle {
    min-height: 40px;
    text-decoration: none;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--dur-1) ease, background-color var(--dur-2) ease;
}

.lang-switch:hover,
.theme-toggle:hover {
    border-color: var(--ink-3);
}

.lang-switch {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    padding: 0;
}

.lang-switch__glyph {
    grid-area: 1 / 1;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: rotate(-60deg) scale(0.6);
    transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
}

.lang-switch__glyph--ar {
    font-family: var(--font-arabic);
    font-size: 18px;
    transform: rotate(60deg) scale(0.6);
}

.lang-switch[data-state="ar"] .lang-switch__glyph--en,
.lang-switch[data-state="en"] .lang-switch__glyph--ar {
    opacity: 1;
    transform: none;
}

.theme-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    padding: 0;
}

.theme-toggle svg {
    grid-area: 1 / 1;
    width: 18px;
    height: 18px;
    transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
}

.theme-toggle__moon {
    opacity: 0;
    transform: rotate(-60deg) scale(0.6);
}

html[data-theme="dark"] .theme-toggle__sun {
    opacity: 0;
    transform: rotate(60deg) scale(0.6);
}

html[data-theme="dark"] .theme-toggle__moon {
    opacity: 1;
    transform: none;
    color: var(--brand-line);
}

.site-head .btn[data-size="sm"] {
    border-radius: 999px;
}

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    place-content: center;
    gap: 6px;
}

.menu-toggle span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--ink);
    transition: transform var(--dur-2) var(--ease-out);
}

.site-head.is-open .menu-toggle span:first-child {
    transform: translateY(3.75px) rotate(45deg);
}

.site-head.is-open .menu-toggle span:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
}

/* ------------------------------------------------------------ hero */
.hero {
    padding-top: clamp(48px, 7vw, 104px);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-8);
    align-items: center;
}

.hero__copy .lead {
    margin-top: var(--s-5);
}

.hero__figure {
    color: var(--ink);
}

.hero__figure .fig {
    min-height: 360px;
}

.fig {
    width: 100%;
    color: var(--ink);
}

.fig svg {
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------ spec sheet */
.spec {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(56px, 7vw, 96px);
    border-top: 1px solid var(--ink);
}

.spec__item {
    padding-block: var(--s-5);
    padding-inline: 0 var(--s-5);
}

.spec__item + .spec__item {
    border-inline-start: 1px solid var(--rule);
    padding-inline-start: var(--s-5);
}

.spec dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--s-2);
}

html[dir="rtl"] .spec dt {
    font-family: var(--font-arabic);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
}

.spec dd {
    font-size: var(--text-sm);
    color: var(--ink-2);
    line-height: 1.6;
}

/* ------------------------------------------------------------ sections */
.section-head {
    display: grid;
    gap: var(--s-4);
    max-width: 760px;
    margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head h2 {
    font-size: var(--text-h2);
    line-height: var(--lh-head);
    letter-spacing: var(--track-head);
}

.band {
    padding-block: var(--section);
}

.band--tight {
    padding-top: 0;
}

.page-intro + .band {
    padding-top: clamp(16px, 3vw, 40px);
}

.band--alt {
    background: var(--paper-2);
}

.page-intro {
    padding-block: clamp(36px, 6dvh, 64px) clamp(24px, 3.5dvh, 40px);
}

.page-intro .display {
    max-width: 26ch;
    font-size: clamp(1.875rem, 2.2vw + 1.1rem, 2.75rem);
    line-height: var(--lh-head);
    letter-spacing: var(--track-head);
}

.page-intro .lead {
    margin-top: var(--s-3);
    max-width: 64ch;
    font-size: var(--text-md);
}

/* ------------------------------------------------------------ partners */
.partners {
    padding-block: var(--section) clamp(56px, 7vw, 104px);
}

.partners__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-8);
    align-items: start;
    padding-top: var(--s-6);
    background: linear-gradient(var(--rule), var(--rule)) top center / calc(100% - var(--gutter) * 2) 1px no-repeat;
}

.partners__title {
    font-size: var(--text-h3);
    line-height: var(--lh-head);
    letter-spacing: var(--track-head);
    max-width: 25ch;
}

.partners__rows {
    display: grid;
    gap: var(--s-6);
    min-width: 0;
}

.partners__row {
    display: grid;
    gap: var(--s-3);
    min-width: 0;
}

.partners__label {
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.marquee {
    direction: ltr;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    padding-right: 56px;
}

.marquee.is-live {
    overflow: hidden;
}

.marquee.is-live .marquee__track {
    animation: marquee 48s linear infinite;
}

.marquee--rev.is-live .marquee__track {
    animation-direction: reverse;
    animation-duration: 54s;
}

.marquee.is-live:hover .marquee__track {
    animation-play-state: paused;
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

.logo-chip {
    list-style: none;
    flex: none;
    display: grid;
    place-items: center;
    height: 44px;
    min-width: 88px;
    transition: transform var(--dur-2) var(--ease-out);
}

.logo-chip:hover {
    transform: translateY(-3px);
}

.logo-chip img {
    max-height: 30px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ------------------------------------------------------------ flow */
/* ------------------------------------------------------------ ledger (ruled grid) */
.ledger {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    border-top: 1px solid var(--ink);
}

.ledger--2 {
    --cols: 2;
}

.ledger--3 {
    --cols: 3;
}

.ledger--4 {
    --cols: 4;
}

.ledger__cell {
    padding: var(--s-5) var(--s-5) var(--s-6) 0;
    border-bottom: 1px solid var(--rule);
}

html[dir="rtl"] .ledger__cell {
    padding: var(--s-5) 0 var(--s-6) var(--s-5);
}

.ledger__cell h3 {
    font-size: var(--text-md);
    line-height: 1.4;
    margin-bottom: var(--s-2);
}

.ledger__cell p {
    font-size: var(--text-sm);
    color: var(--ink-2);
    max-width: 40ch;
}

/* Tiles variant: only used where icons are wanted (security items on the Platform page). */
.ledger--tiles {
    gap: var(--s-4);
    border-top: 0;
}

.ledger.ledger--tiles .ledger__cell {
    padding: var(--s-5);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--surface);
    transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}

.ledger--tiles .ledger__cell:hover {
    border-color: var(--brand-line);
    box-shadow: 0 16px 32px -22px rgba(11, 61, 46, 0.45);
    transform: translateY(-2px);
}

.ledger__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--s-4);
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}

html[data-theme="dark"] .ledger__icon {
    color: var(--brand-line);
}

.ledger--tiles .ledger__cell:hover .ledger__icon {
    background: var(--brand);
    color: var(--on-brand);
}

.ledger__icon svg {
    width: 22px;
    height: 22px;
}

.split .ledger {
    margin-top: var(--s-2);
}

/* ------------------------------------------------------------ split sections */
.split {
    padding-block: var(--section);
}

.split + .split {
    padding-top: 0;
}

.split__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.split__copy .section-head {
    margin-bottom: 0;
}

.os-list {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.os-list span {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-2);
}

.os-list svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--ink);
}

.checklist {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    font-size: var(--text-sm);
}

.checklist svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 0.25em;
    color: var(--ok);
}

/* ------------------------------------------------------------ product panels */
.panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    font-size: var(--text-sm);
}

.panel__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--rule);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-2);
}

.panel__status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 500;
    color: var(--ok);
}

.panel__status i,
.device-events i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.panel__body {
    padding: var(--s-2) var(--s-4) var(--s-4);
}

.panel__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--rule);
}

.panel__row em {
    font-style: normal;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ok);
}

.panel__row em.is-warn {
    color: var(--signal);
}

.toggle {
    width: 36px;
    height: 20px;
    padding: 2px;
    border-radius: 999px;
    background: var(--brand);
}

.toggle i {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface);
    margin-inline-start: auto;
}

.panel__log {
    margin: var(--s-4) 0 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-1);
    background: var(--code-bg);
    color: #c9d6cf;
    font: 400 12px/1.8 var(--font-mono);
    white-space: pre;
    overflow-x: auto;
    text-align: left;
}

.sites {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.sites th {
    padding: var(--s-3) 0;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-3);
    text-align: start;
    border-bottom: 1px solid var(--rule);
}

.sites td {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}

.sites td:first-child b {
    display: block;
    font-weight: 600;
}

.sites small {
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.sites :is(th, td):not(:last-child) {
    padding-inline-end: var(--s-4);
}

.sites__util {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 132px;
}

.sites td:last-child,
.sites th:last-child {
    text-align: end;
}

.sites tfoot td {
    border-bottom: 0;
    font-weight: 600;
}

.meter {
    flex: 1;
    max-width: 140px;
    height: 4px;
    background: var(--paper-2);
}

.meter i {
    display: block;
    width: var(--w);
    height: 100%;
    background: var(--brand);
}

/* ------------------------------------------------------------ device */
.device-stage {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--s-5);
}

.device {
    width: 280px;
    padding: 10px;
    border-radius: 44px;
    background: #141a17;
    box-shadow: var(--shadow-2);
}

.device__screen {
    display: flex;
    flex-direction: column;
    height: 560px;
    overflow: hidden;
    border-radius: 35px;
    background: var(--paper);
    font-size: 12px;
    line-height: 1.45;
}

.device__status {
    display: flex;
    justify-content: space-between;
    padding: 14px 24px 6px;
    font-size: 11px;
    font-weight: 600;
    direction: ltr;
}

.device__app {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4) var(--s-3);
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
    font-weight: 700;
}

.device__app .brand__mark {
    width: 22px;
    height: 22px;
}

.device__body {
    flex: 1;
    display: grid;
    align-content: start;
    gap: var(--s-2);
    padding: var(--s-3);
}

.device__card {
    padding: var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
}

.device__card small {
    display: block;
    color: var(--ink-3);
    font-size: 11px;
}

.device__card strong {
    display: block;
    font-size: 26px;
    line-height: 1.2;
    margin-block: 2px;
}

.device__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-2);
}

.device__bar {
    height: 4px;
    margin-top: var(--s-2);
    background: var(--paper-2);
}

.device__bar i {
    display: block;
    width: 32%;
    height: 100%;
    background: var(--brand);
}

.device__scan {
    margin-top: var(--s-1);
    padding: var(--s-3);
    border-radius: var(--r-2);
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 600;
    text-align: center;
}

.device__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: var(--s-2) var(--s-2) var(--s-4);
    border-top: 1px solid var(--rule);
    background: var(--surface);
}

.device__tabs span {
    display: grid;
    justify-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--ink-3);
}

.device__tabs span.is-on {
    color: var(--brand);
    font-weight: 600;
}

.device__tabs svg {
    width: 18px;
    height: 18px;
}

.device-events {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
}

.device-events li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--text-xs);
    color: var(--ink-2);
}

.device-events i {
    color: var(--ok);
}

.device-events .is-warn i {
    color: var(--signal);
}

/* ------------------------------------------------------------ shipping label */
.ship-label {
    width: min(340px, 100%);
    margin-inline: auto;
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    box-shadow: var(--shadow-2);
    font: 500 12px/1.5 var(--font-mono);
    color: #111;
    text-align: left;
}

.ship-label__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--s-2);
    border-bottom: 2px solid #111;
    font-family: var(--font-latin);
}

.ship-label__head b {
    font-size: 16px;
}

.ship-label__head span {
    padding: 1px 6px;
    background: #111;
    color: #fff;
    font: 600 11px/1.5 var(--font-mono);
    letter-spacing: 0.08em;
}

.ship-label__to {
    padding-block: var(--s-3);
    border-bottom: 2px solid #111;
}

.ship-label__to small {
    display: block;
    font-size: 10px;
    color: #555;
}

.ship-label__bars {
    height: 64px;
    margin: var(--s-3) 0 var(--s-1);
    background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 13px);
}

.ship-label__trk {
    text-align: center;
    letter-spacing: 0.12em;
    padding-bottom: var(--s-3);
    border-bottom: 2px solid #111;
}

.ship-label__foot {
    display: flex;
    justify-content: space-between;
    padding-top: var(--s-2);
}

/* ------------------------------------------------------------ closing band */
.closing {
    position: relative;
    background: var(--band);
    color: var(--on-brand);
    padding-block: clamp(56px, 7vw, 104px);
    overflow: clip;
}

.closing__floor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(246, 245, 240, 0.07) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(0deg, rgba(246, 245, 240, 0.07) 0 1px, transparent 1px 88px);
    -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 50%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 90% at 85% 50%, #000, transparent 75%);
}

html[dir="rtl"] .closing__floor {
    -webkit-mask-image: radial-gradient(ellipse 60% 90% at 15% 50%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 90% at 15% 50%, #000, transparent 75%);
}

.closing__floor i {
    position: absolute;
    inset-inline-start: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8fe0b5;
    animation: route 12s linear infinite;
}

html[dir="rtl"] .closing__floor i {
    animation-name: route-rtl;
}

.closing__floor i:nth-child(1) {
    top: 88px;
}

.closing__floor i:nth-child(2) {
    top: 264px;
    animation-delay: -6s;
    animation-duration: 16s;
    background: #f0c987;
}

.closing__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
}

.closing h2 {
    max-width: 22ch;
    font-size: clamp(1.75rem, 1.8vw + 1.1rem, 2.75rem);
    line-height: var(--lh-head);
    letter-spacing: var(--track-head);
}

.closing .lead {
    margin-top: var(--s-4);
    color: var(--on-brand-2);
}

.closing__points {
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.closing__points li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-sm);
    font-weight: 600;
}

.closing__points svg {
    width: 18px;
    height: 18px;
    flex: none;
    padding: 3px;
    border-radius: 50%;
    background: rgba(143, 224, 181, 0.16);
    color: #8fe0b5;
}

.closing__card {
    border: 1px solid var(--on-brand-rule);
    border-radius: var(--r-3);
    background: rgba(246, 245, 240, 0.045);
}

.closing__card li {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    font-size: var(--text-sm);
}

.closing__card li + li {
    border-top: 1px solid var(--on-brand-rule);
}

.closing__card svg {
    width: 38px;
    height: 38px;
    flex: none;
    padding: 10px;
    border: 1px solid var(--on-brand-rule);
    border-radius: 50%;
    color: #8fe0b5;
}

.closing__card span {
    display: grid;
    min-width: 0;
}

.closing__card small {
    font-size: 12px;
    color: var(--on-brand-2);
}

.closing__card a,
.closing__card b {
    font-weight: 700;
}

.closing__card a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.closing :focus-visible {
    outline-color: var(--on-brand);
}

/* ------------------------------------------------------------ FAQ */
.faq {
    max-width: 880px;
    border-top: 1px solid var(--ink);
}

.faq__item {
    border-bottom: 1px solid var(--rule);
}

.faq__item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-5);
    padding-block: var(--s-5);
    font-size: var(--text-lg);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary i {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
}

.faq__item summary i::before,
.faq__item summary i::after {
    content: "";
    position: absolute;
    inset: 6px 0 auto;
    height: 1.5px;
    background: var(--ink);
    transition: transform var(--dur-2) var(--ease-out);
}

.faq__item summary i::after {
    transform: rotate(90deg);
}

.faq__item[open] summary i::after {
    transform: rotate(0deg);
}

.faq__item summary:hover {
    color: var(--brand);
}

.faq__answer {
    padding-bottom: var(--s-5);
}

.faq__answer p {
    color: var(--ink-2);
    max-width: 64ch;
}

/* ------------------------------------------------------------ contact */
.contact-page {
    padding-block: clamp(28px, 5dvh, 64px) clamp(48px, 7vw, 96px);
}

.contact-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.contact-info h1 {
    font-size: clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem);
    line-height: var(--lh-head);
    letter-spacing: var(--track-head);
    font-weight: 800;
}

.contact-info .lead {
    margin-top: var(--s-3);
    font-size: var(--text-md);
}

.contact-info .contact__facts {
    margin-top: var(--s-5);
}

.contact__form {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 560px;
    justify-self: end;
    padding: clamp(16px, 1.8vw, 22px);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
}

.field {
    position: relative;
    display: grid;
    gap: 6px;
}

.field__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.field em {
    font-style: normal;
    font-weight: 400;
    color: var(--ink-3);
}

.field input,
.field textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    font-size: var(--text-sm);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
    background: var(--paper);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}

.field textarea {
    resize: vertical;
    min-height: 64px;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--ink-3);
    opacity: 0.8;
}

.field--req .field__label::after {
    content: " *";
    color: var(--signal);
}

html[data-theme="dark"] .field--req .field__label::after {
    color: var(--brand-line);
}

.field__box {
    position: relative;
    display: block;
}

.field__box > svg {
    position: absolute;
    top: 50%;
    inset-inline-start: 12px;
    width: 17px;
    height: 17px;
    margin-top: -8.5px;
    color: var(--ink-3);
    pointer-events: none;
    transition: color var(--dur-1) ease;
}

.field__box--ltr > svg {
    inset-inline-start: auto;
    left: 12px;
}

.field__box > input {
    padding-inline-start: 38px;
    padding-inline-end: 34px;
}

.field__box--ltr > input {
    padding-left: 38px;
    padding-right: 34px;
}

.field__box:focus-within > svg {
    color: var(--brand-line);
}

.field__state {
    position: absolute;
    top: 50%;
    inset-inline-end: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
    pointer-events: none;
}

.field__box--ltr > .field__state {
    inset-inline-end: auto;
    right: 12px;
}

.field__box--area > .field__state {
    top: 14px;
    margin-top: 0;
}

.field.is-valid .field__state {
    opacity: 1;
    transform: none;
    background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.field.is-invalid .field__state {
    opacity: 1;
    transform: none;
    background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 6v7M12 18h.01'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.field.is-invalid input,
.field.is-invalid textarea {
    border-color: var(--signal);
}

.field.is-invalid input:focus,
.field.is-invalid textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent);
}

.field__msg {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    white-space: nowrap;
    color: var(--signal);
}

.field__box--area > textarea {
    padding-inline-start: 12px;
    padding-inline-end: 34px;
}

.field input:hover,
.field textarea:hover {
    border-color: var(--ink-3);
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.field input[dir="ltr"] {
    text-align: left;
}

.form__foot {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.form__trust {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
}

.form__trust svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--ok);
}

.contact__form .btn[aria-busy="true"] svg {
    display: none;
}

.contact__form .btn[aria-busy="true"]::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--btn-fg) 35%, transparent);
    border-top-color: var(--btn-fg);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.form-error {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-1);
    background: var(--error-bg);
    color: var(--error-fg);
    font-size: var(--text-sm);
}

.form-success {
    display: flex;
    gap: var(--s-4);
    padding: var(--s-6);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--surface);
}

.form-success svg {
    width: 28px;
    height: 28px;
    flex: none;
    color: var(--ok);
}

.form-success b {
    display: block;
    font-size: var(--text-h3);
    margin-bottom: var(--s-2);
}

.form-success p {
    color: var(--ink-2);
}

.contact__facts {
    border-top: 1px solid var(--ink);
}

.contact__facts div {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--rule);
}

.contact__facts dt {
    font-size: var(--text-xs);
    color: var(--ink-3);
    margin-bottom: var(--s-1);
}

.contact__facts dd {
    font-size: var(--text-sm);
}

.contact__facts a:hover {
    color: var(--brand);
}

.wa-card {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-5);
    padding: var(--s-4);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    background: var(--surface);
    transition: border-color var(--dur-1) ease;
}

.wa-card:hover {
    border-color: #1da851;
}

.wa-card > svg:first-child {
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 50%;
    background: #1da851;
    flex: none;
}

.wa-card span {
    flex: 1;
    display: grid;
}

.wa-card small {
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.wa-card > svg:last-child {
    width: 18px;
    height: 18px;
    color: var(--ink-3);
}

html[dir="rtl"] .wa-card > svg:last-child {
    transform: scaleX(-1);
}

.timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
}

.timeline li {
    padding: var(--s-5) var(--s-5) 0 0;
}

html[dir="rtl"] .timeline li {
    padding: var(--s-5) 0 0 var(--s-5);
}

.timeline__day {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--brand);
    margin-bottom: var(--s-3);
}

html[dir="rtl"] .timeline__day {
    font-family: var(--font-arabic);
    font-weight: 600;
}

.timeline h3 {
    font-size: var(--text-h3);
    margin-bottom: var(--s-2);
}

.timeline p {
    font-size: var(--text-sm);
    color: var(--ink-2);
    max-width: 34ch;
}

/* ------------------------------------------------------------ reveal */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.js-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* Headings wipe in from the reading start: left to right in English, right to left in Arabic. */
.js-reveal [data-reveal="wipe"] {
    opacity: 1;
    transform: none;
}

.wipe__in {
    display: block;
}

.js-reveal [data-reveal="wipe"] .wipe__in {
    clip-path: inset(-0.25em 100% -0.25em -0.25em);
    transition: clip-path 1s var(--ease-out);
}

html[dir="rtl"].js-reveal [data-reveal="wipe"] .wipe__in {
    clip-path: inset(-0.25em -0.25em -0.25em 100%);
}

.js-reveal [data-reveal="wipe"].is-in .wipe__in,
html[dir="rtl"].js-reveal [data-reveal="wipe"].is-in .wipe__in {
    clip-path: inset(-0.25em -0.25em -0.25em -0.25em);
}

/* Home hero: a hand-drawn marker stroke behind the key phrase, drawn from the reading start after the heading wipes in. */
.hero-mark {
    position: relative;
    z-index: 0;
    white-space: nowrap;
}

.hero-mark::after {
    --marker-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M8 28C5 20 10 10 22 9C80 5 170 4 250 5C320 6 370 7 393 11C398 17 395 24 398 30C396 37 399 44 394 50C350 54 280 55 200 55C130 55 60 57 18 57C9 55 11 47 6 42C3 36 9 33 8 28Z'/%3E%3C/svg%3E");
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline: -0.12em;
    bottom: -0.06em;
    height: 0.62em;
    background: #f7b529;
    -webkit-mask: var(--marker-stroke) center / 100% 100% no-repeat;
    mask: var(--marker-stroke) center / 100% 100% no-repeat;
    transform: rotate(-1.2deg);
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.8s var(--ease-out) 0.55s;
}

html[dir="rtl"] .hero-mark::after {
    bottom: 0.14em;
    height: 0.72em;
    transform: rotate(1.2deg);
}

html[data-theme="dark"] .hero-mark::after {
    background: #c98f12;
}

.js-reveal [data-reveal] .hero-mark::after {
    clip-path: inset(0 100% 0 0);
}

html[dir="rtl"].js-reveal [data-reveal] .hero-mark::after {
    clip-path: inset(0 0 0 100%);
}

.js-reveal [data-reveal].is-in .hero-mark::after,
html[dir="rtl"].js-reveal [data-reveal].is-in .hero-mark::after {
    clip-path: inset(0 0 0 0);
}

/* ------------------------------------------------------------ hero (full screen) */
.hero--full {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--head-h) - 1px);
    min-height: 540px;
    padding-top: 0;
    overflow: clip;
}

.hero--full .hero__grid {
    flex: 1;
    min-height: 0;
    padding-block: clamp(16px, 3dvh, 48px);
    position: relative;
}

.hero--full .display {
    font-size: clamp(2rem, min(3.3vw + 0.9rem, 7dvh), 3.75rem);
}

.hero--full .lead {
    font-size: clamp(1rem, 2.2dvh, 1.3125rem);
}

.hero--full .actions {
    margin-top: clamp(16px, 3dvh, 32px);
}

.hero--full .hero__badge {
    margin-bottom: clamp(12px, 2.4dvh, 24px);
}

.hero--full .hero__figure .fig {
    min-height: 0;
}

.hero--full .hero__figure svg {
    width: auto;
    max-width: 100%;
    max-height: 38dvh;
    margin-inline: auto;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
    padding: 6px 14px 6px 10px;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--ink-2);
}

html[dir="rtl"] .hero__badge {
    padding: 6px 10px 6px 14px;
}

.pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-line);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-line) 55%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 9px transparent;
    }
}

.hero__floor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 96px);
    opacity: 0.45;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000, transparent 75%);
}

.hero__floor i {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal);
    animation: route 9s linear infinite;
}

.hero__floor i:nth-child(1) {
    top: 192px;
    inset-inline-start: 0;
}

.hero__floor i:nth-child(2) {
    top: 480px;
    inset-inline-start: 0;
    animation-delay: -4s;
    animation-duration: 12s;
    background: var(--brand-line);
}

.hero__floor i:nth-child(3) {
    top: 672px;
    inset-inline-start: 0;
    animation-delay: -7s;
    animation-duration: 15s;
}

@keyframes route {
    to {
        transform: translateX(100vw);
    }
}

html[dir="rtl"] .hero__floor i {
    animation-name: route-rtl;
}

@keyframes route-rtl {
    to {
        transform: translateX(-100vw);
    }
}

.hero__figure {
    position: relative;
}

.hero__events {
    display: grid;
    gap: var(--s-2);
    min-height: 0;
    margin-top: var(--s-4);
    align-content: start;
}

.hero__events li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    max-height: 0;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    background: var(--surface);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-2);
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.6s var(--ease-out), max-height 0.6s var(--ease-out), padding 0.6s var(--ease-out), border-color 0.6s ease;
}

.hero__events li.is-on {
    max-height: 40px;
    padding: 10px 14px;
    border-color: var(--rule);
    opacity: 1;
}

.hero__events i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
}

.hero__events .is-warn i {
    background: var(--signal);
}

.hero__stats {
    position: relative;
    padding-bottom: clamp(12px, 3dvh, 32px);
}

@media (max-height: 800px) {
    .hero__events {
        display: none;
    }
}

@media (max-width: 1100px) {
    .hero--full .hero__figure svg {
        max-height: 28dvh;
    }
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--rule);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.stats__item {
    position: relative;
    flex: 1 1 190px;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--s-3);
    align-items: center;
    padding: clamp(12px, 2dvh, 18px) var(--s-5);
    background: var(--surface);
    transition: background-color var(--dur-2) ease;
}

.stats__item::before {
    content: "";
    position: absolute;
    inset-inline: var(--s-5);
    top: 0;
    height: 2px;
    background: var(--brand-line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out);
}

html[dir="rtl"] .stats__item::before {
    transform-origin: right;
}

.stats__item:hover::before {
    transform: scaleX(1);
}

.stats__icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}

html[data-theme="dark"] .stats__icon {
    color: var(--brand-line);
}

.stats__icon svg {
    width: 18px;
    height: 18px;
}

.stats dd {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: clamp(1.375rem, 0.9vw + 1.1rem, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ink);
}

.stats .num {
    font-family: var(--font);
    font-weight: 800;
    white-space: nowrap;
    direction: inherit;
    font-variant-numeric: tabular-nums;
}

.stats__plus {
    margin-inline-start: 1px;
    color: var(--brand-line);
    font-weight: 800;
}

.stats dd {
    display: flex;
    align-items: baseline;
}

.stats dt {
    grid-column: 2;
    grid-row: 2;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------ isolation */
.isolation {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.isolation__map {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: var(--s-4);
    align-items: stretch;
}

.vault {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--r-3);
    background: var(--paper);
    opacity: 0.6;
}

.vault--own {
    border: 1px solid var(--brand);
    background: var(--surface);
    opacity: 1;
    box-shadow: var(--shadow-2);
}

.vault__head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
}

.vault__lock {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--ink-3);
}

.vault--own .vault__lock {
    background: var(--brand);
    color: var(--on-brand);
}

.vault__lock svg {
    width: 15px;
    height: 15px;
}

.vault__db {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-1);
    background: var(--paper-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-2);
}

.vault__db svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.vault__stores {
    display: grid;
    gap: 6px;
}

.vault__store {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    font-size: var(--text-xs);
    color: var(--ink-2);
}

.vault__store i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rule-strong);
}

.vault--own .vault__store i {
    background: var(--brand-line);
}

.isolation__list {
    display: grid;
    gap: var(--s-4);
}

.isolation__list li {
    display: flex;
    gap: var(--s-4);
}

.isolation__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}

html[data-theme="dark"] .isolation__icon {
    color: var(--brand-line);
}

.isolation__icon svg {
    width: 15px;
    height: 15px;
}

.isolation__list h3 {
    font-size: var(--text-md);
    margin-bottom: 2px;
}

.isolation__list p {
    font-size: var(--text-sm);
    color: var(--ink-2);
}

/* ------------------------------------------------------------ zigzag flow */
.flow {
    padding-block: var(--section);
}

.zigzag {
    position: relative;
    border-top: 1px solid var(--rule);
}

.zigzag::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    border-inline-start: 1px dashed var(--rule-strong);
}

.zigzag__step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 8vw, 128px);
    align-items: center;
    padding-block: clamp(28px, 3.5vw, 48px);
}

.zigzag__step::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 11px;
    height: 11px;
    margin: -5px 0 0 -5px;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--brand-line);
    box-shadow: 0 0 0 1px var(--brand-line);
}

html[dir="rtl"] .zigzag__step::after {
    margin: -5px -5px 0 0;
}

.zigzag__step:nth-child(even) .zigzag__figure {
    order: 2;
}

.zigzag__figure .fig {
    max-width: 300px;
    min-height: 200px;
    margin-inline: auto;
}

.zigzag__body {
    max-width: 440px;
}

.zigzag__step:nth-child(even) .zigzag__body {
    justify-self: end;
}

.zigzag__index {
    display: inline-block;
    margin-bottom: var(--s-2);
    font-size: var(--text-xs);
    color: var(--brand);
}

html[data-theme="dark"] .zigzag__index {
    color: var(--brand-line);
}

.zigzag__body h3 {
    font-size: clamp(1.25rem, 0.9vw + 1rem, 1.625rem);
    line-height: var(--lh-head);
    margin-bottom: var(--s-2);
}

.zigzag__body > p {
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.zigzag__body ul {
    display: grid;
    gap: 6px;
    margin-top: var(--s-4);
}

.zigzag__body li {
    display: flex;
    gap: var(--s-2);
    font-size: var(--text-sm);
}

.zigzag__body li svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 0.3em;
    color: var(--ok);
}

/* ------------------------------------------------------------ unlimited */
.unlimited {
    padding-block: clamp(64px, 8vw, 112px);
    background: var(--band);
    color: var(--on-brand);
    overflow: clip;
}

.unlimited__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--s-8);
    align-items: center;
}

.unlimited__mark {
    font-size: clamp(5rem, 12vw, 9rem);
    line-height: 0.9;
    font-weight: 300;
    color: var(--brand-line);
    margin-bottom: var(--s-3);
}

.unlimited h2 {
    font-size: var(--text-h2);
    line-height: var(--lh-head);
    letter-spacing: var(--track-head);
}

.unlimited .lead {
    margin-top: var(--s-4);
    color: var(--on-brand-2);
}

.unlimited__list {
    border-top: 1px solid var(--on-brand-rule);
}

.unlimited__list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--on-brand-rule);
    font-size: var(--text-md);
}

.unlimited__list b {
    padding: 2px 12px;
    border: 1px solid var(--on-brand-rule);
    border-radius: 999px;
    font-size: var(--text-xs);
    color: #8fe0b5;
}

/* ------------------------------------------------------------ testimonials */
.voices {
    padding-block: var(--section);
    overflow: clip;
}

.voices__rows {
    display: grid;
    gap: var(--s-4);
}

.voices__row {
    direction: ltr;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.voices__track {
    display: flex;
    gap: var(--s-4);
    width: max-content;
}

.voices__row.is-live {
    overflow: hidden;
}

.voices__row.is-live .voices__track {
    animation: voices 70s linear infinite;
}

.voices__row--rev.is-live .voices__track {
    animation-direction: reverse;
    animation-duration: 80s;
}

.voices__row.is-live:hover .voices__track {
    animation-play-state: paused;
}

@keyframes voices {
    to {
        transform: translateX(calc(-100% / 3));
    }
}

.quote {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-4);
    width: 340px;
    padding: var(--s-5);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--surface);
    direction: ltr;
}

html[dir="rtl"] .quote {
    direction: rtl;
    text-align: right;
}

.quote__stars {
    font-size: 14px;
    letter-spacing: 3px;
    color: var(--signal);
}

.quote blockquote {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.6;
}

.quote figcaption {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.quote figcaption span:last-child {
    display: grid;
    line-height: 1.4;
}

.quote small {
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.quote__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
}

/* ------------------------------------------------------------ live phone */
.device--live .device__screen {
    position: relative;
}

.device__step {
    margin-inline-start: auto;
    font-style: normal;
    font-size: 11px;
    color: var(--ink-3);
}

.scene {
    display: none;
    flex: 1;
    align-content: start;
    gap: var(--s-3);
    padding: var(--s-4);
    animation: scene-in 0.45s var(--ease-out) both;
}

@keyframes scene-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

#phone-demo[data-scene="scan"] .scene--scan,
#phone-demo[data-scene="qty"] .scene--qty,
#phone-demo[data-scene="multi"] .scene--multi,
#phone-demo[data-scene="done"] .scene--done {
    display: grid;
}

.scene small {
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 600;
}

.viewfinder {
    position: relative;
    display: grid;
    place-items: center;
    height: 168px;
    border-radius: var(--r-2);
    background: #0b1210;
    overflow: hidden;
}

.viewfinder::before {
    content: "";
    position: absolute;
    inset: 22px 30px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    transition: border-color 0.3s ease;
}

#phone-demo.is-found .viewfinder::before {
    border-color: #4cc28c;
}

.viewfinder__code {
    padding: 4px 10px;
    border-radius: 4px;
    background: #f6f5f0;
    color: #111;
    font-size: 15px;
    filter: blur(2px);
    opacity: 0.55;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

#phone-demo.is-found .viewfinder__code {
    filter: none;
    opacity: 1;
}

.viewfinder__laser {
    position: absolute;
    inset-inline: 32px;
    top: 26px;
    height: 2px;
    background: #ff4d4d;
    box-shadow: 0 0 10px 1px rgba(255, 77, 77, 0.8);
    animation: laser 1.1s ease-in-out infinite alternate;
}

#phone-demo.is-found .viewfinder__laser {
    opacity: 0;
}

@keyframes laser {
    to {
        top: 138px;
    }
}

.scene__result {
    display: none;
    place-items: center;
    gap: 2px;
    padding: var(--s-3);
    border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
    border-radius: var(--r-2);
    background: color-mix(in srgb, var(--ok) 10%, var(--surface));
    animation: scene-in 0.35s var(--ease-out) both;
}

#phone-demo.is-found .scene__result {
    display: grid;
}

.scene__result b {
    font-size: 20px;
}

.scene__result em {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--ok);
}

.qty {
    display: grid;
    gap: 4px;
}

.qty__input {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-3);
    border: 2px solid var(--brand);
    border-radius: var(--r-2);
    background: var(--surface);
    font-size: 22px;
    direction: ltr;
}

.qty__caret {
    width: 2px;
    height: 24px;
    margin-inline-start: 2px;
    background: var(--brand);
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% {
        opacity: 0;
    }
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    direction: ltr;
}

.keypad span {
    display: grid;
    place-items: center;
    height: 36px;
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    background: var(--surface);
    font-size: 15px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#phone-demo.is-hit .keypad__hit,
#phone-demo.is-ok .keypad__ok {
    background: var(--brand);
    color: var(--on-brand);
    transform: scale(0.94);
}

.multi {
    display: grid;
    gap: 6px;
}

.multi li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface);
    font-size: 13px;
    direction: ltr;
}

.multi li svg {
    width: 18px;
    height: 18px;
    color: var(--ok);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.35s var(--ease-out);
}

.multi li.is-done {
    border-color: color-mix(in srgb, var(--ok) 45%, transparent);
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}

.multi li.is-done svg {
    opacity: 1;
    transform: none;
}

#phone-demo.is-flash .device__scan {
    background: var(--ok);
}

.scene--done {
    place-items: center;
    align-content: center;
    text-align: center;
}

.scene--done b {
    font-size: 18px;
}

.done__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    animation: pop 0.5s var(--ease-out) both;
}

.done__icon svg {
    width: 32px;
    height: 32px;
}

@keyframes pop {
    from {
        transform: scale(0.3);
        opacity: 0;
    }
}

.demo-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
}

.demo-steps li {
    padding: 4px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-3);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.demo-steps li.is-on {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
}

/* ------------------------------------------------------------ live printer */
.printer-stage {
    display: grid;
    justify-items: center;
    gap: var(--s-5);
}

.printer {
    width: min(320px, 100%);
}

.printer__body {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 84px;
    padding: 0 var(--s-5);
    border-radius: var(--r-3) var(--r-3) 6px 6px;
    background: #1b2622;
    box-shadow: var(--shadow-2);
    direction: ltr;
}

.printer__brand {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: 0.14em;
    color: #8a9a92;
}

.printer__led {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3a4a43;
}

.printer.is-printing .printer__led {
    background: #4cc28c;
    animation: led 0.5s steps(1) infinite;
}

@keyframes led {
    50% {
        opacity: 0.25;
    }
}

.printer__slot {
    position: relative;
    z-index: 1;
    height: 230px;
    margin-inline: 22px;
    overflow: hidden;
    border-inline: 1px solid var(--rule);
}

.printer__paper {
    transform: translateY(-100%);
}

.printer.is-printing .printer__paper {
    animation: feed 2.4s var(--ease-out) forwards;
}

@keyframes feed {
    to {
        transform: translateY(0);
    }
}

.ship-label--mini {
    width: 100%;
    margin: 0;
    padding: var(--s-3);
    border-radius: 0 0 3px 3px;
    box-shadow: none;
    font-size: 11px;
}

.ship-label--mini .ship-label__bars {
    height: 38px;
}

.print-log {
    display: grid;
    gap: 6px;
    width: min(320px, 100%);
    font-size: 12px;
    direction: ltr;
}

.print-log li {
    display: flex;
    justify-content: space-between;
    padding: 8px var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    background: var(--surface);
    color: var(--ink-3);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.print-log li.is-on {
    border-color: var(--brand);
    color: var(--ink);
}

.print-log em {
    font-style: normal;
    color: var(--ok);
}

.agent-api {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule);
}

.agent-api code {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--brand);
}

html[data-theme="dark"] .agent-api code {
    color: var(--brand-line);
}

.agent-api dd {
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.api--compact {
    padding-block: clamp(48px, 6vw, 88px);
}

.api--compact .api__endpoints {
    margin-top: 0;
}

/* ------------------------------------------------------------ merchant scale picker */
.scale {
    --fill: 3;
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 12px 16px 14px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    background: var(--paper);
}

.scale legend {
    padding: 0 var(--s-2);
    font-size: var(--text-sm);
    font-weight: 700;
}

.scale__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s-4);
}

.scale__display {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    min-width: 0;
}

.scale__value {
    font-size: clamp(1.625rem, 1.2vw + 1.1rem, 2.125rem);
    line-height: 1;
    white-space: nowrap;
    color: var(--brand);
}

html[data-theme="dark"] .scale__value {
    color: var(--brand-line);
}

.scale__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
}

.scale__shelf {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    width: 46%;
    height: 30px;
    direction: ltr;
}

.scale__shelf i {
    flex: 1;
    height: 10px;
    border: 1.5px solid var(--rule-strong);
    border-radius: 2px;
    background: transparent;
    transition: height 0.45s var(--ease-out), background-color 0.3s ease, border-color 0.3s ease;
    transition-delay: calc(var(--i) * 18ms);
}

.scale__shelf i:nth-child(-n + 3) {
    height: 14px;
}

.scale__shelf i:nth-child(n + 4):nth-child(-n + 8) {
    height: 22px;
}

.scale__shelf i:nth-child(n + 9) {
    height: 30px;
}

.scale__shelf i.is-full {
    border-color: var(--brand);
    background: var(--brand);
}

.scale__range {
    width: 100%;
    margin: 0;
    height: 22px;
    accent-color: var(--brand);
    cursor: pointer;
    direction: ltr;
}

.scale__ticks {
    display: flex;
    justify-content: space-between;
    direction: ltr;
}

.scale__ticks button {
    padding: 4px 10px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: none;
    font: 600 12px/1.4 var(--font-mono);
    color: var(--ink-3);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.scale__ticks button:hover {
    color: var(--ink);
    border-color: var(--ink-3);
}

.scale__ticks button.is-on {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
}

/* ------------------------------------------------------------ text link */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-4);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--brand-line);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color var(--dur-1) ease;
}

html:not([data-theme="dark"]) .text-link {
    color: var(--brand);
}

.text-link:hover {
    text-decoration-color: currentColor;
}

.text-link svg {
    width: 16px;
    height: 16px;
}

html[dir="rtl"] .text-link svg {
    transform: scaleX(-1);
}

/* ------------------------------------------------------------ operator launch steps */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
}

.steps__item {
    position: relative;
    padding: var(--s-5) var(--s-5) var(--s-6) 0;
    border-bottom: 1px solid var(--rule);
}

html[dir="rtl"] .steps__item {
    padding: var(--s-5) 0 var(--s-6) var(--s-5);
}

.steps__n {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--s-4);
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--text-xs);
}

html[data-theme="dark"] .steps__n {
    color: var(--brand-line);
}

.steps__item:last-child .steps__n {
    background: var(--brand);
    color: var(--on-brand);
}

.steps__item h3 {
    font-size: var(--text-md);
    margin-bottom: var(--s-2);
}

.steps__item p {
    font-size: var(--text-sm);
    color: var(--ink-2);
    max-width: 38ch;
}

/* ------------------------------------------------------------ merchant onboarding (zigzag) */
.onboard {
    position: relative;
    border-top: 1px solid var(--rule-strong);
}

.onboard::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    border-inline-start: 1px dashed var(--rule-strong);
}

.onboard__step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 8vw, 128px);
    align-items: center;
    padding-block: clamp(28px, 3.5vw, 48px);
}

.onboard__step::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 13px;
    height: 13px;
    margin: -6px 0 0 -6px;
    border: 3px solid var(--paper-2);
    border-radius: 50%;
    background: var(--rule-strong);
    box-shadow: 0 0 0 1px var(--rule-strong);
}

html[dir="rtl"] .onboard__step::after {
    margin: -6px -6px 0 0;
}

.onboard__step--pending::after {
    background: var(--signal);
    box-shadow: 0 0 0 1px var(--signal);
}

.onboard__step--done::after {
    background: var(--brand-line);
    box-shadow: 0 0 0 1px var(--brand-line);
}

.onboard__step:nth-child(even) .onboard__visual {
    order: -1;
}

.onboard__body {
    display: grid;
    justify-items: start;
    max-width: 440px;
}

.onboard__step:nth-child(even) .onboard__body {
    justify-self: end;
}

.onboard__n {
    margin-bottom: var(--s-3);
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.onboard__body h3 {
    margin-block: var(--s-3) var(--s-2);
    font-size: clamp(1.25rem, 0.9vw + 1rem, 1.625rem);
    line-height: var(--lh-head);
}

.onboard__body p {
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.onboard__visual {
    width: min(100%, 380px);
}

.onboard__step:nth-child(odd) .onboard__visual {
    justify-self: start;
}

.onboard__step:nth-child(even) .onboard__visual {
    justify-self: end;
}

.onboard .panel {
    box-shadow: var(--shadow-1);
}

.mini__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding-block: 10px;
    border-bottom: 1px solid var(--rule);
    font-size: var(--text-sm);
}

.mini__row > span:first-child {
    color: var(--ink-3);
}

.mini__row b {
    font-weight: 600;
}

.mini__logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--s-1) var(--s-3);
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--rule);
}

.mini__logos--tight {
    border-bottom: 0;
    padding-bottom: 0;
}

.mini__logo {
    display: grid;
    place-items: center;
    height: 36px;
}

.mini__logo img {
    width: auto;
    height: 26px;
    max-width: 100%;
    object-fit: contain;
}

.mini__bar {
    height: 6px;
    margin-block: var(--s-3) var(--s-4);
    border-radius: 3px;
    background: var(--paper-2);
    overflow: hidden;
}

.mini__bar i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--brand-line);
    transform-origin: left;
    animation: fill 2.4s var(--ease-out) both;
}

html[dir="rtl"] .mini__bar {
    direction: ltr;
}

@keyframes fill {
    from {
        transform: scaleX(0);
    }
}

.mini__ticks {
    display: grid;
    gap: 6px;
}

.mini__ticks li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-2);
}

.mini__ticks svg {
    width: 15px;
    height: 15px;
    color: var(--ok);
}

.mini__pipe {
    position: relative;
    display: grid;
    gap: var(--s-3);
    padding-block: var(--s-2);
}

.mini__pipe::before {
    content: "";
    position: absolute;
    inset-block: 14px;
    inset-inline-start: 4px;
    border-inline-start: 1px dashed var(--rule-strong);
}

.mini__pipe li {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-sm);
    font-weight: 600;
}

.mini__pipe i {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-line);
    box-shadow: 0 0 0 3px var(--surface);
}

.mini__pipe li:last-child i {
    animation: pulse 2s infinite;
}

.status {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink-2);
}

.status--pending {
    border-color: color-mix(in srgb, var(--signal) 45%, transparent);
    background: color-mix(in srgb, var(--signal) 12%, var(--surface));
    color: var(--signal);
}

.status--done {
    border-color: color-mix(in srgb, var(--brand-line) 45%, transparent);
    background: color-mix(in srgb, var(--brand-line) 12%, var(--surface));
    color: var(--ok);
}

/* ------------------------------------------------------------ integrations directory */
.dir-group {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-8);
    padding-block: var(--s-6);
    border-top: 1px solid var(--rule);
}

.dir-group:first-of-type {
    border-top-color: var(--ink);
}

.dir-group__head h3 {
    font-size: var(--text-h3);
    margin-bottom: var(--s-2);
}

.dir-group__head p {
    font-size: var(--text-sm);
    color: var(--ink-2);
    max-width: 36ch;
}

.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    column-gap: var(--s-5);
}

.dir-tile {
    display: grid;
    justify-items: start;
    gap: var(--s-3);
    padding: var(--s-5) 0 var(--s-4);
    border-top: 1px solid var(--rule);
    transition: border-color var(--dur-2) ease;
}

.dir-tile:hover {
    border-top-color: var(--brand-line);
}

.dir-tile__logo {
    display: flex;
    align-items: center;
    height: 44px;
    transition: transform var(--dur-2) var(--ease-out);
}

.dir-tile:hover .dir-tile__logo {
    transform: translateY(-3px);
}

.dir-tile__logo img {
    width: auto;
    height: 34px;
    max-width: 130px;
    object-fit: contain;
    object-position: left center;
}

html[dir="rtl"] .dir-tile__logo img {
    object-position: right center;
}

.dir-tile__name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-3);
    transition: color var(--dur-1) ease;
}

.dir-tile:hover .dir-tile__name {
    color: var(--ink);
}

.dir-tile.is-soon .dir-tile__logo {
    filter: grayscale(1);
    opacity: 0.55;
}

.dir-tile__soon {
    display: inline-block;
    margin-inline-start: var(--s-2);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
}

.dir-group__count {
    display: inline-block;
    margin-bottom: var(--s-2);
    font-size: var(--text-xs);
    color: var(--brand);
}

/* ------------------------------------------------------------ integration sync table */
.sync {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--ink);
    font-size: var(--text-sm);
}

.sync thead th {
    padding: var(--s-3) var(--s-4) var(--s-3) 0;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-3);
    text-align: start;
    border-bottom: 1px solid var(--rule);
}

html[dir="rtl"] .sync thead th,
html[dir="rtl"] .sync tbody :is(th, td) {
    padding-inline: 0 var(--s-4);
}

.sync tbody :is(th, td) {
    padding: var(--s-5) var(--s-4) var(--s-5) 0;
    border-bottom: 1px solid var(--rule);
    text-align: start;
    vertical-align: middle;
}

.sync tbody th {
    width: 28%;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--ink);
}

.sync tbody td:last-child {
    color: var(--ink-2);
}

.sync__dir {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

html[data-theme="dark"] .sync__dir {
    color: var(--brand-line);
}

.sync__dir--out {
    background: var(--brand);
    color: var(--on-brand);
}

html[data-theme="dark"] .sync__dir--out {
    color: var(--on-brand);
}

.sync__dir svg {
    width: 14px;
    height: 14px;
    flex: none;
}

html[dir="rtl"] .sync__dir svg {
    transform: scaleX(-1);
}

.sync__vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sync__note {
    margin-top: var(--s-5);
    max-width: 70ch;
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.sync__guides {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
}

/* ------------------------------------------------------------ platform integration page */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-3);
}

.crumbs a {
    color: var(--brand-line);
}

.crumbs a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.platform-logo {
    display: inline-flex;
    align-items: center;
    height: 64px;
    margin-bottom: var(--s-5);
    padding: 12px 20px;
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.platform-logo img {
    width: auto;
    height: 36px;
    max-width: 150px;
    object-fit: contain;
}

@media (max-width: 640px) {
    .sync thead {
        display: none;
    }

    .sync,
    .sync tbody,
    .sync tr {
        display: block;
    }

    .sync tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--s-2) var(--s-3);
        padding-block: var(--s-4);
        border-bottom: 1px solid var(--rule);
    }

    .sync tbody :is(th, td),
    html[dir="rtl"] .sync tbody :is(th, td) {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
    }

    .sync tbody td:last-child {
        grid-column: 1 / -1;
    }
}

html[data-theme="dark"] .dir-group__count {
    color: var(--brand-line);
}

/* ------------------------------------------------------------ API showcase */
.api {
    padding-block: var(--section);
    background: var(--code-bg);
    color: #e9ece7;
    --api-mute: #9fb0a8;
    --api-rule: rgba(233, 236, 231, 0.12);
}

.api__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

.api h2 {
    font-size: var(--text-h2);
    line-height: var(--lh-head);
    letter-spacing: var(--track-head);
}

.api .lead {
    margin-top: var(--s-4);
    color: var(--api-mute);
}

.api code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.api__headers {
    margin-top: var(--s-6);
    border-top: 1px solid var(--api-rule);
}

.api__headers div {
    display: grid;
    gap: var(--s-1);
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--api-rule);
}

.api__headers dt code {
    color: #8fe0b5;
}

.api__headers dd {
    font-size: var(--text-sm);
    color: var(--api-mute);
}

.api__more {
    margin-top: var(--s-6);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--api-mute);
}

.api__endpoints {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2) var(--s-4);
    margin-top: var(--s-3);
}

.api__endpoints li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}

.api__endpoints code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #d5dcd7;
}

.api__verb {
    flex: none;
    min-width: 44px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(233, 236, 231, 0.08);
    font: 600 10px/1.6 var(--font-mono);
    letter-spacing: 0.04em;
    text-align: center;
    color: #c8d2cc;
}

.api__verb--post {
    background: rgba(76, 194, 140, 0.16);
    color: #8fe0b5;
}

.api__verb--get {
    background: rgba(120, 170, 255, 0.14);
    color: #a9c6ff;
}

.code {
    border: 1px solid var(--api-rule);
    border-radius: var(--r-2);
    background: #141f1b;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    text-align: left;
}

.code__bar {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--api-rule);
}

.code__tab {
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--api-mute);
    cursor: pointer;
}

.code__tab:hover {
    color: #e9ece7;
}

.code__tab.is-on {
    background: rgba(233, 236, 231, 0.1);
    color: #ffffff;
}

.code__path {
    margin-left: auto;
    font: 500 11px/1 var(--font-mono);
    color: var(--api-mute);
}

.code__body {
    margin: 0;
    padding: var(--s-5);
    overflow: auto;
    font: 400 12.5px/1.75 var(--font-mono);
    color: #d5dcd7;
    tab-size: 2;
    scrollbar-color: #2c3a35 transparent;
}

.tok-verb {
    color: #8fe0b5;
    font-weight: 600;
}

.tok-head {
    color: #a9c6ff;
}

.tok-key {
    color: #a9c6ff;
}

.tok-str {
    color: #f0c987;
}

.tok-num {
    color: #8fe0b5;
}

.tok-lit {
    color: #f29b9b;
}

html[data-theme="dark"] .api {
    background: #0a100e;
    border-block: 1px solid var(--rule);
}

.api :focus-visible {
    outline-color: #8fe0b5;
}

/* ------------------------------------------------------------ footer */
.site-foot {
    padding-block: var(--s-9) var(--s-6);
    font-size: var(--text-sm);
}

.site-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
    gap: var(--s-7);
}

.site-foot__about p {
    margin-top: var(--s-4);
    color: var(--ink-2);
    max-width: 44ch;
}

.site-foot__about address {
    margin-top: var(--s-4);
    font-style: normal;
    color: var(--ink-3);
    max-width: 44ch;
}

.social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    color: var(--ink-2);
    transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}

.social a:hover {
    color: var(--on-brand);
    background: var(--brand);
    border-color: var(--brand);
}

.social svg {
    width: 17px;
    height: 17px;
}

.site-foot h2 {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: var(--s-4);
}

.site-foot__col ul {
    display: grid;
    gap: var(--s-2);
}

.site-foot__col a {
    color: var(--ink-2);
}

.site-foot__col a:hover {
    color: var(--ink);
}

.site-foot__col a[dir="ltr"] {
    unicode-bidi: isolate;
}

.site-foot__base {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--rule);
    color: var(--ink-3);
    font-size: var(--text-xs);
}

.site-foot__base a:hover {
    color: var(--ink);
}

/* ------------------------------------------------------------ floating */
.wa-f {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    animation: wa-pulse 2.6s infinite;
}

.wa-f svg {
    width: 34px;
    height: 34px;
}

.wa-f::after {
    content: "1";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font: 700 11px/16px var(--font);
    text-align: center;
}

.wa-l {
    position: absolute;
    right: 72px;
    padding: 9px 15px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    animation: wa-label 6s 2s 1;
}

.wa-f:hover .wa-l,
.wa-f:focus-visible .wa-l {
    opacity: 1;
    transform: none;
}

@keyframes wa-pulse {
    0% {
        box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.8), 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    70%,
    100% {
        box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.8), 0 0 0 18px rgba(37, 211, 102, 0);
    }
}

@keyframes wa-label {
    0% {
        opacity: 0;
    }

    12%,
    80% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
    }
}

#sp {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    height: 2px;
    background: var(--brand-line);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

html[dir="rtl"] #sp {
    transform-origin: right;
}

#up {
    position: fixed;
    right: 26px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(var(--brand-line) var(--p, 0deg), var(--rule) 0);
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
}

#up::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--surface);
}

#up.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#up.show:hover {
    transform: translateY(-2px);
}

#up svg {
    position: relative;
    width: 20px;
    height: 20px;
}

/* ------------------------------------------------------------ dark theme media */

html[data-theme="dark"] .logo-chip--zid img,
html[data-theme="dark"] .logo-chip--salla img,
html[data-theme="dark"] .dir-tile--zid img,
html[data-theme="dark"] .dir-tile--salla img,
html[data-theme="dark"] .dir-tile--imile img,
html[data-theme="dark"] .dir-tile--fedex img,
html[data-theme="dark"] .dir-tile--smsa img,
html[data-theme="dark"] .mini__logo--zid img,
html[data-theme="dark"] .mini__logo--salla img,
html[data-theme="dark"] .mini__logo--smsa img {
    filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

html[data-theme="dark"] .brand__mark {
    filter: invert(1) brightness(1.1);
}

html[data-theme="dark"] .fig {
    filter: invert(0.9) hue-rotate(180deg);
}

html[data-theme="dark"] .device {
    background: #050807;
    box-shadow: var(--shadow-2), inset 0 0 0 1px #2a3531;
}

html[data-theme="dark"] .ship-label {
    border-color: transparent;
}

/* ------------------------------------------------------------ page motion */
main {
    animation: page-in var(--dur-2) var(--ease-out) both;
}

main.is-leaving {
    opacity: 0;
    transition: opacity var(--dur-1) ease;
}

@keyframes page-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.hero__copy > * {
    animation: rise 900ms var(--ease-out) both;
}

.hero__copy > :nth-child(2) {
    animation-delay: 90ms;
}

.hero__copy > :nth-child(3) {
    animation-delay: 180ms;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .marquee,
    .voices__row {
        overflow-x: auto;
    }

    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .js-reveal [data-reveal="wipe"] .wipe__in,
    html[dir="rtl"].js-reveal [data-reveal="wipe"] .wipe__in {
        clip-path: none;
    }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1240px) {
    .site-nav {
        gap: 18px;
    }

    .site-head__bar {
        gap: var(--s-3);
    }
}

@media (max-width: 1080px) {
    .site-nav {
        gap: 14px;
    }

    .ledger--4 {
        --cols: 3;
    }

    .site-foot__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-foot__about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 960px) {
    :root {
        --head-h: 64px;
    }

    .menu-toggle {
        display: grid;
    }

    .site-head__bar {
        display: flex;
        justify-content: space-between;
    }

    .site-nav {
        position: absolute;
        inset: var(--head-h) 0 auto;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: var(--s-3) var(--gutter) var(--s-5);
        border: 0;
        border-bottom: 1px solid var(--rule);
        border-radius: 0;
        background: var(--surface);
        box-shadow: 0 18px 30px -20px rgba(15, 27, 23, 0.35);
    }

    .site-head.is-open .site-nav {
        display: flex;
    }

    .site-nav a {
        padding: 14px 4px;
        border-bottom: 1px solid var(--rule);
        font-size: var(--text-md);
    }

    .site-nav a::after {
        display: none;
    }

    .site-nav a[aria-current="page"] {
        color: var(--brand);
        font-weight: 700;
    }

    .contact-info {
        display: contents;
    }

    .contact-info .lead {
        margin-top: calc(var(--s-3) * -1);
    }

    .contact__form {
        order: 1;
        justify-self: stretch;
        max-width: none;
    }

    .contact-info .contact__facts {
        order: 2;
        margin-top: 0;
    }

    .contact-info .wa-card {
        order: 3;
        margin-top: 0;
    }

    .contact-split {
        gap: var(--s-5);
    }

    .contact-split,
    .hero__grid,
    .split__grid,
    .partners__grid,
    .closing__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__figure .fig {
        min-height: 0;
        max-width: 360px;
        margin-inline: auto;
    }

    .split--flip .panel,
    .split .panel {
        order: 2;
    }

    .spec {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spec__item:nth-child(3) {
        border-inline-start: 0;
        padding-inline-start: 0;
    }

    .spec__item:nth-child(n + 3) {
        border-top: 1px solid var(--rule);
    }

    .ledger--3,
    .ledger--4 {
        --cols: 2;
    }

    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .isolation,
    .unlimited__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zigzag::before,
    .zigzag__step::after,
    .onboard::before,
    .onboard__step::after {
        display: none;
    }

    .onboard__step {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-5);
    }

    .onboard__step:nth-child(even) .onboard__visual {
        order: 0;
    }

    .onboard__step:nth-child(even) .onboard__body,
    .onboard__step:nth-child(even) .onboard__visual {
        justify-self: start;
    }

    .zigzag__step {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-5);
    }

    .zigzag__step:nth-child(even) .zigzag__figure {
        order: 0;
    }

    .zigzag__step:nth-child(even) .zigzag__body {
        justify-self: start;
    }

    .zigzag__figure .fig {
        max-width: 240px;
        min-height: 0;
    }

    .hero--full {
        height: auto;
        min-height: 0;
    }

    .hero--full .hero__figure svg {
        max-height: none;
    }

    .hero__events {
        display: grid;
    }

    .api__grid,
    .dir-group {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-6);
    }
}

@media (max-width: 640px) {
    .site-head__actions .btn {
        display: none;
    }

    .site-head__bar {
        gap: var(--s-3);
    }

    .site-head__actions {
        gap: 6px;
    }

    .site-head .brand {
        gap: var(--s-2);
        font-size: 1rem;
    }

    .site-head .brand__mark {
        width: 24px;
        height: 24px;
    }

    .steps,
    .api__endpoints,
    .isolation__map,
    .spec,
    .ledger--2,
    .ledger--3,
    .ledger--4,
    .timeline,
    .field-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .spec__item,
    html[dir="rtl"] .spec__item,
    .spec__item + .spec__item {
        padding-inline: 0;
        border-inline-start: 0;
    }

    .spec__item + .spec__item {
        border-top: 1px solid var(--rule);
    }

    .ledger__cell,
    html[dir="rtl"] .ledger__cell {
        padding-inline: 0;
    }

    .steps__item,
    html[dir="rtl"] .steps__item {
        padding-inline: 0;
    }

    .dir-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .code__path {
        display: none;
    }

    .quote {
        width: 280px;
    }

    .scale__shelf {
        width: 34%;
    }

    .stats__item {
        flex-basis: calc(50% - 1px);
    }

    .stats__item:nth-child(even) {
        border-inline-start: 1px solid var(--rule);
        padding-inline-start: var(--s-4);
    }

    .timeline li,
    html[dir="rtl"] .timeline li {
        padding-inline: 0;
        padding-bottom: var(--s-5);
        border-bottom: 1px solid var(--rule);
    }

    .actions .btn {
        flex: 1 1 100%;
    }

    .device {
        width: 252px;
    }

    .device__screen {
        height: 500px;
    }

    .wa-l {
        display: none;
    }

    .site-foot__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .site-foot__base {
        flex-direction: column;
    }

    .closing__facts div {
        grid-template-columns: 5.5rem 1fr;
    }
}

/* ------------------------------------------------------------ skip link */
.skip-link {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--r-1);
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* ------------------------------------------------------------ chat launcher (always bottom-left) */
.chat-launch {
    position: fixed;
    left: 18px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 2px solid rgba(76, 194, 140, 0.55);
    border-radius: 50%;
    background: #0f2a22;
    color: #f6f5f0;
    box-shadow: 0 16px 34px -12px rgba(8, 28, 21, 0.75), 0 2px 6px rgba(8, 28, 21, 0.25);
    cursor: pointer;
    transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1) ease, opacity var(--dur-2) ease;
}

html[data-theme="dark"] .chat-launch {
    background: #1f7352;
    border-color: rgba(246, 245, 240, 0.35);
}

.chat-launch:hover {
    transform: translateY(-3px) scale(1.04);
}

.chat-launch:active {
    transform: scale(0.92);
    transition-duration: 0.08s;
}

.chat-launch__ico {
    grid-area: 1 / 1;
    width: 26px;
    height: 26px;
    transform-origin: 50% 80%;
    transition: transform 0.38s var(--ease-out), opacity 0.2s ease;
}

.chat-launch__ico--close {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    transform-origin: 50% 50%;
    opacity: 0;
    transform: rotate(-90deg) scale(0.4);
}

.chat-launch[aria-expanded="true"] {
    background: #1f7352;
    border-color: rgba(246, 245, 240, 0.4);
}

.chat-launch[aria-expanded="true"] .chat-launch__ico--open {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
}

.chat-launch[aria-expanded="true"] .chat-launch__ico--close {
    opacity: 1;
    transform: none;
}

.chat-launch[aria-expanded="true"] .chat-launch__dot,
.chat-launch[aria-expanded="true"] .chat-launch__label {
    opacity: 0;
    transform: scale(0.4);
}

.chat-launch.is-loading::after {
    opacity: 1;
    border-color: transparent;
    border-top-color: #4cc28c;
    border-inline-end-color: #4cc28c;
    animation: cl-spin 0.7s linear infinite;
}

@keyframes cl-spin {
    to {
        transform: rotate(360deg);
    }
}

.chat-launch::before,
.chat-launch::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid #4cc28c;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.chat-launch.is-ring::before {
    animation: cl-ring 1.5s ease-out 2;
}

.chat-launch.is-ring::after {
    animation: cl-ring 1.5s ease-out 0.45s 2;
}

.chat-launch.is-ring .chat-launch__ico--open {
    animation: cl-wiggle 0.8s ease 2;
}

@keyframes cl-ring {
    0% {
        opacity: 0.75;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes cl-wiggle {
    0%,
    100% {
        transform: rotate(0);
    }

    20% {
        transform: rotate(-14deg);
    }

    40% {
        transform: rotate(12deg);
    }

    60% {
        transform: rotate(-8deg);
    }

    80% {
        transform: rotate(5deg);
    }
}

.chat-launch__dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: #4cc28c;
    transition: opacity 0.2s ease, transform 0.25s var(--ease-out);
}

.chat-launch__label {
    position: absolute;
    left: 70px;
    padding: 9px 15px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.chat-launch:hover .chat-launch__label,
.chat-launch:focus-visible .chat-launch__label {
    opacity: 1;
    transform: none;
}

/* On phones the chat panel covers the screen and has its own close button. */
@media (max-width: 640px) {
    .cb-open .chat-launch {
        opacity: 0;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-launch.is-ring::before,
    .chat-launch.is-ring::after,
    .chat-launch.is-ring .chat-launch__ico--open {
        animation: none;
    }

    .chat-launch__ico {
        transition: opacity 0.2s ease;
    }
}

.contact-status {
    margin-bottom: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
    border-radius: var(--r-2);
    background: color-mix(in srgb, var(--ok) 10%, var(--surface));
    font-weight: 600;
}