/* ArmPOS homepage body (landing-two), built to hercules.app's design.
   Values were measured off the rendered reference (D:\armpos-hercules\probe-1440.json),
   not read off screenshots. Every colour comes from the tokens below: to move the page
   to another palette, change the --h-* scale and nothing else. */

@font-face {
    font-family: "Geist";
    src: url("../fonts/geist/geist-latin-wght-normal.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist";
    src: url("../fonts/geist/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/geist/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Tokens sit on the body (.landing-v2) so the menu (landing-menu.css) can use them too. */
.landing-v2 {
    /* ArmPOS brand (Rio, 2026-10-13: "make sure we have our brand colors"): the old official
       site's navy, mint and green, measured from his screenshots. Greens run light to dark;
       900 and 950 are the brand navy, for ink and headings. */
    --h-50: #eefffa;    /* the page mint */
    --h-100: #d9f7e8;
    --h-200: #b5ecd1;
    --h-300: #8adcae;
    --h-400: #61ce70;   /* the brand green (buttons, with navy text) */
    --h-500: #2d9a4b;
    --h-600: #16823f;
    --h-700: #12663a;
    --h-800: #0e4f2d;
    --h-900: #1e2a44;
    --h-950: #151e31;   /* the brand navy */
    /* Text, as armpos.online writes it (Rio, 2026-10-13: "these are our global text colors apply
       it to all front facing pages"), read off the live site's computed styles:
       on light, headings in navy and body copy in navy at 65% (5.21 on white, 5.14 on mint,
       5.04 on --h-fill); on navy, headings in pale mint and body copy in mint at 72% (14.5, 8.87).
       Its green #66d097 and amber #f8b93f are text on navy only: 1.84 and 1.75 on light, so
       green text on light is --h-600 (4.88). */
    --h-text: rgb(21 30 49 / 0.65);
    --h-on-dark: #d8f6ee;
    --h-on-dark-text: rgb(238 255 250 / 0.72);
    --h-accent-on-dark: #66d097;
    --h-soft: var(--h-text);
    --h-line: rgb(30 42 68 / 0.12);    /* navy at 12%: tab borders */
    --h-soft-strong: var(--h-text);

    /* Measured pairs (contrast.py), all AA: white on the button green 1.99:1, so primary
       buttons carry navy text, 8.38. Green text on white or mint is --h-600 (4.88) or
       --h-700 (6.17 on --h-100). Accent gradients end on --h-500 (3.48 on mint, large text).
       Carousel dots: --h-500 vs the page 3.48, the current one --h-700. */

    /* Neutrals, tinted to the brand. */
    --h-ink: #151e31;
    --h-ink-2: var(--h-ink);       /* the live site has one ink: strong copy is the heading navy */
    --h-muted: var(--h-text);      /* secondary copy is the body colour (it was slate #5a6b85) */
    --h-muted-2: var(--h-text);
    --h-border: #dce8e3;
    --h-fill: #f1f7f4;
    --h-card: #fff;
    --h-sand: #eefffa;
    --h-amber: #f8b93f;
    --h-green: #12663a;
    --h-green-soft: #d9f7e8;

    --h-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --h-shadow-card: 0 20px 25px -5px rgb(0 0 0 / 0.04), 0 8px 10px -6px rgb(0 0 0 / 0.04);
}

.h-page {
    font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--h-ink);
    background: var(--h-sand);
}
/* Resets weigh one class: they beat Bootstrap's element rules, and tie with the
   component rules below, which win by coming later. */
.h-page :where(*, *::before, *::after) { box-sizing: border-box; }
.h-page :where(h1, h2, h3, p, figure, blockquote, ul) { margin: 0; }
.h-page :where(ul) { padding: 0; list-style: none; }
.h-page :where(a) { color: inherit; text-decoration: none; }
.h-page :where(button) { font: inherit; color: inherit; }

/* Page background: sand fading to theme-50, under a diagonal lattice. */
.h-main {
    position: relative;
    background: linear-gradient(to top, var(--h-50) 0%, var(--h-sand) 50%, var(--h-sand) 100%);
    overflow: clip; /* clips like hidden without becoming a scroll box, so sticky inside works (/pricing) */
}
.h-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../images/home/grid.svg") 50% 50% / 80px 80px repeat;
    pointer-events: none;
}
.h-main > * { position: relative; }

/* Shared type */
.h-h2 {
    font-size: 36px;
    line-height: 45px;
    font-weight: 600;
    letter-spacing: -0.9px;
    color: var(--h-950);
    text-align: center;
    text-wrap: balance;
}
.h-grad {
    background: linear-gradient(to right, var(--h-700), var(--h-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.h-grad--deep { background-image: linear-gradient(to left bottom, var(--h-900), var(--h-700) 50%, var(--h-500)); }

/* Button: pill, the brand green with navy text (white on it is 1.99:1) */
.h-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--h-400);
    color: var(--h-950);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.h-btn:hover { background: var(--h-300); }
.h-btn i { font-size: 14px; }
.h-page :focus-visible { outline: 3px solid color-mix(in oklch, var(--h-500) 50%, transparent); outline-offset: 2px; }

/* ── Hero: ArmPOS's own design ───────────────────────────────────────
   Measured from Rio's screenshots of the old official site (2026-10-13): navy card
   rgb(21,30,49), mint headline rgb(189,244,229), button green rgb(97,206,112), amber
   badge dot rgb(248,185,63), green glow rgb(26,99,67). Headline IBM Plex Sans 600.
   Deviations, measured (screen §6b): white on the button green is 1.99:1, so its label
   is navy (8.38); the badge's green text was ~2:1 on white, now --h-600 (4.88). */
.h-hero2 { padding: 16px 24px 0; }
.h-hero2__card {
    position: relative;
    max-width: 1392px;
    margin: 0 auto;
    padding: 120px 24px 0;
    overflow: hidden;
    border-radius: 24px;
    background: var(--h-950);
    isolation: isolate;
}
.h-hero2__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 46% 52% at 50% 92%, rgb(30 122 78 / 0.95), rgb(26 99 67 / 0.55) 45%, transparent 75%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgb(26 99 67 / 0.35), transparent 70%);
    animation: h-breathe 8s ease-in-out infinite alternate;
}
.h-hero2__copy { max-width: 760px; margin: 0 auto; text-align: center; }
.h-hero2__title { max-width: 720px; margin-left: auto; margin-right: auto; }
.h-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 12px 0 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--h-600);
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.12);
}
.h-badge__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f8b93f;
    box-shadow: 0 0 0 3px rgb(248 185 63 / 0.25);
    animation: h-dot 2.4s ease-in-out infinite;
}
.h-hero2__title {
    margin-top: 22px;
    font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #bdf4e5;
}
.h-hero2__title em, .h-hero2__title span, .h-hero2__title strong {
    display: inline-block;
    font-style: normal;
    font-weight: inherit;
    color: var(--h-400);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.h-hero2__title em.is-swapping { opacity: 0; transform: translateY(8px); }
.h-hero2__lead {
    max-width: 480px;
    margin: 20px auto 0;
    color: #fff;
    font-size: 13.5px;
    line-height: 1.42;
    font-weight: 500;
}
.h-hero2__lead + .h-hero2__lead { margin-top: 12px; }
.h-tabs--dark { margin-top: 28px; }
.h-tabs--dark .h-tab { border-color: rgb(255 255 255 / 0.16); color: rgb(255 255 255 / 0.78); }
.h-tabs--dark .h-tab:hover { color: #fff; border-color: rgb(255 255 255 / 0.32); }
.h-tabs--dark .h-tab[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--h-950); }
.h-hero2__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; }
.h-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    height: 38px;
    padding: 0 24px;
    border: 1px solid var(--h-400);
    border-radius: 5px;
    background: var(--h-400);
    color: var(--h-950);
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.h-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -6px rgb(97 206 112 / 0.6); }
.h-cta-btn--ghost { background: #fff; color: var(--h-600); }
.h-cta-btn--ghost:hover { box-shadow: 0 8px 22px -8px rgb(255 255 255 / 0.5); }
.h-hero__notice { margin: 16px auto 0; max-width: 768px; text-align: center; font-size: 14px; color: var(--h-muted-2); }
.h-hero__notice a { color: var(--h-700); text-decoration: underline; }

/* The stage: drawn in 940 x 405 units, scaled as one piece (--u is one unit). */
.h-stage-wrap { margin-top: 44px; container-type: inline-size; direction: ltr; } /* where the stage sits is the wrapper's call: keep it left-to-right in RTL too */
.h-stage {
    --u: clamp(0.78px, calc(100cqw / 940), 1px);
    --w: 940;
    --h: 405;
    position: relative;
    left: 50%;
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    transform: translateX(-50%);
    font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
    direction: ltr;
}
[dir="rtl"] .h-mock { direction: rtl; }
.h-stage > * { position: absolute; }
.h-stage__lines { inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.h-stage__lines path {
    fill: none;
    stroke: rgb(97 206 112 / 0.32);
    stroke-width: 1.2;
    stroke-dasharray: 5 6;
    vector-effect: non-scaling-stroke;
    animation: h-march 2.6s linear infinite;
}
.h-stage__lines--phone { display: none; }
.h-node {
    --x: 0; --y: 0;
    left: calc(var(--x) * var(--u) - 5px);
    top: calc(var(--y) * var(--u) - 5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--h-400);
    z-index: 2;
    animation: h-node 2.4s ease-out infinite;
}
.h-node--a { --x: 118; --y: 231; }
.h-node--b { --x: 893; --y: 231; animation-delay: 0.8s; }
.h-node--c { --x: 626; --y: 100; animation-delay: 1.6s; }
.h-stage__person {
    left: calc(256 * var(--u));
    bottom: 0;
    width: calc(426 * var(--u));
    height: auto;
    z-index: 3;
    animation: h-person 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) 0.35s both;
}

/* Floating cards: --x/--y/--w in stage units; the outer box enters, the inner one bobs. */
.h-float {
    --x: 0; --y: 0; --cw: 110;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--cw) * var(--u));
    z-index: 4;
    animation: h-pop 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) both;
    animation-delay: calc(0.75s + var(--d) * 0.12s);
}
.h-float--revenue { --x: 77; --y: 15; --cw: 110; }
.h-float--payment { --x: 180; --y: 214; --cw: 104; z-index: 2; }
.h-float--stock { --x: 59; --y: 278; --cw: 118; }
.h-float--sales { --x: 518; --y: 158; --cw: 218; }
.h-float--ring { --x: 748; --y: 69; --cw: 149; }
.h-float--orders { --x: 818; --y: 279; --cw: 119; }
.h-mock {
    position: relative;
    padding: calc(8 * var(--u));
    border-radius: calc(4 * var(--u));
    background: #fff;
    color: #1e293b;
    box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgb(0 0 0 / 0.28);
    font-size: calc(7 * var(--u));
    line-height: 1.3;
    animation: h-bob 6s ease-in-out infinite;
    animation-delay: calc(var(--d) * -1.1s);
}
.h-mock small { display: block; color: #6b7280; font-size: calc(6.5 * var(--u)); }
.h-mock b { font-weight: 600; }
.h-mock em { font-style: normal; color: #16a34a; }
.h-mock__row { display: flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(2 * var(--u)); font-size: calc(9 * var(--u)); }
.h-mock__row em { padding: 0 calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: #dcfce7; font-size: calc(5.5 * var(--u)); }
.h-mock__area { display: block; width: 100%; height: calc(62 * var(--u)); margin-top: calc(6 * var(--u)); }
.h-mock__tip {
    position: absolute;
    top: calc(36 * var(--u));
    left: calc(60 * var(--u));
    padding: calc(1 * var(--u)) calc(4 * var(--u));
    border-radius: calc(3 * var(--u));
    background: #1e293b;
    color: #fff;
    font-size: calc(5 * var(--u));
}
.h-mock__axis { display: flex; justify-content: space-between; margin-top: calc(3 * var(--u)); color: #9ca3af; font-size: calc(4.5 * var(--u)); }
.h-mock__axis i { font-style: normal; }
.h-mock--line { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(7 * var(--u)) calc(8 * var(--u)); }
.h-mock--line b { display: block; font-size: calc(7.5 * var(--u)); }
.h-mock__check { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: #22c55e; color: #fff; font-size: calc(7 * var(--u)); }
.h-mock__big { display: block; margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); font-variant-numeric: tabular-nums; }
.h-mock__trend { display: flex; align-items: center; gap: calc(2 * var(--u)); margin-top: calc(5 * var(--u)); color: #6b7280; font-size: calc(5.5 * var(--u)); }
.h-mock__trend i { color: #16a34a; }
.h-mock__head { display: flex; align-items: center; justify-content: space-between; font-size: calc(6.5 * var(--u)); }
.h-mock__legend { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); color: #6b7280; font-size: calc(5 * var(--u)); }
.h-mock__legend i { width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; }
.h-mock__legend i.is-green { background: #22c55e; }
.h-mock__legend i.is-blue { background: #3b82f6; margin-left: calc(4 * var(--u)); }
.h-mock__chart { position: relative; display: flex; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); }
.h-mock__chart svg { flex: 1; height: calc(90 * var(--u)); }
.h-mock__y { display: flex; flex-direction: column; justify-content: space-between; padding: calc(3 * var(--u)) 0 calc(8 * var(--u)); color: #9ca3af; font-size: calc(4.5 * var(--u)); }
.h-mock__y i { font-style: normal; }
.h-mock__tip--sales { top: calc(-2 * var(--u)); left: calc(62 * var(--u)); text-align: center; line-height: 1.25; }
.h-mock__tip--sales small { color: #cbd5e1; font-size: calc(4 * var(--u)); }
.h-mock__axis--sales { padding-left: calc(14 * var(--u)); }
.h-mock__ring { flex-shrink: 0; width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.h-mock__spark { display: flex; align-items: center; gap: calc(3 * var(--u)); margin-top: calc(3 * var(--u)); }
.h-mock__spark svg { width: calc(30 * var(--u)); height: calc(8 * var(--u)); }
.h-mock__dots { position: absolute; top: calc(2 * var(--u)); right: calc(6 * var(--u)); color: #9ca3af; font-style: normal; font-size: calc(7 * var(--u)); }
.h-mock__title { display: flex; align-items: center; gap: calc(6 * var(--u)); color: #6b7280; font-size: calc(7.5 * var(--u)); }
.h-mock__basket { display: inline-flex; align-items: center; justify-content: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(4 * var(--u)); background: #dbeafe; color: #2563eb; font-size: calc(9 * var(--u)); }
.h-float--orders .h-mock { padding: calc(12 * var(--u)); }
.h-float--orders .h-mock__big { margin-top: calc(12 * var(--u)); font-size: calc(14 * var(--u)); }
.h-float--orders .h-mock__trend { margin-top: calc(12 * var(--u)); }

/* Chart lines draw in; the ring fills to its figure. */
.h-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: h-draw 1.8s ease 1.2s forwards; }
.h-ring { stroke-dasharray: 70 100; animation: h-ring 1.6s ease 1.2s both; }

@keyframes h-rise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes h-person { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes h-pop { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes h-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-6 * var(--u))); } }
@keyframes h-march { to { stroke-dashoffset: -22; } }
@keyframes h-node { 0% { box-shadow: 0 0 0 0 rgb(97 206 112 / 0.6); } 80%, 100% { box-shadow: 0 0 0 12px rgb(97 206 112 / 0); } }
@keyframes h-dot { 50% { box-shadow: 0 0 0 6px rgb(248 185 63 / 0.12); } }
@keyframes h-breathe { from { opacity: 0.82; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
@keyframes h-draw { to { stroke-dashoffset: 0; } }
@keyframes h-ring { from { stroke-dasharray: 0 100; } }
.h-in { animation: h-rise 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) both; animation-delay: calc(0.1s + var(--d) * 0.09s); }

/* Tabs (shared by the hero) */
.h-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.h-tabs::-webkit-scrollbar { display: none; }
.h-tab {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--h-line);
    border-radius: 8px;
    background: transparent;
    color: var(--h-soft);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.h-tab i { font-size: 15px; }
.h-tab:hover { color: var(--h-950); }
.h-tab[aria-pressed="true"] {
    background: #fff;
    color: var(--h-950);
    font-weight: 500;
    box-shadow: var(--h-shadow-sm);
}

/* ── Inner page hero (pricing, ...): the old site's page hero ─────────
   Measured from Rio's screenshot (1904 wide): the navy card, a green glow rising from the
   bottom centre to rgb(27,121,72), a pale mint headline rgb(216,246,238) in IBM Plex 600
   (2 lines, about 62px), green checks rgb(102,208,151), and the switch on a pale mint pill. */
.h-phero__card {
    padding: 176px 24px 128px;
    text-align: center;
}
.h-phero__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 42% 78% at 50% 100%, rgb(31 133 79 / 0.95), rgb(26 105 68 / 0.6) 38%, transparent 74%),
        radial-gradient(ellipse 70% 60% at 50% 100%, rgb(26 99 67 / 0.3), transparent 72%);
    animation: h-breathe 8s ease-in-out infinite alternate;
}
.h-phero__title {
    max-width: 760px;
    margin: 0 auto;
    font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
    font-size: 62px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--h-on-dark);
    text-wrap: balance;
}
.h-phero__meta { margin-top: 22px; color: var(--h-on-dark-text); font-size: 15px; line-height: 24px; }
.h-phero__meta i { margin-inline-end: 8px; color: var(--h-accent-on-dark); }
.h-phero__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 30px;
    margin-top: 38px;
    color: var(--h-on-dark-text);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.h-phero__points li { display: inline-flex; align-items: center; gap: 10px; }
.h-phero__points i { color: var(--h-accent-on-dark); font-size: 18px; }
.h-phero__after { margin-top: 50px; }
.h-phero__after .h-cycle { margin: 0; }

/* The switch on a navy hero: the old site's pale mint pill, the active side green. */
.h-cycle--brand { gap: 6px; padding: 6px; border-radius: 9px; background: #d8f6ee; }
.h-cycle--brand .h-cycle__btn { min-width: 114px; justify-content: center; padding: 9px 22px; border-radius: 6px; color: var(--h-950); font-size: 15px; font-weight: 700; }
.h-cycle--brand .h-cycle__btn[aria-pressed="true"] { background: #66d097; color: var(--h-950); box-shadow: none; }
.h-cycle--brand .h-cycle__btn:not([aria-pressed="true"]):hover { background: rgb(102 208 151 / 0.25); }

.h-pricing--page { padding-top: 56px; }

/* ── Built for mobile (after the hero): the copy, a glowing logo card wired to a phone card ──
   The reference's layout (a 268px square card, a 420x460 card, a wire from one to the other),
   light and in the brand. The pieces arrive in turn when first seen (.is-armed, then .is-in, set
   by landing-home.js; without the script nothing is hidden), then the wire draws and a light
   runs along it. Rings turn slowly; the halo breathes. All of it stops under reduced motion. */
.h-mob { padding: 96px 32px; }
.h-mob__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px 420px;
    grid-template-rows: 268px 192px;
    column-gap: 20px;
    max-width: 1216px;
    margin: 0 auto;
}
.h-mob__copy { grid-column: 1; grid-row: 1 / 3; align-self: center; max-width: 470px; padding-inline-end: 24px; }
.h-mob__chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border: 1px solid rgb(22 130 63 / 0.22); border-radius: 999px;
    background: rgb(97 206 112 / 0.12); color: var(--h-700);
    font-size: 13px; line-height: 18px; font-weight: 600;
}
.h-mob__chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h-400); animation: h-node 2.4s ease-out infinite; }
.h-mob__title {
    margin-top: 18px;
    font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
    font-size: 44px; line-height: 1.15; font-weight: 600; letter-spacing: -0.6px;
    color: var(--h-ink); text-wrap: balance;
}
.h-mob__lead { margin-top: 14px; font-size: 17px; line-height: 28px; color: var(--h-text); }
.h-mob__badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.h-mob__badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px 9px 12px; border-radius: 12px;
    background: var(--h-950); color: #fff;
    box-shadow: 0 8px 20px -10px rgb(21 30 49 / 0.55);
}
.h-mob__badge i { color: var(--h-accent-on-dark); font-size: 22px; line-height: 1; }
.h-mob__badge span { display: flex; flex-direction: column; font-size: 15px; line-height: 19px; font-weight: 600; }
.h-mob__badge small { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--h-on-dark-text); }

/* The glowing card: the logo mark in a white disc, a breathing halo, three turning rings. */
.h-mob__glow {
    position: relative; grid-column: 2; grid-row: 1;
    display: grid; place-items: center; overflow: hidden;
    border: 1px solid var(--h-border); border-radius: 22px;
    background: radial-gradient(circle at 50% 50%, rgb(97 206 112 / 0.16), transparent 62%), #fff;
}
.h-mob__halo {
    position: absolute; width: 170px; height: 170px; border-radius: 50%;
    background: radial-gradient(circle, rgb(97 206 112 / 0.55), rgb(97 206 112 / 0) 70%);
    filter: blur(6px); animation: h-breathe 3.6s ease-in-out infinite alternate;
}
.h-mob__ring { position: absolute; border-radius: 50%; border: 1px dashed rgb(22 130 63 / 0.3); }
.h-mob__ring--1 { width: 128px; height: 128px; animation: h-mob-spin 38s linear infinite; }
.h-mob__ring--2 { width: 184px; height: 184px; border-style: dotted; border-color: rgb(22 130 63 / 0.22); animation: h-mob-spin 56s linear infinite reverse; }
.h-mob__ring--3 { width: 240px; height: 240px; border-color: rgb(22 130 63 / 0.14); animation: h-mob-spin 80s linear infinite; }
.h-mob__mark {
    position: relative; display: grid; place-items: center;
    width: 84px; height: 84px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 8px rgb(255 255 255 / 0.7), 0 14px 32px -8px rgb(22 130 63 / 0.35);
}
.h-mob__mark img { width: 56px; height: 56px; object-fit: contain; }
.h-mob__letter { font-family: "IBM Plex Sans", "Geist", sans-serif; font-size: 34px; font-weight: 700; color: var(--h-600); }

/* The wire: down from the logo card, then across to the phone card; a node at the turn, a light running. */
.h-mob__wire { position: relative; grid-column: 2; grid-row: 2; width: calc(50% + 20px); height: 118px; margin-inline-start: 50%; }
.h-mob__wire::before, .h-mob__wire::after { content: ""; position: absolute; background: rgb(22 130 63 / 0.35); }
.h-mob__wire::before { inset-inline-start: 0; top: 0; width: 1px; height: 100%; transform-origin: 50% 0; }
.h-mob__wire::after { inset-inline-start: 0; bottom: 0; width: 100%; height: 1px; transform-origin: 0 50%; }
.h-mob.is-in .h-mob__wire::before { transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) 0.55s; }
.h-mob.is-in .h-mob__wire::after { transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1) 1.05s; }
[dir="rtl"] .h-mob__wire::after { transform-origin: 100% 50%; }
.h-mob__node {
    position: absolute; inset-inline-start: -5px; bottom: -5px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--h-400); box-shadow: 0 0 0 3px #fff;
}
.h-mob.is-in .h-mob__node { transition: opacity 0.4s ease 1s; animation: h-node 2.4s ease-out 1.4s infinite; }
.h-mob__pulse {
    position: absolute; inset-inline-start: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 2px var(--h-400), 0 0 14px 4px rgb(97 206 112 / 0.7); opacity: 0;
}
.h-mob.is-in .h-mob__pulse { animation: h-mob-run 3.4s ease-in-out 1.7s infinite; }

/* The phone card: a faint grid fading down, a soft light above, the phone rising into it. */
.h-mob__phone {
    position: relative; grid-column: 3; grid-row: 1 / 3; height: 460px; margin: 0; overflow: hidden;
    border: 1px solid var(--h-border); border-radius: 22px;
    background: linear-gradient(180deg, #fff 0%, var(--h-50) 100%);
}
.h-mob__phone::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgb(21 30 49 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(21 30 49 / 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 80%);
}
.h-mob__spot {
    position: absolute; top: -120px; left: calc(50% - 160px); width: 320px; height: 240px; /* not translate: h-breathe animates transform */
    border-radius: 50%; background: radial-gradient(closest-side, rgb(97 206 112 / 0.38), transparent);
    filter: blur(10px); animation: h-breathe 4.2s ease-in-out infinite alternate;
}
/* The mockup's phone sits right of its canvas (opaque from 15% to 98%): -56% centres the phone. */
.h-mob__phone img {
    position: absolute; left: 50%; bottom: 0; width: 370px; height: auto; transform: translateX(-56%);
}
.h-mob.is-in .h-mob__phone img { transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) 0.45s; }

/* The arrival: armed by the script, in when seen. Transitions run only on the way in, so arming
   hides at once instead of fading the section out first. */
.h-mob.is-in .h-mob__reveal { transition: opacity 0.8s cubic-bezier(0.2, 0.75, 0.25, 1), transform 0.8s cubic-bezier(0.2, 0.75, 0.25, 1), filter 0.8s ease; transition-delay: calc(var(--r) * 0.16s); }
.h-mob.is-armed:not(.is-in) .h-mob__reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); }
.h-mob.is-armed:not(.is-in) .h-mob__phone img { transform: translate(-56%, 70px); }
.h-mob.is-armed:not(.is-in) .h-mob__wire::before { transform: scaleY(0); }
.h-mob.is-armed:not(.is-in) .h-mob__wire::after { transform: scaleX(0); }
.h-mob.is-armed:not(.is-in) .h-mob__node { opacity: 0; }

