/* ============================================================================
   Biponik — Light Corporate redesign.
   Values are taken from the Figma (file rFxOEUNBrhSEc1gbMTeyQK, "Biponik — Home"),
   which is laid out on a 1440 grid with 72px gutters and a 1264px content column.
   Everything below scales from those numbers rather than restating them per block.
   ========================================================================= */

:root{
    /* ink + text */
    --v2-ink:#17141f;
    --v2-ink-2:#1a1430;
    --v2-body:#6b6b76;
    --v2-body-2:#54505f;
    --v2-muted:#8a8699;
    --v2-muted-2:#908d99;
    --v2-slate:#4b465c;

    /* the one bold colour, spent on the headline accent and nothing else */
    --v2-green:#1db954;
    --v2-green-up:#16a34a;
    --v2-forest:#061c0f;      /* buttons, brand tiles */
    --v2-forest-2:#071d10;

    /* surfaces + lines */
    --v2-surface:#ffffff;
    --v2-surface-2:#fcfbfe;
    --v2-surface-3:#fbfafe;
    --v2-wash:#f2f2f4;
    --v2-line:#e4e4e8;
    --v2-line-warm:#e4e2de;

    --v2-gutter:72px;
    /* Every Figma frame lays its content out at x=72 across a 1440 board, so the
       column is 1296 and the wrap maxes at exactly 1440 — not 1264. */
    --v2-content:1296px;

    --v2-font-display:'Anek Bangla','Hind Siliguri',system-ui,sans-serif;
    --v2-font-body:'Hind Siliguri','Anek Bangla',system-ui,sans-serif;
    --v2-font-num:'Plus Jakarta Sans','Hind Siliguri',system-ui,sans-serif;

    /* one easing for everything that moves, so the page feels like one object */
    --v2-ease:cubic-bezier(.22,.61,.36,1);
}