@keyframes h-mob-spin { to { transform: rotate(360deg); } }
@keyframes h-mob-run {
    0% { top: -3px; inset-inline-start: -3px; opacity: 0; }
    8% { opacity: 1; }
    48% { top: calc(100% - 4px); inset-inline-start: -3px; }
    92% { opacity: 1; }
    100% { top: calc(100% - 4px); inset-inline-start: calc(100% - 4px); opacity: 0; }
}
@keyframes h-mob-run-v {
    0% { top: -3px; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: calc(100% - 4px); opacity: 0; }
}

/* Narrower desktops: the copy above, the two cards side by side. */
@media (max-width: 1180px) {
    .h-mob__inner { grid-template-columns: 268px 420px; grid-template-rows: auto 268px 192px; justify-content: center; }
    .h-mob__copy { grid-column: 1 / -1; grid-row: 1; justify-self: center; max-width: 620px; margin-bottom: 48px; padding: 0; text-align: center; }
    .h-mob__badges { justify-content: center; }
    .h-mob__glow { grid-column: 1; grid-row: 2; }
    .h-mob__wire { grid-column: 1; grid-row: 3; }
    .h-mob__phone { grid-column: 2; grid-row: 2 / 4; }
}
/* Phones: one column; the wire is a short link down from the logo card to the phone. */
@media (max-width: 767px) {
    .h-mob { padding: 64px 16px; }
    .h-mob__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-items: center; }
    .h-mob__copy { grid-column: 1; grid-row: auto; margin-bottom: 40px; }
    .h-mob__title { font-size: 32px; }
    .h-mob__lead { font-size: 16px; line-height: 26px; }
    .h-mob__glow { grid-column: 1; grid-row: auto; width: 100%; max-width: 420px; height: 220px; }
    .h-mob__wire { grid-column: 1; grid-row: auto; width: 1px; height: 44px; margin: 0; }
    .h-mob__wire::after { display: none; }
    .h-mob__node { inset-inline-start: -5px; bottom: -5px; }
    .h-mob.is-in .h-mob__pulse { animation-name: h-mob-run-v; }
    .h-mob__phone { grid-column: 1; grid-row: auto; width: 100%; max-width: 420px; height: 430px; }
    .h-mob__phone img { width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
    .h-mob__chip-dot, .h-mob__halo, .h-mob__ring, .h-mob__spot, .h-mob.is-in .h-mob__node { animation: none; }
    .h-mob.is-in .h-mob__pulse { animation: none; opacity: 0; }
    .h-mob.is-in .h-mob__reveal, .h-mob.is-in .h-mob__phone img, .h-mob.is-in .h-mob__wire::before, .h-mob.is-in .h-mob__wire::after, .h-mob.is-in .h-mob__node { transition: none; }
}