/* Smooth scroll, but never for someone who asked the OS to stop animations. */
html.v2{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
    html.v2{scroll-behavior:auto;}
    .v2 *,.v2 *::before,.v2 *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

.v2{margin:0;background:var(--v2-surface);color:var(--v2-ink);font-family:var(--v2-font-body);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.v2 *,.v2 *::before,.v2 *::after{box-sizing:border-box;}
.v2 img{max-width:100%;display:block;}
/* ⚠️ [hidden] is a UA rule at (0,0,1), so ANY class that sets display outranks it.
   `.v2-tplc{display:flex}` did exactly that: the gallery's search and filters set
   `hidden` on the cards they excluded, the DOM agreed they were hidden, and all 18
   stayed on screen. Nothing looked broken, so it read as the filters not working.
   Said once here, with the weight to win, so no component has to remember it. */
.v2 [hidden]{display:none !important;}
/* ⚠️ No global link COLOUR reset here, deliberately.
   A `.v2 a{color:inherit}` outranks a component's own `color` and repaints it;
   adding :not() guards only made it worse (0,3,1), which painted the included
   dashboard's sidebar links in body ink on their dark background. Components set
   their own colour; this reset touches nothing but the underline. */
.v2 a{text-decoration:none;}
.v2 :focus-visible{outline:2px solid var(--v2-green);outline-offset:3px;border-radius:6px;}

.v2-wrap{width:100%;max-width:calc(var(--v2-content) + var(--v2-gutter) * 2);
    margin-inline:auto;padding-inline:var(--v2-gutter);}
@media (max-width:1100px){:root{--v2-gutter:40px;}}
@media (max-width:640px){:root{--v2-gutter:20px;}}

/* ── type scale ───────────────────────────────────────────────────────── */
.v2-h1{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;font-weight:500;
    font-size:clamp(2.35rem,5.1vw,4.2rem);line-height:1.1;letter-spacing:-.025em;
    color:var(--v2-ink);margin:0;text-wrap:balance;}
.v2-h1 em{font-style:normal;font-weight:600;color:var(--v2-green);}
/* ⚠️ English only. The headline is sized for the Bengali line, and the English one
   is longer: at the clamp's top end its first line needed 652px of a 680px hero
   column, so it broke to three lines where the design has two. 50px keeps it on two
   with 55px to spare. Below about 980px the clamp is already under this cap, so
   nothing changes there, and the Bengali is untouched at every width. */
html[lang="en"] .v2-h1{font-size:clamp(2.35rem,5.1vw,3.125rem);}
.v2-lede{font-size:clamp(1rem,1.3vw,1.1625rem);line-height:1.61;color:var(--v2-body);margin:0;}

/* ── buttons ──────────────────────────────────────────────────────────── */
/* No drop shadow and no lift on hover, by request: a button's only hover motion is
   its label rising out and a copy rising in behind it. Colour may still shift, which
   is what tells a pointer it is over something pressable. */
.v2-btn{display:inline-flex;align-items:center;gap:8px;border-radius:100px;
    font-family:var(--v2-font-body);font-weight:600;font-size:1.0625rem;line-height:23px;
    padding:15px 22px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
    transition:background-color .22s var(--v2-ease),border-color .22s var(--v2-ease),color .22s var(--v2-ease);}
.v2-btn--solid{background:var(--v2-forest);color:#fff;padding-left:26px;}
.v2-btn--solid:hover{background:#0a2a16;}
.v2-btn--ghost{background:#fff;color:var(--v2-ink);border-color:var(--v2-line-warm);}
.v2-btn--ghost:hover{border-color:#cfcbc4;background:#fbfaf8;}
.v2-btn img,.v2-btn svg{width:18px;height:18px;flex:0 0 auto;}
.v2-btn--sm{font-size:.95rem;padding:12px 20px;}

/* ── nav ──────────────────────────────────────────────────────────────── */
.v2-nav{display:flex;align-items:center;justify-content:space-between;padding:4px 0;
    position:relative;z-index:5;}
/* An uploaded logo is any shape, so height rules and width follows, with a ceiling
   so a very wide wordmark cannot push the navigation out of the bar. The phone keeps
   the smaller mark: the bar there holds the logo, the burger and the call to action. */
.v2-nav__logo img{height:38px;width:auto;max-width:220px;object-fit:contain;object-position:left center;}
@media (max-width:640px){
    .v2-nav__logo img{height:30px;max-width:170px;}
}
.v2-foot__logo img{height:39px;width:auto;max-width:220px;object-fit:contain;object-position:left center;}
.v2-nav__links{display:flex;align-items:center;gap:32px;font-size:.99375rem;line-height:21px;
    font-weight:500;color:var(--v2-body-2);}
/* No underline and no colour change on hover — the label itself rises and a copy
   takes its place (see "label swap" below). The vertical padding is the clip box:
   it has to clear Bangla ascenders and descenders, and the negative margin keeps
   the nav's own height unchanged. */
/* ⚠️ Direct children and the dropdown trigger only. `.v2-nav__links a` also matches
   the links INSIDE the Solutions menu, and this padding/negative-margin pair then
   pulled those items 14px together and overlapped them. (The label-swap script hit
   the same trap with the same selector.) */
.v2-nav__links > a,.v2-nav__links .v2-dd__t{color:inherit;position:relative;padding:7px 0;margin:-7px 0;}
.v2-nav__right{display:flex;align-items:center;gap:14px;}
.v2-nav__login{font-weight:600;font-size:.99375rem;color:var(--v2-ink);}
@media (max-width:900px){.v2-nav__links{display:none;}}

/* ── hero ─────────────────────────────────────────────────────────────── */
.v2-hero{position:relative;padding-top:28px;overflow:hidden;background:var(--v2-surface);}
.v2-hero__fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.v2-hero__fx img{position:absolute;max-width:none;}
/* the four warm radial washes behind the headline */
.v2-glare-1{left:-10px;top:-180px;width:930px;height:850px;}
.v2-glare-2{left:345px;top:-140px;width:750px;height:670px;}
.v2-glare-3{left:533px;top:-170px;width:930px;height:850px;}
.v2-glare-4{left:482px;top:-100px;width:476px;height:356px;}
.v2-hero__grain{position:absolute;left:0;top:0;width:1440px;height:760px;opacity:.42;
    mix-blend-mode:overlay;background-repeat:repeat;background-size:130px 130px;}

.v2-hero__con{position:relative;height:500px;margin-top:30px;}
/* No opacity here: Figma exported these rings WITH their 28% baked into the PNG's
   alpha (max 71/255). Setting .28 again multiplied it to ~8% and they vanished. */
.v2-hero__ring{position:absolute;pointer-events:none;}
.v2-hero__ring--sm{left:332px;top:-50px;width:600px;height:600px;}
.v2-hero__ring--lg{left:162px;top:-220px;width:940px;height:940px;}

.v2-hero__cb{position:absolute;left:50%;transform:translateX(-50%);top:48px;width:680px;max-width:100%;
    display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;}
.v2-soc{display:flex;align-items:center;gap:10px;}
.v2-soc__av{display:flex;}
.v2-soc__av img{width:30px;height:30px;border-radius:100px;border:2.4px solid #fff;object-fit:cover;
    margin-right:-10px;transition:transform .3s var(--v2-ease);}
.v2-soc__av img:last-child{margin-right:0;}
.v2-soc:hover .v2-soc__av img{transform:translateY(-2px);}
.v2-soc__txt{font-weight:600;font-size:.8875rem;line-height:19px;color:#6b6b76;}
.v2-hero__btns{display:flex;gap:12px;align-items:center;padding-top:4px;flex-wrap:wrap;justify-content:center;}

/* the six glass tiles that float around the headline */
.v2-chip{position:absolute;width:58px;height:58px;border-radius:16px;display:flex;
    align-items:center;justify-content:center;
    background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.52));
    border:1px solid rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    filter:drop-shadow(0 10px 12px rgba(23,33,26,.08));
    animation:v2-float 7s ease-in-out infinite;}
.v2-chip img{width:26px;height:26px;position:relative;z-index:1;}

/* A 9px bob was too small to read as motion. Each tile now drifts further, on its
   own duration and with a little rotation, so they are plainly alive and plainly
   independent of one another rather than pulsing in lockstep. */
@keyframes v2-float{
    0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
    33%{transform:translate3d(3px,-16px,0) rotate(3.2deg);}
    66%{transform:translate3d(-3px,-7px,0) rotate(-2.4deg);}
}
/* A halo that breathes behind the glass, so the eye catches the tile even at rest. */
.v2-chip::before{content:'';position:absolute;inset:-9px;border-radius:22px;
    background:radial-gradient(circle at 50% 50%,rgba(29,185,84,.22),rgba(29,185,84,0) 70%);
    opacity:0;animation:v2-halo 5.6s ease-in-out infinite;}
@keyframes v2-halo{0%,100%{opacity:0;transform:scale(.82);}50%{opacity:1;transform:scale(1);}}

/* Tiles arrive after the headline rather than being there from the first frame. */
.v2-chip{opacity:0;animation:v2-chip-in .72s var(--v2-ease) forwards,v2-float 6s ease-in-out infinite;}
@keyframes v2-chip-in{from{opacity:0;transform:translateY(16px) scale(.86);}to{opacity:1;transform:none;}}

.v2-chip:hover{animation-play-state:paused;transform:translateY(-6px) scale(1.08);
    transition:transform .3s var(--v2-ease);}

.v2-chip--1{left:120px;top:74px;animation-delay:.35s,1.07s;animation-duration:.72s,6.4s;}
.v2-chip--2{left:48px;top:250px;animation-delay:.47s,1.19s;animation-duration:.72s,7.6s;}
.v2-chip--3{left:1086px;top:74px;animation-delay:.41s,1.13s;animation-duration:.72s,5.8s;}
.v2-chip--4{left:120px;top:426px;animation-delay:.59s,1.31s;animation-duration:.72s,8.2s;}
.v2-chip--5{left:1086px;top:426px;animation-delay:.53s,1.25s;animation-duration:.72s,6.9s;}
.v2-chip--6{left:1158px;top:250px;animation-delay:.65s,1.37s;animation-duration:.72s,7.1s;}
.v2-chip--2::before{animation-delay:.6s;} .v2-chip--3::before{animation-delay:1.2s;}
.v2-chip--4::before{animation-delay:1.8s;} .v2-chip--5::before{animation-delay:2.4s;}
.v2-chip--6::before{animation-delay:3s;}
@media (max-width:1180px){.v2-chip{display:none;}}

@media (max-width:1100px){
    .v2-hero__con{height:auto;}
    .v2-hero__cb{position:static;transform:none;width:100%;margin-inline:auto;}
    .v2-hero__ring{display:none;}
    /* On desktop the copy block is absolutely positioned inside a fixed-height box,
       which leaves the dashboard its own air. Once the block goes static that air
       disappears and the mock butts straight against the buttons. The mock also
       starts ~22px above this wrapper's top edge, so the margin has to clear that
       before any of it shows as a gap. */
    .v2-dw{margin-top:58px;}
}

/* ── trust strip ──────────────────────────────────────────────────────── */
.v2-trust{background:#fff;padding:40px 0;display:flex;flex-direction:column;align-items:center;gap:26px;}
/* margin:0 is load-bearing — there is no global p reset (one would repaint the
   included dashboard), and the UA's 1em top+bottom made this strip 28px too tall. */
.v2-trust__t{margin:0;font-weight:500;font-size:.8875rem;line-height:19px;color:var(--v2-muted-2);
    letter-spacing:.01em;text-align:center;}
.v2-trust__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 48px;}
.v2-trust__logos img{height:30px;width:auto;object-fit:contain;opacity:.72;
    transition:opacity .3s var(--v2-ease),transform .3s var(--v2-ease);}
.v2-trust__logos img:hover{opacity:1;transform:translateY(-2px);}

/* ── reveal on scroll ─────────────────────────────────────────────────── */
/* ⚠️ The hidden state is gated on html.v2-anim, which JS adds only when it is in a
   position to put it back. A plain `.v2-rv{opacity:0}` means that anything which stops
   the observer firing — no JS, a prerender, a tab that never painted — leaves the whole
   page invisible rather than merely unanimated. Seen for real: in a hidden browser pane
   IntersectionObserver never fires and every section stayed at opacity 0. */
.v2-anim .v2-rv{opacity:0;transform:translateY(22px);
    transition:opacity .7s var(--v2-ease),transform .7s var(--v2-ease);}
.v2-anim .v2-rv.is-in{opacity:1;transform:none;}

/* ── section furniture, shared from here on ──────────────────────────── */
.v2-sec{position:relative;overflow:hidden;padding:84px 0;}
.v2-sec--warm{background:#f1efeb;}
.v2-sec__glow{position:absolute;pointer-events:none;max-width:none;}
.v2-eye{display:inline-flex;align-items:center;gap:9px;background:#fff;
    border:1px solid var(--v2-line-warm);border-radius:100px;padding:6px 16px 6px 13px;
    font-weight:600;font-size:.8125rem;line-height:19px;color:var(--v2-ink);}
.v2-eye img{width:7px;height:7px;}
.v2-h2{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;font-weight:500;
    font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.45;letter-spacing:-.02em;
    color:var(--v2-ink);margin:0;text-wrap:balance;}
.v2-sec__head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:40px;}
.v2-sec__sub{font-size:1.125rem;line-height:29px;color:#55525e;margin:0;max-width:620px;}

/* ── Features bento (Figma 175:277) ──────────────────────────────────── */
.v2-bento{display:grid;grid-template-columns:380px 400px 480px;gap:18px;align-items:start;}
/* ⚠️ min-width:0. A `1fr` track is minmax(AUTO,1fr), and auto means min-content — so on
   a phone the widest module row (388px) plus the agent viewport's bleed was forcing the
   track to 436px inside a 335px grid. It did not scroll, it was clipped by the section's
   overflow:hidden, which is the worst way for it to fail. */
.v2-bento__col{display:flex;flex-direction:column;gap:18px;min-width:0;}
.v2-ag{min-width:0;}
.v2-bc{min-width:0;}
.v2-bc{border-radius:24px;overflow:hidden;position:relative;
    transition:transform .4s var(--v2-ease);}
.v2-bc:hover{transform:translateY(-4px);}
.v2-bc--dark{background:var(--v2-forest-2);color:#fff;}
.v2-bc--light{background:#fff;border:1px solid #eceae6;}
.v2-bc__title{font-family:var(--v2-font-body);font-weight:600;font-size:1.35rem;line-height:27px;
    letter-spacing:-.005em;color:var(--v2-ink);margin:0;}
.v2-bc__body{font-size:.91875rem;line-height:22px;color:#55525e;margin:6px 0 0;}
.v2-bc--dark .v2-bc__title{color:#fff;font-family:var(--v2-font-display);
    font-variation-settings:'wdth' 100;font-weight:600;letter-spacing:-.005em;}
.v2-bc--dark .v2-bc__body{color:#a5a2ad;}

/* c1 — the agent checklist, on a loop.
   The Figma draws the first two and the last row part-faded, which is a still of a
   list that scrolls: the rows run top to bottom for ever and the edge gradients do
   the fading, so no single row is permanently dimmed. */
.v2-agents{height:620px;padding:34px 24px;display:flex;flex-direction:column;}
.v2-agents__vp{position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;
    margin:0 -24px;padding:0 24px;}
@media (max-width:860px){.v2-agents__vp{margin:0;padding:0;}}
/* Stepped, not scrolling: the track advances exactly one row per tick and rests,
   so each line is readable. Transform only, so it runs on the compositor. */
.v2-agents__track{display:flex;flex-direction:column;gap:12px;will-change:transform;
    transition:transform .85s var(--v2-ease);}
.v2-agents__track.is-snapping{transition:none;}
@media (prefers-reduced-motion:reduce){.v2-agents__track{transition:none;}}
.v2-agents__fade{position:absolute;left:0;width:100%;height:110px;pointer-events:none;z-index:2;}
.v2-agents__fade--t{top:0;background:linear-gradient(180deg,var(--v2-forest-2) 18%,rgba(7,29,16,0));}
.v2-agents__fade--b{bottom:0;background:linear-gradient(0deg,var(--v2-forest-2) 18%,rgba(7,29,16,0));}
.v2-ag{display:flex;align-items:center;gap:12px;background:#0a2917;border-radius:12px;
    padding:13px 14px;font-weight:500;font-size:.95rem;line-height:20px;color:#a5a2ad;}
.v2-ag b{width:22px;height:22px;border-radius:100px;border:1.6px solid #34343c;flex:0 0 auto;}
.v2-ag.is-done{color:#fff;}
.v2-ag b{display:flex;align-items:center;justify-content:center;
    transition:background-color .4s var(--v2-ease),border-color .4s var(--v2-ease);}
.v2-ag b img{width:13px;height:13px;opacity:0;transform:scale(.4);
    transition:opacity .34s var(--v2-ease),transform .34s var(--v2-ease);}
.v2-ag.is-done{color:#fff;}
.v2-ag.is-done b{background:var(--v2-green);border-color:var(--v2-green);}
.v2-ag.is-done b img{opacity:1;transform:none;}
/* The row landing on the focus line gets the tick, with one small pop so the eye
   catches which one just completed. */
.v2-ag.is-landing b{animation:v2-tick .5s var(--v2-ease);}
@keyframes v2-tick{0%{transform:scale(1);}45%{transform:scale(1.22);}100%{transform:scale(1);}}
.v2-ag.is-landing{background:#0d3520;}
.v2-agents__txt{margin-top:auto;padding-top:24px;}

/* c2a — the AI chat card */
.v2-ai{height:250px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;}
.v2-ai__glow{position:absolute;left:-40px;top:-70px;width:260px;height:260px;border-radius:130px;
    background:radial-gradient(circle,rgba(29,185,84,.16),rgba(29,185,84,0) 68%);pointer-events:none;}
.v2-bub{position:absolute;max-width:250px;padding:8px 12px;font-size:.78125rem;line-height:17px;
    filter:drop-shadow(0 1px 1px rgba(23,20,31,.05));}
.v2-bub--them{right:24px;top:33px;background:#f3f1f6;color:#3b3846;
    border-radius:14px 14px 5px 14px;}
.v2-bub--us{left:24px;top:81px;background:var(--v2-green);color:#fff;
    border-radius:14px 14px 14px 5px;}

/* c2b — inventory */
.v2-inv{height:352px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;}
.v2-inv__panel{position:absolute;left:24px;top:22px;width:350px;max-width:calc(100% - 48px);}
.v2-sku{display:inline-flex;align-items:center;gap:7px;background:var(--v2-forest-2);
    border-radius:9px;padding:6px 11px;font-family:'Cousine',ui-monospace,monospace;
    font-size:.71875rem;letter-spacing:.3px;color:#fff;}
.v2-sku i{width:5px;height:5px;border-radius:2.5px;background:var(--v2-green);display:block;}
.v2-inv__rows{position:relative;margin-top:12px;}
.v2-inv__rows::before{content:'';position:absolute;left:11px;top:14px;width:1px;height:42px;
    background:linear-gradient(180deg,#dcd8e4,#eceae6);}
.v2-ir{display:flex;align-items:center;gap:10px;padding-left:28px;position:relative;height:36px;}
.v2-ir::before{content:'';position:absolute;left:8px;top:13px;width:9px;height:9px;
    border-radius:4.5px;background:#fff;border:1px solid var(--v2-green);}
.v2-ir span{flex:1;font-weight:500;font-size:.8125rem;letter-spacing:.1px;color:#3b3846;}
.v2-ir b{background:#0b6e34;color:#fff;border-radius:7px;padding:3px 9px;
    font-weight:700;font-size:.8125rem;}
/* Was 63px tall and sat 3px off the heading below — it read as one block.
   Tighter padding and leading, plus a real gap underneath. */
.v2-inv__hist{margin-top:10px;background:#faf9fc;border:1px solid #eceae6;border-radius:10px;
    padding:7px 11px;}
.v2-inv__hist em{display:block;font-style:normal;font-size:.625rem;line-height:1.3;letter-spacing:.5px;
    text-transform:uppercase;color:#8b8796;}
.v2-inv__hist b{display:block;margin-top:1px;font-weight:600;font-size:.75rem;line-height:1.35;color:var(--v2-ink);}
.v2-inv__panel{padding-bottom:18px;}

/* c3a — product optimisation */
.v2-po{height:352px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;}
.v2-po__ui{display:flex;gap:20px;align-items:flex-start;}
.v2-po__img{width:184px;height:190px;border-radius:14px;object-fit:cover;flex:0 0 auto;}
.v2-po__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:15px;}
.v2-po__lbl{font-weight:500;font-size:.65625rem;line-height:14px;letter-spacing:.42px;color:#908d99;margin:0;}
.v2-po__val{font-weight:600;font-size:.96875rem;line-height:21px;color:#fff;margin:4px 0 0;}
.v2-po__bars{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.v2-po__bars i{display:block;height:8px;border-radius:100px;background:#0c331c;}
.v2-po__cat{background:#0c331c;border-radius:10px;padding:10px 12px;}
.v2-po__cat em{display:block;font-style:normal;font-weight:500;font-size:.625rem;
    line-height:14px;letter-spacing:.4px;color:#908d99;}
.v2-po__cat b{display:block;margin-top:4px;font-weight:600;font-size:.875rem;line-height:19px;color:#fff;}

/* c3b — fraud score */
.v2-sec-card{height:250px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;}
/* The card is a fixed 250 with its text anchored to the bottom, so the mock
   has to finish above the title. At top:22 it ended at 150 and the title began
   at 148: a 2px overlap. top:10 leaves about 13px of air under the mock. */
.v2-fraud{position:absolute;left:24px;top:10px;width:430px;max-width:calc(100% - 48px);}
.v2-fraud__row{display:flex;align-items:center;justify-content:space-between;background:#fff;
    border:1px solid #eceae6;border-radius:14px;padding:11px 14px;
    filter:drop-shadow(0 4px 7px rgba(23,20,31,.06));}
.v2-fraud__row > b{font-weight:700;font-size:.84375rem;letter-spacing:.4px;color:var(--v2-ink);}
.v2-fraud__score{display:flex;align-items:center;gap:8px;}
.v2-fraud__meter{width:92px;height:6px;border-radius:3px;background:#efedf2;overflow:hidden;}
.v2-fraud__meter i{display:block;height:6px;border-radius:3px;background:var(--v2-green);
    animation:v2-fill 1.2s var(--v2-ease) both;}
.v2-fraud__score b{font-weight:700;font-size:.8125rem;color:var(--v2-green);}
.v2-couriers{display:flex;gap:8px;margin-top:8px;}
.v2-cu{flex:1;min-width:0;background:#fff;border:1px solid #eceae6;border-radius:12px;padding:9px 11px;}
.v2-cu em{display:block;font-style:normal;font-size:.6875rem;color:#8b8796;}
.v2-cu b{display:block;margin-top:2px;font-weight:700;font-size:.78125rem;color:var(--v2-ink);}
.v2-cu__pips{display:flex;gap:2px;margin-top:6px;}
.v2-cu__pips i{flex:1;height:4px;border-radius:2px;background:#a7e6c0;}
.v2-cu__pips i.is-on{background:var(--v2-green);}

@media (max-width:1340px){
    .v2-bento{grid-template-columns:1fr 1fr;}
    .v2-bento__col:first-child{grid-column:1/-1;}
    /* ⚠️ NOT height:auto. The rows are a scrolling loop, listed twice so it meets
       itself with no seam, and a card with no height showed all forty of them:
       1,624px of dark green on a phone. It stays a window at every width. */
    .v2-agents{height:470px;}
}
@media (max-width:860px){
    .v2-bento{grid-template-columns:1fr;}
    .v2-bento__col:first-child{grid-column:auto;}
    .v2-ai,.v2-inv,.v2-po,.v2-sec-card{height:auto;min-height:250px;}
    .v2-fraud,.v2-inv__panel{position:static;width:auto;margin-bottom:16px;}
    .v2-bub{position:static;display:inline-block;margin:4px 0;}
}


/* ── bento motion ──────────────────────────────────────────────────────
   Each card animates the thing it is actually claiming, and nothing runs
   until the card has been scrolled into view (.is-in comes from the reveal
   observer), so nothing is burning frames off-screen. */
@media (prefers-reduced-motion:no-preference){

    /* Inventory: one order lands, and the same SKU steps down in every shop in
       turn — which is the whole point of a shared stock pool. */
    .v2-inv .v2-ir b{opacity:.35;transform:translateX(-4px);}
    .v2-inv.is-in .v2-ir b{animation:v2-stock 6s var(--v2-ease) infinite;}
    .v2-inv.is-in .v2-ir:nth-child(1) b{animation-delay:.2s;}
    .v2-inv.is-in .v2-ir:nth-child(2) b{animation-delay:.75s;}
    .v2-inv.is-in .v2-ir:nth-child(3) b{animation-delay:1.3s;}
    @keyframes v2-stock{
        0%{opacity:.35;transform:translateX(-4px) scale(.96);}
        9%{opacity:1;transform:translateX(0) scale(1.06);}
        16%,72%{opacity:1;transform:translateX(0) scale(1);}
        92%,100%{opacity:.35;transform:translateX(-4px) scale(.96);}
    }
    .v2-inv.is-in .v2-ir::before{animation:v2-dot 6s var(--v2-ease) infinite;}
    .v2-inv.is-in .v2-ir:nth-child(2)::before{animation-delay:.55s;}
    .v2-inv.is-in .v2-ir:nth-child(3)::before{animation-delay:1.1s;}
    @keyframes v2-dot{
        0%,6%{background:#fff;box-shadow:none;}
        12%,70%{background:var(--v2-green);box-shadow:0 0 0 3px rgba(29,185,84,.18);}
        90%,100%{background:#fff;box-shadow:none;}
    }

    /* Biponik AI: the question arrives, then the answer — a conversation. */
    .v2-ai .v2-bub{opacity:0;}
    .v2-ai.is-in .v2-bub--them{animation:v2-bub-in 7s var(--v2-ease) .4s infinite;}
    .v2-ai.is-in .v2-bub--us{animation:v2-bub-in 7s var(--v2-ease) 1.5s infinite;}
    @keyframes v2-bub-in{
        0%{opacity:0;transform:translateY(8px) scale(.94);}
        7%,82%{opacity:1;transform:none;}
        95%,100%{opacity:0;transform:translateY(-4px) scale(.98);}
    }

    /* SEO: the checks pass one after another as the keyphrase is applied. */
    .v2-po__bars i{transform-origin:left;}
    .v2-po.is-in .v2-po__bars i{animation:v2-check 6s var(--v2-ease) infinite;}
    .v2-po.is-in .v2-po__bars i:nth-child(2){animation-delay:.5s;}
    @keyframes v2-check{
        0%{transform:scaleX(0);background:#0c331c;}
        14%{transform:scaleX(1);background:#0c331c;}
        24%,74%{transform:scaleX(1);background:#14492a;}
        94%,100%{transform:scaleX(0);background:#0c331c;}
    }

    /* Security: the score counts up, then each courier's record fills in. */
    .v2-sec-card.is-in .v2-fraud__meter i{animation:v2-meter 7s var(--v2-ease) infinite;}
    @keyframes v2-meter{0%{width:0;}18%,76%{width:82%;}96%,100%{width:0;}}
    .v2-cu__pips i{opacity:.25;}
    .v2-sec-card.is-in .v2-cu__pips i{animation:v2-pip 7s var(--v2-ease) infinite;}
    .v2-sec-card.is-in .v2-cu:nth-child(2) .v2-cu__pips i{animation-delay:.35s;}
    .v2-sec-card.is-in .v2-cu:nth-child(3) .v2-cu__pips i{animation-delay:.7s;}
    .v2-cu__pips i:nth-child(2){animation-delay:.08s;}
    .v2-cu__pips i:nth-child(3){animation-delay:.16s;}
    .v2-cu__pips i:nth-child(4){animation-delay:.24s;}
    .v2-cu__pips i:nth-child(5){animation-delay:.32s;}
    @keyframes v2-pip{0%{opacity:.25;}20%,78%{opacity:1;}96%,100%{opacity:.25;}}
}

/* ── Automation (Figma 175:424) ──────────────────────────────────────── */
.v2-auto{display:flex;gap:48px;align-items:center;}
.v2-auto__left{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.v2-auto__h{line-height:1.15;letter-spacing:-.015em;color:#171222;}
.v2-auto__sub{font-size:1.0625rem;line-height:28px;color:var(--v2-body-2);margin:0;}
.v2-auto__canvas{flex:0 0 auto;width:640px;max-width:100%;height:400px;background:#f6f5fa;
    border:1px solid var(--v2-line);border-radius:22px;overflow:hidden;}
/* Centred: between 760px and 1180px the canvas is wider than the 640px diagram. */
.v2-flow{position:relative;width:640px;height:400px;margin-inline:auto;}
.v2-flow__lines{position:absolute;left:183px;top:77px;width:274px;height:246px;}
/* Drawn on when the diagram is revealed, one path after another, so the eye follows
   the order through the system instead of meeting four finished lines. */
/* The rail draws itself in once, on reveal. */
.v2-flow__rail{opacity:.32;stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);}
.v2-rv.is-in .v2-flow__rail{animation:v2-draw .85s var(--v2-ease) forwards;}
.v2-rv.is-in .v2-flow__rail:nth-of-type(1){animation-delay:.15s;}
.v2-rv.is-in .v2-flow__rail:nth-of-type(2){animation-delay:.60s;}
.v2-rv.is-in .v2-flow__rail:nth-of-type(3){animation-delay:.78s;}
.v2-rv.is-in .v2-flow__rail:nth-of-type(4){animation-delay:.96s;}
@keyframes v2-draw{to{stroke-dashoffset:0;}}

/* Then a bright segment runs the route, for ever: in to the hub first, then out to
   all three at once — which is what actually happens when an order lands. */
.v2-flow__pulse{opacity:0;stroke-dasharray:var(--seg,22) var(--gap,999);stroke-dashoffset:var(--start,999);}
.v2-rv.is-in .v2-flow__pulse{animation:v2-pulse-run var(--cycle,3.6s) linear infinite;}
.v2-rv.is-in .v2-flow__pulse:nth-of-type(n+2){animation-delay:1.15s;}
@keyframes v2-pulse-run{
    0%{opacity:0;stroke-dashoffset:var(--start,999);}
    6%{opacity:1;}
    /* the segment is on the wire for the first third of the cycle, then the wire rests */
    32%{opacity:1;stroke-dashoffset:var(--end,0);}
    38%,100%{opacity:0;stroke-dashoffset:var(--end,0);}
}

/* The hub lights as the order reaches it; each output flashes as its pulse lands. */
.v2-rv.is-in .v2-node--hub{animation:v2-hub 3.6s var(--v2-ease) infinite;}
@keyframes v2-hub{
    0%,24%{box-shadow:none;}
    32%{box-shadow:0 0 0 6px rgba(29,185,84,.16);}
    48%,100%{box-shadow:none;}
}
.v2-rv.is-in .v2-node--out{animation:v2-arrive 3.6s var(--v2-ease) infinite;}
@keyframes v2-arrive{
    0%,46%{transform:none;border-color:#ebeaef;}
    54%{transform:translateY(-3px);border-color:rgba(29,185,84,.55);}
    72%,100%{transform:none;border-color:#ebeaef;}
}
.v2-rv.is-in .v2-node--out .v2-node__ic{animation:v2-arrive-ic 3.6s var(--v2-ease) infinite;}
@keyframes v2-arrive-ic{
    0%,46%{background:#f1f0f4;}
    54%,68%{background:#dcf6e5;}
    80%,100%{background:#f1f0f4;}
}

.v2-node{position:absolute;display:flex;align-items:center;gap:11px;padding:0 14px;
    background:#fff;border:1px solid #ebeaef;border-radius:14px;
    transition:transform .35s var(--v2-ease);}
.v2-node:hover{transform:translateY(-3px);}
.v2-node b{display:block;font-weight:600;font-size:.875rem;line-height:18px;color:var(--v2-ink);}
.v2-node em{display:block;font-style:normal;font-size:.71875rem;line-height:15px;color:#908d99;}
.v2-node__ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:#f1f0f4;
    display:flex;align-items:center;justify-content:center;}
.v2-node__ic img{width:20px;height:20px;}
.v2-node--in{left:8px;top:160px;width:180px;height:76px;}
.v2-node--hub{left:244px;top:150px;width:168px;height:96px;background:var(--v2-forest-2);
    border-color:var(--v2-forest-2);}
.v2-node--hub b{color:#fff;} .v2-node--hub em{color:#a7e6c0;}
.v2-node--hub .v2-node__ic{background:rgba(255,255,255,.14);}
.v2-node--out{left:460px;width:172px;height:72px;}
.v2-flow__dot{position:absolute;width:9px;height:9px;opacity:0;}
.v2-rv.is-in .v2-flow__dot{animation:v2-dot-in .5s var(--v2-ease) forwards;}
@keyframes v2-dot-in{from{opacity:0;transform:scale(.3);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
    .v2-flow__rail{stroke-dashoffset:0;opacity:.32;}
    .v2-flow__pulse{display:none;}
    .v2-flow__dot{opacity:1;}
}
/* The diagram is drawn at a fixed 640x400, so on a phone it is scaled rather than
   cropped: the canvas clips its overflow, and a half-diagram is no diagram.
   ⚠️ The scale CANNOT be written here. transform:scale() takes a number, and every
   way of spelling the ratio in CSS (calc((100vw - 40px) / 640), cqw, a percentage)
   produces a length, so the whole declaration was dropped and the phone got the
   left 350px of a 640px diagram. scripts.blade.php measures the canvas and sets
   --v2-flow-s instead; the fallback below is for a page with no JavaScript, where
   scrolling to the rest of it beats losing it. */
@media (max-width:760px){
    .v2-auto__canvas{height:auto;aspect-ratio:640/400;overflow:auto;}
    .v2-flow{transform:scale(var(--v2-flow-s,1));transform-origin:top left;}
}
@media (max-width:1180px){
    .v2-auto{flex-direction:column;align-items:stretch;}
    .v2-auto__canvas{width:100%;overflow-x:auto;}
}

/* ── Solutions (Figma 175:501) ───────────────────────────────────────── */
.v2-sec__head--center{align-items:center;text-align:center;gap:12px;margin-bottom:38px;}
/* Figma 175:506 constrains the heading to 383px so it breaks over two lines; left
   unconstrained it sits on one and the block comes out 36px short of the design. */
/* Figma 175:506 sets 48px leading on this heading, where Features (175:274) uses 58px
   for the same 40px type. Different sections, different leading — not one scale. */
.v2-sec__head--center .v2-h2{max-width:383px;line-height:1.2;}
.v2-sec__head--center .v2-sec__sub{max-width:447px;}
.v2-sols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch;}
.v2-sol{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
    min-width:0;padding:26px;background:#fff;border:1px solid #ecebe9;border-radius:22px;
    overflow:hidden;
    transition:transform .4s var(--v2-ease),border-color .4s var(--v2-ease);}
.v2-sol:hover{transform:translateY(-6px);border-color:#ddddd8;
    }
.v2-sol__glow{position:absolute;left:199px;top:-71px;width:150px;height:150px;pointer-events:none;
    transition:transform .6s var(--v2-ease),opacity .6s var(--v2-ease);}
.v2-sol:hover .v2-sol__glow{transform:translate(-14px,10px) scale(1.18);opacity:.9;}
.v2-sol__top{display:flex;align-items:center;justify-content:space-between;width:100%;}
.v2-sol__tile{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;
    justify-content:center;flex:0 0 auto;transition:transform .4s var(--v2-ease);}
.v2-sol__tile img{width:27px;height:27px;}
/* The tile and the arrow now do what every button does: the icon rises out of the
   top and its clone rises in from below. The hover lives on the CARD, not on the
   icon, so the whole card is the trigger. scripts.blade.php builds the clones. */
.v2-sol__tile,.v2-sol__arr{overflow:hidden;}
.v2-sol:hover .v2-sol__tile .v2-sw__l,.v2-sol:focus-visible .v2-sol__tile .v2-sw__l,
.v2-sol:hover .v2-sol__arr .v2-sw__l,.v2-sol:focus-visible .v2-sol__arr .v2-sw__l{
    transform:translateY(-130%);opacity:0;}
.v2-sol:hover .v2-sol__tile .v2-sw__l--c,.v2-sol:focus-visible .v2-sol__tile .v2-sw__l--c,
.v2-sol:hover .v2-sol__arr .v2-sw__l--c,.v2-sol:focus-visible .v2-sol__arr .v2-sw__l--c{
    transform:none;opacity:1;}
.v2-sol__arr{width:42px;height:42px;border-radius:100px;background:var(--v2-forest-2);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    transition:transform .4s var(--v2-ease);}
.v2-sol__arr img{width:17px;height:17px;}

/* Figma 175:521 is a real 4px spacer between the flex gaps, not a margin — it carries
   a gap on each side, so it is worth 22px, not 4. */
.v2-sol__sp{height:4px;width:10px;flex:0 0 auto;}
.v2-sol__t{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;font-weight:600;
    font-size:1.25rem;line-height:25px;letter-spacing:-.005em;color:var(--v2-ink);}
.v2-sol__b{font-size:.90625rem;line-height:22px;color:#55525e;}
@media (max-width:1100px){.v2-sols{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.v2-sols{grid-template-columns:minmax(0,1fr);}}

/* ── AI Spotlight (Figma 175:571) ────────────────────────────────────── */
.v2-ais{position:relative;overflow:hidden;}
.v2-ais__glow{position:absolute;left:780px;top:-110px;width:820px;height:560px;
    pointer-events:none;max-width:none;}
.v2-ais__panel{background:linear-gradient(180deg,#092515,#05140b);overflow:hidden;
    padding:56px 0;position:relative;}
.v2-ais__grid{display:flex;gap:48px;align-items:center;}
.v2-ais__left{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
.v2-eye--dark{background:rgba(255,255,255,.12);border-color:transparent;color:#f2f2f4;}
.v2-ais__h{color:#fff;line-height:1.25;letter-spacing:-.015em;}
.v2-ais__sub{font-size:1.09375rem;line-height:29px;color:#f2f2f4;margin:0;opacity:.88;}
.v2-ais__list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.v2-ais__list li{display:flex;align-items:center;gap:12px;font-weight:500;
    font-size:.99375rem;line-height:21px;color:#f2f2f4;}
.v2-ais__ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;
    background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;
    transition:background-color .3s var(--v2-ease),transform .3s var(--v2-ease);}
.v2-ais__ic img{width:19px;height:19px;}
.v2-ais__list li:hover .v2-ais__ic{background:rgba(29,185,84,.28);transform:translateY(-2px);}
.v2-anim .v2-ais__left.is-in .v2-ais__list li{animation:v2-rise .55s var(--v2-ease) both;
    animation-delay:calc(.25s + var(--i) * .11s);}
@keyframes v2-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* the chat mock */
.v2-ais__chat{flex:0 0 auto;width:420px;max-width:100%;background:#fff;border-radius:22px;
    overflow:hidden;box-shadow:0 14px 34px -22px rgba(0,0,0,.30);}
.v2-chat__head{display:flex;align-items:center;gap:12px;padding:16px 18px;
    background:var(--v2-surface-3);border-bottom:1px solid var(--v2-line);}
.v2-chat__av{width:42px;height:42px;flex:0 0 auto;border-radius:100px;
    background:linear-gradient(119deg,#2a2140 0%,#05140b 71%);
    display:flex;align-items:center;justify-content:center;}
.v2-chat__av img{width:22px;height:22px;}
.v2-chat__who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.v2-chat__who b{font-weight:700;font-size:.99375rem;line-height:21px;letter-spacing:-.003em;color:var(--v2-ink-2);}
.v2-chat__who em{display:flex;align-items:center;gap:6px;font-style:normal;font-weight:500;
    font-size:.7875rem;line-height:17px;color:var(--v2-muted);}
.v2-chat__who em img{width:7px;height:7px;}
.v2-chat__body{display:flex;flex-direction:column;gap:12px;padding:20px 18px 18px;background:#fff;}
.v2-chat__row{display:flex;}
.v2-chat__row--me{justify-content:flex-end;}
.v2-chat__b{display:block;max-width:86%;padding:11px 15px;font-size:.91875rem;line-height:22px;}
.v2-chat__row--me .v2-chat__b{background:var(--v2-forest-2);color:#fff;border-radius:16px 4px 16px 16px;}
.v2-chat__row--ai .v2-chat__b{background:var(--v2-wash);color:var(--v2-ink-2);border-radius:4px 16px 16px 16px;}
/* The conversation plays in as if it were happening, rather than arriving finished. */
.v2-anim .v2-ais__chat.is-in .v2-chat__row{animation:v2-say .5s var(--v2-ease) both;
    animation-delay:calc(.35s + var(--i,3) * .5s);}
@keyframes v2-say{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
.v2-chat__inp{display:flex;align-items:center;justify-content:space-between;
    padding:12px 10px 12px 18px;background:var(--v2-surface-3);border-top:1px solid var(--v2-line);
    font-size:.91875rem;line-height:19px;color:var(--v2-muted);}
.v2-chat__send{width:38px;height:38px;border-radius:100px;background:var(--v2-forest-2);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    transition:transform .3s var(--v2-ease);}
.v2-chat__send img{width:18px;height:18px;}
.v2-ais__chat:hover .v2-chat__send{transform:scale(1.08);}

@media (max-width:1040px){
    .v2-ais__grid{flex-direction:column;align-items:stretch;}
    .v2-ais__chat{width:100%;}
    .v2-ais__glow{display:none;}
}

/* ── Templates (Figma 175:634) ───────────────────────────────────────── */
.v2-tpl__head{width:820px;max-width:100%;margin-inline:auto;gap:14px;margin-bottom:40px;}
.v2-tpl__head .v2-h2{max-width:none;line-height:1.25;letter-spacing:-.02em;}
.v2-tpl__head .v2-sec__sub{max-width:none;}
.v2-tpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.v2-tpl{display:flex;flex-direction:column;min-width:0;background:#fff;
    border:1px solid #e6e4e0;border-radius:20px;overflow:hidden;
    transition:transform .4s var(--v2-ease);}
.v2-tpl:hover{transform:translateY(-6px);}
.v2-tpl__cov{position:relative;height:198px;overflow:hidden;background:var(--v2-wash);}
.v2-tpl__cov img{width:100%;height:100%;object-fit:cover;object-position:top center;
    transition:transform .8s var(--v2-ease);}
/* The cover is a screenshot of a real storefront, so panning it on hover shows more
   of the page rather than just scaling a crop. */
.v2-tpl:hover .v2-tpl__cov img{transform:scale(1.04);}
.v2-tpl__paid{position:absolute;right:12px;top:12px;background:rgba(7,29,16,.88);color:#fff;
    font-weight:600;font-size:.6875rem;line-height:1;padding:6px 10px;border-radius:100px;
    backdrop-filter:blur(4px);}
.v2-tpl__ft{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:18px 20px;}
.v2-tpl__col{display:flex;flex-direction:column;gap:2px;min-width:0;}
.v2-tpl__col b{font-family:var(--v2-font-num);font-weight:600;font-size:1.125rem;
    line-height:23px;letter-spacing:-.003em;color:var(--v2-ink);}
.v2-tpl__col em{font-style:normal;font-weight:500;font-size:.8125rem;line-height:17px;color:#8e8b97;}
.v2-tpl__pv{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
    background:#f3f2f0;border-radius:100px;padding:9px 11px 9px 13px;
    font-weight:600;font-size:.78125rem;line-height:16px;color:var(--v2-ink);
    transition:background-color .3s var(--v2-ease),transform .3s var(--v2-ease);}
.v2-tpl__pv img{width:13px;height:13px;}
.v2-tpl__pv:hover{background:var(--v2-forest-2);color:#fff;}
.v2-tpl__pv:hover img{filter:brightness(0) invert(1);}
.v2-tpl__all{display:flex;justify-content:center;margin-top:40px;}
.v2-btn--outline{background:#fff;color:var(--v2-ink);border:1.5px solid #ded9d0;
    padding:15px 20px 15px 24px;font-size:.96875rem;}
.v2-btn--outline:hover{border-color:#c7c0b3;background:#fbfaf8;}
@media (max-width:1100px){.v2-tpls{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:680px){.v2-tpls{grid-template-columns:minmax(0,1fr);}}

/* ── ValueProps (Figma 175:792) ──────────────────────────────────────── */
.v2-vp__head{gap:14px;margin-bottom:44px;}
.v2-vp__head .v2-h2{max-width:525px;line-height:1.25;letter-spacing:-.02em;}
.v2-vp__head .v2-sec__sub{max-width:683px;}
.v2-vps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start;}
.v2-vp{display:flex;flex-direction:column;gap:14px;min-width:0;height:202px;
    padding:26px 24px;background:#fbfaf8;border:1px solid #e6e4e0;border-radius:18px;
    transition:transform .4s var(--v2-ease),background-color .4s var(--v2-ease);}
.v2-vp:hover{transform:translateY(-5px);background:#fff;}
.v2-vp__tile{width:52px;height:52px;flex:0 0 auto;border-radius:14px;
    background:linear-gradient(180deg,#133d22,#05160c);
    display:flex;align-items:center;justify-content:center;
    transition:transform .45s var(--v2-ease);}
.v2-vp__tile img{width:25px;height:25px;}
.v2-vp:hover .v2-vp__tile{transform:translateY(-2px) rotate(-5deg) scale(1.05);}
.v2-vp__t{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;font-weight:600;
    font-size:1.1875rem;line-height:24px;letter-spacing:-.005em;color:var(--v2-ink);margin:0;}
.v2-vp__b{font-size:.90625rem;line-height:22px;color:#55525e;margin:0;}
@media (max-width:1100px){.v2-vps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.v2-vps{grid-template-columns:minmax(0,1fr);}.v2-vp{height:auto;}}

/* ── Pricing (Figma 175:833) ─────────────────────────────────────────── */
.v2-pr__head{gap:14px;margin-bottom:36px;}
.v2-pr__head .v2-h2{max-width:524px;line-height:1.25;letter-spacing:-.02em;}
/* Figma measures this line at exactly 415; Hind Siliguri renders it at 416 in a
   browser, so the Figma's own cap wrapped it and cost the head 30px. */
.v2-pr__head .v2-sec__sub{max-width:432px;}
.v2-tog{display:inline-flex;align-items:center;gap:6px;padding:6px;background:#fff;
    border:1px solid #e6e4e0;border-radius:100px;margin-top:2px;}
.v2-tog button{border:0;background:transparent;cursor:pointer;border-radius:100px;
    padding:9px 18px;font-family:var(--v2-font-body);font-weight:600;font-size:.875rem;
    line-height:18px;color:var(--v2-body-2);display:inline-flex;align-items:center;gap:7px;
    transition:background-color .3s var(--v2-ease),color .3s var(--v2-ease);}
.v2-tog button.is-active{background:var(--v2-forest-2);color:#fff;}
.v2-tog__sv{background:#e7f6ec;color:var(--v2-green-up);font-weight:700;font-size:.6875rem;
    line-height:15px;padding:3px 8px;border-radius:100px;}
.v2-tog button.is-active .v2-tog__sv{background:rgba(255,255,255,.16);color:#a7e6c0;}

/* ⚠️ The gap and the side padding here are load-bearing, not decoration. These
   cards list features typed in the admin, and the longest of them needs 245px of
   text box. At an 18px gap with 24px sides the box was 233 and that feature wrapped,
   pushing one card 75px past its neighbours. 12 and 20 give it 249. */
.v2-prs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;}
.v2-pr{display:flex;flex-direction:column;gap:18px;min-width:0;background:#fff;
    border:1px solid #e6e4e0;border-radius:20px;padding:26px 20px;
    transition:transform .4s var(--v2-ease);}
.v2-pr:hover{transform:translateY(-5px);}
.v2-pr.is-featured{background:var(--v2-forest-2);border-color:var(--v2-forest-2);
    padding-top:30px;}
.v2-pr__th{display:flex;flex-direction:column;gap:6px;width:100%;}
.v2-pr__nr{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.v2-pr__nr h3{margin:0;font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;
    font-weight:600;font-size:1.3125rem;line-height:27px;letter-spacing:-.005em;color:var(--v2-ink);}
.v2-pr.is-featured .v2-pr__nr h3{color:#fff;}
.v2-pr__badge{background:#f6b23c;color:#3a2a06;font-weight:700;font-size:.6875rem;
    line-height:15px;padding:4px 10px;border-radius:100px;flex:0 0 auto;}
.v2-pr__tag{margin:0;font-size:.84375rem;line-height:18px;color:#8e8b97;}
.v2-pr.is-featured .v2-pr__tag{color:#b7b4bf;}
.v2-pr__price{margin:0;display:flex;align-items:baseline;gap:4px;}
.v2-pr__price b{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;
    font-weight:500;font-size:2.375rem;line-height:44px;letter-spacing:-.02em;color:var(--v2-ink);
    font-variant-numeric:tabular-nums;}
.v2-pr__price em{font-style:normal;font-weight:500;font-size:.875rem;line-height:18px;color:#8e8b97;}
.v2-pr.is-featured .v2-pr__price b{color:#fff;}
.v2-pr.is-featured .v2-pr__price em{color:#b7b4bf;}
.v2-pr__btn{display:flex;align-items:center;justify-content:center;width:100%;
    padding:13px 10px;border-radius:100px;background:var(--v2-forest-2);color:#fff;
    font-weight:600;font-size:.90625rem;line-height:19px;
    transition:background-color .22s var(--v2-ease);}
.v2-pr__btn:hover{background:#0a2a16;}
.v2-pr.is-featured .v2-pr__btn{background:#fff;color:var(--v2-ink);}
.v2-pr__dv{display:block;height:1px;width:100%;background:#e6e4e0;}
.v2-pr.is-featured .v2-pr__dv{background:rgba(255,255,255,.14);}
.v2-pr__fl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
/* 16px, with the long lines kept to one line by moving their second half into a
   tooltip (see $splitFeature in the pricing partial) rather than by shrinking the
   type, which had taken this down to 13.5px and was hard to read. */
.v2-pr__fl li{display:flex;align-items:flex-start;gap:8px;font-size:1rem;
    line-height:23px;color:#55525e;}
.v2-pr__fl li > span{min-width:0;}

/* The "i" that holds the rest of a feature. */
.v2-pr__tip{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;
    justify-content:center;width:16px;height:16px;margin-top:3px;border-radius:50%;
    background:#e9e7e3;color:#6f6b78;cursor:help;}
.v2-pr.is-featured .v2-pr__tip{background:rgba(255,255,255,.18);color:#d9f3e2;}
.v2-pr__tip i{font-style:normal;font-weight:700;font-size:10px;line-height:1;}
.v2-pr__tipc{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);
    z-index:20;padding:7px 10px;border-radius:9px;white-space:nowrap;
    background:var(--v2-forest-2);color:#fff;font-size:.8125rem;line-height:18px;font-weight:500;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s var(--v2-ease),transform .2s var(--v2-ease),visibility .2s;}
/* :focus, not :focus-visible — a tap focuses the trigger but does not usually
   match :focus-visible, which would leave a touch screen no way to read the hint. */
.v2-pr__tip:hover .v2-pr__tipc,.v2-pr__tip:focus .v2-pr__tipc{
    opacity:1;visibility:visible;transform:translate(-50%,0);}
/* A 16px dot is a fine mouse target and a poor thumb one. This grows the hit area
   without moving anything, which padding on the dot itself would. */
@media (pointer:coarse){
    .v2-pr__tip::after{content:'';position:absolute;inset:-13px;}
}
/* The card clips its corners, so a tooltip at the top of a list would be cut off. */
.v2-pr{overflow:visible;}
.v2-pr__fl img{width:18px;height:18px;flex:0 0 auto;margin-top:1px;}
.v2-pr.is-featured .v2-pr__fl li{color:#a7e6c0;}
.v2-pr__cmp{display:flex;justify-content:center;margin-top:36px;}
.v2-pr__cmp a{display:inline-flex;align-items:center;gap:7px;font-weight:600;
    font-size:.9375rem;line-height:20px;color:var(--v2-ink);}
/* ⚠️ The arrow used to slide right on hover, which is backwards: the rule here is
   that the icon holds still and the label turns over. The motion comes from the
   label swap now, like every other control. */
.v2-pr__cmp img{width:16px;height:16px;}
.v2-pr__cmp a{transition:color .25s var(--v2-ease);}
.v2-pr__cmp a:hover{color:var(--v2-green);}
@media (max-width:1180px){.v2-prs{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.v2-prs{grid-template-columns:minmax(0,1fr);}}

/* ── Testimonials (Figma 175:1017) ───────────────────────────────────── */
.v2-ts__head{gap:16px;margin-bottom:44px;}
.v2-ts__head .v2-h2{max-width:460px;line-height:1.35;letter-spacing:-.02em;}
.v2-ts{overflow:hidden;}
.v2-ts__track{display:flex;gap:20px;align-items:center;
    transition:transform .6s var(--v2-ease);}
.v2-ts__c{flex:0 0 calc((100% - 40px) / 3);min-width:0;margin:0;
    display:flex;flex-direction:column;justify-content:space-between;
    height:414px;padding:30px 30px 28px;background:#fff;border:1px solid #e6e4e0;
    border-radius:22px;overflow:hidden;
    transition:transform .45s var(--v2-ease),height .45s var(--v2-ease);}
/* The middle card is the raised one in the design — it follows the carousel. */
.v2-ts__c.is-mid{height:452px;border-color:transparent;
    }
.v2-ts__top{display:flex;flex-direction:column;gap:18px;width:100%;}
.v2-ts__stars{display:flex;gap:3px;}
.v2-ts__stars img{width:17px;height:17px;}
.v2-ts__c blockquote{margin:0;font-weight:500;font-size:1.03125rem;line-height:27px;color:#2e2b38;}
.v2-ts__au{display:flex;align-items:center;gap:12px;}
.v2-ts__av{width:48px;height:48px;border-radius:100px;object-fit:cover;flex:0 0 auto;}
.v2-ts__au b{display:block;font-weight:700;font-size:.9375rem;line-height:20px;color:var(--v2-ink);}
.v2-ts__au em{display:block;font-style:normal;font-weight:500;font-size:.8125rem;line-height:17px;color:#8e8b97;}
.v2-ts__arr{display:flex;justify-content:center;gap:12px;margin-top:44px;}
.v2-ts__b{width:48px;height:48px;border-radius:100px;background:#fff;border:1px solid #e6e4e0;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:transform .3s var(--v2-ease),background-color .3s var(--v2-ease);}
.v2-ts__b img{width:20px;height:20px;}
.v2-ts__b--on{background:var(--v2-forest-2);border-color:var(--v2-forest-2);}
.v2-ts__b:hover{border-color:var(--v2-forest-2);}
.v2-ts__b:disabled{opacity:.4;cursor:default;}
@media (max-width:1100px){.v2-ts__c{flex-basis:calc((100% - 20px) / 2);}}
@media (max-width:700px){.v2-ts__c{flex-basis:100%;height:auto;}.v2-ts__c.is-mid{height:auto;}}

/* ── StatsBand (Figma 175:240) ───────────────────────────────────────── */
.v2-stats{padding:58px 0;background:#fff;}
.v2-stats__cap{margin:0 0 22px;text-align:center;font-weight:600;font-size:1.125rem;
    letter-spacing:.01em;color:var(--v2-ink);}
.v2-stats__row{display:flex;align-items:center;justify-content:space-between;
    gap:16px;padding-top:6px;min-height:86px;}
.v2-stats__st{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;}
.v2-stats__st b{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;
    font-weight:500;font-size:3rem;line-height:54px;letter-spacing:-.025em;color:var(--v2-ink);
    font-variant-numeric:tabular-nums;}
.v2-stats__st em{font-style:normal;font-weight:500;font-size:.9375rem;line-height:20px;
    color:#8e8b97;text-align:center;}
.v2-stats__dv{width:1px;height:56px;background:#e6e4e0;flex:0 0 auto;}
@media (max-width:820px){
    .v2-stats__row{flex-wrap:wrap;justify-content:center;gap:28px 0;}
    .v2-stats__st{flex-basis:50%;}
    .v2-stats__dv{display:none;}
}

/* ── FreeTools (Figma 175:1088) ──────────────────────────────────────── */
.v2-ft__head{gap:14px;margin-bottom:40px;}
.v2-ft__head .v2-h2{max-width:501px;line-height:1.25;letter-spacing:-.02em;}
.v2-ft__head .v2-sec__sub{max-width:572px;}
.v2-fts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;}
.v2-ft{display:flex;flex-direction:column;gap:16px;min-width:0;height:273px;
    padding:30px 28px 28px;background:#fbfaf8;border:1px solid #e6e4e0;border-radius:18px;
    transition:transform .4s var(--v2-ease),background-color .4s var(--v2-ease);}
.v2-ft:hover{transform:translateY(-5px);background:#fff;}
.v2-ft__tile{width:56px;height:56px;flex:0 0 auto;border-radius:15px;
    background:linear-gradient(180deg,#133d22,#05160c);
    display:flex;align-items:center;justify-content:center;
    transition:transform .45s var(--v2-ease);}
.v2-ft__tile img{width:27px;height:27px;}
.v2-ft:hover .v2-ft__tile{transform:translateY(-2px) rotate(-5deg) scale(1.05);}
.v2-ft__t{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;font-weight:600;
    font-size:1.3125rem;line-height:26px;letter-spacing:-.005em;color:var(--v2-ink);}
.v2-ft__b{font-size:.9375rem;line-height:23px;color:#55525e;}
.v2-ft__lk{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-weight:600;
    font-size:.90625rem;line-height:19px;color:var(--v2-ink);}
.v2-ft__lk img{width:16px;height:16px;transition:transform .3s var(--v2-ease);}
.v2-ft:hover .v2-ft__lk img{transform:translate(3px,-3px);}
@media (max-width:980px){.v2-fts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.v2-fts{grid-template-columns:minmax(0,1fr);}.v2-ft{height:auto;}}

/* ── MobileApp (Figma 175:1137) ──────────────────────────────────────── */
.v2-ma{padding:72px 0;background:#fff;}
.v2-ma__grid{display:flex;gap:56px;align-items:center;}
.v2-ma__pw{flex:0 0 auto;width:440px;display:flex;justify-content:center;}
.v2-ma__pinner{position:relative;width:320px;height:600px;}
.v2-phone{position:absolute;left:10px;top:0;width:300px;height:600px;display:flex;
    flex-direction:column;background:#fff;border:8px solid #061a0e;border-radius:40px;
    overflow:hidden;box-shadow:0 14px 30px -18px rgba(46,16,101,.16);}
.v2-phone__ah{padding:16px 16px 12px;display:flex;flex-direction:column;gap:12px;background:#fff;}
.v2-phone__atop{display:flex;align-items:center;justify-content:space-between;}
.v2-phone__time{font-family:var(--v2-font-num);font-weight:700;font-size:.8125rem;color:var(--v2-ink-2);}
.v2-phone__store{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;
    font-weight:700;font-size:1.0625rem;letter-spacing:-.005em;color:var(--v2-ink-2);}
.v2-phone__cb{width:32px;height:32px;border-radius:100px;background:var(--v2-wash);
    display:flex;align-items:center;justify-content:center;}
.v2-phone__cb img{width:16px;height:16px;}
.v2-phone__srch{display:flex;align-items:center;gap:8px;background:var(--v2-wash);
    border-radius:100px;padding:9px 12px;font-size:.78125rem;line-height:16px;color:var(--v2-muted);}
.v2-phone__srch img{width:15px;height:15px;}
.v2-phone__sc{flex:1;min-height:0;background:#faf9fd;padding:4px 16px 16px;
    display:flex;flex-direction:column;gap:14px;}
.v2-phone__ban{padding:18px;border-radius:16px;display:flex;flex-direction:column;
    align-items:flex-start;gap:6px;background:linear-gradient(140deg,#0b2e1a 0%,#06180d 71%);}
.v2-phone__ban b{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;
    font-weight:700;font-size:1.125rem;line-height:23px;letter-spacing:-.005em;color:#fff;}
.v2-phone__ban em{font-style:normal;font-weight:500;font-size:.8125rem;line-height:17px;color:#f2f2f4;}
.v2-phone__ban span{background:#fff;border-radius:100px;padding:6px 12px;font-weight:600;
    font-size:.75rem;line-height:16px;color:var(--v2-ink);}
.v2-phone__chips{display:flex;gap:8px;}
.v2-phone__chips span{border-radius:100px;padding:8px 14px;font-weight:600;font-size:.78125rem;
    line-height:16px;background:#fff;border:1px solid var(--v2-line);color:var(--v2-slate);}
.v2-phone__chips span.is-on{background:var(--v2-forest-2);border-color:var(--v2-forest-2);color:#fff;}
/* On a 320px screen the mock's own column is 252px and the four chips came to
   274px, so the phone frame cut the last one through the middle of its word.
   Smaller chips fit all four with room to spare, and only at that width. */
@media (max-width:360px){
    .v2-phone__chips span{padding:7px 9px;font-size:.6875rem;}
}
.v2-phone__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.v2-phone__pc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--v2-line);
    border-radius:14px;overflow:hidden;}
.v2-phone__img{height:82px;display:flex;align-items:center;justify-content:center;background:var(--v2-wash);}
.v2-phone__img.is-tint{background:#e8f6ec;}
.v2-phone__img img{width:26px;height:26px;}
.v2-phone__info{display:flex;flex-direction:column;gap:3px;padding:9px 10px 11px;}
.v2-phone__info b{font-weight:600;font-size:.78125rem;line-height:16px;color:var(--v2-ink-2);}
.v2-phone__prc{display:flex;align-items:center;gap:6px;}
.v2-phone__prc i{font-style:normal;font-weight:700;font-size:.8125rem;line-height:17px;color:var(--v2-ink);}
.v2-phone__prc s{font-size:.6875rem;line-height:15px;color:var(--v2-muted);}
.v2-phone__bn{display:flex;align-items:center;justify-content:space-between;
    padding:12px 28px 16px;background:#fff;border-top:1px solid var(--v2-line);}
.v2-phone__bn img{width:22px;height:22px;}

.v2-ma__toast{position:absolute;left:200px;top:420px;display:flex;align-items:center;gap:10px;
    background:#fff;border:1px solid var(--v2-line);border-radius:14px;padding:11px 16px 11px 12px;
    filter:drop-shadow(0 12px 15px rgba(46,16,101,.16));
    animation:v2-toast 5.5s var(--v2-ease) infinite;}
@keyframes v2-toast{
    0%,6%{opacity:0;transform:translateY(10px) scale(.94);}
    12%,66%{opacity:1;transform:none;}
    76%,100%{opacity:0;transform:translateY(-6px) scale(.98);}
}
@media (prefers-reduced-motion:reduce){.v2-ma__toast{animation:none;}}
.v2-ma__toast-ic{width:36px;height:36px;flex:0 0 auto;border-radius:10px;background:#e7f6ec;
    display:flex;align-items:center;justify-content:center;}
.v2-ma__toast-ic img{width:18px;height:18px;}
.v2-ma__toast b{display:block;font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;
    font-weight:700;font-size:.875rem;line-height:18px;letter-spacing:-.003em;color:var(--v2-ink-2);}
.v2-ma__toast em{display:block;font-style:normal;font-weight:500;font-size:.71875rem;
    line-height:15px;color:var(--v2-muted);}

.v2-ma__right{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.v2-ma__h{color:var(--v2-ink-2);line-height:1.25;letter-spacing:-.015em;}
.v2-ma__sub{margin:0;font-size:1.09375rem;line-height:29px;color:var(--v2-slate);}
.v2-ma__card{display:flex;align-items:center;gap:16px;width:100%;padding:20px;
    background:#fff;border:1px solid var(--v2-line);border-radius:16px;
    transition:transform .35s var(--v2-ease);}
.v2-ma__card:hover{transform:translateY(-3px);}
.v2-ma__ic{width:48px;height:48px;flex:0 0 auto;border-radius:12px;background:var(--v2-wash);
    display:flex;align-items:center;justify-content:center;}
.v2-ma__ic img{width:24px;height:24px;}
.v2-ma__col{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.v2-ma__col b{font-family:var(--v2-font-display);font-variation-settings:'wdth' 100;
    font-weight:700;font-size:1.19375rem;line-height:24px;letter-spacing:-.003em;color:var(--v2-ink-2);}
.v2-ma__col em{font-style:normal;font-size:.8875rem;line-height:21px;color:var(--v2-slate);}
.v2-ma__b{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;border-radius:100px;
    padding:11px 14px 11px 16px;font-weight:600;font-size:.8875rem;line-height:19px;
    transition:transform .3s var(--v2-ease);}
.v2-ma__b img{width:15px;height:15px;}
.v2-ma__b--solid{background:var(--v2-forest-2);color:#fff;}
.v2-ma__b--ghost{background:#fff;border:1.5px solid var(--v2-line);color:var(--v2-ink-2);}
.v2-ma__b:hover{filter:brightness(.94);}
@media (max-width:1100px){
    .v2-ma__grid{flex-direction:column;}
    .v2-ma__pw{width:100%;}
    .v2-ma__card{flex-wrap:wrap;}
}

/* ── FAQ (Figma 175:1261) ────────────────────────────────────────────── */
.v2-faq-top{gap:14px;margin-bottom:38px;}
/* Figma node 175:1262: eye 33 + 14 + h2 100 (two lines, capped at 341) + 14 +
   sub 56 (two lines at 430) = 217. Both caps are load-bearing: widen either one and
   it drops to a single line and the head collapses. */
.v2-faq-top .v2-h2{max-width:341px;line-height:1.25;letter-spacing:-.02em;}
/* Pinned so the line breaks where the design breaks it, but a pinned width on a
   phone put 20px of the sentence outside the section, which clips. */
.v2-faq-top .v2-sec__sub{max-width:430px;width:min(430px,100%);}
.v2-faqs{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.v2-faq__col{display:flex;flex-direction:column;gap:14px;}
.v2-faq{background:#fafafc;border:1px solid var(--v2-line);border-radius:14px;
    padding:19px 20px 19px 22px;transition:background-color .3s var(--v2-ease);}
.v2-faq.is-open{background:var(--v2-wash);}
.v2-faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
    cursor:pointer;list-style:none;}
.v2-faq summary::-webkit-details-marker{display:none;}
.v2-faq summary > span:first-child{flex:1;min-width:0;font-weight:600;font-size:1.0625rem;
    line-height:23px;letter-spacing:-.002em;color:#171222;}
.v2-faq__ib{width:30px;height:30px;flex:0 0 auto;border-radius:100px;background:#fff;
    border:1px solid var(--v2-line);display:flex;align-items:center;justify-content:center;
    transition:background-color .3s var(--v2-ease),border-color .3s var(--v2-ease);}
.v2-faq__ib img{width:20px;height:20px;}
.v2-faq.is-open .v2-faq__ib{background:var(--v2-forest-2);border-color:var(--v2-forest-2);}
/* ⚠️ Two classes, not one: the base reset `.v2 img{display:block}` is (0,1,1) and
   outranked a plain `.v2-faq__minus{display:none}`, so BOTH icons were laid out in
   a closed card and the plus sat 10px left of its circle. */
.v2-faq__ib .v2-faq__minus{display:none;}
.v2-faq.is-open .v2-faq__ib .v2-faq__plus{display:none;}
.v2-faq.is-open .v2-faq__ib .v2-faq__minus{display:block;}

/* `details` has no height to transition, so the answer lives in a grid row that
   goes 0fr to 1fr. The element has to stay open for the whole closing animation,
   which is why scripts.blade.php drives `is-open` and only then clears `open`. */
.v2-faq__w{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .34s var(--v2-ease);}
.v2-faq.is-open .v2-faq__w{grid-template-rows:1fr;}
/* ⚠️ Three elements, not two. The row collapses to 0 and the clipping element has
   to carry NO padding of its own, or that padding survives the collapse and a shut
   question keeps 12px of dead space. So the clip is here and the spacing is on the
   paragraph inside it, where it gets clipped with everything else. */
.v2-faq__wi{overflow:hidden;min-height:0;
    opacity:0;transition:opacity .26s var(--v2-ease);}
.v2-faq.is-open .v2-faq__wi{opacity:1;}
.v2-faq__wi > p{margin:12px 0 0;font-size:.95rem;line-height:24px;color:var(--v2-body-2);}
@media (max-width:860px){.v2-faqs{grid-template-columns:minmax(0,1fr);}}

/* ─── Footer + closing CTA ─ Figma 275:2 ────────────────────────────────────
   One dark panel 1290 tall: the CTA sits at y58 in a 1440-wide centred column,
   the six link columns start at y488 inside the normal 72px gutter, and the
   hairline + bottom row close it at y1196/y1226. */
.v2-foot{position:relative;overflow:hidden;background:#0b0c10;color:#fff;
    padding:58px 0 40px;}
.v2-foot__fx{position:absolute;inset:0;pointer-events:none;}
.v2-foot__fx img{position:absolute;max-width:none;}
.v2-foot__ring-a{left:220px;top:-210px;width:1000px;height:480px;}
/* 1900² and mostly off-canvas: it is the faint arc sweeping behind the columns. */
.v2-foot__ring-b{left:-230px;top:90px;width:1900px;height:1900px;}
.v2-foot__glow{left:570px;top:-170px;width:820px;height:480px;}

.v2-foot__cta{position:relative;display:flex;flex-direction:column;align-items:center;
    gap:22px;text-align:center;padding-inline:var(--v2-gutter);}
.v2-foot__mark{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;
    justify-content:center;background:linear-gradient(90deg,#1db954,#16a34a);
    transition:transform .45s var(--v2-ease);}
.v2-foot__cta:hover .v2-foot__mark{transform:translateY(-3px) scale(1.04);
    }
.v2-foot__h2{margin:0;max-width:760px;font-family:var(--v2-font-display),sans-serif;
    font-weight:500;font-size:2.8125rem;line-height:1.12;letter-spacing:-.015em;
    text-wrap:balance;}
.v2-foot__h2 em{font-style:normal;color:var(--v2-green);}
.v2-foot__sub{margin:0;max-width:560px;font-size:1.03125rem;line-height:1.55;
    color:rgba(255,255,255,.5);}
/* 2px of air: Figma sits the 56px pill in a 60px row, and the CTA block's total
   height is what places the link columns below it. */
.v2-foot__btn{display:inline-flex;align-items:center;gap:8px;margin-block:2px;
    padding:15px 24px 15px 28px;
    border-radius:100px;background:var(--v2-forest);border:1px solid rgba(255,255,255,.16);
    font-weight:600;font-size:.9375rem;color:#fff;white-space:nowrap;
    transition:background-color .3s var(--v2-ease),border-color .3s var(--v2-ease),transform .3s var(--v2-ease);}
.v2-foot__btn:hover{background:#0a2a16;border-color:rgba(255,255,255,.3);}
.v2-foot__btn-ar{display:inline-block;}

.v2-foot .v2-wrap{position:relative;}
.v2-foot__cols{display:flex;gap:48px;align-items:flex-start;margin-top:98px;}
.v2-foot__brand{width:300px;flex:0 0 auto;display:flex;flex-direction:column;
    gap:18px;align-items:flex-start;}
.v2-foot__about{margin:0;max-width:286px;font-size:1rem;line-height:1.6;
    color:rgba(255,255,255,.42);}
.v2-foot__soc{display:flex;flex-wrap:wrap;gap:8px 16px;font-weight:500;font-size:.96875rem;}
.v2-foot__soc a{color:rgba(255,255,255,.6);transition:color .25s var(--v2-ease);}
.v2-foot__soc a:hover{color:#fff;}
/* flex-wrap, not a grid: the six columns are different heights and the Figma lets
   them pack into two rows of three rather than sit on a shared baseline. */
.v2-foot__links{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;gap:44px 36px;
    align-content:flex-start;}
.v2-foot__col{width:286px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
/* Fixed line boxes, not a 1.6 ratio: Figma steps these rows exactly 44px apart
   (26 line + 18 gap) and 16.5 x 1.6 = 26.4 drifts the column 2px per row. */
.v2-foot__col h3{margin:0;font-weight:600;font-size:.84375rem;line-height:22px;
    letter-spacing:.03em;color:rgba(255,255,255,.4);}
.v2-foot__col a{font-size:1.03125rem;line-height:26px;color:rgba(255,255,255,.72);
    transition:color .25s var(--v2-ease);}
.v2-foot__col a:hover{color:#fff;}

.v2-foot__rule{height:1px;margin-top:48px;background:rgba(255,255,255,.08);}
.v2-foot__bottom{display:flex;align-items:center;justify-content:space-between;
    gap:20px;margin-top:29px;font-size:.9375rem;}
.v2-foot__bottom p{margin:0;color:rgba(255,255,255,.42);}
.v2-foot__legal{display:flex;gap:24px;}
.v2-foot__legal a{color:rgba(255,255,255,.55);transition:color .25s var(--v2-ease);}
.v2-foot__legal a:hover{color:#fff;}

@media (max-width:1100px){
    .v2-foot__cols{flex-direction:column;gap:44px;margin-top:72px;}
    .v2-foot__brand{width:100%;}
    .v2-foot__col{width:auto;min-width:200px;flex:1 1 200px;}
}
@media (max-width:640px){
    .v2-foot__h2{font-size:2rem;}
    /* Two columns, not one: a 200px minimum left only one per row on a phone, so
       the six menus ran down the page as a single list half a screen long. */
    .v2-foot__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;}
    .v2-foot__col{width:auto;min-width:0;}
    .v2-foot__bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}

/* The marketing site's own 404. */
.v2-e404{padding-top:0;}
.v2-e404__path{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 28px;
    font-size:.9375rem;color:var(--v2-body);}
.v2-e404__path code{padding:6px 12px;border-radius:100px;background:var(--v2-wash);
    border:1px solid var(--v2-line);font-size:.875rem;color:var(--v2-ink);word-break:break-all;}
.v2-e404__links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.v2-e404__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:56px;padding:14px 18px;border-radius:14px;background:#fff;
    border:1px solid var(--v2-line);font-weight:600;font-size:1rem;color:var(--v2-ink);
    transition:border-color .25s var(--v2-ease),color .25s var(--v2-ease);}
.v2-e404__links a:hover{border-color:var(--v2-green);color:var(--v2-green);}

/* The free tools' own form.

   ⚠️ The markup it replaces was styled for the old DARK hero: white text on a
   translucent white field. Dropped onto this light page the text would have been
   invisible, so the form is restyled here rather than inherited. The tool's own
   stylesheet still dresses everything BELOW the form (results, cards, badges). */
.v2-toolf{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 30px;max-width:680px;}
.v2-toolf__f{position:relative;flex:1 1 240px;display:flex;min-width:0;}
.v2-toolf__ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);
    display:flex;color:var(--v2-muted);font-size:1.0625rem;pointer-events:none;}
.v2-toolf__f input{width:100%;padding:14px 16px 14px 44px;border-radius:12px;
    background:#fff;border:1px solid var(--v2-line);color:var(--v2-ink);
    font-family:inherit;font-size:.9375rem;line-height:22px;outline:none;
    transition:border-color .25s var(--v2-ease),box-shadow .25s var(--v2-ease);}
.v2-toolf__f input::placeholder{color:var(--v2-muted);}
.v2-toolf__f input:focus{border-color:var(--v2-green);box-shadow:0 0 0 3px rgba(29,185,84,.14);}
.v2-toolf__go{flex:0 0 auto;padding:14px 26px;border:0;border-radius:100px;
    background:var(--v2-forest);color:#fff;font-family:inherit;font-weight:600;
    font-size:.9375rem;line-height:22px;cursor:pointer;white-space:nowrap;
    transition:background-color .25s var(--v2-ease);}
.v2-toolf__go:hover{background:var(--v2-green-dk,#0b6e34);}
@media (max-width:560px){
    .v2-toolf__go{width:100%;}
}

/* ─── Top bar ─ Figma 175:3 (1440×43) ───────────────────────────────────────
   9px of padding around a 25px row: the language chip is the tallest thing in it
   (4 + 17 + 4) and sets that row height. */
.v2-top{background:var(--v2-forest-2);color:#c3c0cc;font-size:.8125rem;}
.v2-top__in{width:100%;max-width:calc(var(--v2-content) + var(--v2-gutter) * 2);
    margin-inline:auto;padding:9px var(--v2-gutter);
    display:flex;align-items:center;justify-content:space-between;gap:16px;}
.v2-top__left{display:flex;align-items:center;gap:10px;min-width:0;}
.v2-top__left p{margin:0;font-weight:500;line-height:18px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* The announcement carries the owner's own link when they set one. Hover changes
   the text colour and nothing else, like the support number beside it. */
.v2-top__msg{color:inherit;transition:color .25s var(--v2-ease);}
.v2-top__msg:hover{color:#fff;}
.v2-top__msgb{opacity:.72;margin-inline-start:6px;}
/* With nothing published the left half is absent, so the right half would be
   dragged across by space-between. */
.v2-top__in--solo{justify-content:flex-end;}
.v2-top__badge{flex:0 0 auto;padding:3px 8px;border-radius:100px;background:var(--v2-green);
    color:#fff;font-weight:600;font-size:.65625rem;line-height:14px;letter-spacing:.005em;}
.v2-top__right{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
.v2-top__sup{display:inline-flex;align-items:center;gap:7px;font-weight:500;line-height:18px;
    color:#c3c0cc;transition:color .25s var(--v2-ease);}
.v2-top__sup:hover{color:#fff;}
.v2-top__div{width:1px;height:16px;background:rgba(255,255,255,.15);}
.v2-top__lang{display:inline-flex;align-items:center;gap:6px;padding:4px;border-radius:100px;
    font-weight:600;line-height:17px;color:#fff;
    transition:background-color .25s var(--v2-ease);}
.v2-top__lang:hover{background:rgba(255,255,255,.08);}
.v2-top__caret{transition:transform .25s var(--v2-ease);}
.v2-top__lang:hover .v2-top__caret{transform:translateY(2px);}

/* The announcement is the first thing to go, because the support number and the
   language control are the useful half. A tablet keeps it, ellipsised if need be;
   below that the badge goes with the sentence, since a badge on its own is just a
   word sitting in the corner. */
@media (max-width:1100px){
    .v2-top__msgb{display:none;}
}
@media (max-width:740px){
    .v2-top__left{display:none;}
    .v2-top__in{justify-content:center;}
}

/* ─── Label swap ────────────────────────────────────────────────────────────
   One hover idiom for every nav link and every button: the label (and its icon,
   if it has one) rises out of the top while an identical copy rises in from the
   bottom. Replaces the nav's underline and the buttons' lift-and-shadow.

   The two copies are stacked in one grid cell so the control keeps exactly the
   size it had, and `overflow:hidden` on the control is what makes them appear to
   come from outside it. scripts.blade.php builds the clone, so without JS the
   label is simply the original markup and nothing animates. */
.v2-sw{overflow:hidden;}
.v2-sw__in{display:grid;align-items:center;justify-items:inherit;}
.v2-sw__l{grid-area:1/1;display:inline-flex;align-items:center;gap:inherit;
    white-space:nowrap;
    transition:transform .42s var(--v2-ease),opacity .32s var(--v2-ease);}
/* The clone waits a full line below, invisible to a screen reader. */
.v2-sw__l--c{transform:translateY(115%);opacity:0;}
.v2-sw:hover .v2-sw__l,.v2-sw:focus-visible .v2-sw__l{transform:translateY(-115%);opacity:0;}
.v2-sw:hover .v2-sw__l--c,.v2-sw:focus-visible .v2-sw__l--c{transform:none;opacity:1;}
/* The icon is left outside the wrapper as a sibling, so the button's own gap
   already separates them and the wrapper needs none of its own. */
/* Centred buttons must keep their label centred once it is wrapped. */
.v2-btn,.v2-foot__btn,.v2-pr__btn,.v2-ma__b,.v2-tpl__pv{justify-content:center;}
.v2-pr__btn .v2-sw__in{justify-items:center;}

@media (prefers-reduced-motion:reduce){
    .v2-sw__l--c{display:none;}
    .v2-sw:hover .v2-sw__l{transform:none;opacity:1;}
}

/* ─── Hero dashboard, in the redesign's green ───────────────────────────────
   The mock itself is the live site's partial, included unchanged — only its accent
   family is re-pointed, so the two pages stay one piece of markup and the live
   home page keeps its purple. Every purple in that partial now reads one of these
   six variables, so this block is the whole recolour. */
.v2 .ec-dashx{
    --accent:#1db954;
    --accent-2:#34d26b;
    --accent-soft:#eaf8ef;
    --accent-pale:#bfe8cd;
    --accent-mid:#8ad7a4;
    --accent-ring:rgba(29,185,84,.22);
}

/* ─── Mobile navigation ─────────────────────────────────────────────────────
   The desktop link row disappears below 900px, which left a phone with no way to
   reach Features, Solutions, Templates or Pricing at all. This is that way. */
.v2-burger{display:none;width:44px;height:44px;flex:0 0 auto;margin-right:-10px;
    align-items:center;justify-content:center;flex-direction:column;gap:5px;
    background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.v2-burger span{display:block;width:21px;height:2px;border-radius:2px;background:var(--v2-ink);
    transition:transform .32s var(--v2-ease),opacity .2s var(--v2-ease);}
.v2-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.v2-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.v2-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.v2-mnav{position:fixed;inset:0;z-index:90;background:rgba(10,12,10,.38);
    opacity:0;transition:opacity .28s var(--v2-ease);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.v2-mnav.is-open{opacity:1;}
.v2-mnav__panel{position:absolute;inset:0 0 auto;background:var(--v2-surface);
    padding:94px var(--v2-gutter) 28px;
    max-height:100%;overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-14px);opacity:0;
    transition:transform .34s var(--v2-ease),opacity .28s var(--v2-ease);}
.v2-mnav.is-open .v2-mnav__panel{transform:none;opacity:1;}
.v2-mnav__links{display:flex;flex-direction:column;}
/* 52px rows: a thumb target, not a mouse one. */
.v2-mnav__links a{display:flex;align-items:center;min-height:52px;
    font-weight:600;font-size:1.25rem;color:var(--v2-ink);
    border-bottom:1px solid var(--v2-line);}
.v2-mnav__foot{display:flex;flex-direction:column;gap:12px;margin-top:24px;}
.v2-mnav__login,.v2-mnav__cta{display:flex;align-items:center;justify-content:center;
    min-height:52px;border-radius:100px;font-weight:600;font-size:1.0625rem;}
.v2-mnav__login{border:1px solid var(--v2-line-warm);color:var(--v2-ink);background:#fff;}
.v2-mnav__cta{background:var(--v2-forest);color:#fff;}

@media (max-width:900px){
    .v2-burger{display:inline-flex;}
    /* The bar has room for the logo, one call to action and the button. Below that
       the login moves into the panel, and below 420 the CTA follows it. */
    .v2-nav__login{display:none;}
}
@media (max-width:420px){
    .v2-nav__cta{display:none;}
}
@media (min-width:901px){
    /* Never leave an open panel behind when a phone is rotated to a tablet width. */
    .v2-mnav{display:none;}
}

/* ─── Touch sizing ──────────────────────────────────────────────────────────
   Everything tappable gets a 44px-tall target on a touch-width screen, and the
   smallest labels come up to a readable size. The padding is paired with an equal
   negative margin wherever a row's own height is load-bearing, so these rules buy
   thumb room without moving the layout. */
/* Width OR a coarse pointer: a tablet in landscape is 1024 wide and still a thumb,
   so sizing these on width alone would leave it with mouse-sized targets. */
@media (max-width:900px),(pointer:coarse){
    .v2-top__sup,.v2-top__lang{min-height:34px;}
    .v2-nav__links > a,.v2-nav__links .v2-dd__t{padding:12px 0;margin:-12px 0;}
    /* No negative margin here: the desktop rhythm is a 26px row plus an 18px gap,
       so a 44px row with no gap lands on exactly the same pitch. Pulling the rows
       together as well would overlap neighbouring targets by 18px and send taps
       near a boundary to the wrong link. */
    .v2-foot__col a,.v2-foot__soc a,.v2-foot__legal a{
        display:flex;align-items:center;min-height:44px;}
    .v2-foot__col{gap:0;}
    .v2-foot__col h3{margin-bottom:6px;}
    .v2-foot__soc{gap:0 20px;}
    /* The summary was 30px inside a 68px card, so two thirds of the card did not
       open it. Padding it out to the card's own edges makes the whole card the target. */
    .v2-faq summary{padding:19px 20px 19px 22px;margin:-19px -20px -19px -22px;}
    .v2-faq.is-open summary{padding-bottom:0;margin-bottom:0;}
    /* 10.5px and 11px labels are legible on a monitor and not on a phone. */
    .v2-po__lbl,.v2-top__badge{font-size:11.5px;}
    .v2-sku{font-size:12px;}
    .v2-stats__st em,.v2-ft em,.v2-vp em{font-size:12.5px;}
    /* Real labels, not mock chrome: the plan badge and the courier names are read.
       The rest of the sub-12px type on this page is inside miniature UI mockups,
       where it is standing in for an interface and is meant to be small. */
    .v2-pr__badge{font-size:12px;}
    .v2-cu em{font-size:12px;}
    /* 20px high and it is the only way to the full pricing table. */
    .v2-pr__cmp a{min-height:44px;align-items:center;}
    /* Both only exist with real data behind them — six template cards and a yearly
       price to toggle to — so they are invisible on a development database. */
    .v2-tpl__pv{min-height:44px;}
    .v2-tog button{min-height:44px;}
}
@media (max-width:640px){
    /* A phone reads one column; a 4-up stat row at 320px is four cramped columns. */
    .v2-stats__row{flex-wrap:wrap;justify-content:flex-start;gap:22px 0;}
    .v2-stats__st{flex:0 0 50%;}
    .v2-stats__dv{display:none;}
}

/* ─── Narrow phones ─────────────────────────────────────────────────────────
   Three cards keep a fixed-width element beside flexible text. That is right at
   any normal width and wrong at 360 and below, where the fixed part takes nearly
   the whole row and the text is squeezed to a couple of characters and spills.
   Each one stacks instead. */
@media (max-width:480px){
    /* 184px image + 20px gap left 24px for the text beside it. */
    .v2-po__ui{flex-direction:column;gap:14px;}
    .v2-po__img{width:100%;height:150px;}
    .v2-po{height:auto;}

    /* Three courier chips across cannot hold "31 ডেলিভার্‌ড" in 33px. */
    .v2-couriers{flex-wrap:wrap;}
    .v2-cu{flex:1 1 calc(50% - 4px);}

    /* icon 48 + button 131 left 27px for the title and description. Giving the
       text the full row pushes the button under it instead. */
    .v2-ma__card{flex-wrap:wrap;row-gap:14px;}
    .v2-ma__col{flex:1 1 calc(100% - 64px);}
    .v2-ma__b{flex:1 1 100%;}
}
@media (max-width:380px){
    /* At this width two chips still crowd; one per row reads cleanly. */
    .v2-cu{flex:1 1 100%;}
}

/* ─── Dropdowns ─────────────────────────────────────────────────────────────
   Two of them: the top bar's language control and the nav's Solutions item.
   Both open on hover for a mouse and on click/keyboard for everything else, so
   the caret always has something behind it. */
.v2-dd{position:relative;display:inline-flex;}
.v2-dd__t{display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.v2-dd__c{transition:transform .25s var(--v2-ease);}
.v2-dd.is-open .v2-dd__c,.v2-dd:hover .v2-dd__c{transform:rotate(180deg);}
.v2-dd__m{position:absolute;top:100%;left:0;z-index:60;min-width:216px;
    margin-top:10px;padding:8px;border-radius:14px;
    background:#fff;border:1px solid var(--v2-line);
    display:flex;flex-direction:column;gap:8px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s var(--v2-ease),transform .22s var(--v2-ease),visibility .22s;}
.v2-dd--end .v2-dd__m{left:auto;right:0;min-width:150px;}
.v2-dd.is-open > .v2-dd__m,.v2-dd:hover > .v2-dd__m,.v2-dd:focus-within > .v2-dd__m{
    opacity:1;visibility:visible;transform:none;}
/* The gap between trigger and menu would drop the hover; this bridges it. */
.v2-dd__m::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px;}
/* Hover changes the text colour and nothing else: no filled row behind it. */
.v2-dd__m a{display:flex;align-items:center;min-height:28px;padding:0 10px;
    font-weight:500;font-size:.9375rem;line-height:20px;color:var(--v2-body-2);white-space:nowrap;
    transition:color .18s var(--v2-ease);}
.v2-dd__m a:hover{color:var(--v2-ink);}
.v2-dd__m a[aria-current]{color:var(--v2-ink);font-weight:600;}
/* The top bar sits on near-black, so its menu does too. */
.v2-dd__m--dark{background:var(--v2-forest-2);border-color:rgba(255,255,255,.14);}
.v2-dd__m--dark a{color:rgba(255,255,255,.72);}
.v2-dd__m--dark a:hover{color:#fff;}
.v2-dd__m--dark a[aria-current]{color:#fff;}
/* A trigger that is a <button> must not inherit the browser's button chrome.
   ⚠️ Not the `font` shorthand: it also resets line-height to the inherited value,
   which overrode the top bar's own 17px and made the bar 4px taller than its design. */
button.v2-dd__t{background:none;border:0;color:inherit;
    font-family:inherit;font-size:inherit;font-weight:inherit;}

@media (max-width:900px),(pointer:coarse){
    /* The nav row is hidden below here and the panel carries the links instead,
       but the top bar's language menu stays and needs thumb-sized rows. With no
       hover background the row is invisible, so the height is all that separates
       one target from the next. */
    .v2-dd__m a{min-height:40px;}
    .v2-dd__m{gap:4px;}
}

/* The mobile panel's own close button. The burger underneath it still animates to
   an X, but the panel is painted over it, so this is the one people can actually
   reach. The top here is only a fallback: scripts.blade.php measures the burger when
   the panel opens and puts the X on it, so the icon turns into an X in place. */
.v2-mnav__x{position:absolute;top:47px;right:calc(var(--v2-gutter) - 10px);
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.v2-mnav__x span{position:absolute;width:21px;height:2px;border-radius:2px;background:var(--v2-ink);}
.v2-mnav__x span:first-child{transform:rotate(45deg);}
.v2-mnav__x span:last-child{transform:rotate(-45deg);}

/* ─── Standalone nav (inner pages) ──────────────────────────────────────────
   On the home page the nav sits inside the hero, over its artwork. An inner page
   gives it its own band: Figma 215:27 is 89 tall, a 53px row with 18 either side. */
/* 49px row + 20 either side = the Figma band's 89. */
.v2-nav--solo{padding:20px 0;}
/* The band is what gives an inner page's nav its own white strip and its gutter;
   the home page gets both from the hero instead. */
.v2-nav__band{background:#fff;}

/* ─── Features hero ─ Figma 215:52 (1440×473) ───────────────────────────── */
.v2-fh{position:relative;overflow:hidden;background:#fff;padding:70px 0 74px;}
.v2-fh__fx{position:absolute;inset:0;pointer-events:none;}
.v2-fh__glow{position:absolute;max-width:none;}
.v2-fh__glow--1{left:50px;top:-51px;width:820px;height:593px;}
.v2-fh__glow--2{left:410px;top:-38px;width:620px;height:493px;}
.v2-fh__glow--3{left:590px;top:-51px;width:820px;height:593px;}
.v2-fh__grain{position:absolute;inset:0;background-size:130px 130px;opacity:.4;
    mix-blend-mode:overlay;}
.v2-fh__in{position:relative;display:flex;flex-direction:column;align-items:center;
    gap:22px;text-align:center;}
/* The eyebrow is a bordered pill here rather than the home page's bare dot. */
.v2-eye--card{padding:8px 14px;border-radius:100px;background:#fff;line-height:21px;
    border:1px solid #e4e2de;color:var(--v2-ink);font-weight:600;font-size:.8125rem;}
.v2-fh__h1{margin:0;max-width:920px;font-family:var(--v2-font-display),sans-serif;
    font-variation-settings:'wdth' 100;font-weight:500;font-size:3.375rem;line-height:1.08;
    letter-spacing:-.02em;color:var(--v2-ink);text-wrap:balance;}
.v2-fh__h1 em{font-style:normal;font-weight:600;color:var(--v2-green);}
/* Dropping the design's em dash made this fit one line (646 against a 650 cap),
   which lost the two-line block the layout is built around. Balanced at 560. */
.v2-fh__sub{margin:0;max-width:560px;font-size:1.0625rem;line-height:1.55;
    color:var(--v2-body);text-wrap:balance;}
.v2-fh__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
/* Figma 215:59/61: 15px type in a 26px-padded pill, which comes out 56 tall. */
.v2-fh__btns .v2-btn{padding:15px 26px;font-size:.9375rem;line-height:24px;}

/* ─── Platform ─ Figma 218:2 ────────────────────────────────────────────── */
.v2-plat{background:var(--v2-surface);padding:46px 0 84px;}
.v2-plat__intro{display:flex;flex-direction:column;align-items:center;gap:16px;
    text-align:center;margin-bottom:52px;}
.v2-plat__intro .v2-h2{max-width:900px;line-height:45px;}
.v2-plat__intro .v2-sec__sub{max-width:640px;}
.v2-plat__grp{margin-bottom:56px;}
.v2-plat__grp:last-child{margin-bottom:0;}
.v2-plat__gh{display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-bottom:22px;}
.v2-plat__gh h3{margin:0;font-family:var(--v2-font-display),sans-serif;
    font-variation-settings:'wdth' 100;font-weight:600;font-size:1.4375rem;
    line-height:43px;letter-spacing:-.01em;color:var(--v2-ink);}
.v2-plat__gh span{flex:0 0 auto;font-weight:600;font-size:.8125rem;color:var(--v2-body);}
/* Three across at 1296: 418 x 3 + 20 x 2. */
.v2-plat__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.v2-pfc{display:flex;flex-direction:column;align-items:flex-start;gap:13px;
    min-width:0;min-height:182px;padding:24px;border-radius:18px;background:#fff;
    border:1px solid #e6e5e1;
    transition:transform .35s var(--v2-ease),border-color .35s var(--v2-ease);}
.v2-pfc:hover{transform:translateY(-4px);border-color:#d8d6d0;}
.v2-pfc__ic{width:46px;height:46px;border-radius:13px;overflow:hidden;flex:0 0 auto;}
.v2-pfc__ic img{width:46px;height:46px;object-fit:cover;}
.v2-pfc h4{margin:0;font-weight:600;font-size:1.0625rem;line-height:1.2;color:var(--v2-ink);}
.v2-pfc p{margin:0;font-size:.84375rem;line-height:1.5;color:var(--v2-body);}

@media (max-width:1100px){
    .v2-plat__cards{grid-template-columns:repeat(2,minmax(0,1fr));}
    .v2-fh__h1{font-size:2.75rem;}
}
@media (max-width:700px){
    .v2-plat__cards{grid-template-columns:minmax(0,1fr);}
    .v2-fh{padding:48px 0 52px;}
    .v2-fh__h1{font-size:2.125rem;}
    .v2-plat__gh{flex-wrap:wrap;gap:4px 16px;}
    .v2-plat__gh h3{line-height:1.3;}
}

/* ─── Templates hero ─ Figma 234:50 ─────────────────────────────────────── */
.v2-fh--tpl{padding:70px 0 50px;}

/* ─── Template gallery ─ Figma 234:61 ───────────────────────────────────── */
.v2-gal{background:var(--v2-surface);padding:30px 0 84px;}
.v2-gal__filters{display:flex;align-items:center;gap:12px;margin-bottom:40px;}
.v2-gal__search{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;
    padding:14px 16px 14px 18px;border-radius:12px;background:#fff;border:1px solid #e4e2de;}
.v2-gal__search img{flex:0 0 auto;}
.v2-gal__search input{flex:1;min-width:0;border:0;background:none;outline:none;
    font-family:inherit;font-size:.9375rem;line-height:normal;color:var(--v2-ink);}
.v2-gal__search input::placeholder{color:var(--v2-body);}
.v2-gal__cat{position:relative;flex:0 0 auto;width:214px;}
.v2-gal__cat select{appearance:none;-webkit-appearance:none;width:100%;
    padding:14px 40px 14px 18px;border-radius:12px;background:#fff;border:1px solid #e4e2de;
    font-family:inherit;font-weight:500;font-size:.9375rem;color:var(--v2-ink);cursor:pointer;}
.v2-gal__cat img{position:absolute;right:14px;top:50%;transform:translateY(-50%);
    pointer-events:none;}
.v2-gal__tabs{flex:0 0 auto;display:flex;align-items:center;gap:3px;padding:4px;
    border-radius:12px;background:#ececee;}
.v2-gal__tabs button{padding:9px 16px;border:0;border-radius:9px;background:none;cursor:pointer;
    font-family:inherit;font-weight:500;font-size:.84375rem;color:var(--v2-body);
    transition:background-color .2s var(--v2-ease),color .2s var(--v2-ease);}
.v2-gal__tabs button.is-active{background:var(--v2-green);color:#fff;font-weight:600;}

/* Three across at 1296: 416 x 3 + 24 x 2. */
.v2-gal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.v2-tplc{display:flex;flex-direction:column;min-width:0;border-radius:16px;overflow:hidden;
    background:#fff;border:1px solid #e6e5e1;
    transition:transform .4s var(--v2-ease),border-color .4s var(--v2-ease);}
.v2-tplc:hover{transform:translateY(-5px);border-color:#d8d6d0;}
.v2-tplc__shot{position:relative;aspect-ratio:414/234;overflow:hidden;background:var(--v2-wash);
    border-bottom:1px solid #eceae6;}
.v2-tplc__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
    transition:transform .6s var(--v2-ease);}
.v2-tplc:hover .v2-tplc__shot img{transform:scale(1.04);}
.v2-tplc__tag{position:absolute;right:12px;top:12px;padding:4px 10px;border-radius:100px;
    background:var(--v2-forest-2);color:#fff;font-weight:600;font-size:.75rem;line-height:18px;}
.v2-tplc__body{display:flex;flex-direction:column;justify-content:space-between;gap:14px;
    flex:1;padding:20px 22px 22px;}
.v2-tplc__txt{display:flex;flex-direction:column;gap:7px;}
.v2-tplc__txt h3{margin:0;font-weight:600;font-size:1.0625rem;line-height:24px;color:var(--v2-ink);}
.v2-tplc__cat{margin:0;font-size:.8125rem;line-height:21px;color:var(--v2-green);font-weight:600;}
.v2-tplc__desc{margin:0;font-size:.84375rem;line-height:20px;color:var(--v2-body);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.v2-tplc__pv{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
    font-weight:600;font-size:.875rem;color:var(--v2-ink);
    transition:color .25s var(--v2-ease);}
.v2-tplc__pv:hover{color:var(--v2-green);}
.v2-gal__none{margin:48px 0 0;text-align:center;font-size:1rem;color:var(--v2-body);}

@media (max-width:1100px){
    .v2-gal__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .v2-gal__filters{flex-wrap:wrap;}
    .v2-gal__search{flex:1 1 100%;}
}
@media (max-width:700px){
    .v2-gal__grid{grid-template-columns:minmax(0,1fr);}
    .v2-gal__cat{flex:1 1 auto;width:auto;}
    .v2-gal__tabs{flex:1 1 auto;justify-content:center;}
    .v2-fh--tpl{padding:48px 0 36px;}
}

/* ─── Pricing page ─ Figma 287:2 ────────────────────────────────────────── */
/* 39 + 22 + 117 + 22 + 26 + 22 + 53 of content against the design's 412 leaves 47
   below. Capping the subtitle to force a second line overshot by 26 instead. */
.v2-fh--pr{padding:64px 0 47px;}
.v2-prsec{background:var(--v2-surface);padding:0 0 84px;}

/* Compare ─ Figma 290:2 */
.v2-cmp{background:var(--v2-surface);padding:56px 0 84px;}
.v2-cmp__head{display:flex;flex-direction:column;align-items:center;gap:14px;
    text-align:center;margin-bottom:44px;}
.v2-cmp__head .v2-h2{max-width:760px;}
/* A four-plan table cannot reflow and shrinking it to fit makes it unreadable, so
   on a narrow screen it scrolls sideways inside its own box. */
.v2-cmp__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;
    border:1px solid #e6e5e1;background:#fff;}
.v2-cmp__scroll:focus-visible{outline:2px solid var(--v2-green);outline-offset:2px;}
.v2-cmp__t{width:100%;min-width:860px;border-collapse:collapse;font-size:.9375rem;}
.v2-cmp__t th,.v2-cmp__t td{text-align:center;padding:16px 18px;}
.v2-cmp__t thead th{padding:22px 18px;border-bottom:1px solid #e6e5e1;vertical-align:top;}
.v2-cmp__t thead th:first-child,.v2-cmp__t tbody th{text-align:left;width:36%;
    font-weight:600;color:var(--v2-ink);}
.v2-cmp__pn{display:block;font-weight:600;font-size:1.0625rem;color:var(--v2-ink);}
.v2-cmp__pp{display:block;margin-top:4px;font-size:.8125rem;color:var(--v2-body);}
.v2-cmp__t tbody th{font-weight:500;color:var(--v2-ink-2);}
.v2-cmp__t tbody tr{border-top:1px solid #efedea;}
.v2-cmp__t tbody tr:nth-child(odd){background:#fbfaf8;}
.v2-cmp__t td{color:var(--v2-body);}
.v2-cmp__y{display:inline-block;}
.v2-cmp__n{color:#c6c3bd;}

/* SMS ─ Figma 294:2 */
/* 155, not the design's 144: our heading sits on one line where its does, and
   the 11px difference is simpler to carry here than by forcing a wrap. */
.v2-sms{background:var(--v2-surface);padding:64px 0 155px;}
.v2-sms__head{display:flex;flex-direction:column;align-items:center;gap:16px;
    text-align:center;margin-bottom:40px;}
.v2-sms__head .v2-h2{max-width:760px;}
.v2-sms__head .v2-sec__sub{max-width:700px;}
.v2-sms__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.v2-smsc{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
    min-width:0;min-height:274px;justify-content:center;padding:30px 20px;border-radius:18px;background:#fff;border:1px solid #e6e5e1;
    text-align:center;transition:transform .35s var(--v2-ease),border-color .35s var(--v2-ease);}
.v2-smsc:hover{transform:translateY(-4px);border-color:#d8d6d0;}
.v2-smsc__lbl{font-weight:600;font-size:.8125rem;color:var(--v2-green);}
.v2-smsc__n{display:flex;align-items:baseline;gap:7px;margin:0;}
.v2-smsc__n b{font-family:var(--v2-font-display),sans-serif;font-variation-settings:'wdth' 100;
    font-weight:600;font-size:2.75rem;line-height:1;letter-spacing:-.02em;color:var(--v2-ink);
    font-variant-numeric:tabular-nums;}
.v2-smsc__n em{font-style:normal;font-weight:600;font-size:.9375rem;color:var(--v2-body);}
.v2-smsc__p{margin:0;font-weight:600;font-size:1.25rem;color:var(--v2-ink);}
.v2-smsc__e{margin:0;font-size:.84375rem;color:var(--v2-body);}

@media (max-width:1100px){
    .v2-sms__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
    .v2-sms__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
    .v2-smsc{padding:22px 14px;}
    .v2-smsc__n b{font-size:2.125rem;}
    .v2-fh--pr{padding:44px 0 36px;}
    .v2-cmp{padding:40px 0 56px;}
}

/* ─── Use-case pages ─ Figma 300:2 and its six siblings ──────────────────── */
/* Figma 300:50: the copy column sits at y105 in a 593 band. */
.v2-sh{position:relative;overflow:hidden;background:#fff;padding:105px 0 124px;}
.v2-sh__in{position:relative;display:grid;grid-template-columns:560px 1fr;gap:72px;
    align-items:center;}
.v2-sh__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0;}
.v2-sh__h1{margin:0;font-family:var(--v2-font-display),sans-serif;
    font-variation-settings:'wdth' 100;font-weight:500;font-size:2.875rem;line-height:1.1;
    letter-spacing:-.02em;color:var(--v2-ink);text-wrap:balance;}
.v2-sh__sub{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--v2-body);}
.v2-sh__btns{display:flex;flex-wrap:wrap;gap:14px;}
.v2-sh__proof{margin:0;font-weight:500;font-size:.9375rem;color:var(--v2-body);}

/* The browser frame beside the copy. Drawn in CSS rather than shipped as art: it is
   a suggestion of a storefront, and one that recolours with the brand. */
.v2-shb{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--v2-line);
    box-shadow:0 14px 34px -22px rgba(0,0,0,.3);}
.v2-shb__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;
    background:var(--v2-wash);border-bottom:1px solid var(--v2-line);}
.v2-shb__url{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;
    background:#fff;border:1px solid var(--v2-line);font-size:.75rem;color:var(--v2-body);}
/* The real storefront in the frame. 438x268 is the Figma's body, so the shot is
   shipped at 2x that and the aspect ratio holds it whatever the column does. */
.v2-shb__shot{display:block;width:100%;height:auto;aspect-ratio:438/268;object-fit:cover;
    object-position:top center;}
.v2-shb__body{display:flex;flex-direction:column;gap:14px;padding:18px;}
.v2-shb__hero{display:block;height:132px;border-radius:12px;
    background:linear-gradient(135deg,#e9f7ef,#d6f0e1);}
.v2-shb__row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.v2-shb__row i{display:block;height:74px;border-radius:10px;background:var(--v2-wash);}
.v2-shb__row--thin i{height:10px;border-radius:100px;}

/* The boosted post on the Facebook sellers page (Figma 300:64). Same 390px column
   as the storefront frame, so the two heroes line up. */
.v2-fbp{width:100%;max-width:390px;margin-inline:auto;background:#fff;
    border:1px solid var(--v2-line);border-radius:16px;overflow:hidden;
    box-shadow:0 14px 34px -22px rgba(0,0,0,.3);}
.v2-fbp__hd{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;}
.v2-fbp__av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(90deg,var(--v2-green),#0b6e34);
    color:#fff;font-weight:600;font-size:1.0625rem;line-height:1;}
.v2-fbp__who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.v2-fbp__name{font-weight:600;font-size:.90625rem;color:var(--v2-ink);}
.v2-fbp__meta{font-size:.71875rem;color:var(--v2-body);}
.v2-fbp__txt{margin:0;padding:0 16px 12px;font-size:.84375rem;line-height:1.5;color:#33303d;}
.v2-fbp__shot{display:block;width:100%;height:auto;aspect-ratio:390/230;object-fit:cover;
    object-position:top center;border-block:1px solid var(--v2-line);}
.v2-fbp__link{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;
    background:var(--v2-wash);}
.v2-fbp__linkt{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0;}
.v2-fbp__dom{font-weight:600;font-size:.6875rem;letter-spacing:.02em;color:var(--v2-body);}
.v2-fbp__ttl{font-weight:600;font-size:.8125rem;color:var(--v2-ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.v2-fbp__cta{flex:0 0 auto;padding:9px 16px;border-radius:8px;background:var(--v2-forest);
    color:#fff;font-weight:600;font-size:.78125rem;line-height:1.2;}
.v2-fbp__acts{display:flex;justify-content:space-between;gap:10px;padding:11px 24px;
    border-top:1px solid var(--v2-line);font-weight:500;font-size:.78125rem;color:var(--v2-body);}
@media (max-width:420px){
    .v2-fbp__acts{padding-inline:14px;}
}

/* Benefits */
.v2-sben{background:var(--v2-surface);padding:64px 0 106px;}
.v2-sben__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.v2-sbc{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;
    padding:29px;border-radius:18px;background:#fff;border:1px solid #e6e5e1;
    transition:transform .35s var(--v2-ease),border-color .35s var(--v2-ease);}
.v2-sbc:hover{transform:translateY(-4px);border-color:#d8d6d0;}
.v2-sbc__ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
    justify-content:center;background:#eaf8ef;}
.v2-sbc h3{margin:0;font-weight:600;font-size:1.0625rem;line-height:24px;color:var(--v2-ink);}
.v2-sbc p{margin:0;font-size:.90625rem;line-height:22px;color:var(--v2-body);}

/* Problem / solution */
.v2-sps{background:var(--v2-surface);padding:64px 0 126px;}
.v2-sps__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.v2-spp{min-width:0;padding:31px;border-radius:18px;border:1px solid #e6e5e1;background:#fff;}
.v2-spp--bad{background:#fdf6f5;border-color:#f2dedb;}
.v2-spp--good{background:#f2fbf5;border-color:#d7edde;}
.v2-spp__t{display:flex;align-items:center;gap:10px;margin:0 0 20px;
    font-weight:600;font-size:1.0625rem;color:var(--v2-ink);}
.v2-spp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.v2-spp li{display:flex;align-items:flex-start;gap:12px;
    font-size:.9375rem;line-height:22px;color:var(--v2-ink-2);}
.v2-spp__m{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;}
.v2-spp--bad .v2-spp__m{background:#fbe3e0;color:#b4443a;}
.v2-spp--good .v2-spp__m{background:#d9f2e3;color:#1a7a43;}

/* Key features */
.v2-sfe{background:var(--v2-surface);padding:64px 0 118px;}
.v2-sfe__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.v2-sfc__ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
    justify-content:center;background:#eaf8ef;margin-bottom:5px;}
.v2-sfc{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;padding:24px;
    border-radius:16px;background:#fff;border:1px solid #e6e5e1;
    transition:transform .35s var(--v2-ease),border-color .35s var(--v2-ease);}
.v2-sfc:hover{transform:translateY(-4px);border-color:#d8d6d0;}
.v2-sfc h3{margin:0;font-weight:600;font-size:1rem;line-height:22px;color:var(--v2-ink);}
.v2-sfc p{margin:0;font-size:.875rem;line-height:21px;color:var(--v2-body);}

/* FAQ on a use-case page is one column, not two */
.v2-sfaq{display:flex;flex-direction:column;gap:14px;max-width:900px;margin-inline:auto;}

/* Other solutions */
.v2-soth{background:var(--v2-surface);padding:64px 0 92px;}
.v2-soth__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.v2-sotc{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:20px 24px;border-radius:14px;background:#fff;border:1px solid #e6e5e1;
    font-weight:600;font-size:1rem;color:var(--v2-ink);
    transition:transform .3s var(--v2-ease),border-color .3s var(--v2-ease);}
.v2-sotc:hover{transform:translateY(-3px);border-color:var(--v2-green);}

@media (max-width:1100px){
    .v2-sh__in{grid-template-columns:minmax(0,1fr);gap:44px;}
    .v2-sh{padding:56px 0 60px;}
    .v2-sben__grid,.v2-soth__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .v2-sfe__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
    .v2-sh__h1{font-size:2.125rem;}
    .v2-sben__grid,.v2-sps__grid,.v2-sfe__grid,.v2-soth__grid{grid-template-columns:minmax(0,1fr);}
    .v2-spp{padding:22px;}
}

/* Solutions index */
.v2-solidx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.v2-solc{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;
    padding:28px;border-radius:18px;background:#fff;border:1px solid #e6e5e1;
    transition:transform .35s var(--v2-ease),border-color .35s var(--v2-ease);}
.v2-solc:hover{transform:translateY(-5px);border-color:var(--v2-green);}
.v2-solc__ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
    justify-content:center;background:#eaf8ef;}
.v2-solc h2{margin:0;font-family:var(--v2-font-body);font-weight:600;font-size:1.1875rem;
    line-height:26px;color:var(--v2-ink);}
.v2-solc p{margin:0;flex:1;font-size:.90625rem;line-height:22px;color:var(--v2-body);}
.v2-solc__go{display:inline-flex;align-items:center;gap:8px;font-weight:600;
    font-size:.9375rem;color:var(--v2-green);}
@media (max-width:1100px){.v2-solidx{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:700px){.v2-solidx{grid-template-columns:minmax(0,1fr);}}

/* ─── Document pages (legal, docs) ──────────────────────────────────────────
   No Figma for these. They borrow the inner pages' hero band and then get a
   reading measure: long-form text wants ~70 characters a line, not 1296px. */
.v2-fh--doc{padding:62px 0 56px;}
.v2-doc__head{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.v2-doc__h1{margin:0;font-family:var(--v2-font-display),sans-serif;
    font-variation-settings:'wdth' 100;font-weight:500;font-size:2.75rem;line-height:1.1;
    letter-spacing:-.02em;color:var(--v2-ink);text-wrap:balance;}
.v2-doc__upd{margin:0;font-size:.9375rem;color:var(--v2-body);}

.v2-doc{background:var(--v2-surface);padding:56px 0 96px;}
.v2-doc__body{max-width:760px;font-size:1rem;line-height:1.75;color:var(--v2-ink-2);}
.v2-doc__body > *:first-child{margin-top:0;}
.v2-doc__body h2{margin:44px 0 14px;font-family:var(--v2-font-display),sans-serif;
    font-variation-settings:'wdth' 100;font-weight:600;font-size:1.5rem;line-height:1.3;
    letter-spacing:-.01em;color:var(--v2-ink);}
.v2-doc__body h3{margin:30px 0 10px;font-weight:600;font-size:1.125rem;line-height:1.4;color:var(--v2-ink);}
.v2-doc__body p{margin:0 0 16px;}
.v2-doc__body ul,.v2-doc__body ol{margin:0 0 18px;padding-left:22px;}
.v2-doc__body li{margin-bottom:9px;}
.v2-doc__body a{color:var(--v2-green);text-decoration:underline;text-underline-offset:2px;}
.v2-doc__body strong{color:var(--v2-ink);font-weight:600;}
.v2-doc__body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.9375rem;}
/* A table cannot shrink below its longest cell, so on a narrow phone it was cut
   off at the edge of the page instead of scrolling. The live stylesheet scrolls
   this same wrapper; the redesign has to say so for itself. */
.v2-doc__body .ec-docs-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.v2-doc__body th,.v2-doc__body td{padding:11px 14px;border:1px solid var(--v2-line);text-align:left;}
.v2-doc__body th{background:var(--v2-wash);font-weight:600;color:var(--v2-ink);}
/* A long document needs its own landmarks; a bare hr is the quietest one. */
.v2-doc__body hr{height:1px;border:0;background:var(--v2-line);margin:36px 0;}

@media (max-width:700px){
    .v2-fh--doc{padding:40px 0 32px;}
    .v2-doc{padding:36px 0 64px;}
    .v2-doc__h1{font-size:2rem;}
}

/* ─── Pages without a Figma ─────────────────────────────────────────────────
   They use the designed pages' furniture — the same hero band, cards, type and
   spacing — so nothing here invents a second visual language. */

/* FAQ page */
.v2-faqsec{margin-bottom:48px;}
.v2-faqsec:last-of-type{margin-bottom:0;}
.v2-faqsec__t{margin:0 0 20px;font-family:var(--v2-font-display),sans-serif;
    font-variation-settings:'wdth' 100;font-weight:600;font-size:1.4375rem;
    letter-spacing:-.01em;color:var(--v2-ink);}
.v2-faqsec__more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:18px;margin-top:56px;padding:28px 32px;border-radius:18px;
    background:#fff;border:1px solid var(--v2-line);}
.v2-faqsec__more p{margin:0;font-weight:500;font-size:1.0625rem;color:var(--v2-ink);}

/* Payment gateways */
.v2-pg{background:var(--v2-surface);padding:56px 0 84px;}
.v2-pg__grp{margin-bottom:48px;}
.v2-pg__grp:last-child{margin-bottom:0;}
.v2-pg__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.v2-pgc{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;
    padding:22px;border-radius:16px;background:#fff;border:1px solid #e6e5e1;
    transition:transform .35s var(--v2-ease),border-color .35s var(--v2-ease);}
.v2-pgc:hover{transform:translateY(-4px);border-color:#d8d6d0;}
.v2-pgc__logo{height:28px;width:auto;object-fit:contain;}
.v2-pgc__mark{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
    justify-content:center;background:#eaf8ef;color:var(--v2-forest);
    font-weight:700;font-size:1.0625rem;}
.v2-pgc h3{margin:0;font-weight:600;font-size:1rem;line-height:22px;color:var(--v2-ink);}
.v2-pgc p{margin:0;font-size:.84375rem;line-height:20px;color:var(--v2-body);}

/* Contact */
.v2-ct{background:var(--v2-surface);padding:56px 0 84px;}
.v2-ct__grid{display:grid;grid-template-columns:360px 1fr;gap:32px;align-items:start;}
.v2-ct__aside{display:flex;flex-direction:column;gap:14px;}
.v2-ctc{display:flex;flex-direction:column;gap:5px;padding:22px 24px;border-radius:16px;
    background:#fff;border:1px solid #e6e5e1;transition:border-color .3s var(--v2-ease);}
a.v2-ctc:hover{border-color:var(--v2-green);}
.v2-ctc__k{font-weight:600;font-size:.8125rem;color:var(--v2-green);}
.v2-ctc__v{font-weight:500;font-size:1rem;line-height:24px;color:var(--v2-ink);word-break:break-word;}
.v2-ctc__go{margin-top:8px;font-weight:600;font-size:.9375rem;color:var(--v2-ink);
    text-decoration:underline;text-underline-offset:3px;
    transition:color .25s var(--v2-ease);}
.v2-ctc__go:hover{color:var(--v2-green);}
.v2-ct__form{display:flex;flex-direction:column;gap:18px;padding:30px;border-radius:18px;
    background:#fff;border:1px solid #e6e5e1;}
.v2-ct__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.v2-ct__form label{display:flex;flex-direction:column;gap:7px;min-width:0;}
.v2-ct__form label > span{font-weight:600;font-size:.875rem;color:var(--v2-ink);}
.v2-ct__form input,.v2-ct__form select,.v2-ct__form textarea{
    width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--v2-line);
    background:var(--v2-surface);font-family:inherit;font-size:.9375rem;color:var(--v2-ink);
    transition:border-color .2s var(--v2-ease);}
.v2-ct__form input:focus,.v2-ct__form select:focus,.v2-ct__form textarea:focus{
    outline:none;border-color:var(--v2-green);}
.v2-ct__form textarea{resize:vertical;min-height:140px;}
.v2-ct__form button{align-self:flex-start;}
/* The honeypot has to be reachable by a bot and invisible to a person. */
.v2-ct__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* About */
.v2-ab{background:var(--v2-surface);padding:56px 0 84px;}
.v2-ab__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
    margin-bottom:56px;}
.v2-ab__fact{display:flex;flex-direction:column;gap:6px;padding:26px;border-radius:16px;
    background:#fff;border:1px solid #e6e5e1;}
.v2-ab__fact b{font-family:var(--v2-font-display),sans-serif;font-variation-settings:'wdth' 100;
    font-weight:600;font-size:2.25rem;line-height:1;letter-spacing:-.02em;color:var(--v2-ink);
    font-variant-numeric:tabular-nums;}
.v2-ab__fact em{font-style:normal;font-size:.9375rem;color:var(--v2-body);}
.v2-ab__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
.v2-ab__col{padding:32px;border-radius:18px;background:#fff;border:1px solid #e6e5e1;}
.v2-ab__col h2{margin:0 0 14px;font-family:var(--v2-font-display),sans-serif;
    font-variation-settings:'wdth' 100;font-weight:600;font-size:1.4375rem;
    letter-spacing:-.01em;color:var(--v2-ink);}
.v2-ab__col p{margin:0 0 14px;font-size:1rem;line-height:1.7;color:var(--v2-ink-2);}
.v2-ab__col p:last-child{margin-bottom:0;}

/* Affiliate */
.v2-af{background:var(--v2-surface);padding:56px 0 84px;}
.v2-af__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.v2-afc{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    padding:30px;border-radius:18px;background:#fff;border:1px solid #e6e5e1;}
.v2-afc__n{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
    justify-content:center;background:var(--v2-forest-2);color:#fff;
    font-weight:700;font-size:1.0625rem;}
.v2-afc h2{margin:0;font-weight:600;font-size:1.125rem;line-height:26px;color:var(--v2-ink);}
.v2-afc p{margin:0;font-size:.9375rem;line-height:23px;color:var(--v2-body);}

@media (max-width:1100px){
    .v2-pg__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .v2-ct__grid{grid-template-columns:minmax(0,1fr);}
    .v2-ab__facts{grid-template-columns:repeat(2,minmax(0,1fr));}
    .v2-af__steps{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:700px){
    .v2-pg__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .v2-ab__cols{grid-template-columns:minmax(0,1fr);}
    .v2-ct__row{grid-template-columns:minmax(0,1fr);}
    .v2-faqsec__more{flex-direction:column;align-items:flex-start;}
    .v2-ct__form,.v2-ab__col{padding:22px;}
}

/* ─── Free tools inside the redesign ────────────────────────────────────────
   The tool bodies are shared with the live pages, which lay out inside the old
   .container. Rather than fork the markup, the class is mapped to this design's
   own measure — scoped to .v2 so nothing outside these pages is touched. */
.v2-tool{background:var(--v2-surface);padding:48px 0 84px;}
.v2-tool .container{width:100%;max-width:calc(var(--v2-content) + var(--v2-gutter) * 2);
    margin-inline:auto;padding-inline:var(--v2-gutter);}
/* The shared bodies open with their own section wrapper; it must not add a second
   band of padding on top of .v2-tool's. */
.v2-tool > section{padding:0;background:none;}
.v2-tool .hero-background-image{display:none;}

/* ─── Merchant sign-in, register and the rest ───────────────────────────────
   The six auth views are built on the old marketing classes and are NOT rewritten:
   that flow is the one nobody can afford to have broken. This restyles those
   classes with this design's tokens instead, scoped to .v2-auth so the live auth
   pages are untouched. */
.v2-auth__sec{position:relative;overflow:hidden;background:#fff;
    padding:64px 0 96px;display:flex;align-items:center;}
.v2-auth__card{position:relative;width:100%;max-width:520px;margin-inline:auto;
    padding:40px;border-radius:22px;background:#fff;border:1px solid var(--v2-line);}
/* ⚠️ The CARD's links, not the page's. `.v2-auth` sits on <html>, so a rule written
   as `.v2-auth a` painted the top bar, the whole navigation and every footer link
   green. This is the same trap the base reset warns about, one scope further out.
   It sits here, above the buttons, so .primary-button and .create-account keep
   their own colour on the same specificity. */
.v2-auth__card a{color:var(--v2-green);}

/* The card's own markup, re-dressed. */
.v2-auth .title-wrap{margin-bottom:26px;text-align:center;}
.v2-auth .title-wrap .h3,.v2-auth .title-wrap h1{margin:0;
    font-family:var(--v2-font-display),sans-serif;font-variation-settings:'wdth' 100;
    font-weight:600;font-size:1.875rem;line-height:1.2;letter-spacing:-.02em;color:var(--v2-ink);}
.v2-auth .title-wrap p{margin:10px 0 0;font-size:1rem;line-height:1.55;color:var(--v2-body);}
.v2-auth .login-from-wrap{display:flex;flex-direction:column;gap:16px;}
.v2-auth label,.v2-auth .field-label{font-weight:600;font-size:.875rem;color:var(--v2-ink);}
.v2-auth input[type=text],.v2-auth input[type=email],.v2-auth input[type=tel],
.v2-auth input[type=password],.v2-auth input[type=number],.v2-auth select,.v2-auth textarea{
    width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--v2-line);
    background:var(--v2-surface);font-family:inherit;font-size:.9375rem;color:var(--v2-ink);
    transition:border-color .2s var(--v2-ease);}
.v2-auth input:focus,.v2-auth select:focus,.v2-auth textarea:focus{
    outline:none;border-color:var(--v2-green);}
.v2-auth .text-field-wrap{position:relative;}
.v2-auth .text-field-wrap .eye-icon{position:absolute;right:14px;top:50%;
    transform:translateY(-50%);cursor:pointer;opacity:.6;}
/* The submit, whatever class the view gave it. */
/* These forms are plain <form> elements, not .login-from-wrap, so they get none of
   its gap and the button sat flush against the field above it. Only the sign-in
   form looked right, and only because the Cloudflare widget was padding it out. */
.v2-auth .submit-button-wrap{margin-top:22px;}
.v2-auth .primary-button,.v2-auth button[type=submit],.v2-auth .submit-button{
    display:inline-flex;align-items:center;justify-content:center;width:100%;
    padding:15px 22px;border:0;border-radius:100px;cursor:pointer;
    background:var(--v2-forest);color:#fff;font-family:inherit;font-weight:600;
    font-size:1rem;line-height:23px;text-align:center;
    box-shadow:none;background-image:none;
    transition:background-color .22s var(--v2-ease);}
.v2-auth .primary-button:hover,.v2-auth button[type=submit]:hover,.v2-auth .submit-button:hover{
    background:#0a2a16;background-image:none;}
/* ⚠️ The old layout painted these purple with !important; this design is green. */
.v2-auth .create-account{display:inline-flex;align-items:center;justify-content:center;
    width:100%;padding:14px 22px;border-radius:100px;background:#fff;
    border:1px solid var(--v2-line-warm);color:var(--v2-ink);font-weight:600;
    background-image:none !important;box-shadow:none !important;
    transition:border-color .22s var(--v2-ease),background-color .22s var(--v2-ease);}
.v2-auth .create-account:hover,.v2-auth .create-account:focus-visible{
    background:#fbfaf8 !important;background-image:none !important;
    border-color:#cfcbc4;color:var(--v2-ink) !important;}
.v2-auth .ec-auth-forgot{color:var(--v2-green);font-size:.9375rem;}
.v2-auth .ec-auth-alert{padding:13px 16px;border-radius:11px;background:#fdf2f2;
    border:1px solid #f3dcda;color:#a93c32;font-size:.9375rem;}
.v2-auth .form-done{padding:13px 16px;border-radius:11px;background:#f1faf4;
    border:1px solid #d4ecdd;color:#1a7a43;font-size:.9375rem;}
.v2-auth .text-center{text-align:center;}
.v2-auth .margin-top-20{margin-top:20px;}
.v2-auth .div-block-11{display:none;}

@media (max-width:640px){
    .v2-auth__sec{padding:36px 0 56px;}
    .v2-auth__card{padding:26px 22px;border-radius:18px;}
    .v2-auth .title-wrap .h3,.v2-auth .title-wrap h1{font-size:1.5rem;}
}