/* ── Why ArmPOS: ArmHive's "why" grid, card for card, in the brand ───────────────────────────
   Rio, 2026-10-13: "i need the exact desing for each card", "background light mode and ... the cards
   this overaly green". Measured off his close-up and scaled 1.46x: top cards 360 wide, the art
   300 high with its centre at 139px (card 1) and 131px (card 2); satellites 52px at 92px from a
   58px disc; the snippet card 234px wide at 55px, 47px; the laptop lid at 23px, its notch 107px
   at 99px, the dropdown 175px wide at 21% from the screen's end.
   A light section (heading navy, text navy at 65%), the cards in the brand green with a soft light
   overlay, white and mint inside (white on #12663a 6.17, the copy at 88% white 5.85).
   Like .h-mob: armed by the script, in when first seen, transitions only on the way in; the markup
   rests at each story's end, so no script shows the finish. */
.h-bento { padding: 0 24px; }
.h-bento__panel { position: relative; max-width: 1392px; margin: 0 auto; padding: 96px 32px 104px; }
.h-bento__head { position: relative; max-width: 780px; margin: 0 auto 60px; text-align: center; }
.h-bento__eyebrow { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--h-600); }
/* Letter spacing only for Latin scripts: it breaks Arabic and Urdu letters apart and Devanagari's joins. */
.h-bento__eyebrow:is(:lang(en), :lang(fr), :lang(es), :lang(pt), :lang(de), :lang(tr)) { letter-spacing: 0.06em; }
.h-bento__title { margin-top: 12px; font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 48px; line-height: 1.12; font-weight: 600; letter-spacing: -0.6px; color: var(--h-ink); text-wrap: balance; }
.h-bento__lead { margin-top: 14px; font-size: 17px; line-height: 28px; color: var(--h-text); text-wrap: balance; }
.h-bento__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1120px; margin: 0 auto; }
.h-bento__card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    /* The pricing hero's look (Rio: "we need these cards having this dark gradient effect"): navy,
       the green glow rising from the bottom centre (.h-phero__glow's colours). */
    border: 1px solid rgb(216 246 238 / 0.1); border-radius: 18px;
    background:
        radial-gradient(ellipse 62% 72% at 50% 100%, rgb(31 133 79 / 0.78), rgb(26 105 68 / 0.42) 40%, transparent 76%),
        radial-gradient(ellipse 95% 60% at 50% 100%, rgb(26 99 67 / 0.28), transparent 72%),
        var(--h-950);
    box-shadow: 0 24px 48px -28px rgb(21 30 49 / 0.55);
    transition: border-color 0.25s ease, box-shadow 0.35s ease;
}
/* A soft light follows the pointer across a card (landing-home.js sets --mx and --my). */
.h-bento__card::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(97 206 112 / 0.14), transparent 60%);
}
.h-bento__card:hover { border-color: rgb(97 206 112 / 0.32); box-shadow: 0 30px 60px -28px rgb(21 30 49 / 0.7); }
.h-bento__card:hover::before { opacity: 1; }
.h-bento__card--wide { grid-column: span 2; }
.h-bento__art { position: relative; height: 300px; overflow: hidden; }
.h-bento__copy { position: relative; padding: 0 30px 30px; }
.h-bento__name { font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 19px; line-height: 26px; font-weight: 600; color: var(--h-on-dark); }
.h-bento__text { margin-top: 10px; max-width: 560px; font-size: 15px; line-height: 25px; color: rgb(255 255 255 / 0.88); }

/* Fine concentric rings, moving slowly outward from the art's centre (or its foot). */
@property --h-ripple { syntax: "<length>"; inherits: false; initial-value: 0px; }
.h-bento__rings {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-radial-gradient(circle at 50% var(--cy, 50%),
        transparent calc(var(--h-ripple) + 0px), rgb(255 255 255 / 0.1) calc(var(--h-ripple) + 0px),
        rgb(255 255 255 / 0.1) calc(var(--h-ripple) + 1px), transparent calc(var(--h-ripple) + 1.6px),
        transparent calc(var(--h-ripple) + 6px));
    -webkit-mask: radial-gradient(circle at 50% var(--cy, 50%), #000 0, #000 16%, transparent 44%);
    mask: radial-gradient(circle at 50% var(--cy, 50%), #000 0, #000 16%, transparent 44%);
    animation: h-ripple 1.6s linear infinite;
}
.h-bento__rings--low { --cy: 108%; -webkit-mask: radial-gradient(circle at 50% 108%, #000 0, #000 20%, transparent 48%); mask: radial-gradient(circle at 50% 108%, #000 0, #000 20%, transparent 48%); }
@keyframes h-ripple { to { --h-ripple: 6px; } }

/* 1. Branches: a disc, four ringed satellites, tick connectors flowing outward. */
.h-bnet__core {
    position: absolute; left: 50%; top: 139px; translate: -50% -50%; display: grid; place-items: center;
    width: 58px; height: 58px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 6px rgb(255 255 255 / 0.12), 0 0 36px rgb(255 255 255 / 0.35);
}
.h-bnet__core img { width: 38px; height: 38px; object-fit: contain; }
.h-bnet__node {
    position: absolute; left: 50%; top: 139px; display: grid; place-items: center; width: 52px; height: 52px;
    border: 1px solid rgb(255 255 255 / 0.3); border-radius: 50%; background: rgb(9 52 30 / 0.28);
    box-shadow: 0 0 0 7px rgb(255 255 255 / 0.05); color: rgb(255 255 255 / 0.85); font-size: 18px;
}
.h-bnet__node--n { translate: -50% calc(-50% - 92px); }
.h-bnet__node--s { translate: -50% calc(-50% + 92px); }
.h-bnet__node--e { translate: calc(-50% + 92px) -50%; }
.h-bnet__node--w { translate: calc(-50% - 92px) -50%; }
.h-bnet__ticks { position: absolute; }
.h-bnet__ticks--e, .h-bnet__ticks--w { top: calc(139px - 7px); width: 37px; height: 14px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.42) 0 1.5px, transparent 1.5px 5px); }
.h-bnet__ticks--n, .h-bnet__ticks--s { left: calc(50% - 7px); width: 14px; height: 37px; background: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.42) 0 1.5px, transparent 1.5px 5px); }
.h-bnet__ticks--e { left: calc(50% + 29px); }
.h-bnet__ticks--w { left: calc(50% - 66px); }
.h-bnet__ticks--n { top: calc(139px - 66px); }
.h-bnet__ticks--s { top: calc(139px + 29px); }
.h-bento.is-in .h-bnet__ticks--e { animation: h-tick-x 0.9s linear infinite; }
.h-bento.is-in .h-bnet__ticks--w { animation: h-tick-x 0.9s linear infinite reverse; }
.h-bento.is-in .h-bnet__ticks--s { animation: h-tick-y 0.9s linear infinite; }
.h-bento.is-in .h-bnet__ticks--n { animation: h-tick-y 0.9s linear infinite reverse; }
@keyframes h-tick-x { to { background-position: 5px 0; } }
@keyframes h-tick-y { to { background-position: 0 5px; } }

/* 2. Mobile money: an icon disc in an orbit track, a glowing dotted arc turning. */
.h-bpay__core {
    position: absolute; left: 50%; top: 131px; translate: -50% -50%; display: grid; place-items: center;
    width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(160deg, #fff, var(--h-on-dark));
    box-shadow: 0 0 0 6px rgb(255 255 255 / 0.1), 0 0 40px rgb(255 255 255 / 0.3); color: var(--h-700); font-size: 26px;
}
.h-bpay__track, .h-bpay__arc { position: absolute; left: 50%; top: 131px; width: 118px; height: 118px; translate: -50% -50%; border-radius: 50%; }
.h-bpay__track { border: 3px solid rgb(9 52 30 / 0.4); }
.h-bpay__arc {
    background: conic-gradient(from 0deg, transparent 0 55%, rgb(216 246 238 / 0.15) 62%, rgb(216 246 238 / 0.7) 76%, #fff 82%, transparent 82.5%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)), repeating-conic-gradient(#000 0 3deg, transparent 3deg 6deg);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)) intersect, repeating-conic-gradient(#000 0 3deg, transparent 3deg 6deg);
    filter: drop-shadow(0 0 6px rgb(216 246 238 / 0.6));
    animation: h-mob-spin 3s linear infinite;
}

/* 2. Alerts: the bell rings now and then; three alerts arrive around it and float. */
.h-balert .h-bpay__core { color: var(--h-700); }
.h-balert .h-bpay__core i { display: block; transform-origin: 50% 8%; }
.h-bento.is-in .h-balert .h-bpay__core i { animation: h-bell 4.2s ease-in-out 1.2s infinite; }
@keyframes h-bell { 0%, 14%, 100% { transform: rotate(0); } 2% { transform: rotate(16deg); } 5% { transform: rotate(-13deg); } 8% { transform: rotate(9deg); } 11% { transform: rotate(-5deg); } }
.h-balert__count {
    position: absolute; top: -3px; inset-inline-end: -3px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px;
    border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 0 0 3px var(--h-950);
}
.h-balert__chip {
    position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px;
    border: 1px solid rgb(216 246 238 / 0.16); border-radius: 999px; background: rgb(21 30 49 / 0.78);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 26px -14px rgb(0 0 0 / 0.7);
    color: var(--h-on-dark); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap;
}
.h-balert__chip i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; }
.h-balert__chip b { color: var(--h-on-dark-text); font-weight: 600; }
/* Anchored to the card's edges, not the ring, so a long label ("Niedriger Bestand") never runs off a card. */
.h-balert__chip--low { top: 46px; inset-inline-end: 20px; }
.h-balert__chip--low i { background: #f8b93f; box-shadow: 0 0 8px rgb(248 185 63 / 0.7); }
.h-balert__chip--out { top: 172px; inset-inline-start: 20px; } /* below the bell, which narrow cards bring close */
.h-balert__chip--out i { background: #f87171; box-shadow: 0 0 8px rgb(248 113 113 / 0.7); }
.h-balert__chip--restock { top: 218px; inset-inline-end: 34px; }
.h-balert__chip--restock i { background: var(--h-accent-on-dark); box-shadow: 0 0 8px rgb(102 208 151 / 0.7); }
.h-bento.is-in .h-balert__chip { transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); animation: h-chip-float 4.6s ease-in-out infinite alternate; }
.h-bento.is-in .h-balert__chip--low { transition-delay: 1s; animation-delay: 2s; }
.h-bento.is-in .h-balert__chip--out { transition-delay: 1.6s; animation-delay: 2.8s; }
.h-bento.is-in .h-balert__chip--restock { transition-delay: 2.2s; animation-delay: 3.4s; }
@keyframes h-chip-float { to { translate: 0 -5px; } }
.h-bento.is-armed:not(.is-in) .h-balert__chip { opacity: 0; transform: translateY(10px) scale(0.85); }

/* 3. and 5. Snippet cards: an icon with a check badge, a title and a subtitle. */
.h-bsnip {
    position: absolute; left: 55px; top: 47px; display: flex; flex-direction: column; width: 234px; padding: 14px;
    border: 1px solid rgb(255 255 255 / 0.1); border-radius: 14px; background: rgb(9 52 30 / 0.24); text-align: start;
}
[dir="rtl"] .h-bsnip { left: auto; right: 55px; }
.h-bsnip--bare { top: 64px; padding: 0; border: 0; background: none; }
.h-bsnip__head { display: flex; align-items: center; gap: 10px; }
.h-bsnip__icon { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 10px; background: rgb(9 52 30 / 0.35); color: #fff; font-size: 16px; }
.h-bsnip__badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #fff; color: var(--h-700); font-size: 11px; box-shadow: 0 0 0 2px var(--h-700); }
.h-bsnip__titles { display: flex; flex-direction: column; min-width: 0; }
.h-bsnip__titles b { color: rgb(255 255 255 / 0.95); font-size: 15px; line-height: 20px; font-weight: 600; }
.h-bsnip__titles small { color: rgb(255 255 255 / 0.66); font-size: 11px; line-height: 15px; white-space: nowrap; }
.h-bsnip__button { display: grid; place-items: center; height: 36px; margin-top: 14px; border-radius: 9px; background: rgb(9 52 30 / 0.45); color: #fff; font-size: 13px; font-weight: 600; }

/* 3. Languages: the language's name, then its greeting, bright. */
.h-blang__lines { display: flex; flex-direction: column; margin-top: 14px; font-size: 16px; line-height: 24px; }
.h-blang__name { color: rgb(255 255 255 / 0.7); }
.h-blang__word { min-height: 24px; color: #fff; font-weight: 600; white-space: nowrap; transition: opacity 0.28s ease, transform 0.28s ease; }
.h-blang__name { transition: opacity 0.28s ease; }
.h-blang__lines.is-swapping .h-blang__word { opacity: 0; transform: translateY(6px); }
.h-blang__lines.is-swapping .h-blang__name { opacity: 0; }

/* 4. The dashboard: Rio's laptop mockup of the real dashboard (public/images/home/dashboard-laptop.webp,
   1360x532 from his 1795x702). Its lid sits 23px down, its left and bottom cropped by the card, like the
   reference's laptop. It rises in when the card arrives; a light sweeps its screen every 6s, masked by the
   image itself so it never lands on the card. Pinned left in both directions: its cropped edge is its left. */
/* Blended into the card (Rio: "can we add some kind of overlay. to blend this card"): the image itself
   fades out toward the bottom and the cropped left edge, so the card's navy and glow show through
   (no painted band, no colour seam), and a light navy tint, masked to the laptop, softens its white screen. */
.h-bdash__shot {
    position: absolute; top: 23px; left: 0; width: 91%; aspect-ratio: 1360 / 532;
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgb(0 0 0 / 0.55) 72%, transparent 98%), linear-gradient(to right, transparent 0, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 42%, rgb(0 0 0 / 0.55) 72%, transparent 98%), linear-gradient(to right, transparent 0, #000 14%);
    mask-composite: intersect;
}
.h-bdash__shot img { display: block; width: 100%; height: auto; }
.h-bdash__shot::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(21 30 49 / 0.14);
    -webkit-mask: url("../../images/home/dashboard-laptop.webp") 0 0 / 100% 100% no-repeat;
    mask: url("../../images/home/dashboard-laptop.webp") 0 0 / 100% 100% no-repeat;
}
.h-bdash__shot::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.2) 48%, transparent 58%) -150% 0 / 220% 100% no-repeat;
    -webkit-mask: url("../../images/home/dashboard-laptop.webp") 0 0 / 100% 100% no-repeat;
    mask: url("../../images/home/dashboard-laptop.webp") 0 0 / 100% 100% no-repeat;
}
.h-bento.is-in .h-bdash__shot { transition: transform 1s cubic-bezier(0.2, 0.75, 0.25, 1) 0.5s, opacity 0.6s ease 0.5s; }
.h-bento.is-in .h-bdash__shot::after { animation: h-sweep 6s ease-in-out 1.8s infinite; }
@keyframes h-sweep { 0% { background-position: -150% 0; } 35%, 100% { background-position: 250% 0; } }

/* 5. The online shop: the store under the header, the order panel sliding over it. */
.h-bshop__screen { position: absolute; left: 50px; top: 116px; display: block; width: 214px; padding: 9px; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 12px; background: rgb(255 255 255 / 0.92); box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.45); }
[dir="rtl"] .h-bshop__screen { left: auto; right: 50px; }
.h-bshop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.h-bshop__item { padding: 5px; border-radius: 8px; background: var(--h-fill); transition: box-shadow 0.3s ease; }
.h-bshop__item.is-added { box-shadow: inset 0 0 0 1.5px var(--h-600); }
.h-bshop__pic { display: grid; place-items: center; height: 30px; border-radius: 6px; background: rgb(22 130 63 / 0.1); color: var(--h-600); font-size: 15px; }
.h-bshop__price { display: block; margin-top: 4px; color: var(--h-ink); font-size: 8.5px; line-height: 11px; font-weight: 600; white-space: nowrap; }
.h-bshop__order {
    position: absolute; left: 196px; top: 140px; display: flex; flex-direction: column; gap: 5px; width: 128px; padding: 10px;
    border-radius: 10px; background: #fff; color: var(--h-ink); box-shadow: 0 18px 36px -14px rgb(0 0 0 / 0.5);
}
[dir="rtl"] .h-bshop__order { left: auto; right: 196px; }
.h-bshop__order-head { display: flex; align-items: center; gap: 6px; color: var(--h-700); font-size: 11px; font-weight: 700; }
.h-bshop__order-line { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.h-bshop__order-line i { color: var(--h-600); }
.h-bshop__order-line b { margin-inline-start: auto; font-weight: 600; }
.h-bshop__order-total { padding-top: 5px; border-top: 1px solid var(--h-border); text-align: end; font-size: 11px; font-weight: 700; }
.h-bento.is-in .h-bshop__order { transition: opacity 0.4s ease 2.1s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 2.1s; }

/* The arrival, and each story's start while armed. */
.h-bento.is-in .h-bento__reveal { transition: opacity 0.8s cubic-bezier(0.2, 0.75, 0.25, 1), transform 0.8s cubic-bezier(0.2, 0.75, 0.25, 1), filter 0.8s ease; transition-delay: calc(var(--r) * 0.12s); }
.h-bento.is-armed:not(.is-in) .h-bento__reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); }
.h-bento.is-armed:not(.is-in) .h-bdash__shot { opacity: 0; transform: translateY(46px); }
.h-bento.is-armed:not(.is-in) .h-bshop__order { opacity: 0; transform: translateY(14px) scale(0.9); }

@media (max-width: 1023px) {
    .h-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h-bento__card--wide { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .h-bento { padding: 0 8px; }
    .h-bento__panel { padding: 64px 8px 72px; }
    .h-bento__title { font-size: 32px; }
    .h-bento__lead { font-size: 16px; line-height: 26px; }
    .h-bento__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .h-bento__card--wide { grid-column: auto; }
    .h-bento__art { height: 290px; }
    .h-bsnip { left: 50%; translate: -50% 0; }
    [dir="rtl"] .h-bsnip { left: 50%; right: auto; }
    .h-bsnip--bare { translate: none; left: 24px; }
    [dir="rtl"] .h-bsnip--bare { left: auto; right: 24px; }
    .h-bdash__shot { width: 170%; } /* the dashboard's left half, large enough to read */
    .h-bshop__screen { left: 24px; }
    .h-bshop__order { left: auto; right: 18px; }
    [dir="rtl"] .h-bshop__screen { right: 24px; }
    [dir="rtl"] .h-bshop__order { right: auto; left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .h-bento__rings, .h-bpay__arc, .h-bento.is-in .h-bnet__ticks--e, .h-bento.is-in .h-bnet__ticks--w, .h-bento.is-in .h-bnet__ticks--n, .h-bento.is-in .h-bnet__ticks--s,
    .h-bento.is-in .h-balert .h-bpay__core i, .h-bento.is-in .h-balert__chip { animation: none; }
    .h-bento.is-in .h-bdash__shot::after { animation: none; }
    .h-bento.is-in .h-bento__reveal, .h-bento.is-in .h-bdash__shot, .h-bento.is-in .h-bshop__order,
    .h-bento.is-in .h-balert__chip, .h-blang__word, .h-blang__name { transition: none; }
}

/* ── Legal pages (privacy, terms): a contents list beside the sections, in the site's text roles ── */
.h-legal { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 56px; max-width: 1216px; margin: 0 auto; padding: 64px 32px 96px; text-align: start; }
.h-legal__toc { position: sticky; top: 120px; align-self: start; padding: 20px; border: 1px solid var(--h-border); border-radius: 16px; background: #fff; }
.h-legal__toc-label { margin-bottom: 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--h-text); }
.h-legal__toc a { display: block; padding: 6px 0; font-size: 14px; line-height: 20px; color: var(--h-text); }
.h-legal__toc a:hover { color: var(--h-600); }
.h-legal__section { padding: 0; scroll-margin-top: 120px; } /* the shell still loads the vendor's landing.css: section { padding: 5rem 0 } */
.h-legal__section + .h-legal__section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--h-border); }
.h-legal__section h2 { font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--h-ink); }
.h-legal__body { margin-top: 12px; font-size: 16px; line-height: 28px; color: var(--h-text); }
.h-legal__contact { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; font-size: 15px; }
.h-legal__contact a, .h-legal__contact span { display: inline-flex; align-items: center; gap: 8px; color: var(--h-600); font-weight: 500; }
.h-legal__contact span { color: var(--h-text); }
@media (max-width: 899px) {
    .h-legal { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 16px 64px; }
    .h-legal__toc { position: static; }
}

.h-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── The plan comparison (/pricing), after Mailchimp's ──────────────────
   Measured off mailchimp.com/pricing/marketing at 1440 (2026-10-13): one bordered table,
   a label column and a column per plan, equal widths; the plan head (name, copy, a bordered
   price box, a 44px pill button) on top; group rows centred at 14px/500; data rows ~43px,
   alternately filled; while the rows are read, a compact head (name, price, button) is
   pinned under the menu and leaves with the table. On a phone the plan tabs are pinned
   instead, lined up with the value columns, and each row's label spans the row above them.
   Ours: the brand palette, and the menu's floating tiles (bottom at 98px, 78 on a phone)
   ride on the pinned head's top band (--cmp-top, set by landing-home.js). */
.h-cmp { max-width: 1216px; margin: 0 auto; text-align: start; --cmp-cols: repeat(calc(var(--n) + 1), minmax(0, 1fr)); }
.h-cmp__head { display: grid; grid-template-columns: var(--cmp-cols); }
.h-cmp__tabs { display: none; }
.h-cmp__lead { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 24px 24px 0; }
.h-cmp__lead .lp-bar { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; margin: 0; text-align: start; color: var(--h-muted-2); }
.h-cmp__plan { display: flex; flex-direction: column; padding: 32px 16px 24px; border: 1px solid var(--h-border); border-bottom: 0; border-inline-end: 0; background: #fff; }
.h-cmp__plan:last-child { border-inline-end: 1px solid var(--h-border); }
.h-cmp__name { font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.2px; color: var(--h-ink); }
.h-cmp__points { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 22px; font-size: 14px; line-height: 20px; color: var(--h-ink-2); }
.h-cmp__points li { display: flex; gap: 8px; }
.h-cmp__points i { flex-shrink: 0; color: var(--h-600); font-size: 15px; line-height: 20px; }
.h-cmp__plan .h-price { margin-top: auto; }
.h-cmp__cta {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; margin-top: 20px; padding: 10px 20px;
    border: 1px solid var(--h-950); border-radius: 999px;
    color: var(--h-950); font-size: 14px; line-height: 20px; font-weight: 600; text-align: center;
    transition: background-color 0.15s ease;
}
.h-cmp__cta:hover { background: var(--h-fill); }
.h-cmp__cta.is-solid { border-color: var(--h-400); background: var(--h-400); }
.h-cmp__cta.is-solid:hover { border-color: var(--h-300); background: var(--h-300); }

/* The price: a bordered box in the head, bare in the pinned bar. */
.h-price[hidden] { display: none; }
.h-price--box { padding: 10px 12px 12px; border: 1px solid var(--h-border); border-radius: 10px; }
.h-price__top { min-height: 20px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--h-700); }
.h-price__main { display: flex; align-items: flex-start; flex-wrap: wrap; column-gap: 2px; margin-top: 2px; font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif; color: var(--h-ink); }
.h-price__cur { padding-top: 5px; font-size: 13px; line-height: 18px; font-weight: 600; white-space: pre; }
.h-price__amount { font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -0.6px; }
.h-price__per { align-self: flex-end; padding: 0 0 7px 2px; font-family: "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 20px; color: var(--h-muted-2); }
.h-price__note { min-height: 20px; font-size: 13px; line-height: 20px; color: var(--h-muted-2); }
.h-price__total { font-weight: 600; color: var(--h-ink-2); }
.h-price--mini .h-price__amount { font-size: 26px; line-height: 32px; }
.h-price--mini .h-price__cur { padding-top: 3px; }
.h-price--mini .h-price__per { padding-bottom: 4px; }

/* The table. */
.h-cmp__table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid var(--h-border); background: #fff; font-size: 15px; line-height: 22px; }
.h-cmp__table th, .h-cmp__table td { padding: 10px 16px; text-align: start; vertical-align: middle; }
.h-cmp__row th { font-weight: 400; color: var(--h-ink); }
.h-cmp__row td { border-inline-start: 1px solid var(--h-border); color: var(--h-ink-2); }
.h-cmp__row:nth-child(even) > * { background: var(--h-fill); }
.h-cmp__group th { padding: 8px 16px; border-block: 1px solid var(--h-border); background: #fff; text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--h-ink); }
.h-cmp__yes { color: var(--h-600); font-size: 18px; }
.h-cmp__no { color: var(--h-muted-2); font-size: 15px; }

/* The pinned head: a zero-height sticky line inside the comparison, so it leaves with it;
   landing-home.js shows it once the plan head has scrolled away. */
.h-cmp__bar { position: sticky; top: 0; z-index: 30; height: 0; }
.h-cmp__bar-in {
    position: absolute; top: 0; inset-inline: 0;
    display: grid; grid-template-columns: var(--cmp-cols);
    padding-top: calc(var(--cmp-top, 110px) + 18px); /* Rio, 2026-10-13: "move the pricing plan a little bit down" from the menu */
    border: 1px solid var(--h-border); border-top: 0; border-radius: 0 0 14px 14px;
    background: #fff; box-shadow: 0 14px 28px -14px rgb(21 30 49 / 0.22);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.h-cmp__bar.is-on .h-cmp__bar-in { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.h-cmp__bar .h-cmp__lead { justify-content: flex-end; padding: 0 16px 18px; }
.h-cmp__bar .h-cycle { margin: 0; }
.h-cmp__mini { display: flex; flex-direction: column; padding: 0 16px 18px; border-inline-start: 1px solid var(--h-border); }
.h-cmp__mini .h-cmp__name { font-size: 18px; line-height: 24px; }
.h-cmp__mini .h-price { margin-top: 4px; }
.h-cmp__mini .h-cmp__cta { min-height: 40px; margin-top: 10px; padding: 8px 16px; }

@media (max-width: 899px) {
    .h-cmp { display: flex; flex-direction: column; }
    .h-cmp__head { display: contents; }
    .h-cmp__lead { order: 0; padding: 0 0 16px; }
    .h-cmp__lead .lp-bar { align-items: center; text-align: center; }
    .h-cmp__bar { display: none; }
    .h-cmp__tabs {
        order: 1; position: sticky; top: var(--cmp-top, 90px); z-index: 30;
        display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
        border: 1px solid var(--h-border); background: var(--h-fill);
    }
    /* stuck: a white band from the screen's top edge, under the menu's tiles */
    .h-cmp__tabs.is-stuck::before { content: ""; position: absolute; inset-inline: -1px; bottom: 100%; height: calc(var(--cmp-top, 90px) + 2px); background: #fff; } /* +2: the tabs' border, and no seam at the top edge */
    .h-cmp__tab { min-height: 52px; padding: 8px 6px; border: 0; border-inline-start: 1px solid var(--h-border); background: none; font-size: 15px; line-height: 20px; color: var(--h-ink-2); cursor: pointer; overflow-wrap: anywhere; }
    .h-cmp__tab:first-child { border-inline-start: 0; }
    .h-cmp__tab[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 2px var(--h-950); font-weight: 600; color: var(--h-ink); }
    .h-cmp__plan { order: 2; padding: 24px 20px; border: 1px solid var(--h-border); border-top: 0; }
    .h-cmp__plan:last-child { border-inline-end: 1px solid var(--h-border); }
    .h-cmp__plan[data-cmp-off] { display: none; }
    .h-cmp__table { order: 3; display: block; margin-top: 16px; border: 0; font-size: 14px; line-height: 20px; }
    .h-cmp__table > tbody { display: block; border: 1px solid var(--h-border); border-bottom: 0; }
    .h-cmp__table > tbody + tbody { border-top: 0; }
    .h-cmp__table > tbody:last-of-type { border-bottom: 1px solid var(--h-border); }
    .h-cmp__group, .h-cmp__group th { display: block; }
    .h-cmp__group th { padding: 10px 12px; border-top: 0; text-align: start; }
    .h-cmp__row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
    .h-cmp__row:nth-child(even) > * { background: none; }
    .h-cmp__row th { grid-column: 1 / -1; padding: 8px 12px; border-bottom: 1px solid var(--h-border); background: var(--h-fill) !important; }
    .h-cmp__row td { padding: 8px 12px; border-bottom: 1px solid var(--h-border); overflow-wrap: anywhere; }
    .h-cmp__row td:first-of-type { border-inline-start: 0; }
    .h-cmp[data-pick="0"] .h-cmp__row td:nth-of-type(1),
    .h-cmp[data-pick="1"] .h-cmp__row td:nth-of-type(2),
    .h-cmp[data-pick="2"] .h-cmp__row td:nth-of-type(3),
    .h-cmp[data-pick="3"] .h-cmp__row td:nth-of-type(4),
    .h-cmp[data-pick="4"] .h-cmp__row td:nth-of-type(5),
    .h-cmp[data-pick="5"] .h-cmp__row td:nth-of-type(6) { background: rgb(97 206 112 / 0.1); }
}

/* ── How it works: four steps as tabs, each with a screen of the app ─────────────────────────
   Rio, 2026-10-13, after Outgrid's "How Outgrid Works" ("loop yourself untill we get something
   better than his"). A navy panel like the hero's card. The steps sit on the left; the open one
   shows its line and a bar that times it. The screen sits on the right in a glass bezel, cropped
   by its stage at the right and the foot. The steps advance on their own while the section is in
   view, pause under the pointer or with focus inside, and stop once a visitor picks one.
   Text on navy: names at 62% mint when closed, mint when open; the line at --h-on-dark-text. */
.h-how { padding: 0 24px; }
.h-how__panel {
    position: relative; max-width: 1392px; margin: 0 auto; padding: 104px 72px 96px; overflow: hidden; isolation: isolate;
    border-radius: 28px;
    background:
        radial-gradient(ellipse 58% 62% at var(--h-how-gx, 72%) 108%, rgb(31 133 79 / 0.5), rgb(26 105 68 / 0.22) 46%, transparent 74%),
        radial-gradient(ellipse 50% 40% at 50% -6%, rgb(216 246 238 / 0.07), transparent 70%),
        var(--h-950);
}
/* A faint grid, fading out from the top centre. */
.h-how__panel::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgb(216 246 238 / 0.05) 1px, transparent 1px) 50% 0 / 56px 56px,
                linear-gradient(90deg, rgb(216 246 238 / 0.05) 1px, transparent 1px) 50% 0 / 56px 56px;
    -webkit-mask: radial-gradient(ellipse 70% 55% at 50% 0%, #000, transparent 75%);
    mask: radial-gradient(ellipse 70% 55% at 50% 0%, #000, transparent 75%);
}
/* A green light behind the screen, drifting a little with each step (--at is the open step). */
.h-how__aura {
    position: absolute; z-index: -1; top: 34%; inset-inline-end: 4%; width: 620px; height: 620px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgb(31 133 79 / 0.34), rgb(26 105 68 / 0.12) 45%, transparent 68%);
    transform: translate(calc(var(--at, 0) * -36px), calc(var(--at, 0) * 22px));
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[dir="rtl"] .h-how__panel { --h-how-gx: 28%; } /* the glow stays under the screen */
.h-how__head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.h-how__eyebrow {
    display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid rgb(216 246 238 / 0.16); border-radius: 999px;
    background: rgb(216 246 238 / 0.04); color: var(--h-on-dark); font-size: 13px; line-height: 1; font-weight: 600;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.h-how__title {
    margin-top: 18px; font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
    font-size: 48px; line-height: 1.12; font-weight: 600; letter-spacing: -0.6px; color: var(--h-on-dark); text-wrap: balance;
}
.h-how__accent {
    background: linear-gradient(to right, var(--h-accent-on-dark), var(--h-200));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.h-how__body { display: grid; grid-template-columns: minmax(280px, 392px) minmax(0, 1fr); gap: 48px; align-items: start; }

/* The steps */
.h-how__tabs { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.h-how__tab {
    position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 16px; align-items: start;
    width: 100%; padding: 16px 18px; border: 1px solid transparent; border-radius: 16px; background: transparent;
    color: var(--h-on-dark); text-align: start; cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.h-how__tab:hover { background: rgb(216 246 238 / 0.03); }
.h-how__tab[aria-selected="true"] {
    border-color: rgb(216 246 238 / 0.1); background: rgb(216 246 238 / 0.05);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 18px 40px -24px rgb(0 0 0 / 0.6);
}
.h-how__ic {
    display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(216 246 238 / 0.12); border-radius: 12px;
    background: rgb(216 246 238 / 0.03); color: var(--h-on-dark-text); font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.h-how__tab[aria-selected="true"] .h-how__ic {
    border-color: transparent; background: var(--h-400); color: var(--h-950);
    box-shadow: 0 0 0 4px rgb(97 206 112 / 0.14), 0 10px 24px -8px rgb(97 206 112 / 0.6);
}
.h-how__label { min-width: 0; }
.h-how__name {
    display: block; padding-top: 8px; font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
    font-size: 18px; line-height: 24px; font-weight: 600; color: rgb(216 246 238 / 0.62); transition: color 0.3s ease;
}
.h-how__tab:hover .h-how__name, .h-how__tab[aria-selected="true"] .h-how__name { color: var(--h-on-dark); }
/* The line opens under the open step (with the script; without it every line shows). */
.h-how__text { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.h-how__text > span { min-height: 0; overflow: hidden; padding-top: 6px; color: var(--h-on-dark-text); font-size: 15px; line-height: 24px; }
.h-how.is-tabbed .h-how__tab:not([aria-selected="true"]) .h-how__text { grid-template-rows: 0fr; }
.h-how__num { padding-top: 11px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; line-height: 16px; color: rgb(216 246 238 / 0.5); }
.h-how__tab[aria-selected="true"] .h-how__num { color: var(--h-accent-on-dark); }
/* The timer: a bar along the open step's foot fills, and the next step opens when it is full. */
.h-how__bar { position: absolute; inset-inline: 18px; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; background: rgb(216 246 238 / 0.08); opacity: 0; transition: opacity 0.3s ease; }
.h-how__bar::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; transform: scaleX(0); transform-origin: left center;
    background: linear-gradient(to right, var(--h-400), var(--h-accent-on-dark));
}
[dir="rtl"] .h-how__bar::after { transform-origin: right center; }
.h-how.is-playing .h-how__tab[aria-selected="true"] .h-how__bar { opacity: 1; }
/* It waits through --h-how-run: the animation shorthand would reset a play state set by a weaker rule. */
.h-how.is-playing .h-how__tab[aria-selected="true"] .h-how__bar::after { animation: h-how-fill 7s linear forwards; animation-play-state: var(--h-how-run, running); }
.h-how.is-paused { --h-how-run: paused; } /* out of view */
@media (hover: hover) { .h-how__body:hover { --h-how-run: paused; } }
.h-how__body:focus-within { --h-how-run: paused; }
@keyframes h-how-fill { to { transform: scaleX(1); } }

/* The stage: the screen in a glass bezel, cropped at the right and the foot. Sized in stage
   widths (cqw), so the crop is the same at every width. The screens are LTR app UI: they keep
   their left edge in RTL too. */
.h-how__stage {
    position: relative; container-type: inline-size; aspect-ratio: 25 / 16; overflow: hidden;
    border: 1px solid rgb(216 246 238 / 0.1); border-radius: 22px;
    background:
        radial-gradient(ellipse 80% 70% at 18% 0%, rgb(31 133 79 / 0.3), transparent 70%),
        linear-gradient(160deg, rgb(216 246 238 / 0.06), rgb(216 246 238 / 0.015) 60%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 40px 80px -40px rgb(0 0 0 / 0.7);
}
.h-how__shot {
    position: absolute; top: 6.5cqw; left: 6.5cqw; width: 108cqw; padding: 1.1cqw; margin: 0;
    border: 1px solid rgb(216 246 238 / 0.16); border-radius: calc(1.6cqw + 8px);
    background: rgb(216 246 238 / 0.06);
    box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.65);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transform: translateY(3cqw) scale(0.98); filter: blur(6px);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.35s ease, visibility 0s linear 0.5s;
}
.h-how__shot.is-active {
    opacity: 1; visibility: visible; transform: none; filter: none;
    transition: opacity 0.6s ease 0.12s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s, filter 0.6s ease 0.12s, visibility 0s;
}
.h-how__shot img { display: block; width: 100%; height: auto; border-radius: 1.6cqw; }
.h-how__shot:focus-visible { outline-offset: -4px; }
/* A light sweeps across a screen as it arrives. */
.h-how__shot::after {
    content: ""; position: absolute; inset: 1.1cqw; border-radius: 1.6cqw; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.28) 50%, transparent 62%) -150% 0 / 250% 100% no-repeat;
}
.h-how.is-in .h-how__shot.is-active::after { animation: h-how-sheen 1.5s ease-in-out 0.55s both; }
@keyframes h-how-sheen { from { background-position: -150% 0; } to { background-position: 250% 0; } }
/* The outcome: a glass chip over the screen's lower left, in after the screen, then floating. */
.h-how__done {
    position: absolute; left: 3.5cqw; bottom: 5cqw; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 8px; border: 1px solid rgb(216 246 238 / 0.16); border-radius: 999px;
    background: rgb(21 30 49 / 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.75), 0 0 0 4px rgb(97 206 112 / 0.06);
    color: var(--h-on-dark); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
    opacity: 0; transform: translateY(12px) scale(0.9);
    transition: opacity 0.25s ease, transform 0.3s ease;
}
.h-how__done i {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--h-400); color: var(--h-950); font-size: 15px;
    box-shadow: 0 0 14px rgb(97 206 112 / 0.55);
}
.h-how__done.is-active {
    opacity: 1; transform: none;
    transition: opacity 0.4s ease 0.9s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s;
    animation: h-chip-float 4.6s ease-in-out 1.6s infinite alternate;
}

/* The arrival: armed by the script, in when seen; transitions run only on the way in. */
.h-how.is-armed:not(.is-in) .h-how__head { opacity: 0; transform: translateY(24px); }
.h-how.is-armed:not(.is-in) .h-how__tab { opacity: 0; transform: translateX(-18px); }
[dir="rtl"] .h-how.is-armed:not(.is-in) .h-how__tab { transform: translateX(18px); }
.h-how.is-armed:not(.is-in) .h-how__stage { opacity: 0; transform: translateY(48px) scale(0.97); }
.h-how.is-in .h-how__head { transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.h-how.is-in .h-how__tab {
    transition: background-color 0.3s ease, border-color 0.3s ease,
        opacity 0.6s ease calc(0.2s + var(--i) * 0.08s), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.2s + var(--i) * 0.08s);
}
.h-how.is-in .h-how__stage { transition: opacity 0.8s ease 0.25s, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s; }

@media (max-width: 1100px) {
    .h-how__panel { padding: 88px 40px 72px; }
    .h-how__body { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 32px; }
}
/* One column: the steps, then the screen. */
@media (max-width: 860px) {
    .h-how__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .h-how__tabs { padding-top: 0; gap: 4px; }
    .h-how__stage { order: -1; }
}
@media (max-width: 639px) {
    .h-how { padding: 0 8px; }
    .h-how__panel { padding: 64px 12px 12px; border-radius: 20px; }
    .h-how__head { margin-bottom: 36px; padding: 0 8px; }
    .h-how__title { font-size: 32px; letter-spacing: -0.4px; }
    .h-how__tab { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 14px; padding: 14px; }
    .h-how__ic { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
    .h-how__name { padding-top: 6px; font-size: 17px; }
    .h-how__num { padding-top: 9px; }
    .h-how__bar { inset-inline: 14px; }
    .h-how__stage { aspect-ratio: 4 / 3; border-radius: 16px; }
    .h-how__shot { top: 8cqw; left: 6cqw; width: 150cqw; }
}

/* ── Pricing ─────────────────────────────────────────────────────── */
.h-pricing { max-width: 1280px; margin: 0 auto; padding: 64px 32px; text-align: center; } /* the footer column: 1216 wide */
.h-cycle { display: inline-flex; gap: 4px; margin: 32px auto; padding: 4px; border-radius: 10px; background: var(--h-fill); }
.h-cycle__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--h-muted-2);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
}
.h-cycle__btn[aria-pressed="true"] { background: #fff; color: var(--h-ink); box-shadow: var(--h-shadow-sm); font-weight: 600; }
.h-cycle__save { padding: 1px 6px; border-radius: 6px; background: var(--h-green-soft); color: var(--h-green); font-size: 12px; font-weight: 500; }
.h-pricing .lp-bar { color: var(--h-muted-2); }
/* The plan cards (Rio's reference, 2026-10-13): white cards with the middle one in the brand navy, a
   line drawing in each corner, six facts, the price, where it runs, one button; /pricing linked below.
   From the reference, scaled to 360px cards: 18px corners, 28px padding, name 22px/600, tagline 13px,
   list 14.5px with 11px gaps, the button 44px with a 10px radius and a soft shadow under it. */
.h-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: 24px; margin-top: 8px; text-align: start; }
.h-plans--1 { grid-template-columns: minmax(0, 380px); }
.h-plans--2 { grid-template-columns: repeat(2, minmax(0, 380px)); }
.h-plan {
    position: relative; display: flex; flex-direction: column; padding: 28px 28px 26px;
    border: 1px solid rgb(21 30 49 / 0.06); border-radius: 18px; background: #fff;
    box-shadow: 0 1px 2px rgb(21 30 49 / 0.04), 0 24px 48px -28px rgb(21 30 49 / 0.28);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}
.h-plan:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(21 30 49 / 0.04), 0 32px 60px -28px rgb(21 30 49 / 0.36); }
.h-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.h-plan__name { font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; color: var(--h-ink); }
.h-plan__tagline { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--h-text); }
.h-plan__art { flex-shrink: 0; width: 56px; height: 56px; margin-top: -4px; margin-inline-end: -4px; color: rgb(21 30 49 / 0.6); overflow: visible; }
.h-plan__list { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; font-size: 14.5px; line-height: 20px; color: var(--h-ink); }
.h-plan__list li { display: flex; align-items: flex-start; gap: 12px; }
.h-plan__list i { flex-shrink: 0; font-size: 16px; line-height: 20px; }
.h-plan__foot { margin-top: auto; padding-top: 34px; }
/* The price is /pricing's (plan-price.blade.php, 'card'): the saving, the year as a month, the year's total. */
.h-price--card .h-price__amount { font-size: 32px; line-height: 40px; }
.h-plan__devices { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--h-text); }
.h-plan__devices i { font-size: 14px; color: rgb(21 30 49 / 0.72); }
.h-plan__devices i + i { margin-inline-end: 6px; }
.h-plan__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 18px; border-radius: 10px;
    background: var(--h-950); color: #fff; font-size: 15px; line-height: 1; font-weight: 600;
    box-shadow: 0 12px 22px -10px rgb(21 30 49 / 0.6);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.h-plan__cta:hover { background: #24324f; transform: translateY(-1px); box-shadow: 0 16px 26px -12px rgb(21 30 49 / 0.65); }
.h-plan__cta i { font-size: 13px; }
[dir="rtl"] .h-plan__cta i, [dir="rtl"] .h-plans__all i { transform: scaleX(-1); }
/* The dark one: the brand navy, a soft light from the top, the green glow rising from the foot. */
.h-plan--featured {
    border-color: rgb(216 246 238 / 0.1);
    background:
        radial-gradient(ellipse 90% 50% at 50% 0%, rgb(216 246 238 / 0.07), transparent 70%),
        radial-gradient(ellipse 85% 45% at 50% 108%, rgb(31 133 79 / 0.55), rgb(26 105 68 / 0.2) 50%, transparent 78%),
        var(--h-950);
    box-shadow: 0 30px 60px -28px rgb(21 30 49 / 0.75);
}
.h-plan--featured:hover { box-shadow: 0 38px 70px -28px rgb(21 30 49 / 0.85); }
.h-plan--featured :is(.h-plan__name, .h-plan__list, .h-price__main, .h-price__total) { color: var(--h-on-dark); }
.h-plan--featured :is(.h-plan__tagline, .h-price__per, .h-price__note, .h-plan__devices, .h-plan__devices i) { color: var(--h-on-dark-text); }
.h-plan--featured .h-price__top { color: var(--h-accent-on-dark); }
.h-plan--featured .h-plan__art { color: #eefffa; filter: drop-shadow(0 0 5px rgb(102 208 151 / 0.75)); }
.h-plan--featured .h-plan__cta { background: #fff; color: var(--h-950); box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.6); }
.h-plan--featured .h-plan__cta:hover { background: var(--h-50); }
/* The drawings turn slowly; the globe's meridians sweep round as if it spins. */
.h-plan__art-spin { transform-origin: 32px 32px; }
.h-plan__art--vortex .h-plan__art-spin { animation: h-plan-spin 40s linear infinite; }
.h-plan__art--flower .h-plan__art-spin { animation: h-plan-spin 60s linear infinite reverse; }
.h-plan__meridian { transform-box: fill-box; transform-origin: center; animation: h-plan-meridian 8s ease-in-out infinite; animation-delay: calc(var(--k) * -1s); }
@keyframes h-plan-spin { to { transform: rotate(360deg); } }
@keyframes h-plan-meridian { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
/* The full scope, on /pricing. */
.h-plans__all {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-top: 36px; padding: 0 20px;
    border: 1px solid rgb(21 30 49 / 0.16); border-radius: 999px; background: #fff; color: var(--h-ink); font-size: 15px; font-weight: 600;
    transition: border-color 0.2s ease;
}
.h-plans__all:hover { border-color: var(--h-ink); }
.h-plans__all i { transition: transform 0.2s ease; }
.h-plans__all:hover i { transform: translateX(3px); }
[dir="rtl"] .h-plans__all:hover i { transform: scaleX(-1) translateX(3px); }

/* ── Reviews ─────────────────────────────────────────────────────── */
.h-reviews { padding: 64px 0; }
.h-reviews__rows { display: flex; flex-direction: column; gap: 24px; margin-top: 48px; }
.h-reviews__row {
    display: flex;
    overflow: hidden;
    margin: -12px 0;
    padding: 12px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    direction: ltr; /* the loop slides left by half the run; in RTL the run would start at the right edge and open a gap */
}
.h-reviews__run { display: flex; gap: 20px; width: max-content; padding-right: 20px; animation: h-marquee var(--h-rev-dur, 60s) linear infinite; }
@keyframes h-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* The second row runs the other way, started part-way so the two rows never line up. */
.h-reviews__run.is-right { animation-direction: reverse; animation-delay: calc(var(--h-rev-dur, 60s) * -0.37); }
[dir="rtl"] .h-review { direction: rtl; }
.h-reviews__row:hover .h-reviews__run { animation-play-state: paused; }
.h-review {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 290px;
    flex-shrink: 0;
    padding: 20px;
    border: 1px solid color-mix(in oklch, var(--h-border) 80%, transparent);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(24 24 27 / 0.05), var(--h-shadow-sm);
}
.h-review__stars { display: flex; gap: 3px; color: var(--h-amber); font-size: 13px; }
.h-review__stars .is-off { color: var(--h-border); }
.h-review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--h-ink); }
.h-review__who { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.h-review__who img, .h-review__av { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.h-review__av { display: inline-flex; align-items: center; justify-content: center; background: var(--h-100); color: var(--h-700); font-weight: 600; }
.h-review__name { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--h-ink-2); }
.h-review__role { display: block; font-size: 12px; line-height: 16px; color: var(--h-muted); }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.h-faq { padding: 64px 16px; }
.h-faq__card {
    max-width: 896px;
    margin: 48px auto 0;
    padding: 0 32px;
    border: 1px solid color-mix(in oklch, var(--h-200) 30%, transparent);
    border-radius: 16px;
    background: rgb(255 255 255 / 0.6);
    box-shadow: var(--h-shadow-sm);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.h-faq__item { border-bottom: 1px solid color-mix(in oklch, var(--h-200) 50%, transparent); }
.h-faq__item:last-child { border-bottom: 0; }
.h-faq__item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0;
    list-style: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: var(--h-950);
}
.h-faq__item summary::-webkit-details-marker { display: none; }
.h-faq__item summary i { flex-shrink: 0; margin-top: 4px; color: var(--h-muted); font-size: 14px; transition: transform 0.2s ease; }
.h-faq__item[open] summary i { transform: rotate(180deg); }
.h-faq__answer { padding: 0 32px 24px 0; font-size: 16px; line-height: 26px; color: var(--h-soft); }

/* ── Footer, on every public page (Rio, 2026-10-14, after Asia.Agency's) ─────────────────────
   Dark navy: the brand and a newsletter box beside the link columns; the offices; the copyright,
   the cookie link and the social links. Measured on the reference at 1024 wide: content 832 wide,
   columns from 549, heads 13px uppercase, links 13px with 28px rows, the subscribe pill 46px,
   offices in three columns with dividers, social links in 26px rings.
   Text: headings and the city white, links and addresses mint at 62% (7.2:1 on the navy). */
.h-footer { --f-bg: #0b111d; --f-line: rgb(255 255 255 / 0.08); --f-soft: rgb(226 244 238 / 0.62); padding: 0 24px 24px; color: #fff; }
/* A navy card on the light page, as the hero's (Rio's MemoTrade reference). */
.h-footer__card { position: relative; max-width: 1392px; margin: 0 auto; overflow: hidden; isolation: isolate; border-radius: 28px; background: var(--f-bg); }
.h-footer__inner { max-width: 1120px; margin: 0 auto; padding: 72px 24px 32px; }
/* The last row: the phone rises from the card's bottom edge (the image is cut there) over a green glow. */
.h-footer__show { position: relative; max-width: 1120px; min-height: 210px; margin: 0 auto; padding: 0 24px; }
.h-footer__glow { position: absolute; inset: 0 -20%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 34% 95% at var(--h-foot-glow-x, 30%) 115%, rgb(31 133 79 / 0.6), rgb(26 105 68 / 0.2) 50%, transparent 75%); }
[dir="rtl"] .h-footer__glow { --h-foot-glow-x: 70%; } /* the phone sits on the right in RTL */
/* Blended into the card (Rio: "it too clear as if it is not part of the footer"): it fades toward its foot
   and its cut-off lower left, and is a touch dimmer; the screen's top stays clear. */
.h-footer__phone {
    position: absolute; bottom: 0; inset-inline-start: 24px; width: min(420px, 40%); height: auto;
    opacity: 0.92; filter: brightness(0.9) saturate(0.88);
    -webkit-mask-image: linear-gradient(to bottom, #000 38%, rgb(0 0 0 / 0.5) 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 24%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 38%, rgb(0 0 0 / 0.5) 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 24%);
    mask-composite: intersect;
}
.h-footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--f-line); }
.h-footer__logo { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; line-height: 24px; font-weight: 600; color: #fff; }
.h-footer__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); font-size: 15px; }
.h-footer__mark img { width: 20px; height: 20px; object-fit: contain; }
.h-footer__logo--image img { display: block; width: auto; height: 36px; }
.h-footer__about { max-width: 380px; margin-top: 16px; font-size: 13.5px; line-height: 21px; color: var(--f-soft); }
.h-news { max-width: 360px; margin-top: 30px; }
.h-news__title { font-size: 16px; line-height: 22px; font-weight: 600; color: #fff; }
.h-news__text { margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--f-soft); }
.h-news__box {
    display: flex; align-items: center; gap: 10px; height: 52px; margin-top: 22px; padding: 4px 4px 4px 16px; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 999px;
    background: rgb(255 255 255 / 0.02); transition: border-color 0.2s ease;
}
[dir="rtl"] .h-news__box { padding: 4px 16px 4px 4px; }
.h-news__box:focus-within { border-color: #66d097; }
.h-news__box > i { color: rgb(255 255 255 / 0.8); font-size: 15px; }
.h-news__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; outline: none; }
.h-news__input::placeholder { color: var(--f-soft); opacity: 1; }
.h-news__btn { flex-shrink: 0; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #0b111d; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; }
.h-news__btn:hover { background: #eefffa; }
.h-news__btn:disabled { opacity: 0.7; cursor: progress; }
.h-news__status { min-height: 0; margin-top: 10px; font-size: 13px; line-height: 18px; color: #8ef0b0; }
.h-news__status:empty { display: none; }
.h-news__status.is-error { color: #fda4af; }
.h-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 32px; }
.h-footer__head { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.h-footer__head:is(:lang(ar), :lang(ur), :lang(hi), :lang(bn)) { letter-spacing: 0; }
.h-footer__cols ul { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; font-size: 13.5px; line-height: 18px; color: var(--f-soft); overflow-wrap: anywhere; }
.h-footer__cols a { transition: color 0.15s ease; }
.h-footer__cols a:hover { color: #fff; }
/* Africa's flags, scrolling (Rio, 2026-10-14). Two identical halves slide by -50%; the row is laid out LTR
   (an RTL row would open a gap); every flag loads at once (a lazy image in a transformed row never loads);
   hover or focus pauses it; under reduced motion it is still, the repeats hidden, scrolled by hand. */
.h-flags { padding: 36px 0 40px; border-bottom: 1px solid var(--f-line); }
.h-flags__title { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: #fff; }
.h-flags__title i { color: #66d097; font-size: 16px; }
.h-flags__row {
    margin-top: 20px; overflow: hidden; direction: ltr;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.h-flags__run { display: flex; gap: 14px; width: max-content; padding-right: 14px; animation: h-marquee var(--h-flags-dur, 75s) linear infinite; }
.h-flags__row:hover .h-flags__run, .h-flags__row:focus-within .h-flags__run { animation-play-state: paused; }
.h-flag { flex-shrink: 0; }
/* A few countries sit still, each a flag and its name linking to its page. */
.h-flags__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.h-flags__pill { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 8px; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 999px; background: rgb(255 255 255 / 0.03); color: #fff; font-size: 14px; font-weight: 600; transition: border-color 0.2s ease, background-color 0.2s ease; }
.h-flags__pill img { width: 28px; height: 21px; border-radius: 4px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16); object-fit: cover; }
.h-flags__pill:hover { border-color: #66d097; background: rgb(102 208 151 / 0.08); }
.h-flag img { display: block; width: 28px; height: 21px; border-radius: 4px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16); object-fit: cover; transition: transform 0.2s ease; }
.h-flag a { display: block; border-radius: 4px; }
.h-flag a:hover img { transform: translateY(-2px); box-shadow: 0 0 0 2px #66d097; }
.h-footer__offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 56px 0; border-bottom: 1px solid var(--f-line); }
.h-footer__offices--1 { grid-template-columns: minmax(0, 360px); }
.h-footer__offices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-office { padding-inline-end: 32px; }
.h-office + .h-office { padding-inline-start: 32px; border-inline-start: 1px solid var(--f-line); }
.h-office__icon { display: block; width: 44px; height: 44px; object-fit: contain; }
.h-office__city { margin-top: 18px; font-size: 19px; line-height: 26px; font-weight: 600; color: #fff; }
.h-office__address { margin-top: 10px; font-size: 13.5px; line-height: 20px; color: var(--f-soft); }
.h-office__phone { display: inline-block; margin-top: 6px; font-size: 14.5px; line-height: 20px; font-weight: 600; color: #fff; }
.h-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 28px; font-size: 13px; line-height: 18px; color: var(--f-soft); }
.h-footer__cookies { color: var(--f-soft); text-decoration: underline; text-underline-offset: 3px; }
.h-footer__cookies:hover { color: #fff; }
.h-footer__social { display: flex; gap: 8px; margin-inline-start: auto; }
.h-footer__social a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 50%; color: #fff; font-size: 14px; transition: background-color 0.2s ease, border-color 0.2s ease; }
.h-footer__social a:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); }
.h-footer :focus-visible { outline: 2px solid #66d097; outline-offset: 3px; }
/* A form's anti-spam field (the newsletter box, the contact form): out of sight and out of reach; people leave it empty. */
.h-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Smaller screens ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .h-plans, .h-plans--2 { grid-template-columns: minmax(0, 480px); }
    .h-footer__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
    .h-footer__offices, .h-footer__offices--2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .h-office, .h-office + .h-office { padding: 0; border: 0; }
    .h-office + .h-office { padding-top: 28px; border-top: 1px solid var(--f-line); }
}
@media (max-width: 639px) {
    .h-hero2 { padding: 8px 8px 0; }
    .h-hero2__card { padding: 104px 16px 0; border-radius: 20px; }
    .h-phero__card { padding: 116px 16px 72px; }
    .h-phero__title { font-size: 34px; }
    .h-phero__points { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; margin: 24px auto 0; gap: 8px; font-size: 15px; } /* ticks in one column */
    .h-phero__after { margin-top: 32px; }
    .h-hero2__title { margin-top: 18px; font-size: 30px; line-height: 1.22; }
    .h-hero2__lead { font-size: 14px; }
    .h-tabs { justify-content: flex-start; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    .h-hero2__actions .h-cta-btn { flex: 1 1 0; }
    .h-stage-wrap { margin-top: 32px; }
    .h-stage { --w: 440; --h: 400; --u: clamp(0.6px, calc(100cqw / 440), 1px); }
    .h-stage__lines { display: none; }
    .h-stage__lines--phone { display: block; }
    .h-node--a { --x: 55; --y: 200; }
    .h-node--b { --x: 380; --y: 200; }
    .h-node--c { --x: 250; --y: 46; }
    .h-stage__person { left: calc(70 * var(--u)); width: calc(300 * var(--u)); }
    .h-float--revenue { --x: 0; --y: 20; }
    .h-float--ring { --x: 290; --y: 14; }
    .h-float--stock { --x: 0; --y: 240; }
    .h-float--orders { --x: 320; --y: 232; }
    .h-float--sales, .h-float--payment { display: none; }
    .h-h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.75px; }
    .h-pricing { padding: 48px 16px; }
    .h-review { width: 250px; }
    .h-faq__card { padding: 0 16px; }
    .h-faq__item summary { font-size: 16px; line-height: 24px; padding: 20px 0; }
    .h-footer { padding: 0 8px 8px; }
    .h-footer__card { border-radius: 20px; }
    .h-footer__inner { padding: 48px 16px 24px; }
    .h-footer__social { margin-inline-start: 0; width: 100%; }
    .h-footer__show { min-height: 0; padding: 16px 16px 0; }
    .h-footer__phone { position: relative; inset-inline-start: auto; display: block; width: 86%; margin: 0 auto; } /* rising from the edge */
}

@media (prefers-reduced-motion: reduce) {
    /* Still: one row, each review once, scrolled by hand. */
    .h-reviews__run { animation: none; }
    .h-reviews__row { overflow-x: auto; scroll-snap-type: x mandatory; }
    .h-review { scroll-snap-align: start; }
    .h-review[aria-hidden="true"] { display: none; }
    .h-reviews__row:not(:has(.h-review:not([aria-hidden="true"]))) { display: none; }
    .h-in, .h-float, .h-mock, .h-stage__person, .h-hero2__glow, .h-phero__glow, .h-node, .h-badge__dot, .h-stage__lines path, .h-ring { animation: none; }
    .h-draw { animation: none; stroke-dashoffset: 0; }
    .h-how__done.is-active, .h-how.is-in .h-how__shot.is-active::after { animation: none; }
    .h-plan__art-spin, .h-plan__meridian { animation: none; }
    .h-flags__run { animation: none; }
    .h-flags__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .h-flag[aria-hidden="true"] { display: none; }
    .h-page *, .h-page *::before, .h-page *::after { transition-duration: 0.01ms !important; }
}